跳转至

HTML 链接

a 元素通过 href 创建导航。好的链接具有明确目标、可理解的链接文字，并且不会把用户 意外带到危险协议或不可预期的新窗口。

学习目标

  • 创建相对链接、绝对链接和页内片段链接。
  • 编写脱离上下文仍然清楚的链接文字。
  • 安全处理新标签页、下载和外部生成的 URL。

核心概念

<nav aria-label="教程导航">
  <a href="index.md">教程首页</a>
  <a href="images.md">学习 HTML 图片</a>
  <a href="#common-errors">跳到常见错误</a>
</nav>

相对 URL 以当前文档 URL 为基准解析。./ 表示当前路径，../ 表示上一级路径； URL 使用 /，不是 Windows 文件路径中的反斜杠。片段链接会寻找具有匹配 id 的元素。

<h2 id="common-errors">常见错误</h2>

链接文字

链接文字应说明目的，例如“阅读图片替代文本指南”比“点击这里”更容易扫描。 不要把完整 URL 作为普通说明文字，除非用户确实需要阅读或复制该地址。

外部链接与新标签页

默认在当前上下文打开通常最符合用户预期。确有理由使用新标签页时，应在文字中说明：

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
  打开外部示例站点（新标签页）
</a>

现代浏览器通常会隔离 _blank 的 opener，显式 noopener 仍能表达安全意图； noreferrer 还会抑制来源信息，应根据业务需求选择。

下载与其他协议

download 是下载提示，不保证资源一定下载，也受同源策略和响应头影响。mailto:、tel: 会调用相应应用，使用前应让用户知道将发生什么。

不可信输入不能直接成为 href。应用应使用 URL 解析器检查协议和目标，按业务只允许 https:、 可信站内相对路径等，并拒绝脚本协议和含糊的字符串前缀判断。

常见错误

  • 使用空 href 或 href="#" 代替真正的按钮操作。
  • 所有链接文字都写成“更多”或“点击这里”。
  • 相对路径层级错误，或文件名大小写与部署环境不一致。
  • 强制所有外部链接打开新标签页却不给提示。
  • 将用户输入直接拼接到 href，未校验协议和目标。

相关链接