溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“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類似并沒有指定必須是主導航，也可以是頁面其它部分的子導航。如下：
XML/HTML Code復制內容到剪貼板
<h4>gbin1.com文章列表</h4>
<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>
在上面這個例子中，我們看到這里只是一個區域的文章導航，同樣也可以使用nav定義一個小型的頁面內導航。 但并不是頁面上的所有鏈接團體都需要放在nav標簽內，它主要是由頁面的主要導航塊組成。例如，我們通常在網站的頁腳里放一組鏈接，包括服務條款、網站介紹、版權聲明等，這時，我們通常使用footer，而不是nav。
一個頁面可可以包含多個nav標簽，作為頁面整體或者不同部分的導航。在下面的例子中，有兩個nav標簽，一個是網站的主體導航，另外一個是當前頁面本身的輔助鏈接導航。
XML/HTML Code復制內容到剪貼板
<h2>雨打浮萍</h2>
<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="#">html+css</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h2>html5語義化標簽之結構標簽</h2>
<p><span>發表于</span>2011-12-22</p>
</header>
<nav>
<ul>
<li><a href="#">子導航</a></li>
<li><a href="#">子導航</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h2>section里面仍然可以再用h2標簽</h2>
<p>...more...</p>
</section>
<section id="destroy">
<h2>section里面仍然可以再用h2標簽</h2>
<p>...more...</p>
</section>
...more... </div>
<footer>
<p><a href="#">關于我們</a> |
<a href="#">友情鏈接</a> |
<a href="#">雜七雜八</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 2011 </small></p>
</footer>
nav標簽本身并不要求包含一個列表，它還可以包含其它內容形式。
XML/HTML Code復制內容到剪貼板
<nav>
<h2>Navigation</h2>
<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>
“HTML5中的nav標有什么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
