大家可能都知道Html5中出現(xiàn)了很多以前沒有的標(biāo)簽，例如，header，nav，和footer，在這之前我們?nèi)绻_發(fā)相關(guān)的頁面布局的時(shí)候，往往都是使用CSS來定義相關(guān)的頭部，導(dǎo)航及其頁底部分，如下：

#nav{ padding: 10px ... }

#header{ padding: 10px ... }

#footer{ padding: 10px ... }

定義完之后呢，我們使用div標(biāo)簽來組織頁面結(jié)構(gòu)，如下：

這樣的代碼讓我們創(chuàng)建了很多的非樣式的CSS定義，是的代碼結(jié)構(gòu)復(fù)雜并且不直觀易懂。

在新的HTML5標(biāo)準(zhǔn)中，我們定義了一系列的標(biāo)簽，幫助你更語義化的定義頁面層次和邏輯，你不需要自己定義相關(guān)的DIV，HTML5提供了現(xiàn)成的標(biāo)簽來完成上述的結(jié)構(gòu)化定義，如下：

使用以上的標(biāo)簽，你只需要在css文件中定義相關(guān)的真正的樣式信息即可。

在今天的這篇文章中，我們將介紹相關(guān)的基本HTML5標(biāo)簽Header，nav和footer。

header標(biāo)簽

在新的標(biāo)準(zhǔn)中header標(biāo)簽定義如下：

"A group of introductory or navigational aids.”

基本意思是“一組介紹性的護(hù)著導(dǎo)航相關(guān)的輔助內(nèi)容”。字面上理解header標(biāo)簽不單單只是定義頁頭內(nèi)容，也可以定義頁頭以下其它內(nèi)容的介紹。這和我們傳統(tǒng)的頁面header定義并不完全一致。例如：

在上面的結(jié)構(gòu)中，我們可以看到使用header我們定義了一篇文章的標(biāo)題和內(nèi)容。這里header標(biāo)簽的使用并不是頁面的頁頭，而是文章的頁頭。

所以在HTML5中，header的使用更加靈活，你可以根據(jù)你的需要來定義和組織document結(jié)構(gòu)。

Nav標(biāo)簽

Nav標(biāo)簽全稱navigation，顧名思義，是導(dǎo)航的意思。根據(jù)HTML5的相關(guān)標(biāo)準(zhǔn)定義如下：

"A section of a page that links to other pages or to parts within the page: a section with navigation links."

中文翻譯大概意思是”頁面中的一個(gè)用來鏈接到其它頁面或者當(dāng)前頁面的區(qū)域：一個(gè)含有導(dǎo)航鏈接的區(qū)域”。

這里非常清楚的定義了nav標(biāo)簽的功能，這里和header類似并沒有指定必須是主導(dǎo)航，也可以是頁面其它部分的子導(dǎo)航。如下：

gbin1.com文章列表

在上面這個(gè)例子中，我們看到這里只是一個(gè)區(qū)域的文章導(dǎo)航，同樣也可以使用nav定義一個(gè)小型的頁面內(nèi)導(dǎo)航。

Footer標(biāo)簽

最后一個(gè)就是footer標(biāo)簽，即，頁底標(biāo)簽。使用這個(gè)標(biāo)簽?zāi)憧梢远x頁面的低端結(jié)構(gòu)，當(dāng)然，和上面我們介紹header標(biāo)簽或者nav標(biāo)簽一樣，它并不是僅僅使用在整個(gè)頁面的頁尾處。相關(guān)的HTML5標(biāo)準(zhǔn)定義如下：

“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

在上面的例子中，我們定義了一個(gè)簡(jiǎn)單的文章內(nèi)的頁尾信息，可以看到我們添加了來源和相關(guān)標(biāo)簽，這在博客類型的網(wǎng)站中經(jīng)常出現(xiàn)。

總結(jié)

相 對(duì)于其它的HTML5特性來說，header，nav和footer顯得不是那么的酷，當(dāng)時(shí)作為一個(gè)前端開發(fā)人員來說，如何能夠正確的組織頁面結(jié)構(gòu)對(duì)于一 個(gè)邏輯性很強(qiáng)，頁面也很復(fù)雜的項(xiàng)目來說，意義依舊是非常重大的。希望今天的這篇文章能夠幫助大家簡(jiǎn)單直觀的了解這些基本的HTML5標(biāo)簽。

參考：

HTML HTML5

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。