首頁技術(shù)文章正文

nav標(biāo)簽怎么用?nav標(biāo)簽的有什么作用?

更新時間:2021-03-24 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


nav元素用于定義導(dǎo)航鏈接,是HTML5新增的元素,該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個區(qū)域中,使頁面元素的語義更加明確。其中的導(dǎo)航元素可以鏈接到站點的其他頁面,或者當(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)。通常,一個HTML頁面中可以包含多個nav元素,作為頁面整體或不同部分的導(dǎo)航。具體來說,nav元素可以用于以下幾種場合。

● 傳統(tǒng)導(dǎo)航條:目前主流網(wǎng)站上都有不同層級的導(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)航:它的作用是在本頁面幾個主要的組成部分之間進(jìn)行跳轉(zhuǎn)。

● 翻頁操作:翻頁操作切換的是網(wǎng)頁的內(nèi)容部分,可以通過單擊“上一頁”或“下一頁”切換,也可以通過單擊實際的頁數(shù)跳轉(zhuǎn)到某一頁。

除了以上幾點以外,nav元素也可以用于其他重要的、基本的導(dǎo)航鏈接組中。

需要注意的是,并不是所有的鏈接組都要被放進(jìn) nav元素,只需要將主要的和基本的鏈接放進(jìn)nav元素即可。



猜你喜歡:

HTML5中figure標(biāo)簽的作用

如何使用H標(biāo)簽?

H5如何嵌入視頻?

傳智教育web前端培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!