新网页结构
1.<header> 定义了文档的头部区域
2.<nav>标签定义导航链接的部分。
3.<article>定义页面独立的内容区域。
4.<section>定义文档中的节（section、区段）
5.<aside>定义页面的侧边栏内容。
6.<footer>定义 section 或 document 的页脚。
7.<hgroup> 标签标签用于对网页或区段（section）的标题进行组合。
8.<footer>定义一个文档底部。
9.<address>定义文档作者或拥有者的联系信息。
1.article
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <header> <h1>我的ARTICLE</h1> <p>创建时间：<time datetime="2015-07-12" pubdate="pubdate">2015-07-12</time></p> </header> <section> <h2>读者评论：</h2> <article> <header> <h3>读者：A</h3> <p> <time datetime="2015-07-12 10:28:04" pubdate="pubdate">1小时前</time> </p> </header> <p> 写的很好！ </p> </article> <article> <header> <h3>读者：002</h3> <p> <time datetime="2015-07-12 09:28:04" pubdate="pubdate">2小时前</time> </p> </header> <p> 一般般拉 </p> </article> </section> <footer> <small>参考footer!!~</small> </footer> </body> </html>
2.section
定义和用法
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用 div 。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。
<article> <hgroup> <h1>苹果</h1> <h2>可口的,美味的水果!</h2> </hgroup> <p>苹果是苹果的苹果树的果实。</p> <section> <h1>红色的美味</h1> <p>这些明亮的红苹果是最常见的发现在许多超市。</p> </section> <section> <h1>绿苹果</h1> <p>这些多汁、绿苹果做苹果馅饼的馅。</p> </section> </article>
HTML5 中 div section article 的区别
http://www.qianduan.net/html5-differences-in-the-div-section-article/
3.aside
定义和用法
<aside> 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
<!DOCTYPE html> <html> <head> <meta charset="en" /> <title></title> </head> <body> <p>我和我的家人今年夏天参观了Epcot中心。</p> <aside> <h4>Epcot中心</h4> Epcot中心是一个主题公园在佛罗里达州的迪斯尼世界。 </aside> </body> </html>
4.nav
定义和用法
<nav> 标签定义导航链接的部分。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8" /> 5 <title></title> 6 </head> 7 <body> 8 <h1>NAV使用方法</h1> 9 <nav> 10 <ul> 11 <li> 12 <a href="nav.html">首页</a> 13 </li> 14 </ul> 15 <ul> 16 <li> 17 <a href=" aside.html">aside页面</a> 18 </li> 19 </ul> 20 </nav> 21 </body> 22 </html>