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

在HTML 5中，為了使文檔的結(jié)構(gòu)更加清晰明確，追加了幾個(gè)與頁(yè)眉、頁(yè)腳、內(nèi)容區(qū)塊等文檔結(jié)構(gòu)相關(guān)聯(lián)的結(jié)構(gòu)元素。需要說(shuō)明的是，本章所講的內(nèi)容區(qū)塊是指將HTML頁(yè)面按邏輯進(jìn)行分割后的單位。例如對(duì)于書(shū)籍來(lái)說(shuō)，章、節(jié)都可以稱為內(nèi)容區(qū)塊；對(duì)于博客網(wǎng)站來(lái)說(shuō)，導(dǎo)航菜單、文章正文、文章的評(píng)論等每一個(gè)部分都可稱為內(nèi)容區(qū)塊。

接下來(lái)將詳細(xì)講解HTML 5中在頁(yè)面的主體結(jié)構(gòu)方面新增加的結(jié)構(gòu)元素。

3.1.1 article元素

article元素代表文檔、頁(yè)面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。它可以是一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶評(píng)論或獨(dú)立的插件，或其他任何獨(dú)立的內(nèi)容。

除了內(nèi)容部分，一個(gè)article元素通常有它自己的標(biāo)題（一般放在一個(gè)header元素里面），有時(shí)還有自己的腳注。

現(xiàn)在，讓我們以博客為例來(lái)看一段關(guān)于article元素的代碼示例，如代碼清單3-1所示。

代碼清單3-1 article元素示例

<article>
    <header>
        <h1>蘋(píng)果</h1>
        <p>發(fā)表日期: <time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>蘋(píng)果</b> ，植物類水果，多次花果...（"蘋(píng)果"文章正文）</p>
    <footer>
        <p><small>著作權(quán)歸***公司所有。</small></p>
    </footer>
</article>

這個(gè)示例是一篇講述蘋(píng)果的博客文章，在header元素中嵌入了文章的標(biāo)題部分，在這部分中，文章的標(biāo)題“蘋(píng)果”被鑲嵌在h1元素中，文章的發(fā)表日期鑲嵌在p元素中。在標(biāo)題下部的p元素中，嵌入了一大段該博客文章的正文，在結(jié)尾處的footer元素中，嵌入了文章的著作權(quán)，作為腳注。整個(gè)示例的內(nèi)容相對(duì)比較獨(dú)立、完整，因此，對(duì)這部分內(nèi)容使用了article元素。

article元素是可以嵌套使用的，內(nèi)層的內(nèi)容在原則上需要與外層的內(nèi)容相關(guān)聯(lián)。例如，一篇博客文章中，針對(duì)該文章的評(píng)論就可以使用嵌套article元素的方式；用來(lái)呈現(xiàn)評(píng)論的article元素被包含在表示整體內(nèi)容的article元素里面。

接著，讓我們來(lái)看一個(gè)關(guān)于article元素嵌套的代碼示例，如代碼清單3-2所示。

代碼清單3-2 article元素嵌套示例

<article>
   <header>
      <h1>蘋(píng)果</h1>
      <p>發(fā)表日期:
            <time pubdate datetime="2010/10/09">2010/10/09</time>
      </p>
   </header>
   <p><b>蘋(píng)果</b> ，植物類水果，多次花果...（"蘋(píng)果"文章正文）</p>
   <section>
      <h2>評(píng)論</h2>
      <article>
         <header>
            <h3>發(fā)表者：陸凌牛</h3>
            <p>
               <time pubdate datetime="2010-10-10T19:10-08:00">
                  1小時(shí)前
               </time>
            </p>
         </header>
         <p>我喜歡蘋(píng)果，我最喜愛(ài)的品種是紅富士。</p>
      </article>
      <article>
         <header>
            <h3>發(fā)表者：張玉</h3>
            <p>
               <time pubdate datetime="2010-10-10T19:15-08:00">
                     1小時(shí)前
               </time>
            </p>
         </header>
         <p>蘋(píng)果？我不喜歡，我喜歡吃橘子。</p>
      </article>
   </section>
