# 第 7 章 文檔元素 學習要點： 1.文檔元素總匯 2.文檔元素解析 主講教師：李炎恢 本章主要探討 HTML5?中文檔元素，文檔元素的主要作用是劃分各個不同的內容，讓整個布局清晰明快。讓整個布局元素具有語義，進一步替代 div。? **一．文檔元素總匯文檔元素基本沒有什么實際作用效果，主要目的是在頁面布局時區分各個主題和概念。** | **元素名稱** | **說明** | | --- | --- | | h1~h6 | 表示標題 | | header | 表示首部 | | footer | 表示尾部 | | nav | 表示有意集中在一起的導航元素 | | section | 表示重要概念或主題 | | article | 表示一段獨立的內容 | | address | 表示文檔或 article?的聯系信息 | | aside | 表示與周邊內容少有牽涉的內容 | | hgroup | 將一組標題組織在一起 | | details | 生成一個區域，用戶將其展開可以獲得更多細節 | | summary | 用在 details?元素中，表示該元素內容的標題或說明 | **二．文檔元素解析** 文檔元素的大部分標簽，是沒有任何效果的，完全是為了配合語義使用，以強調它的結構性。只有在后面的章節學習 CSS，配合使用才能起到布局和樣式的效果。 **1.&lt;header&gt;表示首部** ``` <header> 　　這里部分一般是頁面頭部，包括：LOGO、標題、導航等內容 </header> ``` 解釋：&lt;header&gt;元素主要設置頁面的標頭部分。 **2.&lt;footer&gt;表示尾部** ``` <footer> 這里是頁面的尾部，一般包括：版權聲明、友情鏈接等內容 </footer> ``` 解釋：&lt;footer&gt;元素主要設置頁面的尾部。 **3.&lt;h1&gt;~&lt;h6&gt;添加標題** ``` <h1>標題部分</h1> &lt;h4&gt;小標題部分&lt;/h4&gt; ``` 解釋：&lt;h1&gt;~&lt;h6&gt;實際作用就是加粗并改變字體大小。用于各種標題文檔。 **4.&lt;hgroup&gt;組合標題** ``` <hgroup> <h1>標題部分</h1> <h4>小標題部分</h4> </hgroup> ``` 解釋：&lt;hgroup&gt;元素的作用就是當多個標題出現，干擾到一對或多個本身需要整合的標題，這是使用此元素包含群組。 **5.&lt;section&gt;文檔主題** ``` <section> 這里一般是存放文檔主題內容。 </section> ``` 解釋：&lt;section&gt;元素的作用是定義一個文檔的主題內容。 **6.&lt;nav&gt;添加導航** ``` <nav>這里存放文檔的導航</nav> ``` 解釋：&lt;nav&gt;元素給文檔頁面添加一個導航。 **7.&lt;article&gt;添加一個獨立成篇的文檔** ``` <article> <header> <nav></nav> </header> <section></section> <footer></footer> </article> ``` 解釋：&lt;article&gt;元素表示獨立成篇的文檔，里面可以包含頭、尾、主題等一系列內容。在比較大的頁面中會使用到，比如一片博文的列表，每篇博文，都有自己的頭、尾、主題等內容。和此相似的還有論壇的帖子、用戶的評論、新聞等。 **8.&lt;aside&gt;生成注釋欄** ``` <aside>這是是一個注釋</aside> ``` 解釋：&lt;aside&gt;元素專門為某一段內容進行注釋使用。 **9.&lt;address&gt;表示文檔或?article 元素的聯系信息。** ``` <address>聯系信息</address> ``` 解釋：如果是在&lt;body&gt;元素下時，表示整個文檔的聯系信息。如果是在&lt;article&gt;元素下時，表示其下的聯系信息。 **10.&lt;details&gt;元素生成詳情區域、&lt;summary&gt;元素在其內部生成說明標簽** 解釋：由于大多數主流瀏覽器尚未支持，暫略。