随時随地閱讀更多技術實戰幹貨，擷取項目源碼、學習資料，請關注源代碼社群公衆号(ydmsq666)、可加微信技術交流群、QQ技術交流群(183198395)。
什麼是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”>新增的主體結構元素</a>
</li>
</header>
</article>
如果在底部有一些版權資訊的話，我們最好加在footer裡面。
<footer>
<p>
<a href=”/”>版權資訊</a>
<a href=”/”>站點幫助</a>
<a href=”/”>聯系我們</a>
</p>
</foooter>
Footer效果圖如下：
總結nav元素的方法
1、傳統的導覽列
以騰訊為例：
2、側邊欄導航
3、内頁導航