<abbr>
HTML 缩写元素(<abbr>
)用于代表缩写,并且可以通过可选的 title
属性提供完整的描述。若使用 title
属性,则它必须且仅可包含完整的描述内容。
尝试一下
这篇文章:How to mark abbreviations and make them understandable 是一份学习使用 <abbr>
与其他相关元素的指南。
Content categories (en-US) | Flow content (en-US), phrasing content (en-US), palpable content |
---|---|
Permitted content | Phrasing content (en-US) |
Tag omission | 不允许,开始标签和结束标签都不能省略。 |
Permitted parents | Any element that accepts phrasing content (en-US) |
Permitted ARIA roles | Any |
DOM Interface | HTMLElement |
属性
用法注解
典型使用场景
语法注意事项
在有 单复数 的语言中(即物体数量会影响句子语法的语言), <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;
}
结果
提供扩展
添加一个 title
属性,为缩写提供定义或拓展。
HTML
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p>
结果
定义一个缩写
<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>
这对于不熟悉内容中讨论的术语或概念的人,对语言不熟悉的人以及具有认知问题的人特别有用。
规范
Specification |
---|
HTML Standard # the-abbr-element |
浏览器兼容性
BCD tables only load in the browser