ShopJsp 最专业权威的商城系统提供商,最适合二次开发的商城系统! 快速联系通道    电话:010-62910181  手机:18611625933   QQ:94367128

HTML5:nav标签的使用

2015-12-23  来源:华宇盈通

nav标签是HTML5中新增的元素标签,他与其他的新增标签一样,nav在HTML布局中用作导航标签来使用。如: <div class=”nav”>网站导航内容</div>或者是<div id=”nav”>网站导航内容</div>,而新增的nav标签更加方便的形式导航的功能<nav>网站导航内容</nav>。一下我们就来深入的学习nav标签的使用。

基本的使用方式:  

<nav>内容</nav>

<nav id=”abc”>内容</nav>

<nav class=”abc”>内容</nav>

nav标签和网站的导航是有关联的,所以我们一般用于网站导航的布局,同时完全可以向div标签一样使用,可以增加class样式、ID样式等。但是他和div标签又有很多的不同之处,nav标签一般只用于网站导航的地方使用。所以在一个HTML的网页中,只有在导航处或与导航息息相关的地方布局使用。

nav标签可以和很多的标签搭配使用,如一下两种模式:

<div id=”nav”>

<ul>

<li>首页</li>

<li>栏目名称</li>

<li>联系我们</li>

</ul>

</div>

 

<nav>

<ul>

<li>首页</li>

<li>栏目名称</li>

<li>联系我们</li>

</ul>

</nav>

由以上HTML布局到HTML5转换其实很容易理解html nav标签使用,以及配合ul li布局导航条技巧。

nav标签是否存在兼容性

因为<nav></nav>标签是html 5新增的标签,而在IE8及以下IE浏览器(IE8、IE7、IE6)不支持,所以根据需求选择布局HTML。

通过传统div布局与nav布局进行对比学习,从而从html css布局中掌握nav语法与用法。

以下DIVCSS5通过三个布局实践让大家掌握nav布局,分别:

1、传统div+ul+li布局导航样式;

2、nav+ul+li布局导航样式;

3、再在nav+ul+li布局的基础上对nav设置class css样式

以上内容就是本文要讲的HTML5中nav标签的使用方式,希望对你有一定的帮助。

 
在线咨询