第2章 —— HTML 5 的結構

標籤：bsp   參考資料   獨立性   article   自己   完整   其他   沒有   日期   

在HTML 5對HTML 4所做的各方面修改中，一個比較重大的修改就是為了使文檔結構更加的清晰明確，容易閱讀，增加了很多新的結構元素。

（1） 新增的主題結構元素

1. article元素

article元素代表文檔、頁面或應用程式中獨立的、完整的、可以獨自被外部參考的內容。它可以是一篇部落格或報章雜誌中的文章、一片論壇體誒、一段使用者評論或一個獨立的外掛程式。

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

 <article>        <header>            <h1>蘋果</h1>            <p>發表日期：<time>2016-10-29</time></p>        </header>        <p><b>蘋果</b>,植物類水果</p>        <footer>            <p><small>著作權歸羅浩然公司所有。</small></p>        </footer>    </article>

2. section元素

section元素用來對網站或應用程式中頁面上的內容進行分塊，一個section元素通常有內容和標題組成。但section並非是一個普通的容器元素。當一個容器需要直接定義樣式或通過指令碼定義行為是，推薦使用div。

我們也可以這樣理解：section元素中的內容可以單獨儲存到資料庫中或輸出到word文檔中。

通常不推薦為那些沒有標題的內容使用section元素。

我們來看看section和article的區別和聯絡：

<article>        <h1>蘋果</h1>        <section>            <h2>紅富士</h2>            <p>紅富士是容普通富士..</p>        </section>        <section>            <h2>國光</h2>            <p>國光蘋果，又名小國光...</p>        </section>    </article>

該文章每一個部分都有一個獨立的標題，因此使用了兩個section元素。

在HTML 5中，article元素可以看做成特殊的section元素，它比section元素更加強調獨立性。section強調分段或者分塊。具體來說，如果一段內容比較完整、獨立的時候，使用article。而將一塊內容分為幾塊的時候，用section元素進行分段。

3. nav元素

nav元素是一個可以用來作為頁面導航的連結組，其中的導航元素連結到其他頁面或當前頁面的其他部分。

4. aside元素

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

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

② 在article之外使用，作為頁面或網站全域的附屬資訊部分。

（2） 新增的非主體結構元素

1. header元素

header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題，但也可以包含其他內容。

需要強調的一點是，一個頁面不限制只有一個header元素。你可以為每一個內容地區加上一個header。

在HTML5中，一個header元素通常至少要包含一個heading（h1~h6），也可以包括hgroup元素，還可以包含nav。

2. footer元素

footer元素可以作為其上層父級內容地區或一個根區塊的腳註。footer通常包括相關區塊的腳註資訊，如作者、相關訂閱連結以及著作權資訊等。

3. address元素

address元素用來在文檔中呈現聯絡資訊。address應該不只是用來呈現電子郵箱或真真實位址，還可以用來展示跟文檔相關的連絡人的所有聯絡資訊。

4. main元素

main元素表示展示網頁中的主要內容。

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

 

第2章 —— HTML 5 的結構