<abbr>:缩写元素

¥Attributes

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

¥This element only supports the global attributes. The title attribute has a specific semantic meaning when used with the <abbr> element; it must contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.

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

¥Each <abbr> element you use is independent of all others; providing a title for one does not automatically attach the same expansion text to others with the same content text.

¥Usage notes

¥Typical use cases

当然并不要求所有缩写都使用 <abbr> 进行标记。不过，在某些情况下这样做会有所帮助：

¥It's certainly not required that all abbreviations be marked up using <abbr>. There are, though, a few cases where it's helpful to do so:

• 当使用缩写并且你想要在文档内容流之外提供扩展或定义时，请使用 <abbr> 和适当的 title。
• 要定义读者可能不熟悉的缩写，请使用 <abbr> 和提供定义的内嵌文本来呈现该术语。仅当内联扩展或定义不可用时才包含 title 属性。
• 当需要在语义上注释文本中出现的缩写时，<abbr> 元素很有用。反过来，这可以用于样式或脚本目的。
• 你可以将 <abbr> 与 <dfn> 结合使用来建立缩写词或首字母缩略词术语的定义。请参见下面的示例 定义缩写。

¥Grammar considerations

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

¥In languages with grammatical number (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your title attribute as inside your <abbr> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English.

¥Default styling

该元素的目的纯粹是为了方便作者，所有浏览器默认情况下都会内联显示它（display: inline），尽管其默认样式因浏览器而异：

¥The purpose of this element is purely for the convenience of the author and all browsers display it inline (display: inline) by default, though its default styling varies from one browser to another:

某些浏览器向元素的内容添加点下划线。其他人在将内容转换为小型大写字母时添加点下划线。其他人的样式可能与 <span> 元素不同。要控制此样式，请使用 text-decoration 和 font-variant。

¥Some browsers add a dotted underline to the content of the element. Others add a dotted underline while converting the contents to small caps. Others may not style it differently than a <span> element. To control this styling, use text-decoration and font-variant.

¥Examples

¥Marking up an abbreviation semantically

要标记缩写而不提供扩展或描述，请使用不带任何属性的 <abbr>，如此例所示。

¥To mark up an abbreviation without providing an expansion or description, use <abbr> without any attributes, as seen in this example.

HTML

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

结果

¥Result

¥Styling abbreviations

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

¥You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.

HTML

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

CSS

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

结果

¥Result

¥Providing an expansion

添加 title 属性可让你提供缩写词或首字母缩略词的扩展或定义。

¥Adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym.

HTML

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

结果

¥Result

¥Defining an abbreviation

你可以将 <abbr> 与 <dfn> 结合使用来更正式地定义缩写，如下所示。

¥You can use <abbr> in tandem with <dfn> to more formally define an abbreviation, as shown here.

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>

结果

¥Result

¥Accessibility concerns

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

¥Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.

如果无法在文本中扩展缩写词或首字母缩略词，则仅包含 title。宣布的单词或短语与屏幕上显示的内容之间存在差异，尤其是读者可能不熟悉的技术术语，可能会令人感到不舒服。

¥Only include a title if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.

HTML

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

结果

¥Result

这对于不熟悉内容中讨论的术语或概念的人、刚接触该语言的人以及有认知问题的人特别有帮助。

¥This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.

¥Technical summary

¥See also

• 使用 <abbr> 元素