第3章 HTML 5的結構

在HTML 5對HTML 4所做的各方面修改中，一個比較重大的修改就是為了使文檔結構更加清晰明確，容易閱讀，增加了很多新的結構元素。本章詳細介紹這些新增的結構元素，涉及它們的定義、使用方法以及使用示例，最后再介紹一下在HTML 5中，究竟怎樣將這些新增的結構元素結合使用。

學習內容：

?掌握HTML 5中新增的主體結構元素的定義以及使用方法、使用場合。新增的主體結構元素包括article元素、section元素、nav元素以及aside元素。

?掌握HTML 5中新增的非主體結構元素的定義以及使用方法、使用場合。新增的非主體結構元素包括header元素、hgroup元素、footer元素以及address元素。

?掌握在HTML 5中應該怎樣結合運用這些新增結構元素來合理編排頁面總體布局，掌握什么是顯式編排，什么是隱式編排，HTML 5分析器是按什么原則來分析頁面結構的，以及怎樣對這些新增元素使用CSS樣式。

3.1 新增的主體結構元素

在HTML 5中，為了使文檔的結構更加清晰明確，追加了幾個與頁眉、頁腳、內容區塊等文檔結構相關聯的結構元素。需要說明的是，本章所講的內容區塊是指將HTML頁面按邏輯進行分割后的單位。例如，對書籍來說，章、節都可以稱為內容區塊；對博客網站來說，導航菜單、文章正文、文章的評論等每一個部分都可稱為內容區塊。

接下來將詳細講解HTML 5在頁面的主體結構方面新增加的結構元素。

3.1.1 article元素

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

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

現在，以博客為例來看一段關于article元素的代碼示例，如代碼清單3-1所示。

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

    ＜article＞
        ＜header＞
            ＜h1＞蘋果＜/h1＞
            ＜p＞發表日期: ＜time pubdate="pubdate"＞2010/10/09＜/time＞＜/p＞
        ＜/header＞
        ＜p＞＜b＞蘋果＜/b＞ ,植物類水果,多次花果...("蘋果"文章正文)＜/p＞
        ＜footer＞
            ＜p＞＜small＞著作權歸＊＊＊公司所有。＜/small＞＜/p＞
        ＜/footer＞
    ＜/article＞

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

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

接下來看一個關于article元素嵌套的代碼示例，如代碼清單3-2所示。

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

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

這個示例中的內容比代碼清單3-1中的內容更加完整，它添加了文章讀者的評論內容，整體內容還是比較獨立、完整的，因此對其使用article元素。具體來說，該部分內容又分為幾部分，把文章標題放在header元素中，把文章正文放在header元素后面的p元素中，然后用section元素把正文與評論部分進行區分。后面馬上會介紹section元素，它是一個分塊元素，用來對頁面中的內容進行分塊，在section元素中嵌入評論的內容，評論中有幾個人的評論，每個人的評論部分相對來說又是比較獨立、完整的，因此對它們都使用一個article元素，在評論的article元素中，又可以分為標題與評論內容部分，分別放在header元素與p元素中。

關于示例中提到的time元素與pubdate屬性，可查看本節結尾處關于time元素與pubdate屬性的說明。

另外，article元素也可以用來表示插件，它的作用是使插件看起來好像內嵌在頁面中一樣。以下為它的一個示例，如代碼清單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元素用來對網站或應用程序中頁面上的內容進行分塊，一個section元素通常由內容及其標題組成。但section元素并非一個普通的容器元素；當一個容器需要直接定義樣式或通過腳本定義行為時，推薦使用div元素而非section。

我們可以這樣理解：section元素中的內容可以單獨存儲到數據庫中或輸出到word文檔中。以下為它的一個示例（注意，標題部分位于它的內部，而不是它的前面），如代碼清單3-4所示。

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

    ＜section＞
        ＜h1＞蘋果＜/h1＞
        ＜p＞＜b＞蘋果＜/b＞ ,植物類水果,多次花果...("蘋果"文章正文)＜/p＞
    ＜/section＞

