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
|
---
title: <u>
slug: Web/HTML/Element/u
translation_of: Web/HTML/Element/u
---
<div>{{HTMLRef}}</div>
<div>
<p><strong>HTML <code><u></code> 元素（表意不清标注元素）</strong>表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用 CSS 替换。</p>
</div>
<div class="warning">
<p>此元素以前在旧版本的 HTML 中称为 “下划线” 元素，但有时仍会以这种方式被滥用。要为文本加下划线，您应该应用包含 CSS {{cssxref("text-decoration")}}属性设置为 <code>underline</code> 的样式。</p>
</div>
<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div>
<p>有关何时适合使用 <code><u></code> 以及何时不使用 <code><u></code> 的详细信息，请参阅{{anch("Usage notes")}} 部分。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容类别</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a>，<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a>，palpable 内容。</td>
</tr>
<tr>
<th scope="row">允许的内容</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a></td>
</tr>
<tr>
<th scope="row">标签省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">允许的父元素</th>
<td>任何接受<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a>的元素。</td>
</tr>
<tr>
<th scope="row">允许的 ARIA 角色</th>
<td>任意</td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
<td>{{domxref("HTMLElement")}} Gecko 1.9.2 (Firefox 4) 之前（包含）, Firefox 为这个元素实现了 {{domxref("HTMLSpanElement")}} 接口。</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p>这个元素仅包含<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>
<h2 id="使用说明">使用说明</h2>
<p>就像所有排版元素那样， {{ HTMLElement("u") }} 在 HTML 4 中废弃，但是在 HTML 5 中恢复了一个新的语义，意思是：将文本标记为应用了某种形式的非文本注释。</p>
<div class="blockIndicator note">
<p><strong>提示：</strong> 在可能和超链接混淆的地方，避免使用 {{ HTMLElement("u") }}。</p>
</div>
<h3 id="用例">用例</h3>
<p><code><u></code>元素的有效用例包括注释拼写错误，应用 {{interwiki("wikipedia", "proper name mark")}} 来表示中文文本中的专有名称以及其他形式的注释。</p>
<p>您不应该使用<code><u></code>简单地为文字加下划线，或者表示书籍的标题。</p>
<h3 id="要考虑使用的其他要素">要考虑使用的其他要素</h3>
<p>在大多数情况下，您应该使用<u>以外的元素，例如：</p>
<ul>
<li>{{HTMLElement("em")}} 表示强调重点</li>
<li>{{HTMLElement("b")}} 提示注意文字</li>
<li>{{HTMLElement("mark")}} 标记关键词或短语</li>
<li>{{HTMLElement("strong")}} 表明文本具有重要意义</li>
<li>{{HTMLElement("cite")}} 标记书籍或其他出版物的标题</li>
<li>{{HTMLElement("i")}} 表示西方文本中的技术术语，音译，思想或船名</li>
</ul>
<p>要提供文本注释（与使用<code><u></code>创建的非文本注释相对），请使用 {{HTMLElement("ruby")}} 元素。</p>
<p>要应用带下划线的外观而没有任何语义含义，请使用 {{cssxref("text-decoration")}} 属性的值 <code>underline</code>。</p>
<h2 id="示例">示例</h2>
<h3 id="表示拼写错误">表示拼写错误</h3>
<p>此示例使用<code><u></code>元素和一些 CSS 来显示包含拼写错误的段落，其中错误以红色波浪下划线样式表示，这种情况通常用于此目的。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><code><p>This paragraph includes a <u class="spelling">wrnogly</u>
spelled word.</p></code></pre>
<p>在 HTML 中，我们看到 <code><u></code> 使用了一个类 <code>spelling</code>，用于表示 “wrongly” 一词的拼写错误。</p>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate"><code>u.spelling {
text-decoration: red wavy underline;
}</code></pre>
<p>这个 CSS 表示当 <code><u></code> 元素使用类 <code>spelling</code> 进行样式化时，它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 <code>red dashed underline</code>.。</p>
<h4 id="结果">结果</h4>
<p>任何使用过今天比较流行的文字处理器的人都应该熟悉结果。</p>
<p>{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}</p>
<h3 id="避免使用_<u>">避免使用 <u></h3>
<p>大多数情况下，您实际上不想使用 <code><u></code>。以下是一些示例，显示在几种情况下您应该做什么。</p>
<h4 id="非语义下划线">非语义下划线</h4>
<p>要在不暗示任何语义含义的情况下为文本加下划线，请使用 {{HTMLElement("span")}} 元素并将 {{cssxref("text-decoration")}} 属性设置为 <code>"underline"</code>，如下所示。</p>
<h5 id="HTML_2">HTML</h5>
<pre class="notranslate"><code><span class="underline">Today's Special</span>
<br>
Chicken Noodle Soup With Carrots</code></pre>
<h5 id="CSS_2">CSS</h5>
<pre class="notranslate"><code>.underline {
text-decoration: underline;
}</code></pre>
<h5 id="结果_2">结果</h5>
<p>{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}</p>
<h4 id="表示书名">表示书名</h4>
<p>书籍标题应使用 {{HTMLElement("cite")}} 元素而不是 <code><u></code> 甚至 <code><i></code> 来呈现。</p>
<h5 id="HTML_3">HTML</h5>
<pre class="notranslate"><code><p>The class read <cite>Moby Dick</cite> in the first term.</p></code></pre>
<h5 id="默认样式的结果">默认样式的结果</h5>
<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p>
<p>请注意， <code><cite></code> 元素的默认样式会以斜体显示文本。如果您愿意，可以使用 CSS 覆盖它：</p>
<pre class="notranslate"><code>cite {
font-style: normal;
text-decoration: underline;
}</code></pre>
<h5 id="定制样式的结果">定制样式的结果</h5>
<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</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-u-element', '<u>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '<u>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("html.elements.u")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{ HTMLElement("span") }}，{{ HTMLElement("i") }}，{{ HTMLElement("em") }}，和 {{ HTMLElement("cite") }} 元素，取决于情况，可以替代使用。</li>
<li>CSS {{ cssxref("text-decoration") }} 属性可以用于完成 {{ HTMLElement("u") }} 元素的前面的视觉效果。</li>
</ul>
|
