標籤：解析 組成 div 外掛程式 資料 指南 tar 而且 導航
HTML5的結構一：新增的主體結構元素
在HTML5中，為了使文檔的結構更加清晰明確，追加了幾個與頁首，頁尾內容區塊等文檔結構相關聯的結構元素。
1.1article元素
article元素代表文檔，頁面或應用程式中獨立的完整的，可以獨自被外部參考的內容，<article> 標籤定義外部的內容。article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯，
另外article元素也可以用來表示一個外掛程式。
<time> 標籤定義日期或時間，或者兩者。pubdate 指示 <time> 元素中的日期 / 時間是文檔（或最近的前輩 <article> 元素）的發布日期
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title></head><body><article> <header> <h1>部落格</h1> <p><time pubdate="pubdate">2017/3/1</time></p> </header> <p><b>我的部落格</b>，我的部落格內容</p> <footer>著作權</footer></article></body></html>View Code
2.section元素
section元素用來對網站或應用程式中頁面上的內容進行分塊，一個section元素通常由內容及其標題組成，但section元素並非一個普通的容器元素，當一個容器需要直接定義樣式或通過指令碼定義行為的時候，最好使用div而不要使用section。
section元素的作用是對頁面內容分塊，或者說是對文章進行分段。
<article><h1>元素分類</h1><section> <h2>article元素</h2> <p>article元素的作用</p></section><section> <h2>section元素</h2> <p>section元素的作用</p></section></article>帶有section元素的article元素樣本
<section><h1>元素分類</h1><article> <h2>article元素</h2> <p>article元素的作用</p></article><article> <h2>section元素</h2> <p>section元素的作用</p></article></section>帶有article元素的section元素樣本
事實上article元素可以看成一種特殊的類的section元素，，它比section元素更強調獨立性，section強調分段，article強調獨立性。
3.nav元素
nav元素是一個可以用來作為頁面導航的連結組，nav用於導航上.
4:aside元素
aside元素用來表示當前頁面或文章的附屬資訊部分，有別於主體內容的部分。其中的內容可以是與當前文章有關的參考資料、名詞解釋；在article元素之外使用，作為頁面或網站全域的附屬資訊部分。
5：time元素
<time>元素表示的是日期定義日期。頁面在解析時，擷取的是屬性“datetime”中的值，而標記之間的內容只是用於顯示在頁面中。<time>元素中的可選屬性“pubdate”表示時間是否為發布日期，它是一個布爾值，該屬性不僅可以用於<time>元素，還可用於<article>元素。
6：header元素
header元素是一種具有引導和導航作用的結構元素，一個網頁內並未限制header元素的個數，可以擁有多個，在HTML 5中，一個header元素通常包括至少一個heading元素（h1-h6)。
<header> <h1>header標籤的使用</h1></header><article> <header> <h1>子標題</h1> </header> <p>內容</p></article>多個header元素的使用
7：footer元素
footer通常包括其相關區塊的腳註資訊，如作者、相關閱讀連結及著作權資訊等。
對這些新增的元素使用css樣式，要聲明這些元素為塊元素。
二：大綱的編排規則關於內容區塊的編排，可以分為“顯式編排”與“隱式編排”兩種方式。
顯式編排
顯式編排是指明確使用section等元素建立文檔結構，在每個內容區塊內使用標題（h1～h6、hgroup等）
隱式編排
所謂隱式編排，是指不明確使用section等元素，而是根據頁面中所書寫的各級標題（h1～h6、hgroup等）把各級內容區塊自動建立出來。
如果新出現的標題比上一個標題層級低，將產生下級內容區塊。
如果新出現的標題比上一個標題層級高，或者兩者的層級相等，將產生新的內容區塊。
因為隱式編排容易使自動產生的整個文檔結構與所想要的文檔結構不一樣，而且也容易引起文檔結構的混亂，所以盡量使用顯式編排。
<section> <h2>隱式編碼</h2> <p>內容</p> <!--因為下面的標題層級比上一個標題層級高，所以自動建立新的內容區塊 --> <h1>內容</h1> <p>內容</p></section><section> <h2>顯式編碼</h2> <p>s內容</p></section><section> <h1>分塊</h1> <p>內容</p></section>View Code
——參考自《HTML5與css3的權威指南》
HTML5新增的結構元素
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
