位置: 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数据实时更新)

  • 买新车时旧车置换新车划算吗
  • 发现之前的差旅费补助多报了一天该怎么调整
  • 所有者权益股东权益
  • 以前年度损益调整借贷方向
  • 个人独资企业政策性搬迁
  • 救灾捐赠会计分录
  • 二手房如何缴纳契税
  • 总包抵扣分包企业所得税
  • 企业丢失账簿稽查局可以处罚吗
  • 企业赔款可以抵税吗
  • 租的厂房再转租怎么开票抵扣
  • 设备安装和设备出售的税率一样吗
  • 欠税已经缴纳会影响征信吗
  • 法律规定临时工工资最迟多久结清
  • 国家税务总局公告2023年第1号
  • 差额征税条件
  • 物流公司的保险服务属于什么费用
  • 收到退回留抵退款的短信
  • 开模具公司要什么设备
  • 劳务公司客户问题分析
  • 如何调整账务
  • 股权变更需要缴纳印花税吗,缴纳多少
  • win10蓝屏怎么弄
  • 营业收入与营业成本之间的差额是
  • 招待费专用发票需要认证吗
  • Linux下which、whereis、locate、find 区别
  • 增值税进项税转出什么意思
  • 存货跌价准备减少
  • 对外投资损失是负债吗
  • php 函数作为参数
  • nginx连接超时时间设置多少
  • 退税发票在总局怎么开
  • vueity
  • matlab中自由变量
  • 使用的拼音
  • vue3中使用gis地图
  • 保险代理人展业成本如何计算
  • 外购无形资产账务处理
  • 货币资金有余额怎样填写清税申报表
  • 短期借款会计如何做账
  • numpy array ndarray区别
  • python中返回结果为true
  • 职工教育经费中的员工讲课费要发票吗
  • 一般纳税人企业所得税怎么征收
  • 合营企业长期股权投资
  • 将MySQL help contents的内容有层次的输出方法推荐
  • 公司个税如何申报流程
  • 转出未交增值税借方余额表示什么
  • 公司向股东个人借款怎么做账
  • 已认证抵扣增值税怎么撤回申报
  • 预收账款是否要交说
  • 可供分配利润的计算公式
  • 当月发票未到怎么做账
  • 发票章盖得不清晰怎么办
  • mysql数据库输入汉字是问号
  • linux命令实现
  • mssql insert into 和insert into select性能比较
  • win8系统无线网找不到
  • win10预览版选哪个
  • windows2000文件和文件夹的属性包括
  • 远程桌面 登录
  • win7如何查看图片的rgb
  • cmd命令start命令
  • 深度技术win10怎么样
  • RegSrvc.exe - RegSrvc是什么进程 有什么用
  • linux文本文件格式
  • ssh 使用代理
  • win8声音小怎么解决
  • linux 746
  • jquery 多选
  • node-js
  • gitlab管理员账号 审批
  • 为什么调用不了函数
  • python接入微信
  • 设计模式工厂模式使用场景
  • python saga
  • python电话本
  • 个人取得抽奖,购车抵用,需要缴纳个人所得税吗
  • 个人所得税app怎么更改手机号码
  • 税务申报时显示未抄报税?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设