HTML5基本標籤使用header，nav和footer
大家可能都知道HTML5中出現了很多以前沒有的標籤，例如，header，nav，和footer，在這之前我們如果開發相關的頁面佈局的時候，往往都是使用CSS來定義相關的頭部，導航及其頁底部分，如下：
#nav{padding:10px...}
#header{padding:10px...}
#footer{padding:10px...}定義完之後呢，我們使用div標籤來組織頁面結構，如下：
<divid="header"></div>
<divid="nav"></div>
<divid="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>
<divclass="post-meta">
<p>作者資訊:gbin1.com</a><spanclass="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><ahref="#html5">HTML5文章介紹</a></li>
<li><ahref="#css3">CSS3文章介紹</a></li>
<li><ahref="#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>
<divclass="tags">
<spanclass="tags-title">相關標籤</span><ahref="#"rel="tag">html5</a>,<ahref="#"rel="tag">nav</a>,<ahref="#"rel="tag">header</a>,<ahref="#"rel="tag">footer</a>
</div>
<divclass="source">
<div>來源：<ahref="http://gbin1.com">html5/css3教程</a></div>
</div>
</footer>在上面的例子中，我們定義了一個簡單的文章內的頁尾資訊，可以看到我們添加了來源和相關標籤，這在部落格型別的網站中經常出現。
總結
相 對於其它的HTML5特性來說，header，nav和footer顯得不是那麼的酷，當時作為一個前端開發人員來說，如何能夠正確的組織頁面結構對於一 個邏輯性很強，頁面也很複雜的專案來說，意義依舊是非常重大的。希望今天的這篇文章能夠幫助大家簡單直觀的瞭解這些基本的HTML5標籤。
參考：