<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

属性

这个元素只有全局属性。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属性定义对缩写的完整描述时,很多用户代理把完整描述以提示框的形式描述。

注意:在具有语法编号的语言(特别是具有两个以上数字的语言,如阿拉伯语)中,在您的标题属性中使用与您的<abbr>元素一样的语法数字。

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.

规范

规范 状态 备注
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 YesFirefox 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.

参见