<u>：非文本注解（下划线）元素

试一试

<p>
  You could use this element to highlight <u>speling</u> mistakes, so the writer
  can <u>corect</u> them.
</p>

p {
  margin: 0;
}

u {
  text-decoration: red wavy underline;
}

有关何时适合使用 <u> 以及何时不适合的更多详情，请参阅用法说明部分。

属性

此元素仅包含全局属性。

用法说明

与其他纯样式元素一样，最初的 HTML 下划线 (<u>) 元素在 HTML 4 中被弃用；然而，<u> 在 HTML 5 中被恢复，并赋予了新的语义：标记文本应用了某种形式的非文本注解。

用例

<u> 元素的有效用例包括标注拼写错误、在中文文本中为表示专有名词而应用专名号，以及其他形式的注解。

你不应该使用 <u> 来为文本添加下划线以达到某种呈现效果，或表示书名。

其他应考虑使用的元素

在大多数情况下，你应该使用 <u> 以外的元素，例如：

• <em> 表示强调
• <b> 吸引对文本的注意
• <mark> 标记关键词或短语
• <strong> 表示文本具有很强的重要性
• <cite> 标记书籍或其他出版物的标题
• <i> 在西文文本中表示技术术语、音译、思想或船只名称

要提供文本注解（与使用 <u> 创建的非文本注解相对），请使用 <ruby> 元素。

要应用下划线外观而不带任何语义，请使用 text-decoration 属性的 underline 值。

示例

标示拼写错误

此示例使用 <u> 元素和一些 CSS 来显示一个包含拼写错误的段落，该错误用红色波浪下划线样式标出，这是一种相当常见的用法。

HTML

<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>

在 HTML 中，我们看到 <u> 使用了 spelling 类，用于标示单词“wrongly”的拼写错误。

CSS

u.spelling {
  text-decoration: red wavy underline;
}

此 CSS 表明，当 <u> 元素应用了 spelling 类时，其文本下方应有一条红色波浪下划线。这是标示拼写错误的常见样式。另一种常见样式可以使用 red dashed underline（红色虚线下划线）来呈现。

结果

对于任何使用过当今较流行的文字处理软件的人来说，结果应该很熟悉。

避免使用 <u>

大多数时候，你实际上不想使用 <u>。以下是一些示例，展示了在几种情况下应该怎么做。

无语义的下划线

要为文本添加下划线而不暗示任何语义，请使用 <span> 元素，并将其 text-decoration 属性设置为 "underline"，如下所示。

HTML

<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots

CSS

.underline {
  text-decoration: underline;
}

结果

表示书名

书名应使用 <cite> 元素，而不是 <u> 甚至 <i>。

使用 cite 元素

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

为 cite 元素设置样式

<cite> 元素的默认样式会以斜体呈现文本。你可以使用 CSS 覆盖它。

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

cite {
  font-style: normal;
  text-decoration: underline;
}

技术摘要

规范

浏览器兼容性

另见

• 通常应改用 <span>、<i>、<em>、<b> 和 <cite> 元素。
• 对于无语义的下划线，应使用 CSS text-decoration 属性。