html5編寫導航欄用什麼元素

html5編寫導航欄用nav元素。nav元素是導航元素，用於定義導航連結，可以將具有導航性質的連結歸納在一個區域中，使頁面元素的語意更加明確。nav元素可以用於的場合：1、傳統導覽列，其作用是跳轉到網站的其他主頁面；2、側邊欄導航，目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面；3、頁內導航，作用是在本頁面幾個主要的組成部分之間進行跳轉；4、翻頁操作。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML5 nav元素（導航元素）

nav元素用於定義導航連結，是HTML5新增的元素，該元素可以將具有導航性質的連結歸納在一個區域中，使頁面元素的語意更加明確。其中的導航元素可以連結到站點的其他頁面，或者當前頁的其他部分。例如下面這段範例程式碼：

<nav>
    <ul>
        <li><a href="#">首頁</li>
        <li><a href="#">公司概況</li>
        <li><a href="#">產品展示</li>
        <li><a href="#">聯絡我們</li>
    </ul>
</nav>
登入後複製

在上面這段程式碼中，通過在nav元素內部巢狀無序列表ul來搭建導航結構。通常，一個HTML頁面中可以包含多個nav元素，作為頁面整體或不同部分的導航。（學習視訊分享：）

具體來說，nav元素可以用於以下幾種場合。

傳統導覽列：目前主流網站上都有不同層級的導覽列，其作用是跳轉到網站的其他主頁面。
側邊欄導航：目前主流部落格網站及電商網站都有側邊欄導航，目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面。
頁內導航：它的作用是在本頁面幾個主要的組成部分之間進行跳轉。
翻頁操作：翻頁操作切換的是網頁的內容部分，可以通過單擊「上一頁」或「下一頁」切換，也可以通過單擊實際的頁數跳轉到某一頁。

除了以上幾點以外，nav元素也可以用於其他重要的、基本的導航連結組中。

需要注意的是，並不是所有的連結組都要被放進 nav元素，只需要將主要的和基本的連結放進nav元素即可。

比如說頁尾底部如果有個版權申明，我們就不建議使用nav元素，而是使用footer元素是最合適的。一個頁面中我們可用多個nav元素作為整體或者不同部分的導航

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元素效果演示圖如下：

如果想實現多層巢狀，我們可以在下面新建一個獨立的區塊，我們使用article。

<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=」section元素.html」>section</a>
</li>
<li>
<a href=」新增的主體結構元素.html」>s新增的主體結構元素</a>
</li>
</header>
</article>//這就實現了一層的巢狀
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=」section元素.html」>section</a>
</li>
<li>
<a href=」新增的主體結構元素.html」>s新增的主體結構元素</a>
</li>
</header>
</article>
登入後複製

Nav多層巢狀效果演示圖：

如果在底部有一些版權資訊的話，我們最好加在footer裡面。

<footer>
<p>
<a href=」/」>版權資訊</a>
<a href=」/」>站點幫助</a>
<a href=」/」>聯絡我們</a>
</p>
</foooter>
登入後複製

Footer效果圖如下：

總結nav元素的方法

1、傳統的導覽列

以騰訊為例：

2、側邊欄導航

3、內頁導航

（學習視訊分享：）

以上就是html5編寫導航欄用什麼元素的詳細內容，更多請關注TW511.COM其它相關文章！