HTML 链接

1. 文本链接

最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：

<a href="https://www.runoob.com/">访问菜鸟教程</a>

• href 属性：指定链接目标的 URL。
• 文本内容：用户点击的可见文本。

2. 图像链接

您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

• src 属性：指定图像的路径或 URL。
• alt 属性：提供图像的替代文本，图像无法显示时会显示此文本。

3. 锚点链接

除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用 # 符号引用该标记。例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

• 锚点链接：<a name="section2"></a> 定义了一个目标位置，<a href="#section2">跳转到第二部分</a> 创建了一个跳转到目标位置的链接。

4. 下载链接

如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

<a href="document.pdf" download>下载文档</a>

• download 属性：提示浏览器下载链接目标而不是导航到该链接。

5. HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

• target 属性：指定链接的打开方式。
  • _blank：在新窗口或新标签页中打开链接。
  • _self：在当前窗口打开链接（默认）。
  • _parent：在父框架中打开链接。
  • _top：在整个窗口中打开链接，取消所有框架。
• rel 属性：用于防止新页面获取到原页面的 window 对象。
  • noopener：防止新页面能够获取到原始页面的 window 对象。
  • noreferrer：不传递 HTTP Referer 头信息。

6. HTML 链接 - id 属性

id 属性可用于创建一个 HTML 文档书签。提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

7. 实例

在 HTML 文档中插入 ID：

<a id="tips">有用的提示部分</a>

在 HTML 文档中创建一个链接到 "有用的提示部分 (id="tips")"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到 "有用的提示部分 (id="tips")"：

<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

8. 更多链接属性

• title 属性：为链接提供额外的信息，这些信息通常在鼠标悬停在链接上时显示为工具提示。

  <a href="https://www.example.com" title="访问 Example 网站">Example</a>
  

• name 属性（已弃用，通常使用 id 替代）：定义锚点的名称，允许链接到页面中的特定部分。

  <a name="section1"></a>
  <a href="#section1">跳转到第一部分</a>
  

• download 属性：提示浏览器下载链接目标而不是导航到该链接。

  <a href="/files/example.pdf" download>下载文件</a>
  

• target 属性：指定链接的打开方式。

  <a href="https://www.example.com" target="_blank">在新标签页中打开链接</a>
  

通过使用这些属性，可以创建更加灵活和功能丰富的链接，增强网页的可用性和用户体验。