html5中nav标签(导航链接)的详细介绍

在html5版本中,新增了很多语义标签,比如:header标签、footer标签、aside标签、nav标签等等。这些语义标签没有实际的显示效果,只是起到语义的作用。今天小编要介绍的就是其中一个,即nav标签。nav标签目前已经用的比较多了,通常在网站导航源代码中都能看见它的踪影

html5中nav标签(导航链接)的详细介绍

“nav”是英文单词“navigation”缩写,有“导航”的意思。那它在html中作为标签又有什么意思呢?我们一起来看看nav标签的定义及用法吧!

一、nav标签定义及用法

在html中,nav标签是html5版本中新增的标签,是使用来定义导航链接的部分。nav标签只是用来表示该区域是导航链接,默认并没有什么显示效果。

 

通过nav标签能更好的实现在不同设备上(如:手机、电脑等)控制导航链接是否显示,从而让网页适应不同大小的屏幕。

html5中nav标签(导航链接)的详细介绍

 

二、nav标签语法格式

<nav>导航链接</nav>

说明:

nav标签中的内容默认没有显示效果,只表示该区域是导航链接部分;nav标签只起语义的作用,没有实际的显示效果;nav标签中的内容通常是一个列表;三、实例

<!DOCTYPE html><html><head>

<meta charset="utf-8" />

<title>html5中nav标签(导航链接)的详细介绍</title>

</head>

<body style="background-color: bisque;">

<h3>nav标签演示:</h3>

<nav>

<a href="#">首页</a><a href="#">web前端</a>

<a href="#">服务器端</a><a href="#">关于</a>

</nav>

<h4>IE 8以及更早的版本不支持nav标签</h4>

</body></html>

运行结果:

html5中nav标签(导航链接)的详细介绍

nav标签演示

好了,关于html5中nav标签(导航链接)的详细介绍就到此结束了,希望能帮助大家!

上一篇:Html5的新增的语义标签 方便搜索引擎搜索


下一篇:领跑计划Day002Html