2.1 新增的结构元素
没有HTML 5的新增结构元素之前，设计人员定义结构时，通常都是通过一个“全能”的<div>标记实现。然后通过设置该标记中div元素id属性的值分别表示头部、底部和侧栏等，例如header、footer和sidebar。而有了这些结构元素后，设计人员再也不需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。
2.1.1 header元素
header元素表示页面中一个内容区块或整个页面的标题，它可以包含所有通常放在页面头部的内容。header元素并不是页面中的head元素，因此可以为每个区域添加一个header元素。
header元素通常用来显示一个页面中的标题、Logo图片、搜索文本框或者其他相关内容，使用该元素可以替代原来使用的“<div id="header"></div>”标记。它的使用非常简单，语法如下：
<header><!--内容--></header>
【练习1】
本次练习主要演示header元素的使用，通过在页面中使用header元素显示网页的Logo标志，实现的步骤如下所示。
（1）在Dreamweaver CS5开发工具中新建一个网页，在页面的合适位置添加代码，在显示Logo信息的头部使用header元素表示。代码如下。
<div id="main_container">
<header>
<div class="logo"> <a href="work1/index.html"><img src="work1/images/logo.gif" alt="" title="" border="0" /></a> </div>
</header>
</div>
（2）如果需要为header元素指定样式，不需要通过ID选择器进行定义，而是直接在样式中进行定义即可。样式代码如下。
header{
width:677px;
height:173px;
margin:auto;
}
（3）运行页面查看效果，如图2-1所示。
图2-1 header元素的使用
2.1.2 article元素
article元素中的内容独立于文档的其余部分，表示页面中的一块与上下文不相关的独立内容。一个网页中可以出现一个article元素，也可以同时出现多个article元素，它可以独立使用，也可以和section元素结合使用。
article元素可以表示博客中的文本或者是来自论坛中的文本，还可以是来自其他外部资源的内容。使用该元素通常会替代原来使用的“<div id="content"></div>”标记，其使用也非常简单。语法如下：
<article><!--内容--></article>
【练习2】
本次练习演示article元素的使用，可以利用练习1的页面，也可以重新更改或设计页面，实现步骤如下。
（1）使用Dreamweaver CS5添加一个新的网页，在页面的合适位置添加article元素，该元素包含关于艺术文章说明的列举说明。部分代码如下。
<article>
<div class="title"><img src="work1/images/title_products.gif" alt=""title="" /></div>
<div class="prod_box"> <img src="work1/images/p1.gif" alt="" title=""class="prod_img"/>
<div class="prod_details">
<h1>小提琴</h1>
<p>小提琴的出现已有300多年的历史，是自17世纪以来西方音乐中最为重要的乐器之一,被誉为乐器皇后，其制作本身是一门极小提琴为精致的艺术。小提琴音色优美，接近人声，音域宽广，表现力强，从它诞生那天起，就一直在乐器中占有显著的地位，为人们所宠爱。</p>
<a href="#" class="order"><img src="work1/images/order.gif"alt="" border="0" /></a>
</div>
</div>
<!--省略其他内容-->
<div class="pagination"> <span class="disabled">prev</span> <span class="current">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a>...<a href="#?page=22">22</a> <a href="#">23</a> <a href="#">next</a> </div>
<div class="clear"></div>
</article>
（2）为上述元素添加相应的样式，部分样式代码如下。
article{
padding:20px 40px 0 40px;
}
.prod_box{
float:left;
padding:10px 10px 10px 15px;
}
（3）运行页面观察效果，如图2-2所示。
2.1.3 section元素
前面已经提到过，article元素通常会和section元素一起使用，那section元素究竟是做什么的呢？section元素用于将页面上的内容划分为独立的区域，定义文档中的节，例如章节、页眉、页脚或者文档中的其他部分。
图2-2 article元素的使用
一个section元素通常是一个有主题的内容组，前面有一个header元素，后面跟一个footer元素，如果有需要，section元素也可以嵌套使用。如下代码演示了section元素的简单使用。
<article>
<header><h1>第1章</h1></header>
<section>
<header><h1>第1节</h1></header>
<p><h1>第1节的内容</h1></p>
<footer><h1>第1节的其他信息</h1></footer>
</section>
</article>
虽然article元素和section元素都可以向页面显示内容，但是，它们之间也存在着不同。实际上，article元素可以看成是一种特殊类型的section元素，只是它比section元素更加强调独立性。简单来说，就是section元素强调分段或分块，而article元素强调独立性。
具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段，就应该使用section元素。
【练习3】
本次练习将article元素和section元素结合起来使用，使用article元素表示整篇文章，section元素表示文章的不同部分。
（1）在Dreamweaver CS5中添加一个新的页面，然后设计页面，在页面的合适位置添加article元素和section元素。部分代码如下。
<article>
<header> 生命长河里的繁星点点，总有最璀璨的那么几颗在始终如一地闪耀着，一听到老师的这个的题目，我便微舒口气，凝望着窗外，专心翻阅着生命中的那五样东西...</header><br/>
<section>
<h3>我的父母</h3><br/>
<p> 有这样两个人，是他们将我带到这个神奇的世界，他们一直视我为他们的专属天使，用全部的爱心抚养着我，他们是——我在纸上，专心写下了"父母"两个字。</p>
</section><br/>
<section>
<h3>我的朋友</h3><br/>
<p> 当我在川流不息的人群世俗中迷惘时，忽然，跳出来一群人紧紧握住我的手，为我指明方向，快乐于我共分享，痛苦与我同分担。于是，我又写下了"朋友"二字。</p>
</section><br/>
<!--省略其他内容-->
</article>
（2）如果需要，则为上述的有关元素添加样式代码。例如，为article元素添加的样式代码如下。
article {
font-family: Verdana;
font-size: 14px;
color: #0366B6;
margin: 3px;
float: left;
width: 600px;
padding-top: 15px;
padding-right: 3px;
padding-bottom: 10px;
padding-left: 20px;
}
（3）运行页面观察效果，如图2-3所示。
注意
section是一个划分内容的标识，而不是一个容器。在HTML 5中，div元素是一种容器。因此，如果希望放置一些内容并定义样式时，可以使用div元素进行总体的CSS样式套用而不是section元素。
在HTML 5中，设计人员可以将所有页面的从属部分（例如导航条、菜单和版权说明等）包含在一个统一的页面中，以便统一使用CSS样式来进行装饰。另外，关于section元素的使用禁忌总结如下。
图2-3 section元素的使用
（1）不要将section元素用作设置样式的页面容器，那是div元素的工作。
（2）如果article元素、aside元素或nav元素更符合使用条件，尽量不使用section元素。
（3）不要为没有标题的内容区块使用section元素。
2.1.4 nav元素
nav元素用来向页面构建导航，导航定义为一个页面中（例如，一篇文章顶端的一个目录，它可以链接到同一页面的锚点）或一个站点内的链接。
一个页面中可以拥有多个nav元素作为页面整体或不同部分的导航，但是，并不是所有的导航链接都要放入到该元素中，例如页面底部的导航链接就应该使用footer元素。
【练习4】
nav元素的内容可能是链接的一个列表，标记为一个有序列表或者是一个无序列表。本次练习主要演示nav元素的使用，实现步骤如下。
（1）在Dreamweaver CS5中添加一个新页面，设计页面并在页面的导航显示处添加nav元素。代码如下。
<nav>
<ul>
<li><a href="#" class="hover">首页</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">文章列表</a></li>
<li><a href="#">目标信息</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">展望未来</a></li>
<li class="noBor"><a href="#">联系我们</a></li>
</ul>
</nav>
（2）分别为导航元素和列表元素添加样式，部分样式代码如下。
nav{
height:30px;
float:left;
margin:123px 0 0 0;
background:url(images/nav_bg.gif) 0 0 repeat-x;
width:677px;
}
nav li{
float:left;
font-size:0;
line-height:0;
margin:0;
border-right:#FFF5ED solid 1px;
}
nav li a{
display:block;
background:url(images/nav_bg.gif) 0 0 repeat-x;
padding:0 15px;
font:bold 11px/30px Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
text-decoration:none;
}
（3）运行页面查看效果，导航效果如图2-4所示。
图2-4 nav元素的使用
提示
nav元素是一个包装器，它不会替代ol或ul元素，但是它会包围ol或ul元素。通过这种方式，不支持nav元素的旧版本浏览器将会显示列表元素和列表项，并且显示效果完全正常。
在练习4中，nav元素作用于链接导航，当前链接到本页面。并不是链接的每一个集合都是一个nav，只需要将主要的、基本的链接组放入nav元素即可。具体来说，nav可以适用于多个场合，具体使用场合说明如下。
（1）传统导航条。目前主流网站上都有不同层级的导航条，其作用是将当前画面跳转到网站的其他主要页面上去。
（2）侧边栏导航。目前主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。
（3）页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
（4）翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
2.1.5 footer元素
footer元素用来定义其父级区块（section）或根区块（document）的脚注信息，使用该元素可以显示作者、文档的创建日期、相关阅读链接以及版权信息等。通常情况下，footer元素用来替代原来页面中的“<div id="footer"></div>”标记。
【练习5】
几乎所有的网站都离不开底部信息，这些底部备注信息可以是简单的链接，还可以包括与版权有关的信息。下面通过一个简单的练习演示footer元素的使用，实现的具体步骤如下。
（1）在Dreamweaver CS5中添加一个新的页面，设计页面并且使用footer元素显示底部信息。代码如下。
<footer>
<ul>
<li><a href="#" class="hover">首页</a></li>
<li><a href="#">关于我们</a></li>
<!--省略其他内容-->
</ul>
<p class="copyright">Copyright ? Import 2013. All Rights Reserved.</p>
<a href="#" class="xhtml">Xhtml</a><a href="#" class="css">Css</a>
<p class="design">Designed by : <a href="#" target="_blank" class="link">Template World</a></p>
</footer>
（2）如果需要，为上面的元素添加相应的样式，部分样式代码如下。
footer{
width:983px;
margin:0 auto;
background:url(images/footer_bg.gif) 0 0 repeat-x;
height:117px;
position:relative;
}
footer p.copyright{
font:normal 11px/22px Arial, Helvetica, sans-serif;
position:absolute;
left:384px;
top:36px;
width:250px;
color:#FFFEC2;
background-color:inherit;
}
（3）运行页面查看效果，如图2-5所示。
图2-5 footer元素的使用
footer元素与header一样，一个页面中没有对该元素的个数进行限制。同时，可以为article元素或section元素添加footer元素。
例如，为article元素添加footer元素，代码如下。
<article>
文章内容
<footer>文章的脚注</footer>
</article>
2.1.6 address元素
address元素为文档或section定义联系信息，这些联系信息可以是E-mail地址、邮政地址或者任何其他形式。但是，address元素并不适合所有需要地址信息的情况，例如，对于客户的联系信息就不需要该元素。
address元素中不能包含标题、区块内容、header、footer或address元素，通常情况下，会将该元素和其他内容一起放在footer元素中。例如，在下面的代码中，展示了博客中某篇文章评论者的名字及其在博客中的网址链接。代码如下。
<address>
<a href="http://blog.sina.com.cn/damai521">I Love MySelf</a>
</address>
address在支持该元素浏览器中显示时，其文本内容被呈现为斜体。大多数浏览器都会在address元素的前后添加一个换行符，但是，如果有必要，还可以在需要地址文本的内容添加额外的换行符。
2.1.7 hgroup元素
hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合，它是将标题及其子标题进行分组的元素。hgroup元素扮演着一个可以包含一个或者更多与标题相关容器的角色。
hgroup元素通常会将h1～h6元素进行分组，例如，一个内容区块的标题及其子标题算一组，但是使用时也需要注意以下三点。
（1）如果只有一个标题元素（h1～h6中的一个），不建议使用hgroup元素。
（2）当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标题容器。
（3）当一个标题有副标题、其他section或者article的元数据时，建议将hgroup元素和元数据放到一个单独的header元素容器中。
【练习6】
通常情况下，会将hgroup元素放在header元素中，本次练习将该元素放在header元素中，从而演示该元素的使用。
（1）在Dreamweaver CS5中添加一个新的页面，设计页面时向页面中添加header元素，向header元素中添加hgroup元素，该元素表示一个主标题和一个子标题。代码如下。
<hgroup>
<h1 class="blogtitle" id="blogname">
<a href="http://blog.sina.com.cn/u/2236154751"><span id="blog-namespan"> Love微微风的博客</span></a>
</h1>
<h3 style="color:red; margin-left:30px;">记录了我生活中的点点滴滴...</h3>
</hgroup>
<div class="bloglink" id="bloglink">
<a href="http://blog.sina.com.cn/u/2236154751">http://blog.sina.com.cn/u/2236154751</a>
<a id="SubscribeNewRss" href="#" onclick="return false;">[<cite>订阅</cite>]</a>
<a href="#">[<cite>手机订阅</cite>]</a>
</div>
（2）为页面中的部分元素添加样式代码，部分样式如下所示。
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}
（3）运行页面查看效果，如图2-6所示。
图2-6 hgroup元素的使用
hgroup元素可以和figcaption元素结合使用，这样可以将hgroup元素作为标题容器。示例代码如下。
<hgroup>
<figcaption>最新链接</figcaption>
<ul>
<li><a href="#">What's New 07</a></li>
<li><a href="#">What Our Goal</a></li>
<li><a href="#">Rise in Air In a Different Way Towards Success </a></li>
<li><a href="#">Airfeed Updates</a></li>
<li class="noMargin2"><a href="#">Why Choose Our Site</a></li>
</ul>
</hgroup>