HTML a 标签详解
a
标签是浏览器中最常见的标签,它最主要的作用是从一个页面跳转到另一个页面,那么除了超链接这个最主要的功能,你还知道 a
标签的哪些功能呢?
a
标签的属性
href
a
标签有一个至关重要的属性:href
,如果没有设置这个属性,他就会和最普通的行内元素一样 span
一样,没有特殊的功能。
<a href="https://bilibili.com">网址直接跳转</a>
<a href="images/1.webp">相对路径跳转</a>
<a href="hello.exe">如果是打不开的文件,则下载之</a>
<a href="">空链接是刷新</a>
<a href="#">#是回到顶部</a>
<a href="javascript:;">禁止链接跳转</a>
href
的工作原理1:
1)a 标签的 href 属性值如果是以 http 开头的,那么浏览器会马上去解释该网址:首先会在本地机器去找一个 hosts 文件, 如果在 hosts 文件上该域名没有对应的主机,那么浏览器就去到对应的 dns 服务器去寻找该域名对应的主机号。如果找到了对应的主机,那么该请求就会发给对应的主机,最后打开该页面。
2)如果 a 标签的 href 属性值没有以任何协议开头,那么浏览就会启动 file 协议解释器去解释该资源路径。
3)如果 a 标签的 href 属性值并不是以 http 协议,而且其他的一些协议,那么这时候浏览器就会到我们本地电脑的注册表中去查找是否有处理这种协议的应用程序,如果有,那么马上启动该应用程序处理该协议。常用的协议:
<a href="tel:12345678">拨打电话</a>
<a href="mailto:12345678@qq.com">打开邮箱应用</a>
如果点击相关的链接,浏览器会弹出一个对话框,或者直接打开默认的应用程序。这个功能非常有意思,读者可以自己尝试一下。
target
a
标签最主要的功能是页面跳转,跳转的目标页面可以在当前窗口打开,也可以在新窗口打开,新窗口这个功能可以由 target
属性控制:
<a href="https://bilibili.com" tatget="_blank">新窗口打开网页</a>
<a href="https://bilibili.com" tatget="_self">当前窗口打开网页</a>
【注意】属性值前面有一个下划线。
a
标签的嵌套
a
标签是一个行内元素,可以当做内容用于其他块级元素的子元素,也在它的内部也可以嵌套块级元素,这样点击一块内容可以跳转到其他页面(卡片链接),但是 a
标签不能嵌套另一个 a
标签:
<a href=""><h3>出Bug了</h3><span class="box"><a href="">哈哈哈</a></span>
</a>
在浏览器中被解析成:
<a href><h3>出Bug了</h3><span class="box"></span>
</a>
<a href="">哈哈哈</a>
正常人也不会这么嵌套,但标签嵌套多了难免会犯傻,所以记住这个特例对调试找错有帮助。
a
标签的样式
下划线
a
标签典型的特点是自带一个下划线。下划线效果是可以通过 css 设置的:
a {text-decoration: none; /*去掉下划线*/
}/*加上下划线*/
a {text-decoration: underline;
}/*还能设置线型样式*/
a {text-decoration: underline dotted red;
}
更多样式可以参考:MDN text-decoration.
字体颜色
a
标签的默认字体颜色是蓝色,我们知道,字体样式:例如字体大小,行高,颜色等属性是可以继承父元素的,但如果该元素带有某种浏览器自带的特殊样式(user agent style),那么该属性就不会继承,由于这个原因, a
标签的颜色设置需要我们自己初始化成:
a {color: inherit;
}
这样 a
标签也可以继承父元素的颜色了,不需要单独设置。
盒子属性
a
标签是一个行内元素,它和其他行内元素一样:
- 设置宽高无效
- 设置上下外边距无效
- 设置上下内边距会把背景撑开,但不能撑开内容。
但有时候网页需要一个长的像按钮一样的链接,按钮需要设置高度与宽度、内外边距,可以在 a 标签外面套一层会计标签,也可以把它设置成行内块元素解决:
a {display: inline-block;height: 32px;line-height: 32px;padding: 4px 16px;border-radius: 5px;/*辅助样式*/text-decoration: none;color: deeppink;background-color: lightpink;
}
动态效果
a
标签可以根据用户的行为设置某些样式,例如当鼠标停在链接上时,鼠标的形状会变成手型的。这个效果其实是:
a:hover {cursor: pointer;
}/*改成其他的就变了*/
a:hover {cursor: auto;
}
更多鼠标的指针样式可以参考 MDN cursor。
值得一提的是 :hover
,这表示鼠标飘过该元素时的状态,称为伪类选择器。类似的还有:
/* 带有 href 的a标签会生效, 用得比较少了*/
a:link {color: brown;
}/* visited 点过的链接会生效,用的比较少了*/
a:visited {color: aquamarine;
}/* 鼠标滑过时生效,使用非常多 */
a:hover {color: blueviolet;
}/* 鼠标长按元素的生效 */
a:active {color: darkcyan;
}
一般来说,上述伪类样式只会用到一个,但是如果要同时设置以上四个样式时,需要注意声明的先后顺序。如果一个链接没有被访问过,那么它有可能同时拥有 link , hover 两个属性,不能让 link 写在后面,否则不管 hover 是否,都会显示link的样式;同样的道理,如果一个链接已经被访问过了,那么它有可能同时拥有visited , hover 两个属性,hover 要在 visited 的后面2。
【技巧】记忆方法:条件苛刻的放在后面。
参考文章
♥ 非常感谢大家的点赞与关注。文章整理自网络,若有疏漏请在评论区指正。
★ 本文开源(Github链接)欢迎参与贡献,转载需注明出处:小星森. HTML a 标签详解. 知乎.
★ 封面图片来自:https://www.pexels.com/.
★ 商业合作请发私信或邮件:zuiaiqiansen@163.com,并注明主题:商业合作。
★ 宣传做的好,产品差不了,宣传做的棒,产品No.1。我是前端小星森,让用户看到最伟大的产品。本人会一点点前端,如果贵公司有一流的产品或服务需要前端工程师展示,或需要一个前端工程师实现您的创业梦想,请发邮件:zuiaiqiansen@163.com,并注明主题:招聘前端工程师。
前端路上的小兵. 详解HTML的a标签(超链接标签) . 博客园. ↩︎
杜俊成. a 标签的伪类的正确顺序,以及原因. 博客园. ↩︎
HTML a 标签详解相关推荐
- HTML marquee标签详解
HTML marquee标签详解 在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动.而我们使用HTML的Marquee语句则可以产生更多的 ...
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
- HTML基本标签详解与运行截图
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- JSF标签详解(全)
转自:https://wenku.baidu.com/view/82b84b255901020207409c87.html :https://blog.csdn.net/qq_36411874/art ...
- SEO技巧:Meta标签详解
网页设计:Meta标签详解 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...
- java foreach标签_Java中Velocity foreach循环标签详解
Java中Velocity foreach循环标签详解 Java Velocity中foreach循环可以很容易的遍历数组或者集合. 定义 #foreach( $elem in $allElems) ...
- Div与Span标签详解
Div与Span标签详解 一.DIV 1.简介 2.作用 3.案例 二.span 1.简介 2.语法 3.案例 一.DIV 1.简介 在html中布局使用最多标签为div, 我们通常将网页重构说成di ...
- 网页设计:Meta标签详解
网页设计:Meta标签详解 很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 您的 ...
最新文章
- 一、JAVA通过JDBC连接mysql数据库(连接)
- vim 删除操作命令
- ./configure 参数解析
- win上mysql忘记root密码_MySQL数据库之windows下mysql忘记root密码的解决方法
- centos 开机执行的命令
- android3D动画,绕y轴旋转
- PHP学习笔记:利用百度api实现手机归属地查询
- 将 Android* x86 NDK 供 Eclipse* 而移植 NDK 演示示例应用程序
- 写代码:实现用户输入用户名和密码,当用户名为seven且密码为123时,显示登录成功,否则失败,失败时允许重复输入三次。...
- (Windows)获取系统显示的缩放比例方法
- 笔记 -凸函数 /KL距离
- 概率论与统计学——学习资料(更新..........)
- 计算机台账管理需求分析,结合工作经验研究数据中心机房管理统计的需求和实方式论文...
- 微服务等于 Spring Cloud?了解微服务架构和框架
- 3DText无法被物体遮挡 - 解决
- Type-C强光手电快充方案
- 音视频基础知识---音频编码格式
- Java语音技术之FreeTTS
- QQ坦白说如何查对方身份??其实很简单~
- 十八数藏柏松:数字藏品拥有广阔的发展空间,能为社会输出更好的价值
热门文章
- 磁共振线圈分类_磁共振线圈的发展历程
- android 按钮边距,安卓button代码初始化默认内边距问题
- oracle 11g jdk设置,java-如何从oracle 11g jdbc 7/14 jdk 1.7中的读取调...
- vue @cliick.stop @click.prevent @click.self
- Vue之v-on之修饰符prevent(007)
- 4款报表工具功能对比,哪款最实用?
- 一款简单易用的web报表工具
- 三大重组股上涨最具爆发力!
- 阿里巴巴使用的Rax源码
- 企业邮箱哪个好用,公司如何选择企业邮箱