1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
---
title: <abbr>
slug: Web/HTML/Element/abbr
tags:
- Element
- HTML
- HTML text-level semantics
- Reference
- Web
- abbr
translation_of: Web/HTML/Element/abbr
---
<p>{{HTMLRef}}</p>
<p><span class="seoSummary"><strong>HTML 缩写元素</strong>（<strong><code><abbr></code></strong>）用于代表缩写，并且可以通过可选的 {{htmlattrxref("title")}} 属性提供完整的描述。</span>若使用 <code>title</code> 属性，则它必须且仅可包含完整的描述内容。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>
<p class="hidden">Github 的仓库中存储了该可交互化的示例项目。如果宁愿意为此可交互化的示例项目作出贡献，请克隆<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们提起 pull 请求。</p>
<p>这篇文章： <em><a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">How to mark abbreviations and make them understandable</a></em> 是一份学习使用 <code><abbr></code> 与其他相关元素的指南。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a></td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a></td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Any</td>
</tr>
<tr>
<th scope="row">DOM Interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p><span style="line-height: 21px;"><span style="line-height: 21px;">这个元素只有</span></span><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a>。在同 <code><abbr></code> 元素一起使用的时候，{{htmlattrxref("title")}} 属性有特殊的语法含义; 它必须包含对一个缩写完全天然可读的扩写或者描述。这些文本通常会作为提示，在鼠标指针覆盖到该元素时显示作为一个提示。</p>
<p>你使用的每一个 <code><abbr></code> 元素与其它同类元素都是相互独立的，为其中一个提供 <code>title</code> 不会自动把相同的附加文字依附到其它内容文字相同的元素上。</p>
<h2 id="用法注解">用法注解</h2>
<h3 id="典型使用场景">典型使用场景</h3>
<p>当然，我们不是所有的缩写都要使用<code><abbr></code>标记。但是其在下面一些场景很有帮助：</p>
<ul>
<li>当你想为缩写在文档流外提供一段扩展或定义的时候，为 <code><abbr></code> 设置一个合适的{{htmlattrxref("title")}}。</li>
<li>在定义一个读者可能不太熟悉的缩写时，使用 <code><abbr></code> 和<code>title</code>属性或内联的文本来表现这个术语。</li>
<li>当文本中出现需要进行语义上的标注的缩写词时，<code><abbr></code>元素可用于依次将其作用样式和脚本。</li>
<li>可以将 <code><abbr></code> 与 {{HTMLElement("dfn")}} 配合使用来建立缩写或首字母缩略词的定义。 请参阅下面的示例 <a href="#定义一个缩写">定义一个缩写</a>。</li>
</ul>
<h3 id="语法注意事项">语法注意事项</h3>
<p>在有 {{interwiki("wikipedia", "单复数")}} 的语言中（即物体数量会影响句子语法的语言）， <code><abbr></code> 元素和其中的 <code>title</code> 属性应当单复数一致。这在阿拉伯语这样超过二数的语言中非常重要，在英语中也有一定的影响。</p>
<h2 id="默认样式">默认样式</h2>
<p>虽然完全为了网站制作者的方便，所有的浏览器都默认把这个元素显示为行内元素 ({{cssxref('display')}}<code>: inline</code>) ，但是默认样式在不同浏览器中存在差别：</p>
<ul>
<li>一些浏览器，比如 IE，对它的添加的样式和{{HTMLElement("span")}} 元素的样式完全相同。</li>
<li>Opera、Firefox 和其他一些浏览器给这个元素的内容添加一条点状下划线 。</li>
<li>一些浏览器不仅添加点状下划线，而且还把元素的内容添加小写大写字母的样式。若要避免这种样式，在 CSS 中添加 {{cssxref('font-variant')}}<code>: none</code> 。</li>
</ul>
<h2 id="例子">例子</h2>
<h3 id="创建语义化的缩写">创建语义化的缩写</h3>
<p> 想要创建不含解释或描述性的缩写，就直接用<code><abbr></code>不添加任何属性。请看下面的例子。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><p>Using <abbr>HTML</abbr> is fun and easy!</p></pre>
<h4 id="结果">结果</h4>
<p>{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}</p>
<h3 id="缩写样式">缩写样式</h3>
<p>你可以像这个简单的例子一样，用 CSS 来为缩写做一个样式。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">abbr {
font-variant: all-small-caps;
}</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Styling_abbreviations")}}</p>
<h3 id="提供扩展">提供扩展</h3>
<p>Adding a {{htmlattrxref("title")}} attribute lets you provide an expansion or definition for the abbreviation or acronym.</p>
<p>添加一个 {{htmlattrxref("title")}} 属性，为缩写提供定义或拓展。</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html notranslate"><p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p></pre>
<h4 id="结果_2">结果</h4>
<p>{{EmbedLiveSample("Providing_an_expansion")}}</p>
<h3 id="定义一个缩写">定义一个缩写</h3>
<p>You can use <code><abbr></code> in tandem with {{HTMLElement("dfn")}} to more formally define an abbreviation, as shown here.</p>
<p><code><abbr></code> 与 {{HTMLElement("dfn")}} 联合使用可以定义一个更加正式的缩写，如下：</p>
<h4 id="HTML_4">HTML</h4>
<pre class="brush: html notranslate"><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></pre>
<h4 id="结果_3">结果</h4>
<p>{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}</p>
<p>可以在 <em><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></em> 中浏览更多深层次的实例。</p>
<h2 id="可访问性问题">可访问性问题</h2>
<p>在缩略词第一次出现在页面的时候，将它书写完整对帮助人们理解很有用处的，特别是内容是技术或者工业术语</p>
<h4 id="Example">Example</h4>
<pre class="brush: html notranslate"><p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>
</pre>
<p>这对于不熟悉内容中讨论的术语或概念的人，对语言不熟悉的人以及具有认知问题的人特别有用。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("html.elements.abbr")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/Advanced_text_formatting#%E7%BC%A9%E7%95%A5%E8%AF%AD">高级文字格式 - 使用 <code><abbr></code> 元素</a></li>
</ul>
<ul>
<li>其他传达文本级语义的元素：{{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
<li>已被弃用的 {{HTMLElement("acronym")}} 元素，原被用于展示首字母缩写。其作用被归入了 <code><abbr></code> 的作用中。</li>
</ul>
|
