主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

定义和用法

<a>标签定义超链接,它是 "anchor"(锚点)的缩写,用于从一个页面链接到另一个页面。

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

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

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

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


实例推荐

接下来用多种实例演示<a>标签在不同场合下,不用的使用方法。

1. 创建指向 www.kaicz.com 的链接

实例代码 运行代码
复制
<a href="https://www.kaicz.com">访问 www.kaicz.com!</a>

2. 使用图像作为链接

实例代码 运行代码
复制
<a href="https://www.kaicz.com">
<img border="0" alt="kaicz" src="kaicz.png" width="400" height="225">
</a>

3. 在新的浏览器窗口打开链接

实例代码 运行代码
复制
<a href="https://www.kaicz.com" target="_blank">访问 www.kaicz.com!</a>

4. 链接到电子邮件地址

实例代码 运行代码
复制
<a href="mailto:someone@example.com">发送电子邮件</a>

5. 链接到电话号码

实例代码 运行代码
复制
<a href="tel:+8613888888888" target="_blank">+86 138 8888 8888</a>

6. 链接到同一页上的另一个部分

实例代码 运行代码
复制
<a href="#section2">转到第二章</a>

7. 链接到 JavaScript

实例代码 运行代码
复制
<a href="javascript:alert('Hello World!');" target="_blank">执行 JavaScript</a>

提示和注释

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

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

提示:请使用 CSS 设置链接的样式:CSS 链接CSS 按钮


常用的属性

<a>标签借助多样化的属性,极大拓宽了链接功能的适用场景,提升操作的便捷性。

属性 描述
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 媒体类型 规定被链接文档的媒体类型。



评论区 0
发表评论



留下您的精彩评论吧