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进行自定义。
- 未点击前
- 鼠标聚焦
- 点击时
- 点击后