<abbr>:缩写元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<abbr>
HTML 元素表示一个缩写词或首字母缩略词。
在包含缩写或首字母缩写词时,应在纯文本中提供该术语的扩展形式。同时使用 <abbr>
元素来标记缩写。这可以告知用户缩写或首字母缩略词的含义。
可选的 title
属性可以在没有完整扩展情况下为缩写或首字母缩略词提供扩展。这为用户代理提供了如何宣告/显示内容的提示,并告知所有用户该缩写的含义。如果存在 title
属性则必须包含此完整描述且无其他内容。
尝试一下
属性
使用说明
典型用例
语法注意事项
在具有数(语法)的语言(即数词会影响句子语法的语言)中,应在 title
属性中使用与 <abbr>
元素内部相同的语法数。这一点在诸如阿拉伯语等拥有超过两种数的语言中尤为重要,但也适用于英语。
默认样式
此元素存在的目的纯粹是为了方便作者,并且默认情况下都会将其以行向(display
: inline
)显示,然而,各个浏览器对其的默认样式可能存在差异:
某些浏览器会在该元素内容下添加虚线下划线,另一些浏览器会将内容转换为小型大写字母,并添加虚线下划线。还有些浏览器则可能仅将其视为普通的 <span>
元素对待,不作特殊样式处理。可以通过 CSS 属性 text-decoration
和 font-variant
来控制它的样式。
示例
语义化标记缩写
要标记缩写而不提供扩展或描述,请使用不带任何属性的 <abbr>
,如下所示。
HTML
<p>使用 <abbr>HTML</abbr> 既有趣又简单!</p>
结果
缩写样式
你可以使用 CSS 为缩写设置自定义样式,如下所示。
HTML
<p>利用 <abbr>CSS</abbr>,你可以自定义缩写样式!</p>
CSS
abbr {
font-variant: all-small-caps;
}
结果
提供扩展解释
你可以添加一个 title
属性来为缩写或首字母缩略词提供一个扩展解释或定义。
HTML
<p>你可以用 <abbr title="邮政特快专递服务">EMS</abbr> 把这个包裹寄给我。</p>
结果
定义缩略语
你可以在 <dfn>
元素中配合使用 <abbr>
元素,以更正式地定义缩写,如下所示。
HTML
<p>
<dfn id="html"><abbr title="超文本标记语言">HTML</abbr></dfn>
是一种用于创建网页的语义和结构的标记语言。
</p>
<p>
<dfn id="spec">规范</dfn>(<abbr>spec</abbr>)是一份详细说明某项技术或 API
的预期功能和访问方式的文档。
</p>
结果
无障碍考虑
在页面中首次使用某个首字母缩略词或缩写时将其完整拼写出来,有助于读者理解,特别是在涉及技术性或行业术语的内容中。
只有当正文中无法展开缩略词或首字母缩略词时,才包含 title
属性。如果声称的单词或短语与屏幕上显示的内容存在差异,特别是当涉及到读者可能特别不熟悉的行业术语,可能会造成混淆。
HTML
<p>JavaScript 对象表示法(<abbr>JSON</abbr>)是一种轻量级的数据交换格式。</p>
结果
这对于不熟悉文中的术语或概念的人、初学者以及有认知障碍的人来说尤其有用。
技术概要
规范
Specification |
---|
HTML Standard # the-abbr-element |
浏览器兼容性
BCD tables only load in the browser