HTML 缩写元素
(
<abbr>
) represents an abbreviation or acronym; the optional
title
attribute can provide an expansion or description for the abbreviation.
If present,
title
must contain this full description and nothing else.
| 内容类别 | 流内容 , 措词内容 , palpable content |
|---|---|
| 准许内容 | 措词内容 |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles | 任何 |
| DOM Interface |
HTMLElement
|
This element only supports 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>
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.
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>
with an appropriate
title
.
<abbr>
and either a
title
attribute or inline text providing the definition.
<abbr>
element is useful. This can be used, in turn, for styling or scripting purposes.
<abbr>
in concert with
<dfn>
to establish definitions for terms which are abbreviations or acronyms. See the example
Defining an abbreviation
下文。
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.
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>
元素。
font-variant
: none
in the CSS takes care of this case.
To mark up an abbreviation without providing an expansion or description, simply use
<abbr>
without any attributes, as seen in this example.
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
abbr {
font-variant: all-small-caps;
}
添加
title
attribute lets you provide an expansion or definition for the abbreviation or acronym.
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
可以使用
<abbr>
in tandem with
<dfn>
to more formally define an abbreviation, as shown here.
<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>
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.
<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.
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
abbr
|
Chrome 完整支持 2 | Edge 完整支持 12 |
Firefox
完整支持
1
注意事项
|
IE 完整支持 7 | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
见实现注意事项。