快收藏：HTML5中Nav元素的正确打开方式

Love The Way You Lie 2023-01-13 09:08 110阅读 0赞

**Nav元素是什么？**

Nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面或者当前页的其他部分。

Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在Nav元素里面，**只需要把最主要的、基本的、重要的放在Nav元素里面即可。**

比如说页脚底部如果有个版权申明，不建议使用Nav元素，而建议使用footer元素是最合适的。一个页面中可用多个Nav元素作为整体或者不同部分的导航

**示例代码：**

![283a8252d9667a6d6047de3b9603820c.png][]

Nav元素示例代码

在上面这段代码中，通过在Nav元素内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个Nav元素，作为页面整体或不同部分的导航。

**具体来说Nav元素可以用的场景如下：**

**1.传统导航条：**目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。

**2.侧边栏导航：**目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

**3.页内导航：**它的作用是在本页面几个主要的组成部分之间进行跳转。

**4.翻页操作：**翻页操作切换的是网页的内容部分，可以通过单击“上一页”或“下一页”切换，也可以通过单击实际的页数跳转到某一页。

除此Nav元素也可以用于其他重要的、基本的导航链接组中。并不是所有的链接组都要被放进Nav元素，只需要将主要的和基本的链接放进Nav元素即可。

**点赞 ****·** **分享 ****·** **转发**

**帮助更多需要的人看到**

![0cb973a17845899ff2c34c308d72b5ba.gif][]

**END**

![9136d5705d31c267e55888caef6a0676.png][]

[283a8252d9667a6d6047de3b9603820c.png]: /images/20221022/fb701f3dec264c788e275fbe3dc9aab1.png
[0cb973a17845899ff2c34c308d72b5ba.gif]: /images/20221022/58b347006e514fa1bd635458f3763193.png
[9136d5705d31c267e55888caef6a0676.png]: /images/20221022/93cca8b9f63c4bd6bf84d2dc4f05d845.png

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关快收藏：HTML5中Nav元素的正确打开方式

Nav元素是什么？ Nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接

Love The Way You Lie/ 2023年01月13日 09:08/ 0 赞/ 111 阅读

相关 Java中自定义注解的正确打开方式

在java中，我们在使用的过程中，常常能够用到注解，例如： @Override @FunctionalInterface(0 @SuppressWarnings

约定不等于承诺〃/ 2022年12月01日 11:57/ 0 赞/ 133 阅读

相关 HTML5中Nav元素作用及应用场景知识点

HTML5中Nav元素作用及应用场景知识点，Nav元素一般用来做导航栏，链接到本页面的某个位置或者是其他页面。元素标签将具有导航性质的链接划分在一起，使代码结构在语义化方面

「爱情、让人受尽委屈。」/ 2022年11月16日 13:57/ 0 赞/ 104 阅读

相关 Java学习的正确打开方式

在博主认为，对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结，前三者博主将淋漓尽致地挥毫于这篇博客文章中，至于总结在于个人，实际上越到后面你会发现学习的最好方式

我不是女神ヾ/ 2022年10月15日 07:58/ 0 赞/ 209 阅读

相关 html5中的table元素

<html> <head> <title>Table</title> </head>

亦凉/ 2022年08月22日 13:19/ 0 赞/ 183 阅读

相关 Baidu的正确打开方式

如何使用百度，在百度上可以干什么？ 1，查单词，如devastate的意思，百度会告诉你。有些东西，不应该去问百度。比如， 1，明天股票会不会涨。 2，4

古城微笑少年丶/ 2022年08月21日 15:37/ 0 赞/ 200 阅读

相关打开Shapefile文件的正确方式

打开Shapefile文件的正确方式作者：阿振邮箱：tanzhenyugis@163.com 博客：[https://blog.csdn.net/theonegi

谁借莪１个温暖的怀抱￠/ 2022年05月23日 04:39/ 0 赞/ 431 阅读

相关 Lombok的正确打开方式

前言本小结写一下Lombok。 [什么是Lombok][Lombok] lombok是一个可以通过简单的注解的形式来帮助我们简化消除一些必须有但显得

古城微笑少年丶/ 2022年04月14日 03:15/ 0 赞/ 289 阅读

相关更快的插入HTML元素

一般我们想要往页面中添加HTML元素，通常是这样做的 let ol = document.querySelector('ol'); //假设在页面中有一个ol元素

短命女/ 2022年03月06日 18:14/ 0 赞/ 204 阅读

相关 HTML <nav> 标签

语义化布局不但能够提高代码的可读性，对于搜索引擎优化也有助益。 HTML5对语义化布局进行了加强，本文所要介绍的`< nav>`标签就是HTML5新增。 `<...

小灰灰/ 2020年05月15日 18:31/ 0 赞/ 888 阅读