html中a标签的知识点有哪些


这篇文章主要介绍“html中a标签的知识点有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html中a标签的知识点有哪些”文章能帮助大家解决问题。
a标签定义超链接(用于从一张页面链接到另一张页面)或锚(用于从页面当前位置跳转至指定锚点),它最重要的属性是 href 属性,指示链接的目标。所有浏览器都支持 a 标签。
此处列举几个相对常用的属性
具体用法:锚点
感觉HTML5以前,a标签主要是用来做锚点跳转、链接跳转和按钮点击事件,HTML5出现之后,a标签更多的用来做文件下载功能了
a标签中有四个伪类,分别是:
link:设置a对象在未被访问前的样式表属性
visited:设置a对象在其链接地址已被访问过时的样式表属性
hover:设置对象在其鼠标悬停时的样式表属性
active:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性
通过写入伪类的样式表,可以修改a标签在各种状态下的显示形态,为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后,所以a标签伪类样式重写的顺序应该是:a:link、a:visited、a:hover、a:active
那么,为什么一定是这个顺序,才会使伪类样式按照我们心中所想而生效呢?这就涉及到CSS样式的优先级问题了。可悲催的是,伪类的特殊性(应用优先级)是同样的,所以,后出现的伪类会覆盖先出现的伪类(同时激活)。
假设我们不按这个顺序书写样式,我们按照LHAV的顺序来写会发生什么呢?
举个简单的例子
当我点击了test1之后,此时页面上一个被点击过的按钮,一个没被点击过的按钮,按照预期,【test1】渲染:visited会变成黄色,而【博客园】渲染:link显示红色,嗯,是这样显示没错
但是有一个问题,鼠标放至按钮上时,会渲染:hover伪类将文字变成绿色,点击了按钮test1时,其实是触发了active状态的,但是,并没有渲染:active伪类将文字变成黑色,并且,点击过后,不管如何hover,都不会再变成绿色了。实际上,页面初始化的时候,两个a标签目前的状态都是:link状态,所以均显示红色,当鼠标放至【test1】的时候,该按钮处于:hover状态,显示绿色,点击按钮不放时触发:active,显示了黑色,放开以后,按钮变成:visited状态,显示黄色,此时,不管再想触发:hover还是:active,均会被最后的:visited样式给覆盖掉,:visited一旦被触发,除非删除历史记录,否则,会一直存在。
这也就是为什么,a标签伪类自定义样式的话,需要用这种顺序来书写了,显而易见,:link和:visited都是长期状态,而:active和:hover是短期状态,用开关的说法来描述的话,就是::link本身是一个打开的开关,且关闭后不能再打开,:visited本身是一个关闭的开关,且打开后无法再关闭,:active和:ho免费云主机域名ver本身是一个关闭的开关,开关状态由鼠标决定。加上在CSS样式的优先级中伪类的应用优先级是同样的,那必然是长期状态在前,短期状态在后,所以说,虽然大家长期被熏陶的是使用LVHA顺序来书写样式,我估计只是为了方便记忆而已:LoVe,HAte。毕竟,只要遵循了长期状态在前,短期状态在后这个原则,:link和:visited谁在前,谁在后问题并不大,它们的状态不可能同时出现,:active和:hover谁在前,谁在后也不影响它们各自的样式渲染效果。你也可以假装一下:LV比较贵,HA不知道是个啥。
但是有一点要谨记:
a标签href=””的时候,默认状态时:visited状态;a标签没有href属性的时候,默认状态时:active状态,这两种情况都不影响:active和:hover的触发,但是永远不会触发:link关于“html中a标签的知识点有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注百云主机行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: css不透明度opacity属性的示例分析

这篇文章主要为大家展示了“css不透明度opacity属性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css不透明度opacity属性的示例分析”这篇文章吧。 一、opacity属性 1、opacity…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

Like (0)
Donate 微信扫一扫 微信扫一扫
Previous 10/09 20:34
Next 10/09 20:34

相关推荐