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配合什么标签应用
Thinkcss在夙昔文章教程中先容过一样平常导航条运用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语法与用法。
以下CSS5经由三个机关实践让大家掌控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结构 在线演示 CSS5</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{ bac千克round:#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="//www.css5.com.cn/">站点首页</a></li>
<li><a href="//www.css5.com.cn/html/">HTML教程</a></li>
<li><a href="//www.css5.com.cn/htmlrumen/">HTML入门</a></li>
<li><a href="//www.css5.com.cn/html5/">HTML5教程</a></li>
<li><a href="//www.css5.com.cn/css/">CSS教程</a></li>
<li><a href="//www.css5.com.cn/css/">CSS入门</a></li>
</ul>
</div>
<p>html5 nav ul li构造导航条不有对nav加id和class 同时设置装备摆设nav li a超链接翰墨字体颜色为血色字和血色框造诣</p>
<nav>
<ul>
<li><a href="//www.css5.com.cn/">网站首页</a></li>
<li><a href="//www.css5.com.cn/html/">HTML教程</a></li>
<li><a href="//www.css5.com.cn/htmlrumen/">HTML入门</a></li>
<li><a href="//www.css5.com.cn/html5/">HTML5教程</a></li>
<li><a href="//www.css5.com.cn/css/">CSS教程</a></li>
<li><a href="//www.css5.com.cn/css/">CSS入门</a></li>
</ul>
</nav>
<p>html5 nav ul li机关另外加class=bg设置后台为灰彩色,超链接文字字体色调为绿色</p>
<nav class="bg">
<ul>
<li><a href="//www.css5.com.cn/">web首页</a></li>
<li><a href="//www.css5.com.cn/html/">HTML教程</a></li>
<li><a href="//www.css5.com.cn/htmlrumen/">HTML入门</a></li>
<li><a href="//www.css5.com.cn/html5/">HTML5教程</a></li>
<li><a href="//www.css5.com.cn/css/">CSS教程</a></li>
<li><a href="//www.css5.com.cn/css/">CSS入门</a></li>
</ul>
</nav>
</body>
</html>
以上运用传统div+ul+li+css布局导航类构造，日后运用nav+ul+li+css组织，同时再在nav的根蒂上对nav设置class篡改其布局对比效果。
额定说明：大约对付不会div css构造来说，大概看到以上代码对比坚苦，根本的筹画法子等于进修div+css，自然看以上代码就会一眼就会认识案例抒发常识点，人造看看以上案例就操作把持了。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h52474.shtml
