首页 | 开发 | 网页 | html教程 | html入门

html nav标签语法与结构

2019年11月30日 作者：佚名

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，自然看以上代码就会一眼就会认识案例抒发常识点，人造看看以上案例就操作把持了。

相关链接