HTML u 标签

🌙
手机阅读
本文目录结构
axihe

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>
  <!-- 演示内容结束 -->

https://a.axihe.com/api/html/chrome_Bharw3hq7l.png

要考虑使用的其他要素

在大多数情况下,您应该使用<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 事件属性


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang