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>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>雨打浮萍</h1> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="#">html+css</a></li> ...more... </ul> </nav> <article> <header> <h1>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>section里面仍然可以再用h1标签</h1> <p>...more...</p> </section> <section id="destroy"> <h1>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>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中文網其他相關文章!