下载掌阅APP，畅读海量书库
立即打开
除了以上几个主要的结构元素之外，HTML5 中还增加了一些表示逻辑结构或附加信息的非主体结构元素。
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，header内也可以包含其他内容，例如表格、表单或相关的Logo图片，并且确实在Web上被反复使用。
在架构页面时，整个页面的标题常放在页面的开头，header标签一般都放在页面的顶部。可以用如下所示的形式书写页面的标题。
<header>
<h1>页面标题</h1>
</header>
在一个网页中可以拥有多个header元素，可以为每个内容区块加一个header元素。
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
在HTML5中，一个header元素通常包括至少一个headering元素（h1～h6），也可以包括hgroup、nav等元素。
下面是一个网页中的header元素使用实例，运行代码的结果如图2-15所示。
<header>
<hgroup>
<h1>佛教名山之首五台山</h1>
<p>五台山位于山西省忻州市五台县境内，位列中国佛教四大名山之首。五台山位于山西省东北部，隶属忻州市五台县，西南距省会太原市230公里，与浙江普陀山、安徽九华山、四川峨眉山共称“中国佛教四大名山”。……</p>
</hgroup>
<nav>
<ul>
<li>地质地貌</li>
<li>气候特点</li>
<li>自然资源</li>
<li>人文历史</li>
<li>旅游信息</li>
</ul>
</nav>
</header>
hgroup元素用于组织具有一些逻辑联系的多级标题，例如次级标题、副标题以及标语口号等。hgroup元素通常会将h1～h6元素进行分组，一个内容区块的标题及其子标题算一组。
通常，如果文章只有一个主标题，是不需要hgroup元素的。但是，如果文章有主标题，主标题下有子标题，就需要使用hgroup元素了。如下所示的是hgroup元素的实例代码，运行代码的结果如图2-16所示。
<article>
<header>
<hgroup>
<h1>北京旅游景点介绍</h1>
<h2>北京植物园</h2>
</hgroup>
<p>
<time datetime="2013-05-20">2014年12月20日</time></p>
<p>北京植物园位于西山卧佛寺附近，1956年经国务院批准建立，面积400公顷，是以收集、展示和保存植物资源为主，集科学研究、科学普及、游览休憩、植物种质资源保护和新优植物开发功能为一体的综合植物园。北京植物园由植物展览区、科研区、名胜古迹区和自然保护区组成，园内收集展示各类植物10000余种（含品种）150余万株。</p>
</header>
</article>
如果有标题和副标题，或在同一个header元素中加入了多个标题，那么就需要使用hgroup元素。
footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。footer元素和header元素的使用方法基本一样，可以在一个页面中使用多次，如果在一个区段后面加入footer元素，那么它就相当于该区段的尾部了。
在HTML5出现之前，通常使用类似下面的代码来写页面的页脚。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="gb2312">
<title><span class="wp_keywordlink_affiliate">
<a href="" target="_blank"> footer元素</a></span></title>
<style type="text/css">
body{
background-color:#9ACDCD;
}
Div{
display: -moz-box;
display: -webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
}
li{
width:100px;
}
</style>
</head>
<Div id="footer">
<ul>
<li>交通路线</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
<Div>
在HTML5中，这种方式将不再使用，而用更加语义化的footer来写。
<!DOCTYPE html>
<meta charset="utf-8">
<title>footer<span class="wp_keywordlink_affiliate"><title>
<a href=" " target="_blank">footer元素</a></span>
<style type="text/css">
body{
background-color:#9ACDCD;
}
footer{
display: -moz-box;
display: -webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
}
li{
width:100px;
}
</style>
<footer>
<ul>
<li>交通路线</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
footer 元素既可以用作页面整体的页脚，也可以作为一个内容区块的结尾，例如可以将<footer>直接写在<section>或<article>中。
在article元素中添加footer元素。
<article>
文章内容
<footer>
文章的脚注
</footer>
</article>
在section元素中添加footer元素。
<section>
分段内容
<footer>
分段内容的脚注
</footer>
</section>
address 元素用于标记 article 元素或者整个文档的联络信息。address 元素通常位于文档的末尾，用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等。address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式。
下面是address元素实例。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>address元素实例</title>
</head>
<body>
<address>
<a href="mailto:webmaster001@example.com">webmaster</a><br />
北京时尚科技公司<br />
电话：010-12345678<br />
</address>
</body>
</html>
在浏览器中显示地址的方式与其周围的文档不同，在IE、Firefox和Safari等浏览器中以斜体显示地址，如图2-17所示。
