下载掌阅APP，畅读海量书库
立即打开
为了使文档的结构更加清晰明确，容易阅读，HTML5 中增加了很多新的结构元素，如页眉、页脚、内容区块等结构元素。
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
下面以一篇文章为例讲述article元素的使用方法，具体代码如下。
<article>
<header>
<h1>学生掌握学习方法很必要</h1>
<p>发表日期: <time pubdate="pubdate">2014/12/09</time></p>
</header>
<p> 有很多小学生上学期间，白天在学校读书，晚上还要参加各种各样的补习班，既浪费了精力又浪费了财力，其结果成绩进步不明显；也有很多家长都有这样那样的疑惑，自己的孩子并不比别人家的孩子笨，为什么成绩就不如人家呢？<br>
同样的学校、同样的老师、同样的课本、同样的试卷，为什么别的孩子轻松拿名次，自己的孩子却停滞不前，名次总在中下游徘徊？英国生物学家、进化论的奠基人达尔文做了很好的回答：“最有价值的知识是关于方法的知识。”学生感觉学习吃力，成绩不理想，归根结底就是学习方法出了问题。</p>
<footer>
<p><small>版权所有@信诚教育</small></p>
</footer>
</article>
在header元素中嵌入了文章的标题部分，在h1元素中的是文章的标题“学生掌握学习方法很必要”，文章的发表日期在p元素中。在标题下部的p元素中的是文章的正文，在结尾处的footer元素中的是文章的版权。对这部分内容使用了article元素，在浏览器中的效果如图2-7所示。
article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。
<article>
<h1>article表示插件</h1>
<object>
<param name="allowFullScreen" value="true">
<embed src="#" width="500" height="400"></embed>
</object>
</article>
一个网页中可能有多个独立的article元素，每一个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。如一个网页中的样式如下所示。
header{
display:block;
color:green;
text-align:center;
}
aritcle header{
color:red;
text-align:left;
}
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。section元素并非是一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用Div而非section元素。
<section>
<h3>广州</h3>
<p>广州，简称穗，别称羊城、花城，是广东省会、副省级市，中国国家中心城市，世界著名的港口城市，国家重要的经济、金融、贸易、交通、会展和航运中心。从秦朝开始，广州一直是郡治、州治、府治的行政中心。两千多年来一直都是华南地区的政治、军事、经济、文化和科教中心。... ...</p>
</section>
下面是一个带有section元素的article元素例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>section元素</title>
</head>
<body>
<article>
<h1>广东</h1>
<p>广东省，以岭南东道、广南东路得名，简称“粤”，省会广州，是中国大陆南端沿海的一个省份，位于南岭以南，南海之滨，下辖21个省辖市。广东省也是中国人口最多 ，社会、文化最开放的省份，广东省已成为中国第一经济大省 ，经济总量占全国的1/8。... ...</p>
<section>
<h3>广州</h3>
<p>广州，简称穗，别称羊城、花城，是广东省会、副省级市，中国国家中心城市，世界著名的港
口城市，国家重要的经济、金融、贸易、交通、会展和航运中心。从秦朝开始，广州一直是郡治、州治、府治的行政中心。两千多年来一直都是华南地区的政治、军事、经济、文化和科教中心。... ...</p>
</section>
<section>
<h3>深圳</h3>
<p>深圳，别称鹏城，广东省辖市，中国国家区域中心城市（华南），地处广东省南部，珠江口东岸，与香港一水之隔，东临大亚湾和大鹏湾；西濒珠江口和伶仃洋；南边深圳河与香港相连；北部与东莞、惠州两城市接壤。
深圳是中国改革开放以来所设立的第一个经济特区，是中国改革开放的窗口。... ...</p>
</section>
<section>
<h3>珠海</h3>
<p>珠海，珠江口西岸的核心城市，经济特区，珠江三角洲南端的一个重要城市，位于广东省珠江口的西南部，区位优越，是珠三角中海洋面积最大、岛屿最多、海岸线最长的城市，素有“百岛之市”之称。... ...</p>
</section>
</article>
</body>
</html>
从上面的代码可以看出，首页整体呈现的是一段完整独立的内容，所有内容用article元素包起来。这其中又可分为四段，每一段都有一个独立的标题，使用了三个section元素为其分段，这样可以使文档的结构显得清晰。在浏览器中的效果如图2-8所示。
section元素的作用是对页面上的内容进行分块，或者说是对文章进行分段，不要与“有着自己的完整的、独立的内容”的article元素混淆。article元素和section元素有什么区别呢？
在HTML 5 中，article 元素可以看成是一种特殊种类的section 元素，它比section 元素更强调独立性。即section元素强调分段或分块，而article强调独立性。如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段的时候，应该使用section元素。
nav 元素代表页面中的导航区域。它由一个链接列表组成，这些链接指向本站或本应用内的其他页面或版块。
一直以来，习惯于使用形如<Div id="nav">或<ul id="nav">这样的代码来编写页面的导航。在HTML5中，可以直接将导航链接列表放到<nav>标签中。
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
导航，顾名思义，就是引导的路线，那么具有引导功能的都可以认为是导航。导航可以是页与页之间导航，也可以是页内的段与段之间导航。
<!doctype html>
<title>页面之间导航</title>
<header>
<h1>网站页面之间导航<h1>
<nav>
<ul>
<li><a href="index.html">返回首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
</nav>
</header>
这个实例是页面之间的导航，nav 元素中包含了三个用于导航的超级链接，即“返回首页”“关于我们”和“联系我们”。该导航可用于全局导航，也可放在某个段落中作为区域导航。其运行结果如图2-9所示。
下面的实例是页内导航，其运行结果如图2-10所示。
<!doctype html>
<title>段内导航</title>
<header>
</header>
<article>
<h2>文章的标题</h2>
<nav>
<ul>
<li><a href="#p1">段一</a></li>
<li><a href="#p2">段二</a></li>
<li><a href="#p3">段三</a></li>
</ul>
</nav>
<p id=p1>段一</p>
<p id=p2>段二</p>
<p id=p3>段三</p>
</article>
nav元素使用在哪些位置呢？
顶部传统导航条：现在的主流网站上都有不同层级的导航条，其作用是将当前页面跳转到网站的其他主要页面上去。图2-11所示的是顶部传统网站导航条。
侧边导航：现在的很多企业网站和购物类网站上都有侧边导航，图2-12所示的是左侧导航。
页内导航：页内导航的作用是在本页面几个主要的组成部分之间进行跳转，图2-13所示的是页内导航。
在HTML5中不要用menu元素代替nav元素。过去有很多Web应用程序的开发员喜欢用menu元素进行导航，menu元素是用在Web应用程序中的。
aside元素用于标记文档的相关内容，比如醒目引用、边条和广告等。<aside>元素的内容应与元素周围内容相关。
aside元素主要有以下两种使用方法。
（1）包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
<article>
<h1>…</h1>
<p>…</p>
<aside>…</aside>
</article>
（2）在article 元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是友情链接、文章列表、广告单元等。代码如下所示，运行代码的结果如图2-14所示。
<aside>
<h2>新闻信息</h2>
<ul>
<li>公司新闻</li>
<li>业内信息</li>
</ul>
<h2>产品类型</h2>
<ul>
<li>棉衣外套</li>
<li>时尚裙子</li>
<li>鞋帽内衣</li>
</ul>
</aside>