通常不推薦為那些沒有標題的內容使用section，可以使用HTML 5輪廓工具來檢查頁面中是否有不包含標題部分的section，HTML 5輪廓工具的網址為“http：//gsnedders.html5. org/outliner/”，如果使用該工具進行檢查后，會看見對于某個section的說明中有“untitiled section”（沒有標題的section）文字，這個section就有可能使用不當（但是nav元素或aside元素沒有標題是合理的）。

section元素的作用是對頁面上的內容進行分塊，或者說對文章進行分段，不要將它與表示“有著自己的完整的、獨立的內容”的article元素混淆。

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

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

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

    ＜article＞
        ＜h1＞蘋果＜/h1＞
        ＜p＞＜b＞蘋果＜/b＞ ,植物類水果,多次花果...＜/p＞
        ＜section＞
            ＜h2＞紅富士＜/h2＞
            ＜p＞紅富士是從普通富士的芽(枝)變中選育出的著色系富的統稱...＜/p＞
        ＜/section＞
        ＜section＞
            ＜h2＞國光＜/h2＞
            ＜p＞國光蘋果品,又名小國光、萬壽。原產美國,1600年發現的偶然實生苗...＜/p＞
        ＜/section＞
    ＜/article＞

代碼清單3-5中的內容首先是一段獨立的、完整的內容，因此使用article元素。該內容是一篇關于蘋果的文章，該文章分為3段，每一段都有一個獨立的標題，因此使用了兩個section元素。記住，對文章分段的工作也是使用section元素完成的。這里有人會問，為什么沒有對第一段使用section元素，其實是可以使用section元素的，但是由于這里的結構比較清晰，分析器是可以識別第一段內容在一個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＞香蕉,屬于芭蕉科芭蕉屬植物,又指其果實,熱帶地區廣泛栽培食用...＜/p＞
        ＜/article＞
    ＜/section＞

這個示例比前面的示例復雜了一些，首先，它是一篇文章中的一段，因此沒有使用article元素。但是，在這一段中，可以分為幾塊獨立的內容，因此嵌入了幾個獨立的article元素。

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

另外再補充一點，在HTML 5中，可以將所有頁面的從屬部分，譬如導航條、菜單、版權說明等包含在一個統一的頁面中，以便統一使用CSS樣式進行裝飾。

最后，關于section元素的使用禁忌總結如下：

?不要將section元素用作設置樣式的頁面容器，因為那是div元素的工作。

?如果article元素、aside元素或nav元素更符合狀況，不要使用section元素。

?不要為沒有標題的內容區塊使用section元素。

3.1.3 nav元素

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

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

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

    ＜body＞
    ＜h1＞技術資料＜/h1＞
    ＜nav＞
        ＜ul＞
            ＜li＞＜a href="/"＞主頁＜/a＞＜/li＞
            ＜li＞＜a href="/events"＞開發文檔＜/a＞＜/li＞
            ...more...
        ＜/ul＞
    ＜/nav＞
    ＜article＞
        ＜header＞
            ＜h1＞HTML 5與CSS 3的歷史＜/h1＞
            ＜nav＞
                ＜ul＞
                    ＜li＞＜a href="#HTML5"＞HTML 5的歷史＜/a＞＜/li＞
                    ＜li＞＜a href="#CSS3"＞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＞版權所有：陸凌牛＜/small＞＜/p＞
    ＜/footer＞
    ＜/body＞

在這個例子中，第一個nav元素用于頁面導航，將頁面跳轉到其他頁面上（跳轉到網站主頁或開發文檔目錄頁面）；第二個nav元素被放置在article元素中，用來實現在這篇文章中的兩個組成部分的頁內導航。

具體來說，nav元素可以用在以下場合：

?傳統導航條

現在主流網站上都有不同層級的導航條，用來將當前畫面跳轉到網站的其他主要頁面。可以用nav元素實現導航條。

?側邊欄導航

現在主流博客網站及商品網站上都有側邊欄導航，用來將頁面從當前文章或當前商品跳轉到其他文章或其他商品頁面。可以用nav元素實現側邊欄導航。

?頁內導航

可以用nav元素實現頁內導航，用來在本頁面幾個主要組成部分之間跳轉。

