<abbr>

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,对它的添加的样式和<span> 元素的样式完全相同。
  • 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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
abbrChrome Full support 2Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
IE Full support 7Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

参见