1、設(shè)計(jì)輔助信息
aside元素用來表示當(dāng)前頁(yè)面或文章的附屬信息部分,它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條以及其他類似的有別于主要內(nèi)容的部分。
使用場(chǎng)景:
(1)作為主要內(nèi)容的附屬信息部分,包含在article元素中,其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的參考資料、名詞解釋等。
(2)作為頁(yè)面或站點(diǎn)全局的附屬信息部分,在article元素之外使用。最典型的形式是側(cè)邊欄,其中的內(nèi)容是友情鏈接,博客中其他文章列表、廣告單元等。
2、設(shè)計(jì)導(dǎo)航信息
nav元素是一個(gè)可以用作頁(yè)面導(dǎo)航的鏈接組,其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分。并不是所有的鏈接組都要被放進(jìn)nav元素,只需要將主要的、基本的鏈接組放進(jìn)nav元素即可。
使用場(chǎng)景:
(1)傳統(tǒng)導(dǎo)航條。常規(guī)網(wǎng)站都設(shè)置有不同層級(jí)的導(dǎo)航條,其作用是將當(dāng)前畫面跳轉(zhuǎn)到網(wǎng)站的其他主要頁(yè)面上去;
(2)側(cè)邊欄導(dǎo)航?,F(xiàn)在主流博客網(wǎng)站及商品網(wǎng)站上都有側(cè)邊欄導(dǎo)航,其作用是將頁(yè)面從當(dāng)前文章或當(dāng)前商品跳轉(zhuǎn)到其他文章或其他商品頁(yè)面上去;
(3)頁(yè)內(nèi)導(dǎo)航。頁(yè)內(nèi)導(dǎo)航的作用是在本頁(yè)面幾個(gè)主要的組成部分之間進(jìn)行跳轉(zhuǎn);
(4)翻頁(yè)操作。翻頁(yè)操作是指在多個(gè)頁(yè)面的前后頁(yè)或博客網(wǎng)站的前后篇文章滾動(dòng)。
3、標(biāo)識(shí)文章
article元素用來表示文檔、頁(yè)面中獨(dú)立的、完整的、可以獨(dú)自被外部引用的部分。它可以是一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶評(píng)論或獨(dú)立的插件等。
一個(gè)article元素通常有它自己的標(biāo)題,一般放在header元素里面,有時(shí)還有自己的腳注。
當(dāng)article嵌套使用的時(shí)候,內(nèi)部的article元素內(nèi)容必須和外部article元素內(nèi)容相關(guān)。
article元素支持HTML5全局屬性。
4、給內(nèi)容分段
section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分區(qū)。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。
使用場(chǎng)景:
通常用section元素為那些有標(biāo)題的內(nèi)容進(jìn)行分段。section元素的作用是對(duì)頁(yè)面上的內(nèi)容分塊處理,如對(duì)文章分段等,相鄰的section元素的內(nèi)容,應(yīng)當(dāng)是相關(guān)的,而不是像article那樣獨(dú)立。
article元素更強(qiáng)調(diào)獨(dú)立性、完整性,section更強(qiáng)調(diào)相關(guān)性。
使用section元素需注意的問題:
(1)不要將section元素當(dāng)作設(shè)置樣式的頁(yè)面容器,對(duì)于此類操作應(yīng)該使用div元素實(shí)現(xiàn);
(2)如果article元素、aside元素或nav元素更符合使用條件,不要使用section元素;
(3)不要為沒有標(biāo)題的內(nèi)容區(qū)塊使用section元素。
5、標(biāo)題塊
header元素是一種引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素,通常用來放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題,但也可以包含其它內(nèi)偶然那個(gè),如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片,因此整個(gè)頁(yè)面的標(biāo)題應(yīng)該放在頁(yè)面的開頭。
在一個(gè)網(wǎng)頁(yè)內(nèi)可以多次使用header元素。
6、標(biāo)題分組
hgroup元素可以為標(biāo)題或者子標(biāo)題進(jìn)行分組,通常它與h1-h6元素組合使用,一個(gè)內(nèi)容塊中的標(biāo)題及其子標(biāo)題可以通過hgroup元素組成一組。
<article>
<header>
<hgroup>
<h1>主標(biāo)題</h1>
<h2>副標(biāo)題</h2>
<h3>標(biāo)題說明</h3>
</hgroup>
<p>
<time datetime="2012-6-20">發(fā)布時(shí)間:2012年6月20日</time>
</p>
</header>
<p>新聞?wù)?lt;/p>
</article>
7、腳注塊
footer元素可以作為內(nèi)容塊的注腳,如在父級(jí)內(nèi)容塊中添加注釋,或者在網(wǎng)頁(yè)中添加版權(quán)信息等。
與header元素一樣,頁(yè)面中也可以重復(fù)使用footer元素。
8、聯(lián)系信息
address元素用來在文檔中定義聯(lián)系信息,包括文檔作者或文檔編輯者名稱、電子郵箱、真實(shí)地址、電話號(hào)碼等,還可以描述與文檔相關(guān)的聯(lián)系人的所有聯(lián)系信息。