HTML u 标签
HTML <u>
标签功能
<u>
标签定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。
此元素以前在旧版本的 HTML 中称为“下划线”元素,但有时仍会以这种方式被滥用。要为文本加下划线,您应该应用包含 CSS text-decoration 属性设置为 underline 的样式。
提示: 在可能和超链接混淆的地方,避免使用
<u>
。
HTML <u>
标签用法
使用 <u>
标签为文本添加下划线:
<p>This is a <u>parragraph</u>.</p>
HTML <u>
标签演示
This is a parragraph.
又一个演示
<!-- 演示内容开始 -->
<style>
p {
font: 1rem 'Fira Sans', sans-serif;
}
u {
text-decoration: #f00 wavy underline;
}
</style>
<p>You could use this element to highlight <u>speling</u> mistakes, so the writer can <u>corect</u> them.</p>
<!-- 演示内容结束 -->
要考虑使用的其他要素
在大多数情况下,您应该使用<u>
以外的元素,例如:
<em>
表示强调重点<b>
提示注意文字<mark>
标记关键词或短语<strong>
表明文本具有重要意义<cite>
标记书籍或其他出版物的标题<i>
表示西方文本中的技术术语,音译,思想或船名- 要提供文本注释(与使用
<u>
创建的非文本注释相对),请使用<ruby>
元素。
要应用带下划线的外观而没有任何语义含义,请使用 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.。
结果
任何使用过今天比较流行的文字处理器的人都应该熟悉结果。
避免使用 <u>
大多数情况下,您实际上不想使用 <u>
。以下是一些示例,显示在几种情况下您应该做什么。
非语义下划线
要在不暗示任何语义含义的情况下为文本加下划线,请使用 <span>
元素并将 text-decoration
属性设置为 “underline”,如下所示。
HTML
<span class="underline">Today's Special</span>
<br>
Chicken Noodle Soup With Carrots
CSS
.underline {
text-decoration: underline;
}
表示书名
书籍标题应使用 <cite>
元素而不是 <u>
甚至 <i>
来呈现。
HTML
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
请注意,
<cite>
元素的默认样式会以斜体显示文本。如果您愿意,可以使用 CSS 覆盖它:
cite {
font-style: normal;
text-decoration: underline;
}
浏览器支持
所有主流浏览器都支持 <u>
标签。
提示和注释
提示:请尽量避免使用 <u>
为文本加下划线,用户会把它混淆为一个超链接。
注释:HTML5 规范建议开发者尽量使用其他元素替代 <u>
元素。
HTML4 与 HTML5 之间的差异
在 HTML 中,<u>
元素 已废弃(<u>
元素被用来定义下划线)。
HTML5 中重新定义了 <u>
元素,它定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。
全局属性
<u>
标签支持 HTML 全局属性。
事件属性
<u>
标签支持 HTML 事件属性