HTML5中的nav標籤的詳解

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類似並沒有指定必須是主導航，也可以是頁面其它部分的子導航。如下：

XML/HTML Code复制内容到剪贴板
<h3 id="gbin-com文章列表">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>

在上面在這個例子中，我們看到這裡只是一個區域的文章導航，同樣也可以使用nav定義一個小型的頁面內導航。 但並不是頁面上的所有連結團體都需要放在nav標籤內，它主要是由頁面的主要導航區塊組成。例如，我們通常在網站的頁腳裡放一組鏈接，包括服務條款、網站介紹、版權聲明等，這時，我們通常使用footer，而不是nav。
一個頁面可可以包含多個nav標籤，作為頁面整體或不同部分的導覽。在下面的例子中，有兩個nav標籤，一個是網站的主體導航，另一個是當前頁面本身的輔助連結導航。

XML/HTML Code复制内容到剪贴板
<h1 id="雨打浮萍">雨打浮萍</h1>
<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="#">html+css</a></li>
        ...more...   
    </ul>
</nav>
<article>
    <header>
        <h1 id="html-语义化标签之结构标签">html5语义化标签之结构标签</h1>
        <p><span>发表于</span>2011-12-22</p>
    </header>
    <nav>
        <ul>
            <li><a href="#">子导航</a></li>
            <li><a href="#">子导航</a></li>
            ...more...   
        </ul>
    </nav>
    <p>
        <section id="public">
            <h1 id="section里面仍然可以再用h-标签">section里面仍然可以再用h1标签</h1>
            <p>...more...</p>
        </section>
        <section id="destroy">
            <h1 id="section里面仍然可以再用h-标签">section里面仍然可以再用h1标签</h1>
            <p>...more...</p>
        </section>
        ...more... </p>
    <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>
    <h1 id="Navigation">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>

###############################################################################

以上是HTML5中的nav標籤的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！