首先nav也是在html5中新增的元素標籤。同時和其它新增標籤一樣，nav在傳統html5以前版本Html布局中作為導航條相關常用命名來使用。
比如：
<div class=”nav”>網站導航內容</div>
或
<div id=”nav”>網站導航內容</div>
在html5中特地將以前常用命名nav作為一個新標籤元素。此標籤常用於導航處布局。
一、html nav標籤文法與結構
1、基本文法
<nav>內容</nav>
2、nav加id
<nav id=”abc”>內容</nav>
3、nav加class
<nav class=”abc”>內容</nav>
4、nav標籤快速理解掌握
Nav是與導航相關的，所以一般用於網站瀏覽版面配置。同時完全就像使用div標籤、span標籤一樣來使用<nav>標籤可添加id或class，而與div標籤又有不同處是，此標籤一般只用於導航相關地方使用，所以在一個html網頁布局中可能就使用在導航條處，或與導航條相關的地方布局使用。
5、nav配合什麼標籤使用
DIVCSS5在以前文章教程中介紹過一般導航條使用ul li標籤布局，使用一般布局中nav標籤與ul li標籤配合使用。
小案例如下：
1）、傳統html布局
<div id=”nav”><ul><li>首頁</li><li>欄目名稱</li><li>聯絡我們</li></ul></div>
2）、nav標籤後
<nav><ul><li>首頁</li><li>欄目名稱</li><li>聯絡我們</li></ul></nav>
由以上HTML布局到HTML5轉換其實很容易理解html nav標籤使用，以及配合ul li布局導航條技巧。
二、相容性提示
因為<nav></nav>標籤是html 5新增的標籤，而在IE8及以下IE瀏覽器（IE8、IE7、IE6）不支援，所以根據需求選擇布局HTML。
三、html nav css布局案例
通過傳統div布局與nav布局進行對比學習，從而從html css布局中掌握nav文法與用法。
以下DIVCSS5通過三個布局實踐讓大家掌握nav布局，分別：
1）、傳統div+ul+li布局導航樣式；
2）、nav+ul+li布局導航樣式；
3）再在nav+ul+li布局的基礎上對nav設定class css樣式
通過以上案例讓大家明白nav一般配合ul li或直接用於布局導航相關的布局，同時nav就像div那樣使用可以直接設定css也可以加class或id 。
具體案例如下：
1、傳統div css布局與NAV css布局完整HTML原始碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>nav布局 線上示範 DIVCSS5</title> <style> ul,li{ padding:0; margin:0;list-style:none} .nav{border:1px solid #000; width:510px; overflow:hidden} .nav li{ line-height:22px; float:left; padding:0 5px;} .nav li a:hover{ color:#F00} /* 對class=nav設定黑色邊框，滑鼠滑過超連結顯示文字為紅色 */ nav{ border:1px solid #F00; width:520px; overflow:hidden} nav li{line-height:22px; float:left; padding:0 6px;} nav li a{ color:#F00} /* 對nav設定紅色邊框，超連結位置為紅色 */ nav.bg{ background:#CCC} nav.bg li a{ color:#090} /* 對nav設定class=bg，設定背景為灰色，超連結位置為綠色 */ </style> </head> <body> <p>傳統 div ul li布局導航條效果</p> <div class="nav"> <ul> <li><a href="http://www.divcss5.com/">網站首頁</a></li> <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> <li><a href="http://www.divcss5.com/htmlrumen/">HTML入門</a></li> <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li> <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> <li><a href="http://www.divcss5.com/cssrumen/">CSS入門</a></li> </ul> </div> <p>html5 nav ul li布局導航條沒有對nav加id和class 同時設定nav li a超連結顯示文字字型顏色為紅色字和紅色框效果</p> <nav> <ul> <li><a href="http://www.divcss5.com/">網站首頁</a></li> <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> <li><a href="http://www.divcss5.com/htmlrumen/">HTML入門</a></li> <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li> <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> <li><a href="http://www.divcss5.com/cssrumen/">CSS入門</a></li> </ul> </nav> <p>html5 nav ul li布局另外加class=bg設定背景為灰黑色,超連結顯示文字字型顏色為綠色</p> <nav class="bg"> <ul> <li><a href="http://www.divcss5.com/">網站首頁</a></li> <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> <li><a href="http://www.divcss5.com/htmlrumen/">HTML入門</a></li> <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li> <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> <li><a href="http://www.divcss5.com/cssrumen/">CSS入門</a></li> </ul> </nav> </body> </html>
以上使用傳統div+ul+li+css布局導航類布局，然後使用nav+ul+li+css布局，同時再在nav的基礎上對nav設定class改變其布局對比效果。
特別說明：可能對於不會div css布局來說，可能看到以上代碼比較困難，根本的解決方案就是學習div+css，自然看以上代碼就會一眼就會明白案例表達知識點，自然看看以上案例就掌握了。
2、DIVCSS5執行個體布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
