<u>:未铰接的注释(下划线)元素

<u> HTML 元素表示一段内联文本,应以指示其具有非文本注释的方式呈现。默认情况下呈现为简单的实线下划线,但可以使用 CSS 进行更改。

¥The <u> HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.

警告:该元素在旧版本的 HTML 中曾被称为 "强调" 元素,并且有时仍会以这种方式被误用。要为文本添加下划线,你应该应用包含设置为 underline 的 CSS text-decoration 属性的样式。

¥Warning: This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration property set to underline.

Try it

有关何时适合使用 <u>、何时不适合的更多详细信息,请参阅 使用说明 部分。

¥See the Usage notes section for further details on when it's appropriate to use <u> and when it isn't.

属性

¥Attributes

该元素仅包含 全局属性

¥This element only includes the global attributes.

使用说明

¥Usage notes

与其他纯样式元素一起,原始 HTML 下划线 (<u>) 元素在 HTML 4 中已被弃用;然而,<u> 在 HTML 5 中被恢复,并具有新的语义含义:将文本标记为应用了某种形式的非文本注释。

¥Along with other pure styling elements, the original HTML Underline (<u>) element was deprecated in HTML 4; however, <u> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.

注意:避免将 <u> 元素与其默认样式(带下划线的文本)一起使用,以免与超链接混淆,默认情况下超链接也带有下划线。

¥Note: Avoid using the <u> element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.

用例

¥Use cases

<u> 元素的有效用例包括注释拼写错误、应用 专有名称标记 来表示中文文本中的专有名称以及其他形式的注释。

¥Valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.

你不应使用 <u> 为演示目的的文本下划线,或表示书名。

¥You should not use <u> to underline text for presentation purposes, or to denote titles of books.

需要考虑使用的其他元素

¥Other elements to consider using

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

¥In most cases, you should use an element other than <u>, such as:

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

要提供文本注释(与使用 <u> 创建的非文本注释相反),请使用 <ruby> 元素。

¥To provide textual annotations (as opposed to the non-textual annotations created with <u>), use the <ruby> element.

要应用没有任何语义意义的下划线外观,请使用 text-decoration 属性的值 underline

¥To apply an underlined appearance without any semantic meaning, use the text-decoration property's value underline.

示例

¥Examples

指示拼写错误

¥Indicating a spelling error

此示例使用 <u> 元素和一些 CSS 来显示包含拼写错误的段落,该错误以红色波浪下划线样式指示,该样式相当常用于此目的。

¥This example uses the <u> element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.

HTML

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

在 HTML 中,我们看到 <u> 与类 spelling 一起使用,该类用于指示单词 "wrongly" 的拼写错误。

¥In the HTML, we see the use of <u> with a class, spelling, which is used to indicate the misspelling of the word "wrongly".

CSS

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

此 CSS 指示当 <u> 元素使用 spelling 类设置样式时,它的文本下方应有一条红色波浪下划线。这是拼写错误的常见样式。另一种常见的风格可以使用 red dashed underline 来呈现。

¥This CSS indicates that when the <u> element is styled with the class spelling, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using red dashed underline.

结果

¥Result

对于任何使用过当今更流行的文字处理器的人来说,结果应该很熟悉。

¥The result should be familiar to anyone who has used any of the more popular word processors available today.

避免 <u>

¥Avoiding <u>

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

¥Most of the time, you actually don't want to use <u>. Here are some examples that show what you should do instead in several cases.

非语义下划线

¥Non-semantic underlines

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

¥To underline text without implying any semantic meaning, use a <span> element with the text-decoration property set to "underline", as shown below.

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

CSS
css
.underline {
  text-decoration: underline;
}

结果

¥Result

提出书名

¥Presenting a book title

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

¥Book titles should be presented using the <cite> element instead of <u> or even <i>.

使用 cite 元素

¥Using the cite element

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

设置 cite 元素的样式

¥Styling the cite element

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

¥The default styling for the <cite> element renders the text in italics. You can override that using CSS:

html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
css
cite {
  font-style: normal;
  text-decoration: underline;
}

技术总结

¥Technical summary

内容类别 流量内容措辞内容,可触及的内容。
允许的内容 措辞内容.
标签遗漏 无,开始和结束标记都是强制性的。
允许的父级 任何接受 措辞内容 的元素。
隐式 ARIA 角色 generic
允许的 ARIA 角色 任何
DOM 接口 HTMLElement

规范

Specification
HTML Standard
# the-u-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also