nav標(biāo)簽全稱(chēng)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類(lèi)似并沒(méi)有指定必須是主導(dǎo)航，也可以是頁(yè)面其它部分的子導(dǎo)航。如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <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>
在上面這個(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)航。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <h1>雨打浮萍</h1>
- <nav>
- <ul>
- <li><a href="/">首頁(yè)</a></li>
- <li><a href="#">html+css</a></li>
- ...more...
- </ul>
- </nav>
- <article>
- <header>
- <h1>html5語(yǔ)義化標(biāo)簽之結(jié)構(gòu)標(biāo)簽</h1>
- <p><span>發(fā)表于</span>2011-12-22</p>
- </header>
- <nav>
- <ul>
- <li><a href="#">子導(dǎo)航</a></li>
- <li><a href="#">子導(dǎo)航</a></li>
- ...more...
- </ul>
- </nav>
- <div>
- <section id="public">
- <h1>section里面仍然可以再用h1標(biāo)簽</h1>
- <p>...more...</p>
- </section>
- <section id="destroy">
- <h1>section里面仍然可以再用h1標(biāo)簽</h1>
- <p>...more...</p>
- </section>
- ...more... </div>
- <footer>
- <p><a href="#">關(guān)于我們</a> |
- <a href="#">友情鏈接</a> |
- <a href="#">雜七雜八</a></p>
- </footer>
- </article>
- <footer>
- <p><small>© copyright 2011 </small></p>
- </footer>
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <nav>
- <h1>Navigation</h1>
- <p>You are on my home page. To the north lies
- <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain,
- upon which many
- <a href="/school">school papers</a>are littered. Far up thus mountain you can spy a little figure who appears to
- be me, desperately scribbling a
- <a href="/school/thesis">thesis</a>.</p>
- <p>To the west are several exits. One fun-looking exit is labeled
- <a href="http://games.example.com/">"games"</a>. Another more boring-looking exit is labeled
- <a href="http://isp.example.net/">ISP™</a>.</p>
- <p>To the south lies a dark and dank
- <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly
- out of the page.</p>
- </nav>
