位置: IT常识 - 正文

HTML a 标签详解(html中a标签的作用)

编辑:rootadmin
HTML a 标签详解

推荐整理分享HTML a 标签详解(html中a标签的作用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html5的a标签,html中a标签的作用,html中a标签属性,html5的a标签,html有a标签的例子,html有a标签的例子,html的a标签,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>HTML a 标签详解(html中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;}

一般来说,上述伪类样式只会用到一个,但是如果要同时设置以上四个样式时,需要注意

本文链接地址:https://www.jiuchutong.com/zhishi/285054.html 转载请保留说明!

上一篇:cuda常见报错(cuda completed with errors)

下一篇:vue实现数据实时刷新(vue数据实时更新)

  • 净利润跟税后利润是二个概念吗
  • 增值税的计税依据包括
  • 专票待认证
  • 工矿区城市维护建设税税率
  • 公司购买员工意外保险费会计分录未收到发票
  • 冲回多提的坏账准备分录为
  • 会计折旧法有哪几种
  • 个人处置打包债权取得的收入
  • 行政单位资产核算
  • 未进行账务处理违反什么
  • 交通违章罚款有优惠吗
  • 小规模纳税人出售使用过固定资产
  • 差额征税科目
  • 营改增后房产税计税依据及计算方式
  • 发票首次核定
  • 固定资产折旧计入成本还是费用
  • 分支机构分配表 资产总额无法区分怎么办
  • 分公司税率怎样确定
  • 营改增后二手固定资产折旧纳税调整怎么做账?
  • 小额贷款公司可以放贷吗
  • 支付版权费用怎么入账
  • 什么是毛利润和纯利润
  • 研发费用加计扣除优惠明细表
  • Apache+php+mysql在windows下的安装与配置图解(最新版)
  • 罚款是否需要开发票
  • 电脑默认网关不可以用
  • 辅助生产成本的交互分配法
  • 购货方收到红字发票怎么报税
  • 天猫魔合
  • 固定资产相关会计准则
  • 增值税即征即退操作流程
  • 企业所得税法定税率是多少
  • 浅谈php中的错误处理方法
  • 旅行社差额征税税率是多少
  • uniapp中uni.navigateTo传递变量
  • openai 入门
  • php 输出
  • 表单验证方法一般有哪几种
  • 推荐几个比较好用的
  • 餐饮服务专票可以抵税吗
  • 预算会计的核算对象是什么
  • 增值税进项税加计抵减
  • 物业费少交点,有什么理由
  • 坏账准备计提范围包括
  • 互联网+文本格式
  • 政府补助会计处理方法
  • 营业外收入汇算清缴时也得计入收入
  • 政府会计的会计要素有哪几个?会计要素之间的关系如何?
  • ibm db2认证
  • 职工意外伤害险赔偿标准
  • 增值税减免税申报表
  • 建筑劳务如何开劳务发票
  • 初级会计实务中国财政经济出版社
  • 股东投入的资金
  • 专利年费可以计入研发费用加计扣除吗
  • 个税手续费返还政策文件
  • 房地产企业销售现房是否预缴增值税
  • 收到招聘费发票怎么做账
  • 固定资产明细账图片
  • 跨年度的项目如何做
  • sql语句中having是什么意思
  • centos如何设置网卡
  • wfxsnt40.exe - wfxsnt40是什么进程
  • 如何设置鼠标移入并停止时触发接口
  • Win10 Mobile 10586.312提前体验
  • nodejs爬虫框架crawler
  • android Unable to execute dex问题的解决
  • jquery 随机函数
  • cmd下在win上做vpn的命令分享
  • 悬浮广告怎么屏蔽
  • unity游戏加密
  • 广西地方税务局决算公开表
  • 甘肃省政府非税收入电子发票在哪里打印
  • 国际税务局邮箱是多少
  • 东营市税务局领导分工
  • 保险赔款是免征还是不征?
  • 中国银行手机银行app官方下载
  • 建筑工程开票要在项目所在地
  • 建筑装饰业发票怎么开
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设