html5语义化标签

移动前端 辰辰 3744℃ 2评论

在工作上虽然大多数都是移动端的webapp,但是用到的html5语义化标签还是不多,大部分还是以div这个容器为主,今天就来整理一下那些html5新增的容器标签。

1、header,主要包括hgroup和h1-h6,可以是网页的头部,也可以是不同段落的头部。

<header>
    <hgroup>
        <h1>标题</h1>
        <h2>副标题</h2>
    </hgroup>
</header>

 

2、nav,主要代表页面的导航部分。

<nav>
    <ul>
        <li>temp1</li>
        <li>temp2</li>
        <li>temp3</li>
    </ul>
</nav>

 

3、section,代表文档中的段,会带标题。

<section>
    <h1>section</h1>
    <article>
        <h2>section使用</h2>
        <p>内容</p>
    </article>
</section>

 

4、article,代表一个文档或者页面,很容易跟section混淆。通常会带有footer

<article>
    <header>
        <h1>标题</h1>        
    </header>
    <p>内容</p>
    <footer>
        <p>版权</p>
    </footer>
</article>

 

5、footer,代表网页或section的页脚。

<footer>
    <p>版权信息</p>
</footer>

最后说一下,不要因为有了html5标签就舍弃div,html5标签还是有他不适用的地方,div是没有语义的所以可以用在任何地方。

转载请注明:辰辰个人博客 » html5语义化标签

喜欢 (16)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 不错
    微意个人博客2016-11-05 15:10 回复
  2. 不容易,辛苦了,期待回访
    卢松松博客2016-02-27 15:21 回复