<abbr>：缩写元素
<abbr> HTML 元素表示缩写或首字母缩略词。
在包含缩写或首字母缩略词时，首次使用时请以纯文本形式提供该术语的完整展开，并使用 <abbr> 标记该缩写。这会告知用户该缩写或首字母缩略词的含义。
可选的 title 属性可以在没有完整展开时提供缩写或首字母缩略词的展开。这会向用户代理提供如何宣布/显示内容的提示，同时告知所有用户该缩写词的含义。如果存在，title 必须包含此完整描述，并且不能包含其他内容。
试一试
<p>
You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your
<abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can
keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content
layer separate. This is called "separation of concerns."
</p>
abbr {
font-style: italic;
color: chocolate;
}
属性
此元素仅支持全局属性。当与 <abbr> 元素一起使用时，title 属性具有特定的语义含义；它必须包含缩写的完整人类可读描述或展开。当鼠标光标悬停在元素上时，浏览器通常会将此文本显示为工具提示。
你使用的每个 <abbr> 元素都是相互独立的；为一个元素提供 title 不会自动将相同的展开文本附加到内容文本相同的其他元素。
用法说明
典型用例
当然，并非所有缩写都必须使用 <abbr> 标记。但是，在某些情况下这样做会很有帮助
语法注意事项
在具有语法数的语言中（即，项目中数字影响句子语法的语言），请在 title 属性中使用与 <abbr> 元素内部相同的语法数。这在具有两个以上数字的语言中尤其重要，例如阿拉伯语，但在英语中也相关。
默认样式
此元素的目的是纯粹为了作者的方便，所有浏览器默认都将其内联显示（display: inline），尽管其默认样式因浏览器而异
一些浏览器会为元素内容添加虚线下划线。其他浏览器在添加虚线下划线的同时将内容转换为小型大写字母。其他浏览器可能不会像 <span> 元素那样进行样式设置。要控制此样式，请使用 text-decoration 和 font-variant。
无障碍
首次在页面上使用首字母缩略词或缩写时将其完整拼写出来有助于人们理解它，特别是如果内容是技术或行业术语。
只有在文本中无法展开缩写或首字母缩略词时才包含 title。宣读的单词或短语与屏幕上显示的内容之间存在差异，尤其是当它是读者可能不熟悉的技术术语时，可能会令人不适。
<p>
JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
data-interchange format.
</p>
这对于不熟悉内容中讨论的术语或概念的人、语言新手以及有认知障碍的人特别有帮助。
示例
语义化标记缩写
要标记缩写而不提供展开或描述，请使用不带任何属性的 <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>spec</abbr>) is a document that
outlines in detail how a technology or API is intended to function and how it
is accessed.
</p>
结果
技术摘要
规范
| 规范 |
|---|
| HTML # the-abbr-element |
浏览器兼容性
加载中…