HTML abbr 标签：解释缩写与使用 title 属性

HTML <abbr> 用于标识缩写或首字母缩写。它的可选 title 属性可以提供完整术语，但关键解释也应出现在可见文本中，以便读者无需鼠标也能理解。

标记缩写并解释其完整术语

当技术术语首次出现时，在缩写旁边写出完整术语有助于读者理解。abbr 元素用于标识文本为缩写；它不会自动查找或翻译完整术语。您不需要对受众已知的每个缩写都使用此元素。

将以下文档保存为 abbreviation.html 并在浏览器中打开。第一句话保持解释可见，而第二句话演示 title 属性。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>缩写与完整名称</title>
</head>
<body>
  <p>网页文档使用 HyperText Markup Language
    (<abbr>HTML</abbr>)来定义结构。</p>
  <p>另一个缩写: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

第一句话在 HTML 旁边显示完整的术语。根据浏览器的不同，第二句话中的 WWW 可能有虚线下划线，并且将鼠标悬停在其上时可能会在工具提示中显示 World Wide Web。浏览器决定默认的下划线和工具提示外观，因此这不是一个保证一致视觉效果的设计特性。

title 属性应该放什么内容？

abbr 元素上的 title 属性是可选的。如果使用它，请包含该缩写所代表的完整术语，不要添加宣传性文字或无关的解释。一个 abbr 元素上的 title 值不会自动应用到同一文章中的其他 abbr 元素。如果从示例中移除 title，WWW 这一可见缩写仍然存在。

不要将全局 title 属性与文档的 title 元素混淆。abbr 上的 title 属性提供有关该缩写的补充信息；文档 head 中的 title 元素提供页面标题。

不要仅依赖工具提示

触摸屏无法提供鼠标悬停，并且通过键盘导航和辅助技术访问 title 信息的方式也各不相同。如果理解缩写需要解释，请在文本中显示该解释，就像示例的第一句话一样。使内容本身可读，而不是仅仅为了显示工具提示而将 abbr 变成不必要的 Tab 键焦点或按钮。

如果解释较长，请在首次出现的位置附近加以说明，或链接到术语定义。同一段落已经说明完整名称时，是否需要在 title 属性中重复，应结合阅读流畅度判断。MDN 的 abbr 元素参考介绍了使用条件与无障碍注意事项。