HTML5中的nav標簽學習筆記

2020-03-24 18:41:56

字體：大中小

來源：轉載

供稿：網友

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復制內容到剪貼板
li ahref= #html5 HTML5文章介紹 /a /li li ahref= #css3 CSS3文章介紹 /a /li li ahref= #jquery jQuery文章介紹 /a /li ul /nav
在上面這個例子中，我們看到這里只是一個區域的文章導航，同樣也可以使用nav定義一個小型的頁面內導航。但并不是頁面上的所有鏈接團體都需要放在nav標簽內，它主要是由頁面的主要導航塊組成。例如，我們通常在網站的頁腳里放一組鏈接，包括服務條款、網站介紹、版權聲明等，這時，我們通常使用footer，而不是nav。
一個頁面可可以包含多個nav標簽，作為頁面整體或者不同部分的導航。在下面的例子中，有兩個nav標簽，一個是網站的主體導航，另外一個是當前頁面本身的輔助鏈接導航。XML/HTML Code復制內容到剪貼板
li ahref= / 首頁 /a /li li ahref= # html+css /a /li ...more... /ul /nav article header h1 html5語義化標簽之結構標簽 /h1 p span 發表于 /span 2011-12-22 /p /header nav ul li ahref= # 子導航 /a /li li ahref= # 子導航 /a /li ...more... /ul /nav div sectionid= public h1 section里面仍然可以再用h1標簽 /h1 p ...more... /p /section sectionid= destroy h1 section里面仍然可以再用h1標簽 /h1 p ...more... /p /section ...more... /div footer p ahref= # 關于我們 /a | ahref= # 友情鏈接 /a | ahref= # 雜七雜八 /a /p /footer /article footer p small copyright2011 /small /p /footer
h1 Navigation /h1 p Youareonmyhomepage.Tothenorthlies ahref= /blog myblog /a ,fromwhencethesoundsofbattlecanbeheard.Totheeastyoucanseealargemountain, uponwhichmany ahref= /school schoolpapers /a arelittered.Farupthusmountainyoucanspyalittlefigurewhoappearsto beme,desperatelyscribblinga ahref= /school/thesis thesis /a . /p p Tothewestareseveralexits.Onefun-lookingexitislabeled ahref= http://games.example.com/ games /a .Anothermoreboring-lookingexitislabeled ahref= http://isp.example.net/ ISP /a . /p p Tothesouthliesadarkanddank ahref= /about contactspage /a .Cobwebscoveritsdisusedentrance,andatonepointyouseearatrunquickly outofthepage. /p /navhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html中超鏈接a實例用法匯總

下一篇：html中mark標簽的使用方法詳解（附代碼）