<abbr>: 缩写元素

此元素仅支持 全局属性。 title 属性在与 <abbr> 元素一起使用时具有特定的语义含义；它必须包含缩写的完整人类可读描述或扩展。此文本通常由浏览器在鼠标光标悬停在元素上时作为工具提示呈现。

您使用的每个 <abbr> 元素都独立于所有其他元素；为一个元素提供 title 不会自动将相同的扩展文本附加到具有相同内容文本的其他元素。

当然，并非所有缩写都必须使用 <abbr> 进行标记。然而，在某些情况下，这样做会很有帮助

• 当使用缩写并希望在文档内容流之外提供扩展或定义时，请使用带有适当的 title 的 <abbr>。
• 要定义读者可能不熟悉的缩写，请使用 <abbr> 显示该词语，并在内联文本中提供定义。仅当内联扩展或定义不可用时才包含 title 属性。
• 当缩写出现在文本中需要在语义上进行标记时，<abbr> 元素很有用。这可以反过来用于样式或脚本目的。
• 您可以将 <abbr> 与 <dfn> 结合使用，为作为缩写或首字母缩略词的词语建立定义。请参阅下面的示例 定义缩写。

在具有 语法数 的语言中（即，项目数量会影响句子语法的语言），请在您的 title 属性中使用与您的 <abbr> 元素内部相同的语法数。这在具有两个以上数字的语言（例如阿拉伯语）中尤其重要，但在英语中也很重要。

此元素的目的是纯粹为了作者的方便，并且所有浏览器默认情况下都将其显示为内联 (display: inline)，尽管其默认样式因浏览器而异

一些浏览器会在元素内容上添加点状下划线。另一些浏览器会在将内容转换为小写字母时添加点状下划线。还有一些浏览器可能不会对其进行与 <span> 元素不同的样式。要控制此样式，请使用 text-decoration 和 font-variant.

在页面上第一次使用缩写或首字母缩略词时将其完整拼写出来，有助于人们理解它，尤其是当内容是技术术语或行业术语时。

仅当在文本中无法扩展缩写或首字母缩略词时才包含 title。如果宣布的单词或短语与屏幕上显示的内容不同，尤其是读者可能不熟悉的技术术语，可能会造成不和谐。

<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
  data-interchange format.
</p>

这对不熟悉内容中讨论的术语或概念的人、刚学习该语言的人以及认知能力有问题的人特别有用。

要标记一个缩写词而不提供扩展或描述，请使用<abbr>而不添加任何属性，如本例所示。

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

结果

您可以使用 CSS 为缩写词设置自定义样式，如这个简单的示例所示。

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

结果

添加一个title属性可以为缩写词或首字母缩略词提供扩展或定义。

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

结果

您可以将<abbr>与<dfn>结合使用，以更正式地定义缩写词，如这里所示。

HTML

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
  outlines in detail how a technology or API is intended to function and how it
  is accessed.
</p>

结果

• 使用<abbr>元素