HTML超链接

• <a>...</a> : 这对标签包裹了用户将看到并点击的内容。这部分内容可以是：

  • 文本 : 最常见的情况，例如 <a href="...">点击这里</a>。
  • 图片 : 例如 <a href="..."><img src="button.png" alt="按钮"></a>。
  • 其他 HTML 元素 : 几乎任何块级或行内元素都可以放在 <a> 标签内作为链接内容。

• href 属性 (Hypertext Reference) : 这是 <a> 标签最重要的属性 。它指定了链接的目标地址（URL 或 URL 片段）。没有 href 属性的 <a> 标签不是一个有效的超链接，有时被用作占位符。

---

基本语法

<a href="目标地址">链接文本</a>

---

常见用法

1. 跳转到其他网页

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

2. 跳转到当前页面的某个位置（锚点）

<!-- 目标位置 -->
<h2 id="section1">第一部分</h2>

<!-- 跳转链接 -->
<a href="#section1">跳转到第一部分</a>

3. 打开新窗口/标签页

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

4. 发邮件

<a href="mailto:[email protected]">给我发邮件</a>

5. 拨打电话（移动设备上有效）

<a href="tel:1234567890">拨打电话</a>

6. 下载文件

<a href="file.pdf" download>下载 PDF 文件</a>

---

常见属性

属性	作用
href	超链接的目标地址
target	链接的打开方式（如 _blank、_self 等）
title	鼠标悬停时显示的提示文字
download	指示浏览器下载链接资源，而不是打开
rel	指定当前页面与目标资源之间的关系，如 noopener、noreferrer

---

安全建议

当使用 target="_blank" 打开链接时，建议加上：

rel="noopener noreferrer"

避免新页面获取你的 window 对象，提升安全性。

---

禁用超链接跳转

如果你想让链接不跳转，可以：

<a href="javascript:void(0)">不跳转</a>

<!-- 或者 -->
<a href="#" onclick="return false;">不跳转</a>

---

需要我帮你写一些超链接相关的实战案例吗？比如导航栏、返回顶部、锚点跳转这种？