Html5 <nav>标签用法

最新推荐文章于 2023-06-08 00:15:00 发布
最新推荐文章于 2023-06-08 00:15:00 发布
阅读量8.2k 收藏 5
点赞数 1
分类专栏： HTML5学习笔记 文章标签： html5


nav  字面上理解为“导航”，在html5中用于包裹一个导航链接组，用于显式的说明"这是一个导航组”，在同一个页面中可以同时存在多个nav。

  1. 不是所有的链接组都需要使用nav包裹，这主要看链接组是不是用于导航（可理解为是不是再页面中充当导航这一角色），链接可以是一些操作，如删除，编辑；可以是一些提示性元素，如链接到其他网站的解释。
  2. 导航，顾名思义，就是引导的路线，那么具有引导功能的都可以认为是导航，如网站的栏目，侧边栏的相关内容，翻页操作，一个本书的章节导航，一章书的分段导航。
  3. 导航可以页与页之间导航，也可以是页内的段与段之间导航。
  4. nav是一个明确定义功能的元素，所以从文档的意义比功能的意义更大。【html5zhan】

情景一：
页面导航

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
< title >html5zhan nav元素情景一</ title >
 
     < header >
         < h1 >html5zhan nav元素情景一< h1 >
         < nav >
             < ul >
                 < li >链接1</ li >
                 < li >链接2</ li >
                 < li >链接3</ li >
             </ ul >
         </ nav >
     </ h1 ></ header >
     < article >
     
     </ article >
     < footer >
     </ footer >

情景二：

段内导航

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
< title >html5zhan nav元素情景二</ title >
 
     < header >
         
     </ header >
     < article >
         < hgroup >
             < h2 >文章的标题< h2 >
             < nav >
                 < ul >
                     < li >< a href = "#p1" >段一</ a ></ li >
                     < li >< a href = "#p2" >段二</ a ></ li >
                     < li >< a href = "#p3" >段三</ a ></ li >
                 </ ul >
             </ nav >
         </ h2 ></ hgroup >
         < p id = "p1" >段一</ p >
         < p id = "p2" >段二</ p >
         < p id = "p3" >段三</ p >
     </ article >
     < footer >
     </ footer >


