好程式設計師web前端分享HTML5中的nav標籤學習筆記

　　 好程式設計師 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="   

11.        <a href=" ™ </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>