<abbr>

HTML 缩写元素（<abbr>）用于展示缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

这篇文章： How to mark abbreviations and make them understandable 是一份学习使用 <abbr> 与其他相关元素的指南。

属性

这个元素只有全局属性。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.

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

使用title属性定义对缩写的完整描述时，很多用户代理把完整描述以提示框的形式描述。

Usage notes

Typical use cases

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:

• When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use <abbr> with an appropriate title.
• To define an abbreviation which may be unfamiliar to the reader, present the term using <abbr> and either a title attribute or inline text providing the definition.
• When an abbreviation's presence in the text needs to be semantically noted, the <abbr> element is useful. This can be used, in turn, for styling or scripting purposes.
• You can use <abbr> in concert with <dfn> to establish definitions for terms which are abbreviations or acronyms. See the example Defining an abbreviation below.

默认样式

虽然完全为了网站制作者的方便，所有的浏览器都默认把这个元素显示为行内元素 (display: inline) ，但是默认样式在不同浏览器中存在差别：

• 一些浏览器，比如 IE，对它的添加的样式和<span> 元素的样式完全相同。
• Opera、Firefox 和其他一些浏览器给这个元素的内容添加一条点状下划线 。
• 一些浏览器不仅添加点状下划线，而且还把元素的内容添加小写大写字母的样式。若要避免这种样式，在 CSS 中添加 font-variant: none 。

例子

Marking up an abbreviation semantically

 想要创建不含解释或描述性的缩写，就直接用<abbr>不添加任何属性。请看下面的例子。

HTML

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

结果

Styling abbreviations

你可以像这个简单的例子一样，用CSS来为缩写做一个样式。

HTML

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

CSS

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

Result

Providing an expansion

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

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 title="Specification">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

See more in-depth examples in the How to mark abbreviations and make them understandable article.

Accessibility concerns

在缩略词第一次出现在页面的时候，将它书写完整对帮助人们理解很有用处的，特别是内容是技术或者工业术语

Example

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

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.

规范

浏览器兼容性

参见

• 高级文字格式 - 使用 <abbr> 元素

• 其他传达文本级语义的元素：<a>, <em>, <strong>, <small>, <cite>, <q>, <dfn>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <b>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>.
• 已被启用的 <acronym> 元素，原被用于展示首字母缩写。其作用被归入了 <abbr> 的作用中。