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

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

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

3.1.1 article元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首先來看一個帶有section元素的article元素示例，如代碼清單3-5所示。

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1.3 nav元素

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

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

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

<body>
<h1>技術(shù)資料</h1>
<nav>
    <ul>
        <li><a href="/">主頁</a></li>
        <li><a href="/events">開發(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>

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

具體來說，nav元素可以用于以下這些場合：

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

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

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

3.1.4 aside元素

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

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

1）被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的參考資料、名詞解釋，等等。這部分代碼請看代碼清單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>
        <!-- 因為這個aside元素被放置在一個article元素內(nèi)部，
        所以分析器將這個aside元素的內(nèi)容理解成是和article元素的內(nèi)容相關(guān)聯(lián)的。-->
        <h1>名詞解釋</h1>
        <dl>
            <dt>F#</dt>
            <dd>F#為.Net2010中引入的新型函數(shù)型編程語言</dd>
        </dl>
        <dl>
            <dt>詞法閉包</dt>
            <dd>詞法閉包是指，將創(chuàng)建lambda表達(dá)式時的環(huán)境保存起來...（詳細(xì)解釋）</dd>
        </dl>
    </aside>
</article>
</body>

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

圖3-1 aside元素示例

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

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

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

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

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

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

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

3.1.5 time元素與微格式

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

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

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

<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點</time>
<time datetime="2010-11-13T20:00Z">我生日的晚上8點</time>
<time datetime="2010-11-13T20:00+09:00">我生日的晚上8點的美國時間</time>

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

3.1.6 pubdate屬性

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

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

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

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

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

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

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