好程序員web前端分享HTML5中的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類似並沒有指定必須是主導航，也可以是頁面其它部分的子導航。如下：
1.<h3>gbin1.com文章列表</h3>
2.<nav>
3. <ul>
4. <li><a href="#html5">HTML5文章介紹</a></li>
5. <li><a href="#css3">CSS3文章介紹</a></li>
6. <li><a href="#jquery">jQuery文章介紹</a></li>
7. <ul>
8.</nav>
在上面這個例子中，我們看到這裏只是一個區域的文章導航，同樣也可以使用nav定義一個小型的頁面內導航。 但並不是頁面上的所有鏈接團體都需要放在nav標籤內，它主要是由頁面的主要導航塊組成。例如，我們通常在網站的頁腳裏放一組鏈接，包括服務條款、網站介紹、版權聲明等，這時，我們通常使用footer，而不是nav。
一個頁面可可以包含多個nav標籤，作爲頁面整體或者不同部分的導航。在下面的例子中，有兩個nav標籤，一個是網站的主體導航，另外一個是當前頁面本身的輔助鏈接導航。
1.<h1>雨打浮萍</h1>
2.<nav>
3. <ul>
4. <li><a href="/">首頁</a></li>
5. <li><a href="#">html+css</a></li>
6. ...more...
7. </ul>
8.</nav>
9.<article>
10. <header>
11. <h1>html5語義化標籤之結構標籤</h1>
12. <p><span>發表於</span>2011-12-22</p>
13. </header>
14. <nav>
15. <ul>
16. <li><a href="#">子導航</a></li>
17. <li><a href="#">子導航</a></li>
18. ...more...
19. </ul>
20. </nav>
21. <div>
22. <section id="public">
23. <h1>section裏面仍然可以再用h1標籤</h1>
24. <p>...more...</p>
25. </section>
26. <section id="destroy">
27. <h1>section裏面仍然可以再用h1標籤</h1>
28. <p>...more...</p>
29. </section>
30. ...more... </div>
31. <footer>
32. <p><a href="#">關於我們</a> |
33. <a href="#">友情鏈接</a> |
34. <a href="#">雜七雜八</a></p>
35. </footer>
36.</article>
37.<footer>
38. <p><small>© copyright 2011 </small></p>
</footer>
nav標籤本身並不要求包含一個列表，它還可以包含其它內容形式。
1.<nav>
2. <h1>Navigation</h1>
3. <p>You are on my home page. To the north lies
4. <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain,
5. upon which many
6. <a href="/school">school papers</a>are littered. Far up thus mountain you can spy a little figure who appears to
7. be me, desperately scribbling a
8. <a href="/school/thesis">thesis</a>.</p>
9. <p>To the west are several exits. One fun-looking exit is labeled
10. <a href="http://games.example.com/">"games"</a>. Another more boring-looking exit is labeled
11. <a href="http://isp.example.net/">ISP™</a>.</p>
12. <p>To the south lies a dark and dank
13. <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly
14. out of the page.</p>
15.</nav>