</article>

這個(gè)示例中的內(nèi)容比代碼清單3-1中的內(nèi)容更加完整了，它添加了文章讀者的評(píng)論內(nèi)容，示例的整體內(nèi)容還是比較獨(dú)立、完整的，因此對(duì)其使用article元素。具體來(lái)說(shuō)，示例內(nèi)容又分為幾部分，文章標(biāo)題放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文與評(píng)論部分進(jìn)行了區(qū)分（section元素馬上就要講到，是一個(gè)分塊元素，用來(lái)把頁(yè)面中的內(nèi)容進(jìn)行分塊），在section元素中嵌入了評(píng)論的內(nèi)容，評(píng)論中每一個(gè)人的評(píng)論相對(duì)來(lái)說(shuō)又是比較獨(dú)立、完整的，因此對(duì)它們都使用一個(gè)article元素，在評(píng)論的article元素中，又可以分為標(biāo)題與評(píng)論內(nèi)容部分，分別放在header元素與p元素中。

關(guān)于示例中提到的time元素與pubdate屬性，請(qǐng)查看本節(jié)結(jié)尾處有關(guān)time元素與pubdate屬性的說(shuō)明。

另外，article元素也可以用來(lái)表示插件，它的作用是使插件看起來(lái)好像內(nèi)嵌在頁(yè)面中一樣。代碼清單3-3是它的一個(gè)示例。

代碼清單3-3 用article元素表示插件

<article>
    <h1>My Fruit Spinner</h1>
    <object>
        <param name="allowFullScreen" value="true">
        <embed src="#" width="600" height="395"></embed>
    </object>
</article>

3.1.2 section元素

section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。但section元素并非一個(gè)普通的容器元素；當(dāng)一個(gè)容器需要被直接定義樣式或通過(guò)腳本定義行為時(shí)，推薦使用div而非section元素。

我們可以這樣理解：section元素中的內(nèi)容可以單獨(dú)存儲(chǔ)到數(shù)據(jù)庫(kù)中或輸出到Word文檔中。代碼清單3-4是它的一個(gè)示例（注意：標(biāo)題部分位于它的內(nèi)部，而不是它的前面）。

代碼清單3-4 section元素示例

<section>
    <h1>蘋(píng)果</h1>
    <p><b>蘋(píng)果</b> ，植物類水果，多次花果...（"蘋(píng)果"文章正文）</p>
</section>

通常不推薦為那些沒(méi)有標(biāo)題的內(nèi)容使用section元素，可以使用HTML 5輪廓工具來(lái)檢查頁(yè)面中是否有沒(méi)標(biāo)題的section，HTML 5輪廓工具的網(wǎng)址為“http://gsnedders.html 5.org/outliner/”，如果使用該工具進(jìn)行檢查后，發(fā)現(xiàn)某個(gè)section的說(shuō)明中有“untieled section”（沒(méi)有標(biāo)題的section）文字，這個(gè)section就有可能使用不當(dāng)（但是nav元素或aside元素沒(méi)有標(biāo)題是合理的）。

section元素的作用是對(duì)頁(yè)面上的內(nèi)容進(jìn)行分塊，或者說(shuō)對(duì)文章進(jìn)行分段，請(qǐng)不要與“有著自己的完整的、獨(dú)立的內(nèi)容”的article元素混淆。

下面，我們來(lái)看article元素與section元素結(jié)合使用的兩個(gè)示例，希望能夠幫助你更好地理解article元素與section元素的區(qū)別。

首先來(lái)看一個(gè)帶有section元素的article元素示例，如代碼清單3-5所示。

代碼清單3-5 帶有section元素的article元素示例

