HTML <a> 标签

定义和用法

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目的地。

默认情况下，链接将在所有浏览器中显示如下：

  • 未访问过的链接是带有下划线和蓝色的
  • 已访问过的链接是带有下划线和紫色的
  • 正在访问的链接是带有下划线和红色的

提示：您可能已经注意到了，W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式。

另请参阅：

HTML 教程：HTML 链接

HTML DOM 参考手册：Anchor 对象

CSS 教程：链接样式

术语解释

什么是超文本？

实例

例子 1

创建指向 w3school.com.cn 的链接：

<a href="https://www.w3school.com.cn">访问 w3school.com.cn!</a>

亲自试一试

例子 2

如何使用图像作为链接：

<a href="https://www.w3school.com.cn">
<img border="0" alt="W3School" src="w3logo.png" width="400" height="225">
</a>

亲自试一试

例子 3

如何在新的浏览器窗口中打开链接：

<a href="https://www.w3school.com.cn" target="_blank">访问 w3school.com.cn!</a>

亲自试一试

例子 4

如何链接到电子邮件地址：

<a href="mailto:someone@example.com">发送电子邮件</a>

亲自试一试

例子 5

如何链接到电话号码：

<a href="tel:+8613888888888">+86 138 8888 8888</a>

亲自试一试

例子 6

如何链接到同一页上的另一个部分：

<a href="#section2">转到第二章</a>

亲自试一试

例子 7

如何链接到 JavaScript：

<a href="javascript:alert('Hello World!');">执行 JavaScript</a>

亲自试一试

提示和注释

提示：如果 <a> 标签没有 href 属性，它只是一个超链接的占位符。

提示：被链接的页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（用 target 属性）。

提示：请使用 CSS 设置链接的样式：CSS 链接 和 CSS 按钮。

属性

属性 值 描述
download 文件名 规定当用户单击超链接时将下载目标。
href URL 规定链接指向的页面的 URL。
hreflang 语言代码 规定被链接文档的语言。
media 媒体查询 规定被链接文档是为何种媒介/设备优化的。
ping URL 列表 规定以空格分隔的 URL 列表，当链接被访问时，浏览器将发送带有 ping 正文的 POST 请求（在后台发送）。通常用于跟踪。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 规定要与链接一起发送的引用信息。
rel
  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
 规定当前文档和被链接文档之间的关系。
target
  • _blank
  • _parent
  • _self
  • _top
 规定在何处打开被链接文档。
type 媒体类型 规定被链接文档的媒体类型。

全局属性

<a> 标签还支持 HTML 中的全局属性。

事件属性

<a> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <a> 元素：

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value);
}

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持