（一）HTML5 添加的一些新標(biāo)簽：
<section>, <video>, <progress>, <nav>, <meter>, <time>, <aside>, <canvas>- 作用：更加的語義化
（二）新的布局頁面展示：
- 代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<article>
<section>section</section>
</article>
<aside>aside</aside>
<footer>footer</footer>
</body>
</html>
（三）HTML5標(biāo)簽詳解
- <section>——對內(nèi)容進(jìn)行分塊,分段
-
section表示一段專題性的內(nèi)容，一個section元素通常由內(nèi)容以及標(biāo)題組成。 - 例如：文章分段等
- 代碼示例：
<section>
<h1>潛行者m的個人介紹</h1>
<p>潛行者m是一個男的中國人枫耳。蠢正。滋早。岭参。豌熄。昆码。</p>
</section>
- note：
相鄰的section元素的內(nèi)容應(yīng)當(dāng)是相關(guān)的顷歌，而不是像article那樣獨立
- <article>——代表一個獨立的锰蓬、完整的相關(guān)內(nèi)容塊
- 當(dāng)我們描述一件具體的事物的時候，通常鼓勵使用
article眯漩，而不是section芹扭。
- 例如：博客中的一篇文章，論壇中的一個帖子等,
article中通常包含頭部（header）赦抖、底部（footer） - 代碼示例：
<article>
<header>
<h1>潛行者m的個人介紹</h1>
</header>
<p>潛行者m是一個男的中國人舱卡。。队萤。轮锥。。</p>
<footer>
<p>潛行者m版權(quán)所有</p>
</footer>
</article>
note：
特殊的section標(biāo)簽要尔，它比section的語義更明確<nav>——頁面導(dǎo)航的鏈接組
代碼示例：
<nav>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>
- <aside>——用來呈現(xiàn)非正文的內(nèi)容舍杜，是頁面里一個單獨的部分
- 它包含的內(nèi)容與頁面的主要內(nèi)容是分開的，可以被刪除盈电，而不會影響到網(wǎng)頁的內(nèi)容蝴簇、章節(jié)或是頁面所要傳達(dá)的信息
- 例如：廣告，側(cè)邊欄
- 代碼示例：
<aside>
<h1>作者簡介</h1>
</aside>
- <header>——定義文檔的頁眉匆帚，通常是一些導(dǎo)航信息
- 它不局限于寫在網(wǎng)頁頭部，也可以寫在網(wǎng)頁內(nèi)容里
- 代碼示例：
<header>
<hgroup>
<h1>網(wǎng)站標(biāo)題</h1>
</hgroup>
</header>
note：
通常header標(biāo)簽至少包含一個標(biāo)題標(biāo)記h1-h6,還可以包括hgroup,table,search,nav等<footer>——定義section或document的頁腳
- 例如：文章的作者或者日期
- 代碼示例：
<footer> 頁腳信息</footer>
- note：
它和header標(biāo)簽使用基本一樣旁钧，可以在一個頁面中多次使用
-
<hgroup>——是對標(biāo)題元素
h1-h6進(jìn)行組合- 例如：可以用
hgroup將連續(xù)的h標(biāo)簽括起來
- 例如：可以用
- 代碼示例：
<hgroup>
<h1>這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章</h1>
<h2>HTML 5的革新</h2>
<h6>...</h6>
</hgroup>
-
<figure>——用于對元素進(jìn)行組合
- 多用于圖片與圖片描述組合
- 代碼示例：
<figure>
[站外圖片上傳中……(2)]
<figcaption>這兒是圖片的描述信息</figcaption>
</figure>
（四）吸重、article與section的詳解
-
區(qū)別：
article 元素更強調(diào)獨立性、完整性歪今，section 更強調(diào)相關(guān)性嚎幸。
-
聯(lián)系：
-
section和article可以互相嵌套，也就是說他們沒有上下級關(guān)系寄猩，section可以包含article嫉晶，article也可以包含section
-
代碼示例：
<article>
<header>
<h1>潛行者m的個人介紹</h1>
</header>
<p>潛行者m是一個中國男人，是一個帥哥田篇。替废。。泊柬。</p>
<section>
<h2>評論</h2>
<article>
<h3>評論者：潛行者n</h3>
<p>確實椎镣，m同學(xué)真的很帥</p>
</article>
<article>
<h3>評論者：潛行者a</h3>
<p>M今天吃藥了沒？</p>
</article>
</section>
</article>
-
article兽赁、section 與 div 的區(qū)別
article状答、section是用來劃分區(qū)域的冷守，但是我們也不可以用article、section來取代div用來布局網(wǎng)頁惊科，這樣做拍摇，就相當(dāng)于用ul來打造表格table一樣div的用處就是用來布局網(wǎng)頁，劃分大的區(qū)域馆截，但在不同的內(nèi)容塊中充活，我們需要按照需求添加article、section等內(nèi)容塊孙咪，并且顯示其中的內(nèi)容堪唐，這樣才是合理的使用這些元素-
使用
section標(biāo)簽需要注意的地方 不要將
section作為用來設(shè)置樣式或行為，那是div的工作如果
article,aside,nav更符合狀況翎蹈，不要使用section不要為沒有標(biāo)題的內(nèi)容區(qū)塊使用
section
參考文章推薦：