?翻頁操作

nav元素可以用在多個頁面的前后頁或博客網站的前后篇文章的滾動中。

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

注意，在HTML 5中不要用menu元素代替nav元素。過去很多Web應用程序的開發人員喜歡用menu元素進行導航，有必要再次強調的是，menu元素是被用在一系列發出命令的菜單上的，是一種交互性的元素，或者更確切地說是使用在Web應用程序中的。

3.1.4 aside元素

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

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

1）包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料、名詞解釋等。

這部分代碼如代碼清單3-8所示。

代碼清單3-8 文章內部的aside元素示例

    ＜!DOCTYPE html＞
    ＜head＞
    ＜meta charset="utf-8"＞
    ＜title＞aside元素示例＜/title＞
    ＜/head＞
    ＜body＞
    ＜header＞
        ＜h1＞F#入門＜/h1＞
    ＜/header＞
    ＜article＞
        ＜h1＞第四節 詞法閉包＜/h1＞
        ＜p＞lambda表達式可以創建詞法閉包...(文章正文)＜/p＞
        ＜aside＞
            ＜!-- 因為這個aside元素被放置在一個article元素內部,
            所以分析器將這個aside元素的內容理解成是和article元素的內容相關聯的。 --＞
            ＜h1＞名詞解釋＜/h1＞
            ＜dl＞
                ＜dt＞F#＜/dt＞
                ＜dd＞F#為.Net2010中引入的新型函數型編程語言＜/dd＞
            ＜/dl＞
            ＜dl＞
                ＜dt＞詞法閉包＜/dt＞
                ＜dd＞詞法閉包是指,將創建lambda表達式時的環境保存起來...(詳細解釋)＜/dd＞
            ＜/dl＞
        ＜/aside＞
    ＜/article＞
    ＜/body＞

程序運行結果如圖3-1所示。

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

2）在article之外元素使用，作為頁面或站點全局的附屬信息部分。最典型的形式是側邊欄，其中的內容可以是友情鏈接、博客中其他文章列表或廣告單元等。

下面這個示例為標準博客網頁中一個側邊欄的示例，示例中的“IT新技術”為博客的名稱，如代碼清單3-9所示。

代碼清單3-9 側邊欄示例

    ＜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="#"＞恭喜！您已經成功開通了博客＜/a＞
                ＜/li＞
            ＜/ul＞
        ＜/nav＞
    ＜/aside＞

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

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

3.1.5 time元素與微格式

首先來說一下微格式，它是一種利用HTML的class屬性來對網頁添加諸如新聞事件發生的日期和時間、個人電話號碼、企業郵箱之類的附加信息的方法。

微格式并不是在HTML 5之后才有的，在HTML 5之前它就和HTML結合使用了，但是使用過程中在日期和時間的機器編碼上出現了一些問題，編碼過程中會產生一些歧義。HTML 5增加了一種新的元素來無歧義地、明確地對機器編碼日期和時間，并且以讓人易讀的方式來展現。這個元素就是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屬性里，而元素的開始標記與結束標記中間的部分顯示在網頁上。datetime屬性中日期與時間之間要用“T”文字分隔，“T”表示時間。注意倒數第二行，時間加上Z字母表示對機器編碼時使用UTC標準時間，倒數第一行則加上了時差，表示向機器編碼另一地區時間，如果是編碼本地時間，則不需要添加時差。

3.1.6 pubdate屬性

putdate屬性是一個可選的boolean值的屬性，它可以被應用到article元素中的time元素上，意思是time元素代表了文章（artilce元素的內容）或整個網頁的發布日期，putdate屬性的具體使用方法如代碼清單3-10所示。

代碼清單3-10 putdate與time結合使用（一）

    ＜article＞
        ＜header＞
            ＜h1＞蘋果＜/h1＞
            ＜p＞發布日期
                ＜time datetime="2010-10-29" pubdate＞2010年10月29日＜/time＞
            ＜/p＞
        ＜/header＞
        ＜p＞蘋果,植物類水果,多次花果...("蘋果"文章正文)＜/p＞
        ...
    ＜/article＞

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