<article>
    <h1>蘋(píng)果</h1>
    <p><b>蘋(píng)果</b> ，植物類水果，多次花果...</p>
    <section>
        <h2>紅富士</h2>
        <p>紅富士是從普通富士的芽（枝）變中選育出的著色系富的統(tǒng)稱...</p>
    </section>
    <section>
        <h2>國(guó)光</h2>
        <p>國(guó)光蘋(píng)果品，又名小國(guó)光、萬(wàn)壽。原產(chǎn)美國(guó)，1600年發(fā)現(xiàn)的偶然實(shí)生苗...</p>
    </section>
</article>

代碼清單3-5中的內(nèi)容首先是一段獨(dú)立的、完整的內(nèi)容，因此使用article元素。該內(nèi)容是一篇關(guān)于蘋(píng)果的文章，該文章分為3段，每一段都有一個(gè)獨(dú)立的標(biāo)題，因此使用了兩個(gè)section元素。請(qǐng)記住，對(duì)文章分段的工作也是使用section元素完成的。可能有人會(huì)問(wèn)，為什么沒(méi)有對(duì)第一段使用section元素，這里其實(shí)是可以使用section元素的，但是由于其結(jié)構(gòu)比較清晰，分析器可以識(shí)別第一段內(nèi)容在一個(gè)section元素里，所以也可以將第一個(gè)section元素略，但是如果第一個(gè)section元素里還要包含子section元素或子article元素，那么就必須寫(xiě)明第一個(gè)section元素了。

接著，我們來(lái)看一個(gè)包含article元素的section元素示例，如代碼清單3-6所示。

代碼清單3-6 包含article元素的section元素示例

<section>
    <h1>水果</h1>
    <article>
        <h2>蘋(píng)果</h2>
        <p>蘋(píng)果，植物類水果，多次花果...</p>
    </article>
    <article>
        <h2>橘子</h2>
        <p>橘子，是蕓香科柑橘屬的一種水果...</p>
    </article>
    <article>
        <h2>香蕉</h2>
        <p>香蕉,屬于芭蕉科芭蕉屬植物，又指其果實(shí)，熱帶地區(qū)廣泛栽培食用...</p>
    </article>
</section>

這個(gè)示例比前面的示例復(fù)雜了一些，首先，它是一篇文章中的一段，因此最初沒(méi)有使用article元素。但是，在這一段中有幾塊獨(dú)立的內(nèi)容，因此，嵌入了幾個(gè)獨(dú)立的article元素。

看到這里，你可能又會(huì)糊涂了，這兩個(gè)元素可以互換使用嗎？它們的區(qū)別到底是什么呢？事實(shí)上，在HTML 5中，article元素可以看成是一種特殊種類的section元素，它比section元素更強(qiáng)調(diào)獨(dú)立性。即section元素強(qiáng)調(diào)分段或分塊，而article強(qiáng)調(diào)獨(dú)立性。具體來(lái)說(shuō)，如果一塊內(nèi)容相對(duì)來(lái)說(shuō)比較獨(dú)立、完整的時(shí)候，應(yīng)該使用article元素，但是如果你想將一塊內(nèi)容分成幾段的時(shí)候，應(yīng)該使用section元素。另外，在HTML 5中，div元素變成了一種容器，當(dāng)使用CSS樣式的時(shí)候，可以對(duì)這個(gè)容器進(jìn)行一個(gè)總體的CSS樣式的套用。

另外再補(bǔ)充一點(diǎn)，在HTML 5中，你可以將所有頁(yè)面的從屬部分，譬如導(dǎo)航條、菜單、版權(quán)說(shuō)明等包含在一個(gè)統(tǒng)一的頁(yè)面中，以便統(tǒng)一使用CSS樣式來(lái)進(jìn)行裝飾。

最后，關(guān)于section元素的使用禁忌總結(jié)如下：

1）不要將section元素用作設(shè)置樣式的頁(yè)面容器，那是div元素的工作。

2）如果article元素、aside元素或nav元素更符合使用條件，不要使用section元素。

3）不要為沒(méi)有標(biāo)題的內(nèi)容區(qū)塊使用section元素。

3.1.3 nav元素

