当前位置：文江博客知识库简体中文文档 Web HTML Element abbr

<abbr> - HTML（超文本标记语言）编辑

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

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

Content categories	Flow content, phrasing content, palpable content
Permitted content	Phrasing content
Tag omission	不允许，开始标签和结束标签都不能省略。
Permitted parents	Any element that accepts phrasing content
Permitted ARIA roles	Any
DOM Interface	`HTMLElement`

属性

这个元素只有全局属性。在同 <abbr> 元素一起使用的时候，title 属性有特殊的语法含义; 它必须包含对一个缩写完全天然可读的扩写或者描述。这些文本通常会作为提示，在鼠标指针覆盖到该元素时显示作为一个提示。

你使用的每一个 <abbr> 元素与其它同类元素都是相互独立的，为其中一个提供 title 不会自动把相同的附加文字依附到其它内容文字相同的元素上。

用法注解

典型使用场景

当然，我们不是所有的缩写都要使用<abbr>标记。但是其在下面一些场景很有帮助：

当你想为缩写在文档流外提供一段扩展或定义的时候，为 <abbr> 设置一个合适的title。
在定义一个读者可能不太熟悉的缩写时，使用 <abbr> 和title属性或内联的文本来表现这个术语。
当文本中出现需要进行语义上的标注的缩写词时，<abbr>元素可用于依次将其作用样式和脚本。
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.
可以将 <abbr> 与 <dfn> 配合使用来建立缩写或首字母缩略词的定义。请参阅下面的示例定义一个缩写。

语法注意事项

在有单复数的语言中（即物体数量会影响句子语法的语言）， <abbr> 元素和其中的 title 属性应当单复数一致。这在阿拉伯语这样超过二数的语言中非常重要，在英语中也有一定的影响。

默认样式

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

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

例子

创建语义化的缩写

想要创建不含解释或描述性的缩写，就直接用<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;
}

Result

提供扩展

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

添加一个 title 属性，为缩写提供定义或拓展。

HTML

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

结果

定义一个缩写

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

<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 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>

结果

可以在 How to mark abbreviations and make them understandable 中浏览更多深层次的实例.

可访问性问题

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

Example

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

这对于不熟悉内容中讨论的术语或概念的人，对语言不熟悉的人以及具有认知问题的人特别有用。

规范

规范	状态	备注
HTML Living Standard <abbr>	Living Standard
HTML5 <abbr>	Recommendation
HTML 4.01 Specification <abbr>	Recommendation

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.