PHP小码农

Appearance

abbr 缩写 ​

<abbr> 标签用于标记缩写或首字母缩略词，并通过 title 属性提供完整形式。当用户将鼠标悬停在缩写上时，浏览器会显示 title 属性中的完整文本。

前置知识

阅读本节前，建议先了解：var 变量

基础概念 ​

<abbr>（abbreviation）标签用于包裹缩写词和首字母缩略词，通过 title 属性提供全称。这对无障碍访问很有帮助——屏幕阅读器会读取全称或告知用户这是一个缩写。同时，它也对 SEO 有帮助，搜索引擎能更好地理解页面内容。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>abbr 示例</title>
</head>
<body>
  <!-- 首字母缩略词 -->
  <p><abbr title="HyperText Markup Language">HTML</abbr> 是构建网页的标准语言。</p>

  <!-- 普通缩写 -->
  <p>页面大约需要 <abbr title="approximately">approx.</abbr> 3 秒加载。</p>

  <!-- 中文缩写 -->
  <p>中国人民政治协商会议简称 <abbr title="中国人民政治协商会议">政协</abbr>。</p>
</body>
</html>

详细说明 ​

abbr 的属性 ​

属性说明示例
title缩写的完整形式title="HyperText Markup Language"

title 属性是 <abbr> 的核心属性，提供了缩写的完整形式。当用户悬停时，浏览器会显示工具提示。

abbr 的默认样式 ​

浏览器对 <abbr> 没有特殊的默认样式，部分浏览器会添加虚线下划线：

css
/* 浏览器可能的默认样式 */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

自定义 abbr 样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义 abbr 样式</title>
  <style>
    abbr[title] {
      text-decoration: underline dotted;
      text-decoration-skip-ink: none;
      cursor: help;
      border-bottom: 1px dotted #999;
    }
  </style>
</head>
<body>
  <p>世界卫生组织（<abbr title="World Health Organization">WHO</abbr>）成立于 1948 年。</p>
</body>
</html>

常见的缩写使用场景 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>常见缩写示例</title>
</head>
<body>
  <h1>技术文档中的缩写</h1>

  <p><abbr title="JavaScript Object Notation">JSON</abbr> 是一种轻量级的数据交换格式。</p>
  <p><abbr title="Application Programming Interface">API</abbr> 是应用程序接口的简称。</p>
  <p><abbr title="Graphical User Interface">GUI</abbr> 即图形用户界面。</p>
  <p><abbr title="Cascading Style Sheets">CSS</abbr> 用于控制网页的视觉样式。</p>
  <p><abbr title="Search Engine Optimization">SEO</abbr> 是搜索引擎优化的简称。</p>
</body>
</html>

实战示例 ​

技术文章 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>技术文章</title>
  <style>
    abbr[title] { border-bottom: 1px dotted #666; cursor: help; }
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; line-height: 1.7; }
  </style>
</head>
<body>
  <h1>Web 开发技术概览</h1>

  <p>现代 Web 开发涉及多种技术。前端方面，<abbr title="HyperText Markup Language">HTML</abbr> 负责内容结构，<abbr title="Cascading Style Sheets">CSS</abbr> 负责视觉样式，<abbr title="JavaScript">JS</abbr> 负责交互逻辑。</p>

  <p>在后端，常见的框架包括 <abbr title="Node.js">Node</abbr>、<abbr title="Python">Python</abbr> 的 <abbr title="Django">Django</abbr> 和 <abbr title="Flask">Flask</abbr>，以及 Java 的 <abbr title="Spring Boot">Spring Boot</abbr>。</p>

  <p>数据库方面，关系型数据库如 <abbr title="PostgreSQL">Postgres</abbr>、<abbr title="MySQL">MySQL</abbr>，以及非关系型数据库如 <abbr title="MongoDB">Mongo</abbr>、<abbr title="Redis">Redis</abbr> 都有广泛的应用。</p>
</body>
</html>

注意事项 ​

title 属性的必要性 ​

html
<!-- 不推荐：缺少 title 属性，abbr 没有提供额外信息 -->
<p>我学习了 <abbr>HTML</abbr> 和 <abbr>CSS</abbr>。</p>

<!-- 正确：title 提供了完整形式 -->
<p>我学习了 <abbr title="HyperText Markup Language">HTML</abbr> 和 <abbr title="Cascading Style Sheets">CSS</abbr>。</p>

何时使用 abbr ​

  • 当缩写可能不被读者理解时，使用 <abbr title="..."> 提供全称
  • 如果缩写已经非常常见（如 HTML、CSS），可以省略 title
  • 首次出现的缩写应标注全称，后续可以省略

最佳实践 ​

  1. 首次出现标注全称：在文章中第一次使用缩写时，通过 title 提供全称
  2. 适度使用：不要为每个缩写都添加 <abbr>，常见缩写可省略
  3. 自定义视觉样式：添加虚线下划线和 cursor: help 提示用户可以悬停查看
  4. 考虑无障碍：屏幕阅读器用户可以从 title 中获得缩写的全称

下一节

继续学习：cite 引用来源

参考链接 ​