链接与导航

链接表达的是从当前资源到另一个资源的可激活关系。a 元素有 href 时才是链接；它与依赖点击事件的 div 不同，拥有地址栏打开、复制地址、历史记录、键盘激活和上下文菜单等浏览器行为。

先区分地址和行为

<nav aria-label="文档章节">
  <a href="/guide/intro">入门</a>
  <a href="./forms.html#labels">表单标签</a>
  <a href="https://example.com/reference">外部参考</a>
</nav>

绝对 URL、根路径、相对路径和片段标识符解决的问题不同。#labels 先定位当前页面中的目标元素；目标需要有匹配的 id。相对路径受当前文档 URL 影响，不能只根据源文件所在磁盘目录猜测浏览器最终请求的地址。

下载、打开新标签页和外部链接还涉及安全与用户预期。target="_blank" 的页面关系、download 是否生效、跨源资源是否允许下载，都要以最终响应和浏览器策略为准，不能只看 HTML 属性。

导航必须保留可识别的文本

链接文字应说明目的地，例如“阅读表单标签”比“点击这里”更容易被扫描和理解。图片作为链接内容时，需要提供能表达目的地的替代文本；装饰性图像不应重复一遍已经清楚的链接文字。

变化一个条件观察边界

删除 href 后，元素可能仍有 CSS 的链接样式，但不再拥有链接行为。把 a 改成 button 也不是等价替换：按钮触发当前页面动作，链接导航到资源。若一个控件既要执行动作又要改变 URL，应明确拆分责任，而不是给 div 绑定一个模糊的 click 处理器。

运行实验

1. 在页面中加入根路径、相对路径和片段链接，使用地址栏观察浏览器最终解析的 URL。
2. 删除一个链接的 href，分别用鼠标和键盘测试，记录行为变化。
3. 用浏览器打开目标片段不存在的 URL，再补上匹配的 id，观察滚动定位变化。
4. 从可访问性树中检查导航名称与链接文本，比较“点击这里”和具体目的地描述。

常见错误

• 用 div 和 onclick 伪造链接。
• 把链接和按钮仅按视觉样式区分。
• 用相对路径，却没有考虑部署后的文档 URL。
• 所有链接都写成“详情”或“点击这里”。
• 以为 target 能保证新窗口行为或解决所有外部链接安全问题。

练习

为一篇文章创建章节导航、回到目录和一个外部参考链接。要求链接文字在脱离周围段落时仍能说明目的地，并让一个片段链接正确定位到文章中的 id。删除 href 复测一次，说明为什么它不能当作可访问的交互控件。

继续阅读

链接解决资源之间的连接，下一篇处理页面中的图像和媒体资源：图片与媒体。

查看本节答案