nav元素是一個(gè)可以用作頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分。并不是所有的鏈接組都要被放進(jìn)nav元素，只需要將主要的、基本的鏈接組放進(jìn)nav元素即可。例如，在頁(yè)腳中通常會(huì)有一組鏈接，包括服務(wù)條款、首頁(yè)、版權(quán)聲明等，這時(shí)使用footer元素是最恰當(dāng)。一個(gè)頁(yè)面中可以擁有多個(gè)nav元素，作為頁(yè)面整體或不同部分的導(dǎo)航。

接著讓我們來(lái)看一個(gè)nav元素的使用示例，在這個(gè)示例中，一個(gè)頁(yè)面由幾部分組成，每個(gè)部分都帶有鏈接，但只將最主要的鏈接放入了nav元素中，如代碼清單3-7所示。

代碼清單3-7 nav元素示例

<body>
<h1>技術(shù)資料</h1>
<nav>
    <ul>
        <li><a href="/">主頁(yè)</a></li>
        <li><a href="/events">開(kāi)發(fā)文檔</a></li>
        ...more...
    </ul>
</nav>
<article>
    <header>
        <h1>HTML 5與CSS 3的歷史</h1>
        <nav>
            <ul>
                <li><a href="#HTML 5">HTML 5的歷史</a></li>
                <li><a href="#CSS 3">CSS 3的歷史</a></li>
                ...more...
            </ul>
         </nav>
    </header>
    <section id="HTML 5">
        <h1>HTML 5的歷史</h1>
        <p>講述HTML 5的歷史的正文</p>
    </section>
    <section id="CSS 3">
        <h1>CSS 3的歷史</h1>
        <p>講述CSS 3的歷史的正文</p>
    </section>
    ...more...
    <footer>
        <p>
            <a href="?edit">編輯</a> |
            <a href="?delete">刪除</a> |
            <a href="?rename">重命名</a>
        </p>
      </footer>
</article>
<footer>
    <p><small>版權(quán)所有：陸凌牛</small></p>
</footer>
</body>

在這個(gè)例子中，第一個(gè)nav元素用于頁(yè)面導(dǎo)航，將頁(yè)面跳轉(zhuǎn)到其他頁(yè)面上去（跳轉(zhuǎn)到網(wǎng)站主頁(yè)或開(kāi)發(fā)文檔目錄頁(yè)面）；第二個(gè)nav元素放置在article元素中，用作這篇文章中兩個(gè)組成部分的頁(yè)內(nèi)導(dǎo)航。

具體來(lái)說(shuō)，nav元素可以用于以下這些場(chǎng)合：

• 傳統(tǒng)導(dǎo)航條?，F(xiàn)在主流網(wǎng)站上都有不同層級(jí)的導(dǎo)航條，其作用是將當(dāng)前畫(huà)面跳轉(zhuǎn)到網(wǎng)站的其他主要頁(yè)面上去。
• 側(cè)邊欄導(dǎo)航?，F(xiàn)在主流博客網(wǎng)站及商品網(wǎng)站上都有側(cè)邊欄導(dǎo)航，其作用是將頁(yè)面從當(dāng)前文章或當(dāng)前商品跳轉(zhuǎn)到其他文章或其他商品頁(yè)面上去。
• 頁(yè)內(nèi)導(dǎo)航。頁(yè)內(nèi)導(dǎo)航的作用是在本頁(yè)面幾個(gè)主要的組成部分之間進(jìn)行跳轉(zhuǎn)。
• 翻頁(yè)操作。翻頁(yè)操作是指在多個(gè)頁(yè)面的前后頁(yè)或博客網(wǎng)站的前后篇文章滾動(dòng)。

除此之外，nav元素也可以用于其他所有你覺(jué)得是重要的、基本的導(dǎo)航鏈接組中。

