瞧一瞧看一看

html5语义化标签

Html5+CSS3 田丰硕 4267℃ 0评论

 

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

 

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

 

  1. <header>
  2.     <hgroup>
  3.         <h1>标题</h1>
  4.         <h2>副标题</h2>
  5.     </hgroup>
  6. </header>

 

 

 

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

 

  1. <nav>
  2.    <ul>
  3.         <li>temp1</li>
  4.         <li>temp2</li>
  5.         <li>temp3</li>
  6.     </ul>
  7. </nav>

 

 

 

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

 

  1. <section>
  2.     <h1>section</h1>
  3.     <article>
  4.         <h2>section使用</h2>
  5.         <p>内容</p>
  6.    </article>
  7. </section>

 

 

 

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

 

  1. <article>
  2.     <header>
  3.         <h1>标题</h1>        
  4.     </header>
  5.     <p>内容</p>
  6.     <footer>
  7.         <p>版权</p>
  8.     </footer>
  9. </article>

 

 

 

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

 

  1. <footer>
  2.     <p>版权信息</p>
  3. </footer>

 

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

 

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

喜欢 (4)
发表我的评论
取消评论
表情
(9)个小伙伴在吐槽
  1. 正在学html,html5不知道复不复杂?
    模特2016-08-18 16:26 回复
  2. 博主好文,谢谢好心分享,留言支持下,欢迎回访!
    票据宝公司2016-05-19 17:29 回复
  3. 普通的代码还没学会,继续加油
    郑州SEO优化2015-12-13 12:54 回复
  4. 这个主题很棒。。。。。
    工业铝型材2015-12-02 14:11 回复
  5. 正准备开始学H5
    东方新星2015-11-26 15:34 回复
  6. HTML5给我的感受就是降低了视频的占用带宽。
    七十二赫兹VPN2015-11-21 23:04 回复
  7. 正在学html,html5不知道复不复杂?
    Chris2015-11-18 23:36 回复
  8. 内容有点简单
    盈泛网2015-11-16 14:49 回复