{{HTMLRef}}
HTML 缩写元素(<abbr>
)用于代表缩写,并且可以通过可选的 {{htmlattrxref("title")}} 属性提供完整的描述。若使用 title
属性,则它必须且仅可包含完整的描述内容。
Github 的仓库中存储了该可交互化的示例项目。如果宁愿意为此可交互化的示例项目作出贡献,请克隆https://github.com/mdn/interactive-examples 并向我们提起 pull 请求。
这篇文章: How to mark abbreviations and make them understandable 是一份学习使用 <abbr>
与其他相关元素的指南。
Content categories | Flow content, phrasing content, palpable content |
---|---|
Permitted content | Phrasing content |
Tag omission | {{no_tag_omission}} |
Permitted parents | Any element that accepts phrasing content |
Permitted ARIA roles | Any |
DOM Interface | {{domxref("HTMLElement")}} |
这个元素只有全局属性。在同 <abbr>
元素一起使用的时候,{{htmlattrxref("title")}} 属性有特殊的语法含义; 它必须包含对一个缩写完全天然可读的扩写或者描述。这些文本通常会作为提示,在鼠标指针覆盖到该元素时显示作为一个提示。
你使用的每一个 <abbr>
元素与其它同类元素都是相互独立的,为其中一个提供 title
不会自动把相同的附加文字依附到其它内容文字相同的元素上。
当然,我们不是所有的缩写都要使用<abbr>
标记。但是其在下面一些场景很有帮助:
<abbr>
设置一个合适的{{htmlattrxref("title")}}。<abbr>
和title
属性或内联的文本来表现这个术语。<abbr>
元素可用于依次将其作用样式和脚本。<abbr>
与 {{HTMLElement("dfn")}} 配合使用来建立缩写或首字母缩略词的定义。 请参阅下面的示例 定义一个缩写。在有 {{interwiki("wikipedia", "单复数")}} 的语言中(即物体数量会影响句子语法的语言), <abbr>
元素和其中的 title
属性应当单复数一致。这在阿拉伯语这样超过二数的语言中非常重要,在英语中也有一定的影响。
虽然完全为了网站制作者的方便,所有的浏览器都默认把这个元素显示为行内元素 ({{cssxref('display')}}: inline
) ,但是默认样式在不同浏览器中存在差别:
: none
。 想要创建不含解释或描述性的缩写,就直接用<abbr>
不添加任何属性。请看下面的例子。
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}
你可以像这个简单的例子一样,用 CSS 来为缩写做一个样式。
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
abbr { font-variant: all-small-caps; }
{{EmbedLiveSample("Styling_abbreviations")}}
Adding a {{htmlattrxref("title")}} attribute lets you provide an expansion or definition for the abbreviation or acronym.
添加一个 {{htmlattrxref("title")}} 属性,为缩写提供定义或拓展。
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
{{EmbedLiveSample("Providing_an_expansion")}}
You can use <abbr>
in tandem with {{HTMLElement("dfn")}} to more formally define an abbreviation, as shown here.
<abbr>
与 {{HTMLElement("dfn")}} 联合使用可以定义一个更加正式的缩写,如下:
<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>
{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}
可以在 How to mark abbreviations and make them understandable 中浏览更多深层次的实例。
在缩略词第一次出现在页面的时候,将它书写完整对帮助人们理解很有用处的,特别是内容是技术或者工业术语
<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>
这对于不熟悉内容中讨论的术语或概念的人,对语言不熟悉的人以及具有认知问题的人特别有用。
规范 | 状态 | 备注 |
---|---|---|
{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}} | {{Spec2('HTML5 W3C')}} | |
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}} | {{Spec2('HTML4.01')}} |
{{Compat("html.elements.abbr")}}
<abbr>
的作用中。