<u>:未阐明的注释(下划线)元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<u> HTML 元素表示行内文本拥有一个非文本形式的注释,该注释需要以某种方式渲染出来。默认情况下渲染为一个实线下划线,可以用 CSS 替换。

警告: 此元素以前在旧版本的 HTML 中称为“下划线”元素,但有时仍会以这种方式被滥用。要为文本加下划线,你应该应用包含 CSS text-decoration 属性设置为 underline 的样式。

尝试一下

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

属性

这个元素仅包含全局属性

使用说明

就像所有纯样式元素那样,原本的下划线元素(<u>)在 HTML 4 中被废弃。但是 <u> 在 HTML 5 中被恢复,并被赋予了一个新的语义:将文本标记为应用了某种形式的非文本注释。

备注: 在可能和超链接混淆的地方,避免使用默认样式的 <u> 元素,它们都默认用下划线装饰。

使用场景

<u> 元素的有效用例包括标注拼写错误、向中文文本中的专有名称添加专名号,以及其他形式的注释。

应该使用 <u> 为文字添加视觉上的下划线,或者表示书籍的标题。

要考虑使用的其他要素

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

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

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

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

示例

表示拼写错误

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

HTML

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

在 HTML 中,我们用 <u> 元素及 spelling 类来表示“wrnogly”一词的拼写错误。

CSS

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

这个 CSS 表示当 <u> 元素使用类 spelling 进行样式化时,它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 red dashed underline

结果

用过任意目前比较流行的文字处理软件的人应该都对结果感到熟悉。

避免使用 <u>

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

非语义下划线

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

HTML
html
<span class="underline">今日特供</span>
<br />
胡萝卜鸡丁面
CSS
css
.underline {
  text-decoration: underline;
}
结果

表示书名

书籍标题应使用 <cite> 元素而不是 <u> 甚至 <i> 来呈现。

使用 cite 元素
html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
为 cite 元素添加样式

<cite> 元素的默认样式会以斜体显示文本,你可以使用 CSS 覆盖它:

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

技术概要

内容分类 流式内容短语内容、可感知内容。
允许的内容 短语内容
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
隐含的 ARIA 角色 generic
允许的 ARIA 角色 任意
DOM 接口 HTMLElement

规范

Specification
HTML
# the-u-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
u

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见