web前端分享HTML5中的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." 中文翻譯大概意思是”頁(yè)面中的一個(gè)用來(lái)鏈接到其它頁(yè)面或者當(dāng)前頁(yè)面的區(qū)域：一個(gè)含有導(dǎo)航鏈接的區(qū)域”。 這里非常清楚的定義了nav標(biāo)簽的功能，這里和header類似并沒(méi)有指定必須是主導(dǎo)航，也可以是頁(yè)面其它部分的子導(dǎo)航。如下：

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>  

在上面這個(gè)例子中，我們看到這里只是一個(gè)區(qū)域的文章導(dǎo)航，同樣也可以使用nav定義一個(gè)小型的頁(yè)面內(nèi)導(dǎo)航。 但并不是頁(yè)面上的所有鏈接團(tuán)體都需要放在nav標(biāo)簽內(nèi)，它主要是由頁(yè)面的主要導(dǎo)航塊組成。例如，我們通常在網(wǎng)站的頁(yè)腳里放一組鏈接，包括服務(wù)條款、網(wǎng)站介紹、版權(quán)聲明等，這時(shí)，我們通常使用footer，而不是nav。
一個(gè)頁(yè)面可可以包含多個(gè)nav標(biāo)簽，作為頁(yè)面整體或者不同部分的導(dǎo)航。在下面的例子中，有兩個(gè)nav標(biāo)簽，一個(gè)是網(wǎng)站的主體導(dǎo)航，另外一個(gè)是當(dāng)前頁(yè)面本身的輔助鏈接導(dǎo)航。

1.<h1>雨打浮萍</h1>  

2.<nav>  

3.    <ul>  

4.        <li><a href="/">首頁(yè)</a></li>  

5.        <li><a href="#">html+css</a></li>  

6.        ...more...   

7.    </ul>  

8.</nav>  

9.<article>  

10.    <header>  

11.        <h1>html5語(yǔ)義化標(biāo)簽之結(jié)構(gòu)標(biāo)簽</h1>  

12.        <p><span>發(fā)表于</span>2011-12-22</p>  

13.    </header>  

14.    <nav>  

15.        <ul>  

16.            <li><a href="#">子導(dǎo)航</a></li>  

17.            <li><a href="#">子導(dǎo)航</a></li>  

18.            ...more...   

19.        </ul>  

20.    </nav>  

21.    <div>  

22.        <section id="public">  

23.            <h1>section里面仍然可以再用h1標(biāo)簽</h1>  

24.            <p>...more...</p>  

25.        </section>  

26.        <section id="destroy">  

27.            <h1>section里面仍然可以再用h1標(biāo)簽</h1>  

28.            <p>...more...</p>  

29.        </section>  

30.        ...more... </div>  

31.    <footer>  

32.        <p><a href="#">關(guān)于我們</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標(biāo)簽本身并不要求包含一個(gè)列表，它還可以包含其它內(nèi)容形式。

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./">"games"</a>. Another more boring-looking exit is labeled   

11.        <a href="http://isp./">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>