站長(zhǎng)資訊網(wǎng)
html5編寫導(dǎo)航欄用nav元素。nav元素是導(dǎo)航元素，用于定義導(dǎo)航鏈接，可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁面元素的語義更加明確。nav元素可以用于的場(chǎng)合：1、傳統(tǒng)導(dǎo)航條，其作用是跳轉(zhuǎn)到網(wǎng)站的其他主頁面；2、側(cè)邊欄導(dǎo)航，目的是將當(dāng)前文章或當(dāng)前商品頁面跳轉(zhuǎn)到其他文章或其他商品頁面；3、頁內(nèi)導(dǎo)航，作用是在本頁面幾個(gè)主要的組成部分之間進(jìn)行跳轉(zhuǎn)；4、翻頁操作。
前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
HTML5 nav元素 （導(dǎo)航元素）
nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁面元素的語義更加明確。其中的導(dǎo)航元素可以鏈接到站點(diǎn)的其他頁面，或者當(dāng)前頁的其他部分。例如下面這段示例代碼：
<nav> <ul> <li><a href="#">首頁</li> <li><a href="#">公司概況</li> <li><a href="#">產(chǎn)品展示</li> <li><a href="#">聯(lián)系我們</li> </ul> </nav>
在上面這段代碼中，通過在nav元素內(nèi)部嵌套無序列表ul來搭建導(dǎo)航結(jié)構(gòu)。通常，一個(gè)HTML頁面中可以包含多個(gè)nav元素，作為頁面整體或不同部分的導(dǎo)航。（學(xué)習(xí)視頻分享：web前端）
具體來說，nav元素可以用于以下幾種場(chǎng)合。
-
傳統(tǒng)導(dǎo)航條：目前主流網(wǎng)站上都有不同層級(jí)的導(dǎo)航條，其作用是跳轉(zhuǎn)到網(wǎng)站的其他主頁面。
-
側(cè)邊欄導(dǎo)航：目前主流博客網(wǎng)站及電商網(wǎng)站都有側(cè)邊欄導(dǎo)航，目的是將當(dāng)前文章或當(dāng)前商品頁面跳轉(zhuǎn)到其他文章或其他商品頁面。
-
頁內(nèi)導(dǎo)航：它的作用是在本頁面幾個(gè)主要的組成部分之間進(jìn)行跳轉(zhuǎn)。
-
翻頁操作：翻頁操作切換的是網(wǎng)頁的內(nèi)容部分，可以通過單擊“上一頁”或“下一頁”切換，也可以通過單擊實(shí)際的頁數(shù)跳轉(zhuǎn)到某一頁。
除了以上幾點(diǎn)以外，nav元素也可以用于其他重要的、基本的導(dǎo)航鏈接組中。
需要注意的是，并不是所有的鏈接組都要被放進(jìn) nav元素，只需要將主要的和基本的鏈接放進(jìn)nav元素即可。
比如說頁腳底部如果有個(gè)版權(quán)申明，我們就不建議使用nav元素，而是使用footer元素是最合適的。一個(gè)頁面中我們可用多個(gè)nav元素作為整體或者不同部分的導(dǎo)航
nav元素的用法
<body> <h1>nav的使用方法</h1> <nav> <ul> <li> <a href=”nav元素.html”>首頁</a> </li> <li> <a href=”aside元素.html”>aside</a> </li> <li> <a href=”section元素.html”>section</a> </li> </ul> </nav> </body>
Nav元素效果演示圖如下：
如果想實(shí)現(xiàn)多層嵌套，我們可以在下面新建一個(gè)獨(dú)立的區(qū)塊，我們使用article。
<article> <header> <h2>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主體結(jié)構(gòu)元素.html”>s新增的主體結(jié)構(gòu)元素</a> </li> </header> </article>//這就實(shí)現(xiàn)了一層的嵌套 <article> <header> <h2>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主體結(jié)構(gòu)元素.html”>s新增的主體結(jié)構(gòu)元素</a> </li> </header> </article>
Nav多層嵌套效果演示圖：
如果在底部有一些版權(quán)信息的話，我們最好加在footer里面。
<footer> <p> <a href=”/”>版權(quán)信息</a> <a href=”/”>站點(diǎn)幫助</a> <a href=”/”>聯(lián)系我們</a> </p> </foooter>
Footer效果圖如下：
總結(jié)nav元素的方法
1、傳統(tǒng)的導(dǎo)航條
以騰訊為例：
2、側(cè)邊欄導(dǎo)航
3、內(nèi)頁導(dǎo)航
（學(xué)習(xí)視頻分享：web前端）
