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