3.2 新增的非主體結(jié)構(gòu)元素

除了以上幾個主要的結(jié)構(gòu)元素之外，HTML 5內(nèi)還增加了一些表示邏輯結(jié)構(gòu)或附加信息的非主體結(jié)構(gòu)元素。下面分別來介紹。

3.2.1 header元素

header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題，但也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片。

很明顯，整個頁面的標題應(yīng)該放在頁面的開頭，我們可以用如下所示的形式書寫頁面的標題：

<header><h1>頁面標題</h1></header>

需要強調(diào)的一點是：一個網(wǎng)頁內(nèi)并未限制header元素的個數(shù)，可以擁有多個，可以為每個內(nèi)容區(qū)塊加一個header元素，如代碼清單3-12所示。

代碼清單3-12 多個header元素示例

<header>
    <h1>網(wǎng)頁標題</h1>
</header>
<article>
    <header>
        <h1>文章標題</h1>
    </header>
    <p>文章正文</p>
</article>

在HTML 5中，一個header元素通常包括至少一個heading元素（h1-h6），也可以包括我們后面將要討論的hgroup元素，還可以包括其他元素（譬如table或form），根據(jù)最新的W3C HTML 5標準，還可以包括nav元素。最后，讓我們看一下博客網(wǎng)頁中header元素的一個應(yīng)用示例。示例中header元素處于頁面頂部。詳見代碼清單3-13。

代碼清單3-13 博客網(wǎng)頁中header元素的示例

<header>
<hgroup>
<h1>IT新技術(shù)</h1>
<a >
http://blog.sina.com.cn/itnewtech
</a>
<a href="#">[訂閱]</a>
<a href="#">[手機訂閱]</a>
</hgroup>
<nav>
<ul>
<li>首頁</li>
<li><a >博文目錄</a></li>
<li><a >圖片</a></li>
<li><a >關(guān)于我</a></li>
</nav>
</header>

如果對這段代碼使用CSS樣式，顯示界面如圖3-3所示。

圖3-3 博客網(wǎng)頁中header元素示例

3.2.2 hgroup元素

hgroup元素是將標題及其子標題進行分組的元素。hgroup元素通常會將h1～h6元素進行分組，譬如一個內(nèi)容區(qū)塊的標題及其子標題算一組。

通常，如果文章只有一個主標題，是不需要hgroup元素的，如代碼清單3-14所示。

代碼清單3-14 只有header元素的示例

<article>
    <header>
        <h1>文章標題</h1>
        <p><time datetime="2010-03-20">2010年10月29日</time></p>
    </header>
    <p>文章正文</p>
</article>

但是，如果文章有主標題，主標題下有子標題，就需要使用hgroup元素了，如代碼清單3-15所示。

代碼清單3-15 hgroup元素示例

<article>
    <header>
        <hgroup>
            <h1>文章主標題</h1>
            <h2>文章子標題</h2>
        </hgroup>
        <p><time datetime="2010-03-20">2010年10月29日</time></p>
    </header>
    <p>文章正文</p>
</article>

3.2.3 footer元素

footer元素可以作為其上層父級內(nèi)容區(qū)塊或是一個根區(qū)塊的腳注。footer通常包括其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)閱讀鏈接及版權(quán)信息等。

在HTML 5出現(xiàn)之前，我們使用下面的方式編寫頁腳，如代碼清單3-16所示。

代碼清單3-16 HTML 5之前的頁腳示例

<div id="footer">
    <ul>
        <li>版權(quán)信息</li>
        <li>站點地圖</li>
        <li>聯(lián)系方式</li>
    </ul>
<div>

但是到了HTML 5之后，這種方式將不再使用，而是使用更加語義化的footer元素來替代，如代碼清單3-17所示。

代碼清單3-17 footer元素示例

<footer>
    <ul>
        <li>版權(quán)信息</li>
        <li>站點地圖</li>
        <li>聯(lián)系方式</li>
    </ul>
</footer>

與header元素一樣，一個頁面中也未限制footer元素的個數(shù)。同時，可以為article元素或section元素添加footer元素，請看下面兩個示例。

代碼清單3-18為一個在article元素中添加footer元素的示例。

代碼清單3-18 在article元素中添加footer元素

<article>
    文章內(nèi)容
    <footer>
        文章的腳注
    </footer>
</article>

代碼清單3-19為一個在section元素中添加footer元素的示例。

代碼清單3-19 在section元素中添加footer元素

<section>
    分段內(nèi)容
    <footer>
        分段內(nèi)容的腳注
    </footer>
</section>

3.2.4 address元素

address元素用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔作者或文檔維護者的名字、他們的網(wǎng)站鏈接、電子郵箱、真實地址、電話號碼等。address應(yīng)該不只是用來呈現(xiàn)電子郵箱或真實地址，還應(yīng)用來展示跟文檔相關(guān)的聯(lián)系人的所有聯(lián)系信息。譬如，在代碼清單3-20中，展示了一些博客中某篇文章評論者的名字及其在博客中的網(wǎng)址鏈接。

代碼清單3-20 address元素示例

<address>
    <a href=http://blog.sina.com.cn/itnewtech>陸凌牛</a>
    <a href=http://blog.sina.com.cn/zhangyu>張玉</a>
    <a href=http://blog.sina.com.cn/baiquanli>白權(quán)立</a>
</address>

下面我們通過代碼清單3-21來看如何把footer元素、time元素與address元素結(jié)合起來使用。

代碼清單3-21 footer、time與address結(jié)合使用的例子

<footer>
    <div>
        <address>
           <a title="文章作者：陸凌牛" >陸凌牛</a>
        </address>
        發(fā)表于<time datetime="2010-10-04">2010年10月4日</time>
    </div>
</footer>

在這個示例中，把博客文章的作者、博客的主頁鏈接作為作者信息放在了address元素中，把文章發(fā)表日期放在了time元素中，把這個address元素與time元素中的總體內(nèi)容作為腳注信息放在了footer元素中。