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元素,作為頁面整體或不同部分的導航。(學習視頻分享:web前端)
具體來說,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、內頁導航

(學習視頻分享:web前端)
站長資訊網