HTML5导航标签HTML导航CSS布局教程

Html 5添加了导航教程和导航css布局教程，HTML5添加了导航元素标签HTML5添加了nav标签.

DIVCSS5将html5页脚标签彻底引入到html页脚CSS布局案例演示中，让想学习html 5的朋友真正了解html页脚的应用和布局技巧。

首先，nav也是html5中的新元素标签。同时，像其他新添加的标签一样，在html5之前的传统Html布局中，nav被用作与导航栏相关的常用名称。

例如：

Divclass="nav "网站导航内容/div

或者

Divid="nav "网站导航内容/div

在html5中，以前常用的名字nav被专门作为一个新的标签元素。该标签通常用于导航布局。

一、html nav标签语法与结构 - TOP

1、基本语法

导航内容/导航

2、nav加id

Navid="ABC "内容/导航

3、nav加class

Nav class="ABC "内容/nav

4、nav标签快速理解掌握

Nav与导航有关，所以一般用于网站导航布局。同时，就像div标签和span标签一样，nav标签可以用来添加id或类。但是，与div标记不同，该标记通常只用于与导航相关的位置，因此它可能用于导航栏或html网页布局中与导航栏相关的位置。

5、nav配合什么标签使用

上一篇文章教程中介绍的DIVCSS5指出，通用导航栏使用ul li标签布局，通用布局中的导航标签与ul li标签一起使用。

小案例如下：

1)传统html布局

Divid="nav" ulli主页/lili列名/lili联系我们/li/ul/div

2)在导航标签之后

Navulli主页/lili列名/lili联系我们/Li/ul/导航

事实上，在从html布局到HTML5的转换中，很容易理解HTML导航标签的使用以及布局导航栏与ul li的结合技巧。

二、兼容性提示 - TOP

nav/nav标签是html 5中的新标签，IE8以下的IE浏览器(IE8、IE7、IE6)不支持。因此根据需要选择布局HTML。

三、html nav css布局案例 - TOP

比较传统的div布局和nav布局，从html css布局中掌握nav语法和用法。

下面的DIVCSS5让每个人通过三种布局实践来掌握导航布局，即：

1)传统div ul li布局导航样式；

2)导航李布局导航样式；

3)根据导航布局为导航设置类css样式

通过以上案例，我们可以理解nav通常与ul li一起使用，或者直接用于与布局导航相关的布局。同时，nav可以像div一样使用，可以直接设置css或者添加类或者id。

具体案例如下：

1.完整的HTML源代码传统的div css布局和导航css布局

！doctypehtmltownetacharset=' utf-8 '/title nav布局在线演示divcss5/titlestyleul，Li { padding :0margin:0list-style:none}。nav { border:1pxsolid # 000width:510pxoverflow:hidden}。nav Li { line-height :22 px；float:leftpadding:05px}.nav lia 3360 haver { color : # F00 }/*为class=nav设置黑色边框，鼠标悬停在超链接上的文本为红色*/nav { border :1 pxsolid # F00；宽度width:520pxoverflow : hidden } navli { line-height :22 px；float:leftpadding:06px}navlia{color:#F00}/*为nav设置红色边框，超链接位置为红色*/nav . BG { background : # CCC } nav . bglia { color 3360 # 090 }/*为nav和灰色背景设置class=bg。超链接的位置为绿色*//style/head myp传统divulli布局导航栏效果/pdiv class=' nav ' ullia href=' http://www.divcss5.com/'website主页/A/Lilia href=' http://www.divcs5.com/html/'html教程/A/Lilia href=' http://www.divcss5.com/htmlrumen/'getting以html开头/A/Lilia href=' http://www.divcss5.com/html5/'html5教程/A/Lilia href=' http://www.divcss5.com/rumen/'CSS教程/A/Lilia href=' http://www.divcss5.com/cssrumen/'introduction转CSS /a/li/ul/divphtml5navulli布局导航栏未向nav添加id和类别， 并将navlia超链接文本的字体颜色设置为红色单词和红色方框效果/Pnavullia href='网站的http://www.divcs5.com/'homepage/a/Lilia href=' http://www.divcs5.com/html/'html教程/a/Lilia href=' http://www.divcs5.com/htmlrumen/'introduction转html/a/Lilia href=' http://www.divcss5.com/html5/'html5教程/a/Lilia href=' http://www.divcss5.com/rumen/'CSS教程/a/Lilia href=' http://www.divcss5.com/cssrumen/'introduction转CSS/. Li/ul/naphtml 5 nav ulli布局加设class=bg，背景为灰黑色。超链接文本的字体颜色为绿色/pnavclass=' BG' ullia href='网站的http://www.divcss5.com/'homepage/a/lilia href=' http://www.divcss5.com/html/'html教程/a/lilia href=' http://www.divcss5 . Htmlrumn/' html简介/a/lilia href=' http://www.divcss5.com/html5/'html5教程/a/lilia href=' http://www.divcss5.com/rumen/'CSS教程/a/lilia href=' http://www . div CSS 5。

上面使用传统的div ul li css布局来导航类布局，然后使用nav ul li css布局，并基于nav为nav设置类以改变其布局对比效果。

特别说明：不知道div css的布局可能很难看到上面的代码。根本的解决办法是学习div css。自然可以一目了然的理解案例所表达的知识点，自然看上面的案例就可以掌握。

2.DIVCSS5实例布局截图

传统的div布局导航条和导航布局导航条，导航加类的浏览器效果截图

3.在线演示

注意查看案例。要看到nav布局(有效)效果，需要在一个HTML5浏览器中浏览观察。建议使用Google浏览器浏览观察nav布局效果。

4.打包下载

立即下载(1.253KB)

四、divcss总结 - TOP

Nav是一个新的html标签。只要在html中使用导航标签，这个html布局就会变成html5布局的网页。但是html5新标签的限制是低版本的IE浏览器不支持的(如果低版本浏览器浏览并添加html5标签，对应的布局无效，设置CSS样式无效)，所以要慎重选择使用。一般传统网页一般不使用html5添加布局，注意选择使用。智能手机浏览的网页和平板电脑浏览的网页可以适当添加html5标签或CSS3风格布局。