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

基线 广泛可用

此功能已完善,可在许多设备和浏览器版本上运行。它自 2015 年 7 月.

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

警告:此元素在较早版本的 HTML 中称为“下划线”元素,有时仍会被错误地用作此目的。要对文本添加下划线,应使用包含 CSS text-decoration 属性(设置为 underline)的样式。

试试看

请参阅使用说明部分,以了解何时适合使用 <u>,以及何时不适合。

属性

此元素仅包含全局属性

使用说明

与其他纯粹的样式元素一样,原始 HTML 下划线 (<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,它用于表示单词“wrongly”的拼写错误。

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">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
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

规范

规范
HTML 标准
# the-u-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