HTML 链接

HTML 链接，也称为超链接 (Hyperlinks)，是网页的基石。链接允许用户从一个页面跳转到另一个页面，将整个万维网连接在一起。

HTML 使用 <a> 标签（a 是 anchor 的缩写，意为“锚”）来创建链接。

<a href="url">链接文本</a>

• href 属性: 这是最重要的属性，它指定了链接的目标地址 (URL)。
• 链接文本: 这是用户在页面上看到并可以点击的部分。

示例:

<a href="https://www.google.com">访问谷歌</a>

上述代码会产生如下内容效果： 访问谷歌

target 属性

target 属性规定了在何处打开链接的文档。它有以下几个常用的值：

• _self: 默认值。在当前的浏览器窗口或标签页中打开链接。

  <a href="page.html" target="_self">在当前窗口打开</a>

• _blank: 在一个新的浏览器窗口或标签页中打开链接。这是外部链接常用的设置，可以避免用户离开你的网站。

  <a href="https://www.google.com" target="_blank">在新窗口打开</a>

• _parent: 在父框架中打开链接（主要用于 <iframe> 框架布局）。

• _top: 在整个浏览器窗口中打开链接，跳出所有框架。

绝对 URL vs. 相对 URL

href 属性中使用的地址可以是绝对的，也可以是相对的。

• 绝对 URL (Absolute URL): 指向另一个网站的完整网址。

  <a href="https://developer.mozilla.org/">MDN Web Docs</a>

• 相对 URL (Relative URL): 指向当前网站内部的文件。它不包含域名部分。

  • 链接到同一目录下的文件：

    <a href="about.html">关于我们</a>

  • 链接到子目录中的文件：

    <a href="/products/product1.html">产品1</a>

  • 链接到父目录中的文件：

    <a href="../index.html">返回首页</a>

最佳实践: 在网站内部，应始终使用相对 URL。这样，即使你的网站域名发生改变，内部链接也依然有效。

使用图片作为链接

你可以将一张图片 <img> 放在 <a> 标签内部，从而创建出一个可点击的图片链接。

<a href="default.asp">
  <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;">
</a>

链接到页面的特定部分（书签）

你可以创建链接，直接跳转到当前页面或另一个页面的特定部分。这需要两步：

1. 创建目标锚点: 使用 id 属性为你希望跳转到的元素创建一个唯一的标识符。

   <h2 id="section2">第二章</h2>

2. 创建指向锚点的链接: 在 href 属性中使用 # 加上目标的 id。

   • 跳转到当前页面的锚点：

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

   • 跳转到另一个页面的锚点：

     <a href="page2.html#section2">跳转到 Page 2 的第二章</a>

mailto 链接

你可以创建一个特殊的链接，点击后会打开用户默认的邮件客户端，并预填好收件人地址。

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