代碼清單3-11 putdate與time結合使用（二）

    ＜article＞
        ＜header＞
            ＜h1＞關于＜time datetime=2010-10-29＞10月29日＜/time＞的舞會通知＜/h1＞
            ＜p＞發布日期:
                ＜time datetime=2010-10-11 pubdate＞2010年10月11日＜/time＞
            ＜/p＞
        ＜/header＞
        ＜p＞大家好:我是法律系3年級學生代表,......(關于舞會的通知)＜/p＞
    ＜/article＞

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

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 ＞
          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 ＞關于我＜/a＞＜/li＞
    ＜/nav＞
    ＜/header＞

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

3.2.2 footer元素

footer元素可以作為其上層父級內容區塊或一個根區塊的腳注。footer通常包括其相關區塊的腳注信息，如作者、相關閱讀鏈接以及版權信息等。

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

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

    ＜div id="footer"＞
        ＜ul＞
            ＜li＞版權信息＜/li＞
            ＜li＞站點地圖＜/li＞
            ＜li＞聯系方式＜/li＞
        ＜/ul＞
    ＜div＞

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

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

    ＜footer＞
        ＜ul＞
            ＜li＞版權信息＜/li＞
            ＜li＞站點地圖＜/li＞
            ＜li＞聯系方式＜/li＞
        ＜/ul＞
    ＜/footer＞

與header元素一樣，一個頁面中也不限制只可以用一個footer元素。同時，可以為article元素或section元素添加footer元素，來看下面兩個示例。

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

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

    ＜article＞
        文章內容
        ＜footer＞
            文章的腳注
        ＜/footer＞
    ＜/article＞

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

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

    ＜section＞
        分段內容
        ＜footer＞
            分段內容的腳注
        ＜/footer＞
    ＜/section＞

3.2.3 address元素

address元素用來在文檔中呈現聯系信息，包括文檔作者或文檔維護者的名字、文檔作者或文檔維護者的網站鏈接、電子郵箱、真實地址、電話號碼等。address應該不只是用來呈現電子郵箱或真實地址，還可以用來展示跟文檔相關的聯系人的所有聯系信息。譬如，代碼清單3-18中展示了一些博客中某篇文章評論者的名字及其在博客中的網址鏈接。

代碼清單3-18 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＞白權立＜/a＞
    ＜/address＞

下面通過代碼清單3-19來查看如何結合使用footer元素、time元素與address元素。

代碼清單3-19 footer、time與address結合使用

    ＜footer＞
        ＜div＞
            ＜address＞
              ＜a title="文章作者：陸凌牛"＞陸凌牛＜/a＞
            ＜/address＞
            發表于＜time datetime="2010-10-04"＞2010年10月4日＜/time＞
        ＜/div＞
    ＜/footer＞

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

3.2.4 main元素

main元素表示網頁中的主要內容。主內容區域指與網頁標題或應用程序中本頁面主要功能直接相關或進行擴展的內容。該區域應該為每一個網頁中所特有的內容，不能包含整個網站的導航條、版權信息、網站LOGO、公共搜索表單等整個網站內部的共同內容。

每個網頁內部只能放置一個main元素。不能將main元素放置在任何article、aside、footer、header或nav元素內部。

注意，由于main元素不對頁面內容進行分區或分塊，所以不會對下文所要描述的網頁大綱產生任何影響。

main元素的一個使用示例如代碼清單3-20所示。