請(qǐng)注意：在HTML 5中不要用menu元素代替nav元素。過(guò)去有很多Web應(yīng)用程序的開(kāi)發(fā)員喜歡用menu元素進(jìn)行導(dǎo)航，我想有必要再次強(qiáng)調(diào)，menu元素是用在一系列發(fā)出命令的菜單上的，是一種交互性的元素，或者更確切地說(shuō)是使用在Web應(yīng)用程序中的。

3.1.4 aside元素

aside元素用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條，以及其他類似的有別于主要內(nèi)容的部分。

aside元素主要有以下兩種使用方法。

1）被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的參考資料、名詞解釋，等等。這部分代碼請(qǐng)看代碼清單3-8。

代碼清單3-8 文章內(nèi)部的aside元素示例

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>aside元素示例</title>
</head>
<body>
<header>
    <h1>F#入門</h1>
</header>
<article>
    <h1>第四節(jié)詞法閉包</h1>
    <p>lambda表達(dá)式可以創(chuàng)建詞法閉包...（文章正文）</p>
    <aside>
        <!-- 因?yàn)檫@個(gè)aside元素被放置在一個(gè)article元素內(nèi)部，
        所以分析器將這個(gè)aside元素的內(nèi)容理解成是和article元素的內(nèi)容相關(guān)聯(lián)的。-->
        <h1>名詞解釋</h1>
        <dl>
            <dt>F#</dt>
            <dd>F#為.Net2010中引入的新型函數(shù)型編程語(yǔ)言</dd>
        </dl>
        <dl>
            <dt>詞法閉包</dt>
            <dd>詞法閉包是指，將創(chuàng)建lambda表達(dá)式時(shí)的環(huán)境保存起來(lái)...（詳細(xì)解釋）</dd>
        </dl>
    </aside>
</article>
</body>

程序運(yùn)行結(jié)果如圖3-1所示。

圖3-1 aside元素示例

這是筆者博客網(wǎng)頁(yè)中的一篇文章，網(wǎng)頁(yè)的標(biāo)題放在了header元素中，在header元素的后面將所有關(guān)于文章的部分放在了一個(gè)article元素中，將文章的正文部分放在了一個(gè)p元素中，但是該文章還有一個(gè)名詞解釋的附屬部分，用來(lái)解釋該文章中的一些名詞，因此，在p元素的下部又放置了一個(gè)aside元素，用來(lái)存放名詞解釋部分的內(nèi)容。

2）在article元素之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分。最典型的形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接，博客中其他文章列表、廣告單元等。下面這個(gè)示例為標(biāo)準(zhǔn)博客網(wǎng)頁(yè)中一個(gè)側(cè)邊欄的示例，示例中的“IT新技術(shù)”為博客的名稱，如代碼清單3-9所示。

代碼清單3-9 側(cè)邊欄示例

<aside>
    <nav>
        <h2>評(píng)論</h2>
        <ul>
            <li>
            <a >erway</a> 10-24 14:25
            </li>
            <li>
            <a >太陽(yáng)雨</a>10-22 23:48<br/>
            <a >
               頂，拜讀一下老牛的文章
            </a>
            </li>
            <li>
            <a >新浪官博</a>
            08-12 08:50<br/>
            <a href="#">恭喜！您已經(jīng)成功開(kāi)通了博客</a>
            </li>
        </ul>
    </nav>
</aside>

如果對(duì)這部分再加上CSS樣式，在瀏覽器中的顯示效果如圖3-2所示。

該示例為一個(gè)典型的博客網(wǎng)站中的側(cè)邊欄部分，因此放在了aside元素中，但是該側(cè)邊欄又是具有導(dǎo)航作用的，因此放置在nav元素中，該側(cè)邊欄的標(biāo)題是“評(píng)論”，放在了h2元素中，在標(biāo)題之后使用了一個(gè)ul列表，用來(lái)存放具體的導(dǎo)航鏈接中。

圖3-2 用aside元素實(shí)現(xiàn)的側(cè)邊欄示例

3.1.5 time元素與微格式

