0
点赞
收藏
分享

微信扫一扫

H5语义化标签

松鼠树屋 2021-09-27 阅读 173
日记本H5

语义化标签

hgroup


使用细节:
如果只有一个h1-h6标签不要使用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup标签包裹住,然后和其他文章元素一起放进header标签


header


使用细节:
可以是"网页"或者任意"section"的头部部分
没有个数限制
如果hgroup或h1-h6自己就能工作很好,不要使用header


nav

section


使用细节:
section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。
article、nav、aside可以理解为特殊的section,
所以如果可以用article、nav、aside就不要用section,没实际意义的就用div


<section>
    <h1>section是啥?</h1>
    <article>
        <h2>关于section</h1>
        <p>section的介绍</p>
        <section>
            <h3>关于其他</h3>
            <p>关于其他section的介绍</p>
        </section>
    </article>
</section>

article


使用细节:
独立文章:用article
单独的模块:用section
没有语义的:用div


<article>
    <h1>一篇文章</h1>
    <p>文章内容..</p>
    <footer>
        <p><small>版权:html5jscss网所属,作者:damu</small></p>
      </footer>
</article>

aside


使用细节:
aside在article内表示主要内容的附属信息,
在article之外则可做侧边栏
如果是广告,其他日志链接或者其他分类导航也可以用


<article>
            <p>内容</p>
            <aside>
                <h1>作者简介</h1>
                <p>小北,前端一枚</p>
            </aside>
</article>

footer


使用细节:
footer使用注意:
可以是 网页 或任意 section 的底部部分;
没有个数限制,除了包裹的内容不一样,其他跟header类似。


<footer>
     COPYRIGHT@damu
</footer>
举报

相关推荐

0 条评论