代碼清單3-20 main元素的使用示例

    ＜!DOCTYPE html＞
    ＜html＞
    ＜head＞
    ＜title＞2022年夏季 畢業典禮＜/title＞
    ＜/head＞
    ＜body＞
        ＜header＞
            ＜nav＞
                ＜ul＞
                    ＜li＞＜a href="courses.html"＞課程＜/a＞＜/li＞
                    ＜li＞＜a href="fees.html"＞學費＜/a＞＜/li＞
                    ＜li＞＜a＞畢業＜/a＞＜/li＞
                ＜/ul＞
            ＜/nav＞
        ＜/header＞
        ＜main＞
            ＜h1＞畢業＜/h1＞
            ＜nav＞
                ＜ul＞
                    ＜li＞＜a href="#ceremony"＞典禮＜/a＞＜/li＞
                    ＜li＞＜a href="#graduates"＞畢業生＜/a＞＜/li＞
                    ＜li＞＜a href="#awards"＞表彰＜/a＞＜/li＞
                ＜/ul＞
            ＜/nav＞

            ＜H2 id="ceremony"＞典禮＜/H2＞
            ＜p＞入場儀式＜/p＞
            ＜p＞畢業生代表發言＜/p＞
            ＜p＞學生會主席發言＜/p＞
            ＜p＞頒發畢業證書＜/p＞
            ＜p＞校長總結發言＜/p＞

            ＜h2 id="graduates"＞畢業生＜/h2＞
            ＜ul＞
                ＜li＞Eileen Williams＜/li＞
                ＜li＞Andy Maseyk＜/li＞
                ＜li＞Blanca Sainz Garcia＜/li＞
                ＜li＞Clara Faulkner＜/li＞
                ＜li＞Gez Lemon＜/li＞
                ＜li＞Eloisa Faulkner＜/li＞
            ＜/ul＞

            ＜h2 id="awards"＞表彰＜/h2＞
            ＜ul＞
                ＜li＞Clara Faulkner＜/li＞
                ＜li＞Eloisa Faulkner＜/li＞
                ＜li＞Blanca Sainz Garcia＜/li＞
            ＜/ul＞
        ＜/main＞
        ＜footer＞ Copyright 2012 常州市玉凌軟件＜/footer＞

    ＜/body＞
    ＜/html＞

3.3 HTML 5中網頁結構

前面兩節詳細介紹了在HTML 5中具體新增了哪些結構元素以及這些元素的定義和使用方法。在HTML 5中，可以使用這些結構元素來編排一份網頁大綱，通過該網頁大綱，我們可以一目了然地知道網頁中具有哪些內容，網頁中以什么樣的結構形式來組織這些內容。

3.3.1 HTML 5中的大綱

在Word文檔中，一份文檔的大綱如下所示：

HTML 5網頁文檔中的大綱也基本如此，只不過使用不同的結構元素進行表達而已。換句話說，在HTML 5中，使用各種結構元素所描述出來的整個網頁的層次結構，就是該網頁的大綱。因此，在組織這份大綱的時候，不能使用div元素，因為div元素只能當作容器，用在需要對網頁中某個局部使用整體樣式時。

許多工具可以對HTML 5的網頁文檔進行分析，然后將該文擋中的大綱以可視化的形式展現出來。http：//gsnedders.html5.org/outliner/網站中就有一個文檔大綱分析器，可以針對代碼清單3-21中所示文檔進行分析，分析結果如圖3-4所示。

代碼清單3-21 大綱分析工具測試用代碼

    ＜!DOCTYPE html＞
    ＜head＞
    ＜meta charset="UTF-8"＞
    ＜title＞大綱分析＜/title＞
    ＜/head＞
    ＜section＞
        ＜h1＞HTML5的基礎知識＜/h1＞
        ＜section＞
            ＜h2＞HTML5概述＜/h2＞
            (正文)
            ＜section＞
                ＜h3＞HTML5是什么？＜/h3＞
                (正文)
            ＜/section＞
            ＜section＞
                ＜h3＞HTML5中的新增API＜/h3＞
                (正文)
            ＜/section＞
        ＜/section＞
        ＜section＞
            ＜h2＞HTML5快速入門＜/h2＞
            (正文)
            ＜section＞
                ＜h3＞HTML與XHTML＜/h3＞
                (正文)
            ＜/section＞
        ＜/section＞
    ＜/section＞

圖3-4中出現“1.Untitled Section”，是由于該網頁文檔中第一個元素即為section元素，缺乏整個網頁標題元素。加入標題元素（＜h1＞元素），將代碼清單3-21中的代碼修改為代碼清單3-22所示的代碼，分析出來的大綱如圖3-5所示。

