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　大綱分析工具測試用代碼

圖3-4　在線大綱分析器的分析結果

圖3-4中出現“1.Untitled Section”，是由于該網頁文檔中第一個元素即為section元素，缺乏整個網頁標題元素。加入標題元素（

元素），將代碼清單3-21中的代碼修改為代碼清單3-22所示的代碼，分析出來的大綱如圖3-5所示。

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

圖3-5　加入網頁標題后的頁面大綱

看到這里，你也許會問，如果光加一個

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

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

圖3-6　header元素本身并沒有用來生成大綱

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

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

圖3-7　在header元素中使用圖片來生成大綱

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

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

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

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

圖3-8　在文檔的底部添加nav元素與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元素生成大綱時節根元素中的子元素不起作用

圖3-9　針對body元素生成大綱時節根元素中的子元素不起作用

css HTML5 html

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。