大家可能都知道HTML5中出現(xiàn)了很多以前沒有的標(biāo)簽，例如，header，nav，和footer，在這之前我們?nèi)绻_發(fā)相關(guān)的頁面布局的時候，往往都是使用CSS來定義相關(guān)的頭部，導(dǎo)航及其頁底部分，如下：
#nav{ padding: 10px ... }
#header{ padding: 10px ... }
#footer{ padding: 10px ... }
定義完之后呢，我們使用div標(biāo)簽來組織頁面結(jié)構(gòu)，如下：
<div id="header"></div>
<div id="nav"></div>
<div id="footer"></div>
這樣的代碼讓我們創(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)化定義，如下：
<header></header>
<nav></nav>
<footer></footer>
使用以上的標(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定義并不完全一致。例如：
<header>
<h1>HTML5基本標(biāo)簽使用，header，Nav和footer</h1>
<div class="post-meta">
<p>作者信息:gbin1.com</a> <span class="category">文章創(chuàng)建類別：HTML5/CSS3</span></p>
</div>
</header>
<article>
<p>大家可能都知道HTML5中出現(xiàn)了很多以前沒有的標(biāo)簽，例如，header，nav，和footer，在這之前我們?nèi)绻_發(fā)相關(guān)的頁面布局的時候，往往都是使用CSS來定義相關(guān)的頭部，導(dǎo)航及其頁底部分</p>
</article>
在上面的結(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."
中文翻譯大概意思是”頁面中的一個用來鏈接到其它頁面或者當(dāng)前頁面的區(qū)域：一個含有導(dǎo)航鏈接的區(qū)域”。
這里非常清楚的定義了nav標(biāo)簽的功能，這里和header類似并沒有指定必須是主導(dǎo)航，也可以是頁面其它部分的子導(dǎo)航。如下：
<h3>gbin1.com文章列表</h3>
<nav>
<ul>
<li><a href="#html5">HTML5文章介紹</a></li>
<li><a href="#css3">CSS3文章介紹</a></li>
<li><a href="#jquery">jQuery文章介紹</a></li>
<ul>
</nav>
在上面這個例子中，我們看到這里只是一個區(qū)域的文章導(dǎo)航，同樣也可以使用nav定義一個小型的頁面內(nèi)導(dǎo)航。
Footer標(biāo)簽
最后一個就是footer標(biāo)簽，即，頁底標(biāo)簽。使用這個標(biāo)簽?zāi)憧梢远x頁面的低端結(jié)構(gòu)，當(dāng)然，和上面我們介紹header標(biāo)簽或者nav標(biāo)簽一樣，它并不是僅僅使用在整個頁面的頁尾處。相關(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.”
中文意思是：”footer元素代表了頁面內(nèi)容或者區(qū)域內(nèi)容最底端的展示。一個典型的例子是包含了作者信息，文檔鏈接或者是版權(quán)信息等等“。
當(dāng)然，這里我們看到并不局限于整個頁面的內(nèi)容，也可以是一個文章的頁尾內(nèi)容，例如，來源或者是作者信息等等。如下：
<footer>
<div class="tags">
<span class="tags-title">相關(guān)標(biāo)簽</span> <a href="#" rel="tag">html5</a>, <a href="#" rel="tag">nav</a>, <a href="#" rel="tag">header</a>, <a href="#" rel="tag">footer</a>
</div>
<div class="source">
<div>來源：<a >html5/css3教程</a></div>
</div>
</footer>
在上面的例子中，我們定義了一個簡單的文章內(nèi)的頁尾信息，可以看到我們添加了來源和相關(guān)標(biāo)簽，這在博客類型的網(wǎng)站中經(jīng)常出現(xiàn)。
一個完整的HTML5頁面
在這里我們使用基本的header，nav和footer標(biāo)簽書寫了一個響應(yīng)式的HTML5頁面，如果你使用老版本的瀏覽器，例如IE6,7等等。需要引入相關(guān)的js來幫助識別新的元素，當(dāng)然，你也可以使用下面js代碼來簡單生成。
/* * 創(chuàng)建HTML5標(biāo)簽 */
document.createElement("article");
document.createElement("section");
總結(jié)
相 對于其它的HTML5特性來說，header，nav和footer顯得不是那么的酷，當(dāng)時作為一個前端開發(fā)人員來說，如何能夠正確的組織頁面結(jié)構(gòu)對于一 個邏輯性很強(qiáng)，頁面也很復(fù)雜的項目來說，意義依舊是非常重大的。希望今天的這篇文章能夠幫助大家簡單直觀的了解這些基本的HTML5標(biāo)簽。
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。