日期：2013-1-15 來源：GBin1.com
大家可能都知道HTML5中出現了很多以前沒有的標簽，例如，header，nav，和footer，在這之前我們如果開發相關的頁面布局的時候，往往都是使用CSS來定義相關的頭部，導航及其頁底部分，如下：
#nav{ padding: 10px ... }
#header{ padding: 10px ... }
#footer{ padding: 10px ... }
定義完之后呢，我們使用div標簽來組織頁面結構，如下：
<div id="header"></div> <div id="nav"></div> <div id="footer"></div>
這樣的代碼讓我們創建了很多的非樣式的CSS定義，是的代碼結構復雜並且不直觀易懂。
在新的HTML5標准中，我們定義了一系列的標簽，幫助你更語義化的定義頁面層次和邏輯，你不需要自己定義相關的DIV，HTML5提供了現成的標簽來完成上述的結構化定義，如下：
<header></header> <nav></nav> <footer></footer>
使用以上的標簽，你只需要在css文件中定義相關的真正的樣式信息即可。
在今天的這篇文章中，我們將介紹相關的基本HTML5標簽Header，nav和footer。
header標簽
在新的標准中header標簽定義如下：
"A group of introductory or navigational aids.”
基本意思是“一組介紹性的護着導航相關的輔助內容”。字面上理解header標簽不單單只是定義頁頭內容，也可以定義頁頭以下其它內容的介紹。這和我們傳統的頁面header定義並不完全一致。例如：
<header>
<h1>HTML5基本標簽使用，header，Nav和footer</h1>
<div class="post-meta">
<p>作者信息:gbin1.com</a> <span class="category">文章創建類別：HTML5/CSS3</span></p>
</div>
</header>
<article>
<p>大家可能都知道HTML5中出現了很多以前沒有的標簽，例如，header，nav，和footer，在這之前我們如果開發相關的頁面布局的時候，往往都是使用CSS來定義相關的頭部，導航及其頁底部分</p>
</article>
在上面的結構中，我們可以看到使用header我們定義了一篇文章的標題和內容。這里header標簽的使用並不是頁面的頁頭，而是文章的頁頭。
所以在HTML5中，header的使用更加靈活，你可以根據你的需要來定義和組織document結構。
Nav標簽
Nav標簽全稱navigation，顧名思義，是導航的意思。根據HTML5的相關標准定義如下：
"A section of a page that links to other pages or to parts within the page: a section with navigation links."
中文翻譯大概意思是”頁面中的一個用來鏈接到其它頁面或者當前頁面的區域：一個含有導航鏈接的區域”。
這里非常清楚的定義了nav標簽的功能，這里和header類似並沒有指定必須是主導航，也可以是頁面其它部分的子導航。如下：
<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>
在上面這個例子中，我們看到這里只是一個區域的文章導航，同樣也可以使用nav定義一個小型的頁面內導航。
Footer標簽
最后一個就是footer標簽，即，頁底標簽。使用這個標簽你可以定義頁面的低端結構，當然，和上面我們介紹header標簽或者nav標簽一樣，它並不是僅僅使用在整個頁面的頁尾處。相關的HTML5標准定義如下：
“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元素代表了頁面內容或者區域內容最底端的展示。一個典型的例子是包含了作者信息，文檔鏈接或者是版權信息等等“。
當然，這里我們看到並不局限於整個頁面的內容，也可以是一個文章的頁尾內容，例如，來源或者是作者信息等等。如下：
<footer>
<div class="tags">
<span class="tags-title">相關標簽</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 href="http://gbin1.com">html5/css3教程</a></div>
</div>
</footer>
在上面的例子中，我們定義了一個簡單的文章內的頁尾信息，可以看到我們添加了來源和相關標簽，這在博客類型的網站中經常出現。
一個完整的HTML5頁面
在這里我們使用基本的header，nav和footer標簽書寫了一個響應式的HTML5頁面，如果你使用老版本的瀏覽器，例如IE6,7等等。需要引入相關的js來幫助識別新的元素，當然，你也可以使用下面js代碼來簡單生成。
/* * 創建HTML5標簽 */ document.createElement("article"); document.createElement("section");
具體代碼實現，請下載后閱讀。這里我們使用了一個前端框架 - Profound Grid ，如果你興趣可以閱讀這篇文章 - 響應式網格系統 - Profound Grid。
總結
相 對於其它的HTML5特性來說，header，nav和footer顯得不是那么的酷，當時作為一個前端開發人員來說，如何能夠正確的組織頁面結構對於一 個邏輯性很強，頁面也很復雜的項目來說，意義依舊是非常重大的。希望今天的這篇文章能夠幫助大家簡單直觀的了解這些基本的HTML5標簽，如果你有任何的 問題或者建議，請在下面給我們留言或者訪問極客標簽社區提問。如果你對於其它HTML5技術感興趣，也可以閱讀我們的HTML5專題教程。