代碼清單3-22 添加了header元素后的大綱分析工具測試用代碼

    ＜!DOCTYPE html＞
    ＜head＞
    ＜meta charset="UTF-8"＞
    ＜title＞大綱分析＜/title＞
    ＜/head＞
    ＜h1＞HTML5的基礎知識＜/h1＞
    ＜section＞
        ＜h2＞HTML5概述＜/h2＞
        (正文)
        ＜section＞
            ＜h3＞HTML5是什么？＜/h3＞
            (正文)
        ＜/section＞
        ＜section＞
            ＜h3＞HTML5中的新增API＜/h3＞
            (正文)
        ＜/section＞
    ＜/section＞
    ＜section＞
        ＜h2＞HTML5快速入門＜/h2＞
        (正文)
        ＜section＞
            ＜h3＞HTML與XHTML＜/h3＞
            (正文)
        ＜/section＞
    ＜/section＞

看到這里，你也許會問，如果光加一個＜h1＞元素，就可以分析出標題來，那么還需要header元素干什么？答案是h1元素一般用來顯示文字標題。事實上，在要定義為網頁標題的整個內容中，往往并不只是顯示一段文字而已，其中還包括了大量的導航條、企業LOGO圖片、廣告f lash等，這些內容都可以放在一個header元素中，作為整個網頁標題的內容，而標題文字為h1元素中的文字，在大綱中顯示該標題文字。但是，這里要說明的是，header元素本身的作用不是被用來生成大綱的，大綱是依靠header元素中的h1～h6元素來生成的，如使用代碼清單3-23中的代碼生成的大綱如圖3-6所示。

代碼清單3-23 在企業網站中使用圖片來顯示企業名稱

    ＜!DOCTYPE html＞
    ＜head＞
    ＜meta charset="UTF-8"＞
    ＜title＞企業網站＜/title＞
    ＜/head＞
      ＜header＞
        ＜img src="title.jpg" alt="用來顯示企業名稱的圖片"＞
    ＜/header＞
    ＜section＞
        ＜h2＞企業描述＜/h2＞
        (正文)
    ＜/section＞

這里會產生這樣一個問題，在很多企業網站（或其他網站）中，企業的標題并不是以文字來顯示的，而是為了視覺效果，放在圖片中顯示的。難道這種情況就不能生成大綱了嗎？筆者認為，這里有個小技巧，在header元素中，使用如下代碼，既可以用圖片來顯示企業名稱，又可以生成大綱。

    ＜header＞
        ＜h1＞＜img src="title.jpg" alt="企業名稱"＞＜/h1＞
    ＜/header＞

在header元素中使用這段代碼后，生成的大綱如圖3-7所示。

與header元素相同，footer元素中如果沒有標題元素（h1～h6元素）也不用于生成大綱。

在代碼清單3-21或代碼清單3-23中的代碼底部追加如下代碼，生成的大綱將不會有任何變化。

    ＜footer＞
        版權所有：陸凌牛
    ＜/footer＞

另外，對nav元素與aside元素來說，如果不在元素內部加入標題元素（h1～h6元素），生成大綱時會在該元素所在位置處添加一個“Untitled Section”的說明文字，但是根據HTML 5的開發文檔記載，nav元素的作用為存放一組鏈接組，aside元素的作用為表示當前頁面或文章的附屬信息部分，允許不在這兩個元素中添加標題，也就是說，大綱中存在對這兩個元素的內容為“Untitled Section”的說明文字是合理的。

在代碼清單3-21的代碼底部添加如下代碼，生成的大綱如圖3-8所示。

    ＜nav＞
        ＜ul＞
            ＜li＞＜a href="#"＞鏈接測試1＜/a＞＜/li＞
            ＜li＞＜a href="#"＞鏈接測試2＜/a＞＜/li＞
        ＜/ul＞
    ＜/nav＞
    ＜aside＞
        側邊欄中的內容
    ＜/aside＞

另外，在HTML 5中，body元素、blockquote元素、fieldset元素、td元素、details元素及figure元素稱為節根（sectioning root）元素。這些元素的共同特征是擁有自己獨立的大綱，并且這些元素內的section元素、article元素、標題元素（h1～h6元素）、nav元素以及aside元素等，只用于生成其父元素的大綱時，而不用于生成父元素的上層祖先元素的大綱時。

