#HTML 的 <a> 标签

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

#属性

• download: 导致浏览器将链接的 URL 视为下载资源。可以使用或不使用 filename 值：
  • Content-Disposition 如果没有指定值，浏览器会从多个来源决定文件名和扩展名： HTTP 标头。 URL 路径的最后一段。 媒体类型。来自 Content-Type 标头，data: URL 的开头，或 blob: URL 的 Blob.type。
  • HTTP 标头。
  • URL 路径的最后一段。
  • Content-Type 媒体类型。来自 标头，data: URL 的开头，或 blob: URL 的 Blob.type。
  • filename ：决定文件名的值。/ 和 \ 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。
• href: 超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：
  • 使用文档片段链接到页面的某一段
  • 使用文本片段链接到某一段文字
  • 使用媒体片段链接到某个媒体文件
  • tel: 使用 URL 链接到一个电话号码
  • mailto: 使用 URL 链接到一个邮箱地址
  • registerProtocolHandler() 如果 web 浏览器不能支持其他 URL 协议，网站可以使用
• hreflang: 该属性用于指定所链接到的文档的人类语言。其仅提供建议，并没有内置的功能。其允许的值与全局的 lang 属性一致。
• ping: 包含一个以空格分隔的 URL 列表，当跟随超链接时，浏览器会发送带有正文 PING 的 POST 请求。通常用于跟踪。
• referrerpolicy: 在跟随链接时，referrer 需要发送多少内容：
  • no-referrer ：Referer 标头将不会被发送。
  • no-referrer-when-downgrade ：如果没有 TLS（HTTPS），Referer 头将不会被发送到源上。
  • origin ：发送的 referrer 将被限制在其页面的来源：协议、主机和端口。
  • origin-when-cross-origin ：发送到其他源的 referrer 将只包含协议、主机和端口，而导航到相同的源仍将包括路径。
  • same-origin ：将向同源地址发送 referrer，但跨源请求不包含 referrer 信息。
  • strict-origin ：当协议安全级别保持不变（HTTPS→HTTPS）时，只将文档的来源作为 referrer 发送，但不要将其发送到安全性较低的目的地（HTTPS→HTTP）。
  • strict-origin-when-cross-origin （默认）：在执行同源请求时发送完整的 URL，在协议安全级别保持不变时只发送源（HTTPS→HTTPS），对安全性较低的目的地不发送标头（HTTPS→HTTP）。
  • unsafe-url ：表示 referrer 将会包含源和路径（但是不包含片段、密码或用户名）。此值是不安全的，因为它可能会将受 TLS 保护的资源的源和路径泄露到不安全的源中。
• rel: 该属性指定了目标对象到链接对象的关系。
• target: 该属性指定在何处显示链接的 URL，作为浏览上下文的名称（标签、窗口或 <iframe>）。以下关键词对加载 URL 的位置有特殊含义：
  • _self ：当前页面加载。（默认）
  • _blank ：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
  • _parent ：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。
  • _top ：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。 备注： 在 <a> 元素上使用 target="_blank" 隐式提供了与使用 rel="noopener" 相同的 rel 行为，即不会设置 window.opener。
• type: 该属性指定在一个 MIME 类型链接目标的形式的媒体类型。没有内置的功能。

#示例

<p><a href="https://xplanc.org/primers" target="_blank">Primers 编程伙伴</a></p>
<p><a href="mailto://[email protected]">联系我们</a></p>
<p><a href="https://xplanc.org/primers/icon.svg" download>下载图标</a></p> <!-- download 不指定值，浏览器自动命名 -->
<p><a href="data:text/plain;base64,UHJpbWVycyDnvJbnqIvkvJnkvLQ=" download="1.txt">下载图标</a></p> <!-- 使用 BASE64 编码数据，download 指定下载文件名 -->

<a>
Primers 编程伙伴
联系我们
下载图标
下载图标