HTML5中的nav標(biāo)簽學(xué)習(xí)筆記

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." 中文翻譯大概意思是”頁面中的一個(gè)用來鏈接到其它頁面或者當(dāng)前頁面的區(qū)域:一個(gè)含有導(dǎo)航鏈接的區(qū)域”。 這里非常清楚的定義了nav標(biāo)簽的功能,這里和header類似并沒有指定必須是主導(dǎo)航,也可以是頁面其它部分的子導(dǎo)航。如下:
- <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è)小型的頁面內(nèi)導(dǎo)航。 但并不是頁面上的所有鏈接團(tuán)體都需要放在nav標(biāo)簽內(nèi),它主要是由頁面的主要導(dǎo)航塊組成。例如,我們通常在網(wǎng)站的頁腳里放一組鏈接,包括服務(wù)條款、網(wǎng)站介紹、版權(quán)聲明等,這時(shí),我們通常使用footer,而不是nav。
一個(gè)頁面可可以包含多個(gè)nav標(biāo)簽,作為頁面整體或者不同部分的導(dǎo)航。在下面的例子中,有兩個(gè)nav標(biāo)簽,一個(gè)是網(wǎng)站的主體導(dǎo)航,另外一個(gè)是當(dāng)前頁面本身的輔助鏈接導(dǎo)航。
- <h1>雨打浮萍</h1>
- <nav>
- <ul>
- <li><a href="/">首頁</a></li>
- <li><a href="#">html+css</a></li>
- ...more...
- </ul>
- </nav>
- <article>
- <header>
- <h1>html5語義化標(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>
nav標(biāo)簽本身并不要求包含一個(gè)列表,它還可以包含其它內(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>
相關(guān)文章
- 下面小編就為大家?guī)硪黄狧TML5 新標(biāo)簽全部總匯(推薦)。小編覺得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-13
HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
使用HTML5時(shí)就應(yīng)該考慮包括桌面以及移動(dòng)端的瀏覽器兼容問題,特別是視頻方面瀏覽器對解碼的支持會(huì)有所不同,所以下面就來分享一個(gè)HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分2016-05-19- 下面小編就為大家?guī)硪黄狧TML5標(biāo)簽嵌套規(guī)則詳解【必看】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-26
HTML5移動(dòng)端開發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析
這篇文章主要介紹了HTML5移動(dòng)端開發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析,Viewport常被叫做視口或視區(qū),在移動(dòng)端布局和屏幕適配中有著重要的作用,需要的朋友可以參考下2016-04-15HTML5使用Audio標(biāo)簽實(shí)現(xiàn)歌詞同步的效果
HTML5的最強(qiáng)大之處莫過于對媒體文件的處理,如利用一個(gè)簡單的vedio標(biāo)簽就可以實(shí)現(xiàn)視頻播放。類似地,在HTML5中也有對應(yīng)的處理音頻文件的標(biāo)簽,那就是audio標(biāo)簽。通過本文給2016-03-17HTML5+SVG實(shí)現(xiàn)可互動(dòng)的3D標(biāo)簽云特效源碼
HTML5+SVG實(shí)現(xiàn)可互動(dòng)的3D標(biāo)簽云特效源碼是一款不需要額外的CSS樣式,可使用鼠標(biāo)與標(biāo)簽進(jìn)行互動(dòng),并提供很多參數(shù)來控制標(biāo)簽云的外觀,需要的朋友前來下載源碼哦2016-02-29- 這篇文章主要介紹了Html5標(biāo)簽audio的樣式修改 ,對html5 audio標(biāo)簽樣式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-28
- 本文給大家總結(jié)了html5標(biāo)簽知識(shí),包括可以省略的標(biāo)簽、新增的標(biāo)簽,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友參考下吧2016-11-23