在代碼清單3-24中，blockquote元素內部有一個h1元素，正是因為這個h1元素是位于節根元素blockquote元素內部的，所以在針對blockquote元素的父元素body元素生成頁面大綱時，該h1元素并沒有顯示在大綱中，如圖3-9所示。

代碼清單3-24 針對body元素生成大綱時節根元素中的子元素不起作用

    ＜!DOCTYPE html＞
    ＜meta charset="UTF-8"＞
    ＜body＞
    ＜h1＞網頁標題＜/h1＞
    ＜blockquote＞
    ＜h1＞節根元素內部標題＜/h1＞
    ＜/blockquote＞
    ＜/body＞

3.3.2 大綱的編排規則

關于內容區塊的編排，可以分為顯式編排與隱式編排兩種方式。

1. 顯式編排內容區塊

顯式編排是指明確使用section等元素創建文檔結構，在每個內容區塊內使用標題（h1～h6、hgroup等），如代碼清單3-25所示。

代碼清單3-25 顯式編排內容區塊示例

    ＜body＞
        ＜h1＞網頁級內容區塊標題＜/h1＞
        ＜p＞網頁級內容區塊的正文＜/p＞
        ＜section＞
            ＜h2＞section級內容區塊的標題＜/h2＞
            ＜p＞section級內容區塊的正文＜/p＞
        ＜/section＞
    ＜/body＞

2. 隱式編排內容區塊

所謂隱式編排，是指不明確使用section等元素，而是根據頁面中所書寫的各級標題（h1～h6、hgroup）等自動創建各級內容區塊。因為HTML 5分析器只要看到書寫了某個級別的標題，就會判斷存在相對應的內容區塊。代碼清單3-26為一個隱式編排內容區塊的示例。

代碼清單3-26 隱式編排內容區塊示例

    ＜body＞
        ＜h1＞網頁級內容區塊標題＜/h1＞
        ＜p＞網頁級內容區塊的正文＜/p＞
        ＜!--分析器根據h2等元素判斷生成內容區塊--＞
        ＜h2＞section級內容區塊的標題＜/h2＞
        ＜p＞section級內容區塊的正文＜/p＞
    ＜/body＞

將這兩種編排方式進行對比，很明顯，顯式編排更加清晰明確、易讀。

3. 標題分級

不同標題之間是有級別的，h1的級別最高，h6的級別最低。隱式編排時按如下規則自動生成內容區塊。

?如果新出現的標題比上一個標題級別低，生成下級內容區塊。

?如果新出現的標題比上一個標題級別高或級別相等，生成新的內容區塊。

第一條規則的示例與前面一樣，現在我們來看關于第二條規則的示例，如代碼清單3-27所示。

代碼清單3-27 第二條規則示例

    ＜body＞
    ＜section＞
        ＜h2＞section級別的內容區塊的標題＜/h2＞
        ＜p＞section級別的內容區塊的正文＜/p＞
        ＜!—因為下面的標題級別比上一個標題級別高,所以自動創建新的內容區塊 --＞
        ＜h1＞新的section級別的內容區塊的標題＜/h1＞
        ＜p＞新的section級別的內容區塊的正文＜/p＞
    ＜/section＞
    ＜/body＞

如果把上一個示例改成顯式編排，代碼如代碼清單3-28所示。

代碼清單3-28 第二條規則的顯式編排示例

    ＜body＞
    ＜section＞
        ＜h2＞section級別的內容區塊的標題＜/h2＞
        ＜p＞section級別的內容區塊的正文＜/p＞
    ＜/section＞
    ＜section＞
        ＜h1＞新的section級別的內容區塊的標題＜/h1＞
        ＜p＞新的section級別的內容區塊的正文＜/p＞
    ＜/section＞
    ＜/body＞

因為隱式編排容易讓自動生成的整個文檔結構與所想要的文檔結構不一樣，而且也容易引起文檔結構混亂，所以盡量使用顯式編排。

