From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/u/index.html | 198 ++++++++++++++++++++++++++++++ 1 file changed, 198 insertions(+) create mode 100644 files/zh-cn/web/html/element/u/index.html (limited to 'files/zh-cn/web/html/element/u/index.html') diff --git a/files/zh-cn/web/html/element/u/index.html b/files/zh-cn/web/html/element/u/index.html new file mode 100644 index 0000000000..fa4e6a77dc --- /dev/null +++ b/files/zh-cn/web/html/element/u/index.html @@ -0,0 +1,198 @@ +--- +title: +slug: Web/HTML/Element/u +translation_of: Web/HTML/Element/u +--- +
{{HTMLRef}}
+ +
+

HTML <u> 元素（表意不清标注元素）表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用CSS替换。

+
+ +
+

此元素以前在旧版本的HTML中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，您应该应用包含CSS {{cssxref("text-decoration")}}属性设置为 underline 的样式。

+
+ +
{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}
+ + + +

有关何时适合使用 <u> 以及何时不使用 <u> 的详细信息，请参阅{{anch("Usage notes")}} 部分。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
内容类别流式内容，短语内容，palpable 内容。
允许的内容短语内容
标签省略{{no_tag_omission}}
允许的父元素任何接受短语内容的元素。
允许的 ARIA 角色任意
DOM 接口{{domxref("HTMLElement")}} Gecko 1.9.2 (Firefox 4) 之前（包含）, Firefox 为这个元素实现了 {{domxref("HTMLSpanElement")}}  接口。
+ +

属性

+ +

这个元素仅包含全局属性。

+ +

使用说明

+ +

就像所有排版元素那样， {{ HTMLElement("u") }} 在 HTML 4 中废弃，但是在 HTML 5 中恢复了一个新的语义，意思是：将文本标记为应用了某种形式的非文本注释。

+ +
+

提示： 在可能和超链接混淆的地方，避免使用 {{ HTMLElement("u") }}。

+
+ +

用例

+ +

<u>元素的有效用例包括注释拼写错误，应用 {{interwiki("wikipedia", "proper name mark")}} 来表示中文文本中的专有名称以及其他形式的注释。

+ +

您不应该使用<u>简单地为文字加下划线，或者表示书籍的标题。

+ +

要考虑使用的其他要素

+ +

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

+ + + +

要提供文本注释（与使用<u>创建的非文本注释相对），请使用 {{HTMLElement("ruby")}} 元素。

+ +

要应用带下划线的外观而没有任何语义含义，请使用 {{cssxref("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.。

+ +

结果

+ +

任何使用过今天比较流行的文字处理器的人都应该熟悉结果。

+ +

{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}

+ +

避免使用 <u>

+ +

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

+ +

非语义下划线

+ +

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

+ +
HTML
+ +
<span class="underline">Today's Special</span>
+<br>
+Chicken Noodle Soup With Carrots
+ +
CSS
+ +
.underline {
+  text-decoration: underline;
+}
+ +
结果
+ +

{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}

+ +

表示书名

+ +

书籍标题应使用 {{HTMLElement("cite")}} 元素而不是 <u> 甚至 <i> 来呈现。

+ +
HTML
+ +
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
+ +
默认样式的结果
+ +

{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}

+ +

请注意， <cite> 元素的默认样式会以斜体显示文本。如果您愿意，可以使用CSS覆盖它：

+ +
cite {
+  font-style: normal;
+  text-decoration: underline;
+}
+ +
定制样式的结果
+ +

{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('HTML WHATWG', 'semantics.html#the-u-element', '<u>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '<u>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}{{Spec2('HTML4.01')}}
+ +

浏览器兼容性

+ +

{{Compat("html.elements.u")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf