HTML abbr 语法
在 HTML 中，abbr 标签用于表示缩略词（或缩写），并提供它的完整写法或详细解释。abbr 标签可以帮助提高网页的可读性和可访问性。
语法：
<abbr title="完整版本" lang="语言">缩略词</abbr>说明：
abbr 标签支持以下 2 个属性。
title（必选）：用于定义缩略词的完整名称（或解释）。当鼠标移动到 abbr 标签上时，就会显示 title 属性的内容。lang（可选）：用于指定缩略词的语言。
abbr 标签具有以下的优点。
- 提高可读性：对不熟悉缩略词的用户来说，可以通过 title 属性了解其含义。
- 提高可访问性：屏幕阅读器可读取 title 属性的内容，从而为视障用户提供完整信息。
提示: abbr 是 “abbreviation（缩写）” 的缩写。
HTML abbr 摘要
| 属于 | HTML 语义化 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML abbr 示例
接下来，我们通过几个简单的例子来讲解一下 HTML abbr 标签是如何使用的。
示例 1：abbr 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<abbr title="HyperText Markup Language">HTML</abbr>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 abbr 标签上时，页面效果如下图 2 所示。
分析：
在上面例子中，abbr 标签内容是 “HTML”，然后我们使用了 title 属性来解释 “HTML” 是什么。
示例 2：abbr 标签的 lang 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<abbr title="Cascading Style Sheets" lang="en">CSS</abbr>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 abbr 标签上时，页面效果如下图 2 所示。
分析：
上面例子使用 lang 属性来指定 abbr 标签的语言为 “en”（即 English）。
abbr 与 dfn 的区别
abbr 和 dfn 这 2 个标签很相似，它们之间的区别如下：
abbr：用于缩略词，主要为缩略词提供完整名称说明。dfn：用于术语，它周围一般会有对该术语的解释。