4. 不同的內容區塊可以使用相同級別的標題

另外，不同的內容區塊可以使用相同級別的標題。例如，父內容區塊與子內容區塊可以使用相同級別的標題h1。這樣做的好處是，每個級別的標題都可以單獨設計，如果既需要“整個網頁的標題”，又需要“文章的標題”（譬如書寫文檔時），這樣做將會帶來很大的便利性，如同代碼清單3-29所示。

代碼清單3-29 不同的內容區塊可以使用相同級別的標題

    ＜body＞
    ＜h1＞網頁的標題＜/h1＞
    ＜article＞
        ＜header＞
            ＜hgroup＞
                ＜h1＞文章標題＜/h1＞
                ＜h2＞文章子標題＜/h2＞
            ＜/hgroup＞
            ＜p＞文章正文＜/p＞
        ＜/header＞
    ＜/article＞
    ＜/body＞

5. 網頁編排示例

基于以上講解過的知識點，我們來看應該怎樣編排網頁的內容。代碼清單3-30為一個標準博客網頁的示例，這個示例具備一個標準博客網頁的基本要素，只缺少為了使用樣式而補充添加的div元素。

代碼清單3-30 網頁編排示例

    ＜!DOCTYPE html＞
    ＜head＞
      ＜title＞網頁編排示例＜/title＞
      ＜meta charset="UTF-8"＞
    ＜/head＞
    ＜body＞
    ＜!-- 網頁標題 --＞
    ＜header＞
        ＜h1＞網頁標題＜/h1＞
        ＜!-- 網站導航鏈接 --＞
        ＜nav＞
            ＜ul＞
                ＜li＞＜a href="index.html"＞首頁＜/a＞＜/li＞
                ＜li＞＜a href="help.html"＞幫助＜/a＞＜/li＞
            ＜/ul＞
        ＜/nav＞
    ＜/header＞
    ＜!-- 文章正文 --＞
    ＜article＞
        ＜hgroup＞
            ＜h1＞文章主標題＜/h1＞
            ＜h2＞文章子標題＜/h2＞
        ＜/hgroup＞
        ＜p＞文章正文＜/p＞
        ＜!--文章評論 --＞
        ＜section class="comments"＞
            ＜article＞
                ＜h1＞評論標題＜/h1＞
                ＜p＞評論正文＜/p＞
            ＜/article＞
        ＜/section＞
    ＜/article＞
    ＜!-- 版權信息 --＞
    ＜footer＞
        ＜small＞版權所有：陸凌牛＜/small＞
    ＜/footer＞
    ＜/body＞

這個示例使用了嵌套artilce元素的方式，將關于評論的article元素嵌套在主article元素中，在HTML 5中，推薦使用這種嵌套article元素的方式。

3.3.3 對新的結構元素使用樣式

因為很多瀏覽器尚未對HTML 5中新增的結構元素提供支持，我們無法知道客戶端使用的瀏覽器是否支持這些元素，所以需要使用CSS追加如下聲明，目的是通知瀏覽器頁面中使用的HTML 5中新增元素都是以塊方式顯示的，如下所示。

    // 追加block聲明
    article, aside, dialog, figure, footer, header, legend, nav, section, main
    {   display: block; }
    // 正常使用樣式
    nav{f loat;left;width:20%;}
    article{f loat:right;width:79%;}

另外，Internet Explorer 8及之前的瀏覽器不支持用CSS的方法來使用這些尚未支持的結構元素，為了在Internet Explorer瀏覽器中也能正常使用這些結構元素，需要使用JavaScript腳本，如下所示。

    // 在腳本中創建元素
    ＜script＞
    document.createElement("header");
    document.createElement("nav");
    document.createElement("article");
    document.createElement("footer");
    document.createElement("main");
    ＜/script＞
    ＜style＞
    // 正常使用樣式
    nav{f loat;left;width:20%;}
    article{f loat:right;width:79%;}
    ＜/style＞

盡管這段JavaScript腳本在其他瀏覽器中是不需要的，但它不會對這些瀏覽器造成什么不良影響。另外，到了Internet Explorer 9之后，這段腳本就不需要了。