a标签

发布时间 2023-04-19 09:46:29作者: 挖洞404

1、介绍

a标签,也称为超链接,主要功能是提供页面跳转,还可以进行页面内定位以及资源下载。

其标签内可以是普通文本,也可以是图片等资源。

2、页面跳转

由href属性指向一个绝对地址或者相对地址,点击后页面发生跳转。

<a href="https://www.baidu.com/">打开百度</a>
<a href="/login">登录</a>

请始终将正斜杠添加到子文件夹。假如这样书写链接:href=”https://www.runoob.com/html”,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href=”https://www.runoob.com/html/”。

3、跳转方式

由target属性指定打开链接文档的方式。

  • _blank:新的标签页
  • _self:在当前页,也是默认值
  • _parent:在父框架集中打开
  • _top:在整个窗口中打开
  • framename:在指定的框架中打开
<a href="https://www.baidu.com/" target="_blank">打开百度</a>

4、页面定位

在href属性中,如果值为url或者为空,追加#字符,然后为页面内的元素的id名称。浏览器滚动条将自动定位到该元素。

<a href="https://www.baidu.com/#bottom">打开百度</a>
<a href="#div3">公告</a>

5、下载

download属性用于下载,指示下载资源的路径。需要注意,此时href需要设置,可以是空字符串或任意值,并不会发起跳转,但是如果没有href属性,将不具备点击功能。

<a href="" download="music.mp3">天空之城</a>

6、javascript伪代码

在href属性中,支持javascript伪代码,注意javascript关键字大小写敏感,且不能简写为js,其后可以定义多条语句,甚至函数,注意代码分隔即可。

<a href="javascript:alert(123)">点击弹窗</a>

7、状态

一个超链接,实际有四个状态,不同状态在下划线和字体颜色默认有变化,可以通过css进行自定义。

  • 未点击前
  • 鼠标聚焦
  • 点击时
  • 点击后