HTML 5与CSS 3权威指南：header元素

3.2   新增的非主体结构元素

除了以上几个主要的结构元素之外，HTML 5内还增加了一些表示逻辑结构或附加信息的非主体结构元素。下面分别来介绍。

3.2.1   header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。

很明显，整个页面的标题应该放在页面的开头，我们可以用如下所示的形式书写页面的标题：

　　<header><h1>页面标题</h1></header>

需要强调的一点是：一个网页内并未限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素，如代码清单3-12所示。

代码清单3-12   多个header元素示例

　　<header>

　　<h1>网页标题</h1>

　　</header>

　　<article>

　　<header>

　　<h1>文章标题</h1>

　　</header>

　　<p>文章正文</p>

　　</article>

在HTML 5中，一个header元素通常包括至少一个heading元素（h1-h6），也可以包括我们后面将要讨论的hgroup元素，还可以包括其他元素（譬如table或form），根据最新的W3C HTML 5标准，还可以包括nav元素。最后，让我们看一下博客网页中header元素的一个应用示例。示例中header元素处于页面顶部。详见代码清单3-13.

代码清单3-13   博客网页中header元素的示例

　　<header>

　　<hgroup>

　　<h1>IT新技术</h1>

　　<a href="http：//blog.sina.com.cn/itnewtech">

　　http：//blog.sina.com.cn/itnewtech

　　</a>

　　<a href="#">[订阅]</a>

　　<a href="#">[手机订阅]</a>

　　</hgroup>

　　<nav>

　　<ul>

　　<li>首页</li>

　　<li><a href="http：//blog.sina.com.cn/articlelist1.html">博文目录</a></li>

　　<li><a href="http：//photo.blog.sina.com.cn/itnewtechl">图片</a></li>

　　<li><a href="http：//photo.blog.sina.com.cn/itnewtech">关于我</a></li>

　　</nav>

　　</header>

如果对这段代码使用CSS样式，显示界面如图3-3所示。

图3-3   博客网页中header元素示例