首先來(lái)說(shuō)一下微格式，它是一種利用HTML的class屬性來(lái)對(duì)網(wǎng)頁(yè)添加附加信息的方法，附加信息例如新聞事件發(fā)生的日期和時(shí)間、個(gè)人電話號(hào)碼、企業(yè)郵箱等。

微格式并不是在HTML 5之后才有的，在HTML 5之前它就和HTML結(jié)合使用了，但是在使用過(guò)程中發(fā)現(xiàn)在日期和時(shí)間的機(jī)器編碼上出現(xiàn)了一些問(wèn)題，編碼過(guò)程中會(huì)產(chǎn)生一些歧義。HTML 5增加了一種新的元素來(lái)無(wú)歧義地、明確地對(duì)機(jī)器的日期和時(shí)間進(jìn)行編碼，并且以讓人易讀的方式來(lái)展現(xiàn)它。這個(gè)元素就是time元素。

time元素代表24小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期，表示時(shí)刻時(shí)允許帶時(shí)差。它可以定義很多格式的日期和時(shí)間，如下所示：

<time datetime="2010-11-13">2010年11月13日</time>
<time datetime="2010-11-13">11月13日</time>
<time datetime="2010-11-13">我的生日</time>
<time datetime="2010-11-13T20:00">我生日的晚上8點(diǎn)</time>
<time datetime="2010-11-13T20:00Z">我生日的晚上8點(diǎn)</time>
<time datetime="2010-11-13T20:00+09:00">我生日的晚上8點(diǎn)的美國(guó)時(shí)間</time>

編碼時(shí)機(jī)器讀到的部分在datetime屬性里，而元素的開(kāi)始標(biāo)記與結(jié)束標(biāo)記中間的部分是顯示在網(wǎng)頁(yè)上的。datetime屬性中日期與時(shí)間之間要用“T”文字分隔，“T”表示時(shí)間。請(qǐng)注意倒數(shù)第二行，時(shí)間加上Z文字表示給機(jī)器編碼時(shí)使用UTC標(biāo)準(zhǔn)時(shí)間，倒數(shù)第一行則加上了時(shí)差，表示向機(jī)器編碼另一地區(qū)時(shí)間，如果是編碼本地時(shí)間，則不需要添加時(shí)差。

3.1.6 pubdate屬性

pubdate屬性是一個(gè)可選的、boolean值的屬性，它可以用到article元素中的time元素上，意思是time元素代表了文章（artilce元素的內(nèi)容）或整個(gè)網(wǎng)頁(yè)的發(fā)布日期，pubdate屬性的具體使用方法如代碼清單3-10所示。

代碼清單3-10 pubdate與time結(jié)合使用

<article>
    <header>
        <h1>蘋(píng)果</h1>
        <p>發(fā)布日期
           <time datetime="2010-10-29" pubdate>2010年10月29日</time>
        </p>
    </header>
   <p>蘋(píng)果，植物類水果，多次花果...（"蘋(píng)果"文章正文）</p>
  ...
</article>

你也許會(huì)疑惑為什么需要用到pubdate屬性，為什么不能認(rèn)為time元素就直接表示了文章或網(wǎng)頁(yè)的發(fā)布日期呢？請(qǐng)看代碼清單3-11。

代碼清單3-11 pubdate與time結(jié)合使用

<article>
    <header>
        <h1>關(guān)于<time datetime=2010-10-29>10月29日</time>的舞會(huì)通知</h1>
        <p>發(fā)布日期:
           <time datetime=2010-10-11 pubdate>2010年10月11日</time>
        </p>
    </header>
    <p>大家好:我是法律系3年級(jí)學(xué)生代表,......（關(guān)于舞會(huì)的通知）</p>
</article>

在這個(gè)例子中，有兩個(gè)time元素，分別定義了兩個(gè)日期—一個(gè)是舞會(huì)日期，另一個(gè)是通知發(fā)布日期。由于都使用了time元素，所以需要使用pubdate屬性表明哪個(gè)time元素代表了通知的發(fā)布日期。