HTML 链接

链接是网络的基石，连接着页面和资源。它们允许用户在网页、文档和其他在线内容之间导航。

HTML 超链接

HTML 链接在技术上称为超链接（hyperlinks）。

超链接可以是文本、图像或其他 HTML 元素，用户可以点击它们来导航到不同的 URL（统一资源定位符，Uniform Resource Locator）或文档的特定部分。

HTML 链接语法

在 HTML 中，使用锚点标签 <a> 创建链接：

<a href="url">Link Text</a>

<a> 元素最重要的属性是 href，它指定了目标 URL。

<a> 标签内的内容（例如上面的 “Link Text”）是用户可以点击的可见部分。这部分内容应该具有描述性。

示例：

<a href="https://www.w3.org/">Visit the W3C Website</a>

点击 “Visit the W3C Website” 将会把用户带到指定的 URL。

最佳实践：始终为你的链接使用有意义的文本。避免使用“点击这里”等通用短语。这可以改善屏幕阅读器用户的可访问性和 SEO（搜索引擎优化）。

绝对 URL 与相对 URL

href 属性可以包含绝对 URL 或相对 URL。

绝对 URL 是完整的网址，包括协议（如 https://）。它指向网络上的特定位置。

<!-- Example of an absolute URL -->
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML Documentation</a>

相对 URL 指向同一网站内的文件或目录，相对于当前页面的位置。它不包含域名。

<!-- Example of a relative URL linking to a page in the same directory -->
<a href="about.html">About Us</a>

<!-- Example linking to a page in a subdirectory -->
<a href="/products/product1.html">View Product 1</a>

<!-- Example linking to a page in the parent directory -->
<a href="../index.html">Back to Homepage</a>

最佳实践：对于内部链接（指向你自己网站内的链接），使用相对 URL。这使得你的网站更具可移植性 – 如果你更改域名，内部链接不会失效。

使用 CSS 为链接添加样式

默认情况下，浏览器会对链接应用不同的样式：

未访问的链接通常是蓝色并带有下划线。
已访问的链接通常是紫色并带有下划线。
活动链接（被点击时）通常是红色并带有下划线。
鼠标悬停在链接上时，鼠标指针通常会变成手形。

你可以使用 CSS（层叠样式表，Cascading Style Sheets）自定义链接的外观。用于为链接添加样式的常见伪类（pseudo-classes）有：

:link - 为未访问的链接添加样式。
:visited - 为用户已访问的链接添加样式。
:hover - 为用户鼠标指针悬停在链接上时添加样式。
:active - 为链接在被点击的瞬间添加样式。

使用 CSS 的示例（通常放在外部的 .css 文件中）：

/* Basic link styling */
a {
  color: #007bff; /* Blue */
  text-decoration: none; /* Remove underline */
}

/* Style for visited links */
a:visited {
  color: #6a0dad; /* Purple */
}

/* Style when hovering over a link */
a:hover {
  color: #0056b3; /* Darker blue */
  text-decoration: underline; /* Add underline on hover */
}

/* Style when a link is being clicked */
a:active {
  color: #ff0000; /* Red */
}

最佳实践：使用外部 CSS 文件来为你的网站，包括链接，应用样式。这会将表现层与结构层分离，使维护更容易。确保链接文本与背景颜色有足够的对比度，以提高可访问性。

链接目标

target 属性指定了在哪里打开链接的文档。

Target 值	描述
`_self`	在点击链接的同一窗口/标签页中打开文档（这是默认行为）。
`_blank`	在一个新窗口或更常见的是一个新标签页中打开文档。
`_parent`	在父框架中打开文档（与框架集一起使用，框架集已基本废弃）。
`_top`	在窗口的整个主体中打开文档，跳出任何框架（也与废弃的框架集相关）。

在新标签页中打开链接的示例：

<a href="https://www.example.com" target="_blank">Example Site (opens new tab)</a>

安全注意事项：使用 target="_blank" 时，务必添加 rel="noopener noreferrer" 以防止潜在的安全漏洞（如 Tabnabbing 攻击）。

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Secure Example Site (opens new tab)</a>

noopener 阻止新页面访问 window.opener 属性，增强安全性。

noreferrer 阻止浏览器向链接页面发送 Referer HTTP 头部信息。

图像链接

你可以通过在 <a> 标签内嵌套一个 <img> 标签来使用图像作为链接：

<a href="page.html">
  <img src="images/button.png" alt="Navigate to Page" style="width:80px; height:40px;">
</a>

可访问性最佳实践：确保 <img> 标签有一个具有描述性的 alt 属性。如果图像包含文本，alt 文本通常应与图像文本一致。如果图像在链接内纯粹是装饰性的，描述链接目标的 alt 属性仍然至关重要。

注意：对于旧版本浏览器如 IE9 需要的 border:0 样式来移除默认图像边框，在现代 CSS 重置或默认样式下已不再需要。

链接到页面片段（书签）

你可以创建跳转到同一网页内特定部分的链接。这些通常被称为书签或片段标识符（fragment identifiers）。

这对于长页面很有用，允许用户快速导航到相关内容（如目录）。

第一步：创建带有 id 属性的目标元素。id 的值在页面中必须是唯一的。

<h2 id="section-features">Features Section</h2>
<p>Details about features...</p>

第二步：创建一个指向该 id 的链接，使用哈希符号（#）后跟 id 的值。

<!-- Link from within the same page -->
<a href="#section-features">Jump to Features</a>

你也可以通过在页面 URL 后附加哈希和 id 来链接到另一页面的片段：

<!-- Link from another page -->
<a href="details.html#section-features">View Features on Details Page</a>

其他链接类型

链接还可以触发打开电子邮件客户端或发起电话呼叫等操作：

电子邮件链接（mailto:）：

<a href="mailto:info@example.com?subject=Inquiry&body=Please send information">Contact Us via Email</a>

电话链接（tel:）：

<a href="tel:+1-555-123-4567">Call Us: +1-555-123-4567</a>

章节总结

使用 <a> 元素定义超链接。
使用 href 属性指定目标 URL（绝对或相对）。
使用有意义的链接文本以提高可访问性和 SEO。
使用 target="_blank" 属性在新标签页中打开链接，并添加 rel="noopener noreferrer" 以提高安全性。
使用 CSS 伪类（:link、:visited、:hover、:active）为链接添加样式。优先使用外部 CSS。
在 <a> 标签内嵌套 <img> 标签创建图像链接；使用具有描述性的 alt 属性。
使用目标元素的 id 属性和链接的 href="#idValue" 创建内部页面书签。
使用 mailto: 创建电子邮件链接，使用 tel: 创建电话链接。

HTML 链接标签参考

标签	描述
`<a>`	定义一个超链接。