在HTML5以前，我们只能通过div元素作为结构元素，而HTML5则提供了article、section、nav、aside、header、footer、main等文档结构元素。
1.article与section元素
article：用于页面上独立、完善的一篇文章，该元素表示的内容是一个帖子、一篇Blog文字、一篇短文、一条完整的回复。总而言之，只要是一篇独立的文档内容，就应该使用article元素来表示，规则如下。
- article元素内部可使用header定义文章标题部分。
- article元素内部可使用footer定义脚注部分。
- article元素内部可使用section把文章内容分成几个段落。
- article元素内部可嵌套多个article作为它的附属文章，比如一篇Blog文章后面可以有多篇回复文章。
section：用于对页面的内容进行分块。通常可以由标题内容组成，关于规则如下。
- 通常我们建议section包含一个标题，也就是h1到h5元素来定义标题。
- section元素可以包含多个article元素，表示该分块内部包含多篇文章。
- section元素可以嵌套section元素，用于表示该分块包含多个多个子分块。
除了section元素可以指定cite属性之外，article元素只支持id、class、style、contentEditable、hidden等通用属性。
提示：article和section这两个元素很容易混淆，因为它们都可以包含多个元素，而且可以相互嵌套，但article和section侧重点不一样，article元素侧重于表达一篇独立的、完整的文章，而section侧重对文章的内容进行分块，下面模拟一个论坛帖子。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 论坛帖子 </title> </head> <body> <h1>浏览帖子内容</h1> <article> <h2>学习Android，必须先学习Java吗</h2> <p>Android上的应用程序只能用Java编写吗？可以用C++吗？</p> <!-- 帖子的“回复”部分，用section元素表示 --> <section> <h2>回复内容</h2> <!-- 每个article代表一个回复 --> <article> <!-- 回复的标题 --> <h3>还是得学习Java</h3> <div>作者：kongyeeku</div> <p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br> 或NDK开发，但Java毕竟是Android主要的开发语言，<br> 因此建议学习Android之前还是先学习Java</p> </article> <!-- 每个article代表一个回复 --> <article> <!-- 回复的标题 --> <h3>Java是基础</h3> <div>作者：kuan008</div> <p>Java是基础，学好Java再去学习Android事半功倍。</p> </article> </section> <!-- 帖子的“评价”部分，用section元素表示 --> <section> <h2>评价内容</h2> <!-- 每个article代表一个评价 --> <article> <!-- 评价的标题 --> <h3>讨论很好</h3> <p>大家讨论的很深入，对我帮助很大</p> </article> <!-- 每个article代表一个评价 --> <article> <!-- 评价的标题 --> <h3>赞</h3> <p>不错，赞</p> </article> </section> </article> </body> </html>
2.header和footer元素
| header元素 | 通常代表标题。从功能上类似于h1到h6元素，不过header还可以包含普通元素，比如p、span、nav元素等。 |
| footer元素 | 用于父级元素定义脚注的部分，包括作者的版权信息、授权信息等 |
当网页内容、acticle、section包含了更多复杂内容的标题时，此时建议使用header元素来组织，根据前面的例子修改了一下。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 论坛帖子 </title> </head> <body> <!-- 网页标题 --> <header> <img src="images/fklogo.gif" alt="疯狂软件"/> <a href="#">返回首页</a> <h1>浏览帖子内容</h1> </header> <article> <h2>学习Android，必须先学习Java吗</h2> <p>Android上的应用程序只能用Java编写吗？可以用C++吗？</p> <!-- 帖子的“回复”部分，用section元素表示 --> <section> <h2>回复内容</h2> <!-- 每个article代表一个回复 --> <article> <!-- 回复的标题 --> <header> <h2>还是得学习Java</h2> <div>作者：kongyeeku</div> </header> <p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br> 或NDK开发，但Java毕竟是Android主要的开发语言，<br> 因此建议学习Android之前还是先学习Java</p> </article> <!-- 每个article代表一个回复 --> <article> <!-- 回复的头部 --> <header> <h2>Java是基础</h2> <div>作者：kuan008</div> </header> <p>Java是基础，学好Java再去学习Android事半功倍。</p> </article> </section> <!-- 帖子的“评价”部分，用section元素表示 --> <section> <h2>评价内容</h2> <!-- 每个article代表一个评价 --> <article> <!-- 评价的标题 --> <h3>讨论很好</h3> <p>大家讨论的很深入，对我帮助很大</p> </article> <!-- 每个article代表一个评价 --> <article> <!-- 评价的标题 --> <h3>赞</h3> <p>不错，赞</p> </article> </section> <!-- 帖子的“脚注” --> <footer> 以上帖子和回复只代表其个人观点，不代表我们的观点或立场 </footer> </article> <footer> <a href="#">站点信息</a> <a href="#">联系我们</a> </footer> </body> </html>
3.nav与aside元素
| nav元素 | 定义页面上的导航条，包括页面上的主导航条、侧边、内部、页面下方的导航 |
| aside元素 | 定义当前页面的附属信息，通常使用css渲染成侧边框 |
article {
font-size:11pt;
}
header {
background-color:#ddd;
}
footer {
border-top: 1px solid black;
font-size: 12px;
text-align: center;
}
aside {
position:absolute;
background-color:#dda;
border:1px solid black;
width: 200px;
left:75%;
}
article>aside{
top:40%;
}
body>aside{
top:5%;
}
- aside元素放在body内部，表明为整个页面添加边栏。
- aside元素放在其他父元素内部，表明为父元素添加边栏。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 论坛帖子 </title> <link rel="stylesheet" type="text/css" href="css.css"/><!-- 上面的css --> </head> <body> <!-- 网页标题 --> <header> <img src="fklogo.gif" alt="Java学习"/>返回首页 <h1>浏览帖子内容</h1> </header> <article> <h2>学习Android，必须先学习Java吗</h2> <p>Android上的应用程序只能用Java编写吗？可以用C++吗？</p> <!-- 帖子的“回复”部分，用section元素表示 --> <section> <h2>回复内容</h2> <!-- 每个article代表一个回复 --> <article> <!-- 回复的标题 --> <header> <h2>还是得学习Java</h2> <div>作者：kongyeeku</div> </header> <p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br> 或NDK开发，但Java毕竟是Android主要的开发语言，<br> 因此建议学习Android之前还是先学习Java</p> </article> <!-- 每个article代表一个回复 --> <article> <!-- 回复的头部 --> <header> <h2>Java是基础</h2> <div>作者：kuan008</div> </header> <p>Java是基础，学好Java再去学习Android事半功倍。</p> </article> </section> <!-- 帖子的“评价”部分，用section元素表示 --> <section> <h2>评价内容</h2> <!-- 每个article代表一个评价 --> <article> <!-- 评价的标题 --> <h3>讨论很好</h3> <p>大家讨论的很深入，对我帮助很大</p> </article> <!-- 每个article代表一个评价 --> <article> <!-- 评价的标题 --> <h3>赞</h3> <p>不错，赞</p> </article> </section> <!-- 帖子的“脚注” --> <footer> 以上帖子和回复只代表其个人观点，不代表疯狂Java联盟的观点或立场 </footer> <!-- 该aside放在article内部，将作为该文章的“边栏”信息 --> <aside> <section> <h4>关于楼主</h4> <div>用户组: 编程摸索者</div> <div>注册日期: 2009-7-27</div> <div>上次访问: 2012-1-3 20:02</div> <div>最后发表: 2012-1-1 17:38</div> <div>发帖数级别: 小试牛刀</div> <div>阅读权限: 30</div> </section> </aside> </article> <footer> <a href="#">站点信息</a> <a href="#">联系我们</a> </footer> <!-- 该aside放在body内部，将作为整个HTML文档的“边栏”信息 --> <aside> <h3>页面导航</h3> <nav> <ul> <li><a href="#">查看相关内容</a></li> <li><a href="#">返回首页</a></li> <li><a href="#">返回本版</a></li> </ul> </nav> </aside> </body> </html>
4.main元素
一个html页面只能包含一个main元素，用于包含除导航条、Logo、版权信息等之外的主要内容，换句话来说，我们使用main元素，页面中的article、section和div元素都应该放在main元素内，main元素不应该放在允许重复出现的内容中，demo如下。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 回复 </title> </head> <body> <!-- 网页标题 --> <header> <h1>浏览回复内容</h1> </header> <main> <h2>还是得学习Java</h2> <div>作者：kongyeeku</div> <p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br> 或NDK开发，但Java毕竟是Android主要的开发语言，<br> 因此建议学习Android之前还是先学习Java</p> </main> </body> </html>
5.figure和figcaption元素
html为图像语义额外添加了figure和figcaption这两个元素，下面我们来看看这两个元素的功能。
| figure元素 | 表示一块独立的图片区域，可以包含一个以上img元素，还可以包含一个figcaption元素，定义图片区域的标题 |
| figcaption元素 | 通常放在figure内部，定义图片区域的标题 |
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 图片区域 </title> </head> <body> <figure style="border:2px solid black;padding:5px;width:510px"> <figcaption><b>Java体系</b></figcaption> <img src="images/java.png" alt="Java" style="width:165px;height:230px"/> <img src="images/android.png" alt="Android" style="width:165px;height:230px"/> <img src="images/javaee.png" alt="Java EE" style="width:165px;height:230px"/> </figure> </body> </html>figure定义的图片区域代表了网页上的独立区域，每个figure元素内部只能包含一个figcaption元素。
--------------如果大家喜欢我的博客，可以点击右上角的关注哦。