溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“html5怎么編寫(xiě)導(dǎo)航欄”，在日常操作中，相信很多人在html5怎么編寫(xiě)導(dǎo)航欄問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”html5怎么編寫(xiě)導(dǎo)航欄”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
html5編寫(xiě)導(dǎo)航欄用nav元素。nav元素是導(dǎo)航元素，用于定義導(dǎo)航鏈接，可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。nav元素可以用于的場(chǎng)合：1、傳統(tǒng)導(dǎo)航條，其作用是跳轉(zhuǎn)到網(wǎng)站的其他主頁(yè)面；2、側(cè)邊欄導(dǎo)航，目的是將當(dāng)前文章或當(dāng)前商品頁(yè)面跳轉(zhuǎn)到其他文章或其他商品頁(yè)面；3、頁(yè)內(nèi)導(dǎo)航，作用是在本頁(yè)面幾個(gè)主要的組成部分之間進(jìn)行跳轉(zhuǎn)；4、翻頁(yè)操作。
HTML5 nav元素 （導(dǎo)航元素）
nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。其中的導(dǎo)航元素可以鏈接到站點(diǎn)的其他頁(yè)面，或者當(dāng)前頁(yè)的其他部分。例如下面這段示例代碼：
<nav>
<ul>
<li><a href="#">首頁(yè)</li>
<li><a href="#">公司概況</li>
<li><a href="#">產(chǎn)品展示</li>
<li><a href="#">聯(lián)系我們</li>
</ul>
</nav>
在上面這段代碼中，通過(guò)在nav元素內(nèi)部嵌套無(wú)序列表ul來(lái)搭建導(dǎo)航結(jié)構(gòu)。通常，一個(gè)HTML頁(yè)面中可以包含多個(gè)nav元素，作為頁(yè)面整體或不同部分的導(dǎo)航。（學(xué)習(xí)視頻分享：web前端）
具體來(lái)說(shuō)，nav元素可以用于以下幾種場(chǎng)合。
傳統(tǒng)導(dǎo)航條：目前主流網(wǎng)站上都有不同層級(jí)的導(dǎo)航條，其作用是跳轉(zhuǎn)到網(wǎng)站的其他主頁(yè)面。
側(cè)邊欄導(dǎo)航：目前主流博客網(wǎng)站及電商網(wǎng)站都有側(cè)邊欄導(dǎo)航，目的是將當(dāng)前文章或當(dāng)前商品頁(yè)面跳轉(zhuǎn)到其他文章或其他商品頁(yè)面。
頁(yè)內(nèi)導(dǎo)航：它的作用是在本頁(yè)面幾個(gè)主要的組成部分之間進(jìn)行跳轉(zhuǎn)。
翻頁(yè)操作：翻頁(yè)操作切換的是網(wǎng)頁(yè)的內(nèi)容部分，可以通過(guò)單擊“上一頁(yè)”或“下一頁(yè)”切換，也可以通過(guò)單擊實(shí)際的頁(yè)數(shù)跳轉(zhuǎn)到某一頁(yè)。
除了以上幾點(diǎn)以外，nav元素也可以用于其他重要的、基本的導(dǎo)航鏈接組中。
需要注意的是，并不是所有的鏈接組都要被放進(jìn) nav元素，只需要將主要的和基本的鏈接放進(jìn)nav元素即可。
比如說(shuō)頁(yè)腳底部如果有個(gè)版權(quán)申明，我們就不建議使用nav元素，而是使用footer元素是最合適的。一個(gè)頁(yè)面中我們可用多個(gè)nav元素作為整體或者不同部分的導(dǎo)航
nav元素的用法
<body>
<h2>nav的使用方法</h2>
<nav>
<ul>
<li>
<a href=”nav元素.html”>首頁(yè)</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>
<h3>NAV-1</h3>
<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>
<h3>NAV-1</h3>
<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)信息的話(huà)，我們最好加在footer里面。
<footer>
<p>
<a href=”/”>版權(quán)信息</a>
<a href=”/”>站點(diǎn)幫助</a>
<a href=”/”>聯(lián)系我們</a>
</p>
</foooter>
Footer效果圖如下：
到此，關(guān)于“html5怎么編寫(xiě)導(dǎo)航欄”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
