<a>元素

概要

<a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。

<a> 中的内容应该指明链接的目标。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

属性

常见属性

属性	可能的取值	描述
href	URL	指定链接的目标地址。
target	_blank, _self, _parent, _top, 自定义窗口名称	规定在何处打开链接。
download	文件名	规定被下载的链接目标，而不是导航到它。
rel	alternate, author, bookmark, external, nofollow, noreferrer, noopener, ugc	描述当前文档与被链接文档之间的关系。
type	MIME 类型（如 text/html）	规定链接目标的文档类型。
referrerpolicy	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url	控制请求的 referrer 信息的策略。
title	文本	提示用户关于链接的额外信息（鼠标悬停时显示）。

使用场景

打电话

使用 tel: 开头的 URL 链接到一个电话号码:

<a href="tel:10086">10086</a>     //点击后直接拨打10086

发邮件

可以使用 mailto: 开头的 URL 链接到一个邮箱地址来发邮件：

<a href="mailto:2712334479@qq.com">给 2712334479@qq.com 发邮件</a>

发邮件还可以直接带上主题和内容：

<a href="mailto:2712334479@qq.com?subject=TestObject&body=你好，这是邮件的内容">2712334479@qq.com</a>

参数说明

mailto: 后面加入了 2712334479@qq.com 作为邮件收件人;

subject 参数指定了邮件主题为 "TestObject";

body 参数则包含了邮件的内容。

请注意，邮件内容部分需要进行 URL 编码，以确保正确传递特殊字符。

发短信

可以使用 sms: 开头的 URL 链接到一个手机号码来发短信：

<a href="sms:10086?body=message">给 10086 发短信</a>

参数说明

sms: 后面是目标电话号码 10086;

body 是短信的内容。

发送位置

使用 geopoint: 开头的 URL 链接经纬度发送位置：

<a href="geopoint:116.281469,39.866035">我的位置</a>

这种格式是一种用于地理位置的超链接，指定了一个具体的地理坐标点。在这个例子中，经度为116.281469，纬度为39.866035。

当用户点击这个链接时，如果浏览器或应用程序支持这种地理坐标格式，它可能会尝试打开相关的地图应用，将地图焦点定位到指定的经度和纬度，以显示相应的地理位置，即"我的位置"。这样用户可以方便地查看指定坐标点所在的位置信息。

下载文件

也可以用 a 标签来链接文件进行下载：

<a href="img/bg.png" download="bg.png">下载图片</a>

<a href="public/bag.zip" download="bag.zip">下载压缩包</a>

href 指定文件地址；download 属性指定下载的文件名称（filename）。

可以使用或不使用 filename 值：

• 如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
  • Content-Disposition (opens new window) HTTP 标头。
  • URL 路径 (opens new window)的最后一段。
  • 媒体类型 (opens new window)。来自 Content-Type (opens new window) 标头，data: URL (opens new window) 的开头，或 blob: URL (opens new window) 的 Blob.type (opens new window)。
• filename：决定文件名的值。/ 和 \ 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。

笔记

• download 只在同源 URL 或 blob:、data: 协议起作用。
• 浏览器对待下载的方式因浏览器、用户设置和其他因素而异。在下载开始之前，可能会提示用户，或者自动保存文件，或者自动打开。自动打开要么在外部应用程序中，要么在浏览器本身中。
• 如果 Content-Disposition 标头的信息与 download 属性不同，产生的行为可能不同：
  • 如果文件头指定了一个 filename，它将优先于 download 属性中指定的文件名。
  • 如果标头指定了 inline 的处置方式，Chrome 和 Firefox 会优先考虑该属性并将其视为下载资源。旧的 Firefox 浏览器（版本 82 之前）优先考虑该标头，并将内联显示内容。

跳转新标签页

<a target="_blank" href="https://blog.wangyou.ink">在新标签页中打开</a>

返回顶部

也可以设置用 a 标签来快速的回到页面顶部

<a href="#top">返回顶部</a>

<a href="#">返回顶部</a>