PHP小码农

Appearance

链接最佳实践 ​

创建优质的超链接不仅关乎功能实现，还涉及可访问性、安全性、SEO 和用户体验。本节总结 <a> 标签使用的最佳实践，帮助你创建高质量的链接。

前置知识

阅读本节前，建议先了解：邮件与电话链接

基础概念 ​

链接是 Web 的核心交互方式。一个优秀的链接应该具备：清晰的意图表达、良好的可访问性、正确的安全措施和合理的视觉提示。

链接文案 ​

好的链接文案 vs 差的链接文案 ​

html
<!-- 不推荐：模糊的链接文案 -->
<p>详细信息请 <a href="/docs">点击这里</a>。</p>
<p>更多内容 <a href="/blog">看这里</a>。</p>
<p><a href="/about">更多</a></p>

<!-- 推荐：描述性的链接文案 -->
<p>阅读 <a href="/docs">HTML5 完整文档</a> 了解更多。</p>
<p>查看 <a href="/blog">前端开发博客</a> 获取最新文章。</p>
<p><a href="/about">了解我们的团队</a></p>

为什么链接文案很重要

  • 屏幕阅读器用户可以单独浏览所有链接，模糊的"点击这里"没有意义
  • 搜索引擎将链接文案作为排名信号
  • 好的链接文案提升用户体验

可访问性 ​

链接可访问性要点 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>链接可访问性</title>
</head>
<body>
  <!-- 1. 描述性的链接文案 -->
  <p><a href="/docs/install">安装指南</a></p>

  <!-- 2. 使用 aria-label 补充信息 -->
  <a href="https://example.com" aria-label="访问 Example 官网（在新窗口打开）" target="_blank" rel="noopener noreferrer">
    Example.com ↗
  </a>

  <!-- 3. 图标链接需要 aria-label -->
  <a href="/search" aria-label="搜索">
    <svg aria-hidden="true"><!-- 搜索图标 --></svg>
  </a>

  <!-- 4. 足够大的点击区域（移动端） -->
  <a href="/docs" style="display: inline-block; padding: 0.5rem 1rem;">文档</a>

  <!-- 5. 焦点样式 -->
  <!-- 通过 CSS :focus-visible 添加焦点指示器 -->
</body>
</html>

焦点样式 ​

css
/* 为键盘用户提供清晰的焦点指示 */
a:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 2px;
  border-radius: 2px;
}

/* 移除默认 outline（但保留 focus-visible） */
a:focus {
  outline: none;
}

a:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 2px;
}

新窗口提示 ​

当链接在新窗口打开时，应提示用户：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>新窗口提示</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .external::after {
      content: " ↗";
      font-size: 0.8em;
    }
  </style>
</head>
<body>
  <!-- 方法一：aria-label -->
  <a href="https://example.com" target="_blank" rel="noopener noreferrer"
     aria-label="Example.com（在新窗口打开）">Example.com</a>

  <!-- 方法二：CSS 伪元素添加图标 -->
  <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="external">
    Example.com
  </a>

  <!-- 方法三：文字提示 -->
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Example.com <span style="font-size:0.8em;">（新窗口）</span>
  </a>
</body>
</html>

外部链接标识 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部链接标识</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; }
    /* 使用 CSS :after 伪元素标记外部链接 */
    a[href^="https://"]:not([href*="example.com"])::after {
      content: " ↗";
      font-size: 0.75em;
      color: #888;
    }
    a { color: #1565c0; text-decoration: none; }
    a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <h1>链接标识示例</h1>

  <!-- 内部链接：无标记 -->
  <p><a href="/about">关于我们</a></p>

  <!-- 外部链接：自动添加 ↗ -->
  <p><a href="https://developer.mozilla.org">MDN 文档</a></p>
</body>
</html>

链接样式 ​

状态样式 ​

css
/* 链接四种状态 */
a:link    { color: #1565c0; }     /* 未访问 */
a:visited { color: #7b1fa2; }     /* 已访问 */
a:hover   { color: #0d47a1; }     /* 悬停 */
a:active  { color: #e65100; }     /* 激活（按下时） */

/* 推荐顺序：LVHA（Love HAte） */

状态顺序

链接状态的 CSS 顺序必须是 :link → :visited → :hover → :active（LVHA），否则样式会互相覆盖。

实战示例 ​

综合最佳实践示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>链接最佳实践</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; line-height: 1.7; }

    /* 链接状态 */
    a:link    { color: #1565c0; text-decoration: none; }
    a:visited { color: #7b1fa2; }
    a:hover   { text-decoration: underline; }
    a:active { color: #e65100; }

    /* 焦点指示器 */
    a:focus-visible { outline: 2px solid #1565c0; outline-offset: 2px; border-radius: 2px; }

    /* 外部链接图标 */
    .external::after { content: " ↗"; font-size: 0.75em; color: #888; }

    /* 导航链接间距 */
    nav a { margin-right: 1rem; }
  </style>
</head>
<body>
  <h1>链接最佳实践演示</h1>

  <!-- 描述性链接文案 -->
  <p>阅读 <a href="/docs/html">HTML5 完整教程</a> 开始学习。</p>
  <p>参考 <a href="https://developer.mozilla.org" class="external" target="_blank" rel="noopener noreferrer">MDN Web 文档</a> 获取更多信息。</p>

  <!-- 导航 -->
  <nav>
    <a href="/">首页</a>
    <a href="/docs">文档</a>
    <a href="mailto:info@example.com">联系我们</a>
  </nav>

  <!-- 新窗口提示 -->
  <p><a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="访问 Example.com（在新窗口打开）" class="external">Example.com</a></p>

  <!-- 可访问的图标链接 -->
  <p><a href="/search" aria-label="搜索"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="11" y1="11" x2="14" y2="14" stroke="currentColor" stroke-width="1.5"/></svg> 搜索</a></p>
</body>
</html>

最佳实践清单 ​

实践说明
描述性文案链接文本应清楚表达目标内容
noopener所有 target="_blank" 链接加 rel="noopener noreferrer"
焦点样式为键盘用户添加 :focus-visible 样式
新窗口提示使用 aria-label 或视觉标记提示新窗口
外部链接标识为外部链接添加图标或文字标记
足够的点击区域移动端链接区域不宜过小
LVHA 顺序CSS 链接状态按 link → visited → hover → active 排列
不用"点击这里"使用有意义的链接文案

下一节

继续学习：img 图片基础

参考链接 ​