转自http://www.html5zhan.com/html5/nav
sun_7_flower
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML ＜nav＞ 标签
玄链教育
07-16 1128
nav> 标签定义导航链接的部分。
创建超链接--＜a＞、＜link＞和＜nav＞标签
m0_57327747的博客
05-11 478
超链接标签< a > 使用方法 举例 显示结果 a标签有的target属性，代表打开网页的方式. 定义文档与外部资源的关系标签< link > 使用方法 定义导航链接标签 使用方法
HTML5 Nav元素
孤云博客
08-23 2423
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 什么是Nav元素 Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要...
nav标签的作用
weixin_30411239的博客
01-09 1790
. <nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。一直以来，我们习惯于使用形如<div id="nav">或<ul id="nav">这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到<nav>标签中： <nav><a>首页&l...
Nav标签
aicang1759的博客
03-20 427
nav nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用元素是最恰当的，而不需要元素。 一直以来，我们都习惯用如下这种方式来定义导航条： <nav> <ul> <li><a href="inde...
「HTML和CSS入门指南」nav 标签详解
最新发布
a451319296的博客
06-08 8274
nav 标签是一个重要的标签，用于表示导航链接的区域。在使用 nav 标签时，请注意选择正确的属性和方法、语义化和嵌套，并避免兼容性问题。
html5中nav标签（导航链接）的详细介绍
热门推荐
dayoudun的博客
11-03 3万+
在html5版本中，新增了很多语义标签，比如：header标签、footer标签、aside标签、nav标签等等。这些语义标签没有实际的显示效果，只是起到语义的作用。今天小编要介绍的就是其中一个，即nav标签。nav标签目前已经用的比较多了，通常在网站导航源代码中都能看见它的踪影 “nav”是英文单词“navigation”缩写，有“导航”的意思。那它在html中作为标签又有什么意思呢？我们一起来看看nav标签的定义及用法吧！ 一、nav标签定义及用法 在html中，nav标签是html5
nav标签
qq_41614456的博客
12-03 1599
nav标签 #nav链接到当前页的其他部分 &amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;nav&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;ul&amp;amp;amp;amp;amp;gt; //回顶部 &amp;amp;amp;amp;amp;lt;li&
HTML5标签
......的博客
08-23 398
HTML5中废弃的标签 article aside audio html lang="en"> head> meta charset="UTF-8"> title>title> head> body> audio src="萧忆情 - 童话镇 [mqms2].mp3" controls="controls">audio> body> html> bdi
<nav>标签的用法和内置属性
03-29
在HTML5中，<nav>标签被用作语义标签，以便更好地描述页面的结构和内容。 内置属性： - `role`：指定< nav >元素的角色。常用的值有“navigation”、“menu”和“list”等。 - `aria-label`：为< nav >元素提供可...
详解HTML5常用的语义化标签
01-21
快速查询 article | aside | nav | section | header | footer ... <li><a>Html5</a></li> </ul> </nav> article 定义文章 装载显示一个独立的文章内容，论坛帖子、新闻、博客文章、用户评论等，
01-HTML5新的语义标签比如 <header>, <footer>, <article>, <section>,<aside>等
weixin_44077629的博客
03-09 406
HTML5新的语义标签： header footer nav main section aside article mark 定义有记号的文本 time details 定义元素的细节。（详细信息） summary 为 元素定义可见的标题。 figure 定义媒介内容的分组，以及它们的标题。 figcaption 定义 figure...
好程序员web前端分享HTML5中的nav标签学习笔记
chuochengjiao5054的博客
08-15 379
好程序员web前端分享HTML5中的nav标签学习笔记，nav标签全称navigation，顾名思义，是导航的意思。根据HTML5的相关标准定义如下： "A section of a page that links to other pages or to parts within the p...
nav标签使用说明
weixin_33827965的博客
03-15 9891
一、html nav标签语法与结构 - TOP 1、基本语法 <nav>内容</nav> 2、nav加id <navid=”abc”>内容</nav> 3、nav加class <navclass=”abc”>内容</nav> 4、nav标签快速理解掌握Nav是与导航相关的...
html中加上nav标签作用,html：nav标签实际上起了什么作用呢？
weixin_42418755的博客
05-31 2433
我在网上搜了这个标签，定义导航链接的部分，但是我把它去掉也没有看出来有什么影响的，我想是我暂时还没到它有用的时候。请教各位它到底有什么独特的作用呢？另外，在学HTML的时候想看出来各个标签的独特作用，但是经常会觉得有的标签好像没啥用啊，有的从效果上也看不出来，或者标签之间有类似功能，怎么样能够去分辨和体会呢？只是html5中用于增强语义的一个标签而已。语义化有利于网页的SEO。为了语义化而已。可能...
php nav,html nav标签的作用与使用的详解
weixin_39540934的博客
03-12 719
HTML5中的新元素标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。一直以来，我们习惯于使用形如或这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到标签中：HomeAboutBlog根据W3C的定义规范：nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接...
html5---nav标签
12-15 1179
nav是新增的html标签，只要html中使用nav标签，这样的布局就变成使用html5布局的网页。但html5新增标签局限性，低版本的IE浏览器不支持。 如果低版本浏览器浏览html5标签，对应布局将失效。设置的css样式也是无效的。所以要谨慎选择使用。 一般传统网页通常不会使用html5新增标签布局，所以注意选择使用。 智能手机浏览网页、平板电脑浏览的网页可以适当使用html5新增标签或
html nav标签无序排列,web前端分享HTML5中的nav标签
weixin_39634878的博客
06-03 362
web前端分享HTML5中的nav标签，nav标签全称navigation，顾名思义，是导航的意思。根据HTML5的相关标准定义如下： "A section of a page that links to other pages or to parts within the page:a section with navigation links." 中文翻译大概意思是”页面中的一个用来链接到其它...
Html5开发之链接标签nav的用法
weixin_39037804的博客
09-18 2278
HTML( <nav>)元素用来表示一个含有多个超链接的区域，这个区域的连接可以连接到其他页面，也可以连接到本页面内部其他部分。 用法说明: 并不是所有的链接都必须使用 <nav>元素,它只用来将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值