HTML5中Nav元素作用及应用场景知识点
HTML5中Nav元素作用及应用场景知识点,Nav元素一般用来做导航栏,链接到本页面的某个位置或者是其他页面。元素标签
Nav元素用于定义导航链接,是HTML5新增的元素,该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面或者当前页的其他部分。
Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在Nav元素里面,只需要把最主要的、基本的、重要的放在Nav元素里面即可。
比如说页脚底部如果有个版权申明,不建议使用Nav元素,而建议使用footer元素是最合适的。一个页面中可用多个Nav元素作为整体或者不同部分的导航
示例代码:
在上面这段代码中,通过在Nav元素内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个Nav元素,作为页面整体或不同部分的导航。具体来说Nav元素可以用的场景如下:
1、传统导航条:目前主流网站上都有不同层级的导航条,其作用是跳转到网站的其他主页面。
2、侧边栏导航:目前主流博客网站及电商网站都有侧边栏导航,目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。
3、页内导航:它的作用是在本页面几个主要的组成部分之间进行跳转。
4、翻页操作:翻页操作切换的是网页的内容部分,可以通过单击“上一页”或“下一页”切换,也可以通过单击实际的页数跳转到某一页。
除此Nav元素也可以用于其他重要的、基本的导航链接组中。并不是所有的链接组都要被放进Nav元素,只需要将主要的和基本的链接放进Nav元素即可。
HTML5中Nav元素作用及应用场景知识点相关推荐
- html盒子有哪些属性,盒子模型有哪些属性 在html5中哪些元素具有盒子模型
HTML盒模型基本属性有哪些 CSS盒子模型就是在CSS技术所使用的一种思维模型.CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个 ...
- html里的section可以设置id,html5中section元素详解
html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
- HTML5中section由什么组成,html5中section元素详解
html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
- html5中提供的绘图元素,HTML5中Canvas元素的使用总结
HTML5中Canvas元素的使用总结 Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘 ...
- c语言内部超链接,HTML5中文本元素超链接的属性
本章主要探讨HTML5中文本元素重要的一个超链接,探讨它自身的属性以及路径问题. 超链接的属性 元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有通用属性或叫做全局属性.这方面的知识, ...
- HTML5中article元素的使用
本文和大家分享的主要是HTML5中article元素的相关用法,同时结合具体实例进行讲解,加深大家对article元素的印象,一起来看看吧,希望对大家学习HTML5有所帮助. 什么是Article元素 ...
- html5中footer元素的作用,html5 footer标签怎么用?footer标签的用法实例
本篇文章主要的为大家介绍了关于HTML5 footer标签的使用方法,有布局之类的知识,纯html编辑,不需要会css,好了,现在让我们来看看这篇关于html5 footer标签的文章吧 首先我们先看 ...
- html5 当中nav怎么用,html5中nav标签的使用
HTML5中的新元素标签用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读器等设备的支持也更好. 一直以来,我们习惯于使用形如 id="nav"& ...
- html5中details标签作用
html5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 标签定义及使用说明 <details> 标签规定了用户可见的或 ...
最新文章
- 2017年深度学习必读31篇论文(附下载地址)
- 如果对象为空,java函数String.valueOf(Object obj)返回null字符串
- Vue.js 插件开发详解
- 解决网站在负载均衡环境下SESSION丢失的问题
- 字符流复制Java文件改进版
- JDK 14的新特性:更加好用的NullPointerExceptions
- 阿里巴巴宣布架构调整;英伟达放大招!重磅发布 ​TensorRT 7 ,支持超千种计算变换;苹果、谷歌和亚马逊罕见结盟……...
- api接口怎么分批传递数据_新手上路:浅谈什么是API接口 API定义是什么
- 使用实体框架返回数据表
- Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.1.xs
- 【算法精解】计数排序
- 股票软件开发搭建:准备与过程
- CMSIS 记录与下载
- 传智播客总裁黎活明“传智专修学院成立暨揭牌仪式”演讲实录
- 张博涵清华大学_2009年北大,清华提前录取保送生人数最多的 33所中学
- 如何快速增加NFC能力到任何应用程序
- 最近邻搜索|Nearest neighbor search
- 数据库的部分依赖,完全依赖,传递依赖以及三种范式总结
- Kafka创建Topic出现replication factor: 2 larger than available brokers: 0 减少replication factor还是出现错误的解决办法
- 用java代码实现,使用5升和6升的水杯装出3升的水