HTML5中Nav元素作用及應(yīng)用場(chǎng)景知識(shí)點(diǎn)

HTML5中Nav元素作用及應(yīng)用場(chǎng)景知識(shí)點(diǎn)，Nav元素一般用來(lái)做導(dǎo)航欄，鏈接到本頁(yè)面的某個(gè)位置或者是其他頁(yè)面。元素標(biāo)簽<nav>將具有導(dǎo)航性質(zhì)的鏈接劃分在一起，使代碼結(jié)構(gòu)在語(yǔ)義化方面更加準(zhǔn)確，同時(shí)對(duì)于屏幕閱讀器等設(shè)備的支持也更好。

Nav元素是什么？

Nav元素用于定義導(dǎo)航鏈接，是HTML5新增的元素，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。其中的導(dǎo)航元素可以鏈接到站點(diǎn)的其他頁(yè)面或者當(dāng)前頁(yè)的其他部分。

Nav元素可以用作頁(yè)面導(dǎo)航的鏈接組，在導(dǎo)航鏈接組里面有很多的鏈接，點(diǎn)擊每個(gè)鏈接可以鏈接到其他頁(yè)面或者當(dāng)前頁(yè)面的其他部分，并不是所有的鏈接組都要被放在Nav元素里面，只需要把最主要的、基本的、重要的放在Nav元素里面即可。

比如說(shuō)頁(yè)腳底部如果有個(gè)版權(quán)申明，不建議使用Nav元素，而建議使用footer元素是最合適的。一個(gè)頁(yè)面中可用多個(gè)Nav元素作為整體或者不同部分的導(dǎo)航

示例代碼：

在上面這段代碼中，通過(guò)在Nav元素內(nèi)部嵌套無(wú)序列表ul來(lái)搭建導(dǎo)航結(jié)構(gòu)。通常一個(gè)HTML頁(yè)面中可以包含多個(gè)Nav元素，作為頁(yè)面整體或不同部分的導(dǎo)航。具體來(lái)說(shuō)Nav元素可以用的場(chǎng)景如下：

1、傳統(tǒng)導(dǎo)航條：目前主流網(wǎng)站上都有不同層級(jí)的導(dǎo)航條，其作用是跳轉(zhuǎn)到網(wǎng)站的其他主頁(yè)面。

2、側(cè)邊欄導(dǎo)航：目前主流博客網(wǎng)站及電商網(wǎng)站都有側(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è)操作：翻頁(yè)操作切換的是網(wǎng)頁(yè)的內(nèi)容部分，可以通過(guò)單擊“上一頁(yè)”或“下一頁(yè)”切換，也可以通過(guò)單擊實(shí)際的頁(yè)數(shù)跳轉(zhuǎn)到某一頁(yè)。

除此Nav元素也可以用于其他重要的、基本的導(dǎo)航鏈接組中。并不是所有的鏈接組都要被放進(jìn)Nav元素，只需要將主要的和基本的鏈接放進(jìn)Nav元素即可。