Lazy loaded image
前端开发
🔗Links
Words 1826Read Time≈ 5 min
2026-3-13
2026-3-16
type
Post
status
Published
date
Mar 13, 2026
slug
tag_a
summary
完全剖析HTML<a>标签
tags
思考
笔记
HTML
category
前端开发
icon
password
类型
日期
标签
状态
完成
链接，也称为超链接，是将一个网络资源连接到另一个网络资源的元素。它们允许用户在同一网站的不同页面之间导航，或跳转到外部网站。链接使用<a>锚）标签创建，可以指向各种类型的资源，包括 HTML 页面、图像、文档等等。

锚连接

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

主要属性

  1. download
      2. 导致浏览器将链接的 URL 视为下载资源。可以使用或不使用 filename 值：
      • 如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
        • Content-Disposition HTTP 标头。
        • URL 路径的最后一段。
        • 媒体类型（来自 Content-Type 标头、data: URL 的开头，或 blob: URL 的 Blob.type）。
      • filename：决定文件名的值。/ 和 \\ 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。
  1. href
      2. 超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：
      • 带 tel: URL 的电话号码
      • 带 mailto: URL 的电子邮件地址
      • 带 sms: URL 的短信
      此外，URL 的其他特性可定位资源的特定部分，包括：
      • 使用文档片段链接到页面的某一段
      • 使用媒体片段链接到某个媒体文件
  1. hreflang
      2. 该属性用于指定所链接到的文档的人类语言。其仅提供建议，并没有内置的功能。其允许的值与全局的 lang 属性一致。
  1. type 该属性指定在一个 MIME 类型链接目标的形式的媒体类型。没有内置的功能。
  1. target
      2. 该属性指定在何处显示链接的 URL，作为浏览上下文的名称（标签、窗口或 <iframe>）。

外部链接与链接至非 HTML 资源

  1. 打开新标签页/新窗口的链接
      2. 通过 target="_blank" 在新标签/窗口中打开的链接，或指向下载文件的链接，应说明在跟踪链接时将发生什么。
      标属性可以具有以下值：
      • _blank
          • 这是最常用的方法。您可以将 target 属性值设置为 _blank，从而在新窗口/标签页中打开链接页面。
      • _self
          • 这是默认值。它有助于在同一窗口框架中打开链接页面。
      • _top
          • ：这将在顶部窗口中打开链接页面。
      • _parent
          • ：这将在父框架中打开链接页面。
  1. 链接至非 HTML 资源
      2. 若使用图标表示链接行为，确保其带有 alt 属性以描述其用途。即使图标缺失，alt 属性的内容仍能传达链接的行为。
  1. 跳转链接
      2. 跳转链接（skip link）是在 <body> 内容中尽可能早地放置一个链接，指向页面主要内容的开头。通常情况下，CSS 会将跳转链接隐藏在屏幕之外，直到被聚焦。

使用方法

  1. 如何链接到页面的某个部分
      2. 假设我们的页面有一个divID 为 <section_id> 的部分news。
      现在您可以使用锚点标签链接到此部分（div）。为此，只需使用该部分的 id，并#在值前加上前缀“a”即可href。
  1. 如何链接到脚本并执行它
      2. 击该Click me链接，您将看到一个浏览器提示框，其中包含以下文本Hello World!。
  1. 如何下载文件
      2. 点标签具有download将普通链接转换为下载链接的属性。点击该链接即可下载文件。点击后会弹出下载窗口，以便将文件保存到设备上。
  1. 如何在新的窗口/标签页中打开页面
      2. 更安全的使用方法target=_blank是通过rel属性来获取值，如下所示：
  1. 如何链接框架和子页面
      2. 使用标签在当前页面中插入另一个 HTML 文档<iframe>。
      chlid-frame.html可能还会包含另一个 iframe 来嵌入另一个 HTML 文档。
      使用 target 属性_parent链接到父框架。target 值_top链接到窗口框架：

锚标签样式

锚点标签有多种状态。默认状态称为“true” link。其他三种状态分别为：
  • hover当用户将鼠标悬停在锚点上时，锚点会处于这种状态。
  • active当用户点击链接时，锚点处于这种状态。
  • visited已访问状态表示用户已点击过该锚链接。
CSS 提供了伪类，用于为特定状态应用样式。伪类以冒号 (:) 开头，并添加到选择器之后。因此，对于 <a> 标签，我们可以为其设置上面提到的所有状态的样式。
  • :linka：与直接将样式应用于标签相同。
  • a:hover：当鼠标悬停在锚点上时应用样式。
  • a:active：当用户点击链接激活该链接时应用样式。
  • a:visited：在点击后状态变为visited。
下面是为锚标签的每个状态应用不同颜色的示例：

锚标签与连接标签

可能会将 anchor标签与link标签混淆。我们使用 link标签来链接到外部资源，例如样式表、网站图标、字体等等。
而锚点（<a>）标签的主要用途是将一个 HTML 页面链接到另一个页面。此外，它也是一个hyperlink可以点击以跳转到目标文档的链接。
上一篇
前端作品集
下一篇
CSS 选择器
Catalog