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

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

一、nav标签定义及用法

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

通过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>

运行结果:

nav标签演示

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

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

  1. html5 当中nav怎么用,html5中nav标签的使用

    HTML5中的新元素标签用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读器等设备的支持也更好. 一直以来,我们习惯于使用形如 id="nav"& ...

  2. HTML5中Nav元素作用及应用场景知识点

    HTML5中Nav元素作用及应用场景知识点,Nav元素一般用来做导航栏,链接到本页面的某个位置或者是其他页面.元素标签 将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读 ...

  3. html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法

    Html5中新增标签与样式实现元素水平垂直居中的方法 发布时间:2021-06-12 12:44:51 来源:亿速云 阅读:71 作者:小新 这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...

  4. php video标签使用方法,HTML_HTML5 video标签(播放器)学习笔记(一):使用入门,近有在学习html5中video标签(播 - phpStudy...

    HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...

  5. HTML5新增的video标签,HTML5中video标签的使用方法

    HTML5中video标签的使用方法 发布时间:2020-08-27 11:33:56 来源:亿速云 阅读:100 作者:小新 这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...

  6. HTML中可以有多个meta吗,HTML5中meta标签有三个主要属性是什么

    HTML5中meta标签有三个主要属性是什么 发布时间:2020-10-22 13:46:11 来源:亿速云 阅读:88 作者:小新 小编给大家分享一下HTML5中meta标签有三个主要属性是什么,相 ...

  7. php中的ol标签,html5中ol标签的用法详解

    这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下 定义和用法 标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异 在 HTML ...

  8. 解决html5中video标签无法播放mp4问题的办法

    解决html5中video标签无法播放mp4问题的办法 参考文章: (1)解决html5中video标签无法播放mp4问题的办法 (2)https://www.cnblogs.com/it-tsz/p ...

  9. CSS中的长度单位和HTML5中多媒体标签的使用

    CSS中的长度单位和HTML5中多媒体标签的使用 第一部分.长度单位 1.基本长度单位 2.长度单位的换算 第二部分.vw.vh.vmin.vmax 1.vw.vh.vmin.vmax的含义 2.vw ...

  10. vue3-video-play视频组件的使用(一)——基本使用 HTML5中Video标签的属性、方法和事件汇总

    vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...

最新文章

  1. 北京/上海/深圳内推 | 百度视觉技术团队招聘视觉/3D算法工程师
  2. shell脚本知识点汇总
  3. C/C++中的拷贝构造函数和赋值构造函数
  4. boost::process::cmd相关的测试程序
  5. pci总线定时协议_汽车总线测试的“解忧杂货店”
  6. element ui表单验证
  7. mySQL教程 第5章 插入 更新与删除数据
  8. .net数据绑定控件中的数据导出到Excel
  9. Gartner发布2021年数字商务技术成熟度曲线,重点关注四项技术
  10. 上班又能摸鱼啦!在M1芯片的macbook上刷朋友圈可还行?
  11. Java基础学习总结(82)——Java泛型实例教程
  12. 【iOS-Cocos2d游戏开发之十五】详解CCProgressTimer 进度条实现“理想”游戏进度条!...
  13. Java后端开发流程
  14. Chrome插件开发入门
  15. 亚马逊 站内广告数据分析
  16. 最不起眼的基础知识,却成了你面试跨不过去的门槛
  17. 计算机网络在资源共享信息交换的体会,计算机网络学习心得体会.doc
  18. html链接ppt,PPT超链接的各种使用方法
  19. ajax跨域请求(CORS实现)
  20. 赛码练习编程题后台 动态规划——上台阶

热门文章

  1. 图片尺寸的修改(Java)
  2. ART加载OAT文件的过程分析
  3. 电脑自动跳转加QQ好友html,自动添加QQ好友.html
  4. 了解速率控制模式:什么是 CBR、VBR、CRF和Capped-CRF?
  5. DSP芯片的基本结构
  6. ABB机器人紧凑型控制柜内部结构(图)
  7. android内存脚本教程,安卓内存
  8. java是用什么语言写的_java用什么开发出来的?
  9. b站的服务器在哪个文件夹,b站缓存的视频在哪个文件 具体操作步骤
  10. python之随机生成一个手机号码