<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>
元素和一些 CSS 来显示包含拼写错误的段落,其中错误以通常用于此目的的红色波浪下划线样式表示。
HTML
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
在 HTML 中,我们用 <u>
元素及 spelling
类来表示“wrnogly”一词的拼写错误。
CSS
u.spelling {
text-decoration: red wavy underline;
}
这个 CSS 表示当 <u>
元素使用类 spelling
进行样式化时,它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 red dashed underline
。
结果
用过任意目前比较流行的文字处理软件的人应该都对结果感到熟悉。
避免使用 <u>
大多数情况下,你实际上不想使用 <u>
。以下是一些示例,显示在几种情况下你应该做什么。
非语义下划线
要在不暗示任何语义含义的情况下为文本加下划线,请使用 <span>
元素并将 text-decoration
属性设置为 "underline"
,如下所示。
HTML
<span class="underline">今日特供</span>
<br />
胡萝卜鸡丁面
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;
}
技术概要
规范
Specification |
---|
HTML Standard # the-u-element |
浏览器兼容性
BCD tables only load in the browser