HTML 下划线与删除线：u、ins、s 和 del 标签

HTML 中如何给文字加下划线

有两种方法：<u> 标签，或者 CSS 属性 text-decoration: underline。两者画出的线是一样的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

任何下划线的问题都在第三行：读者以为带下划线的文字是链接，会去点击它。只有在理由明确时才给普通文字加下划线。

u 标签的含义

<u> 不是通用的“下划线”按钮。在当前的 HTML 中，它表示带有未明确说明的标注的文字：一个表示“这里有特别之处”却不说明是什么的标记。常见的实际用途有：

• 标出拼写错误（就像文字处理软件那样，常用红色波浪线），
• 标出中文里的专有名词，这是中文排版中的一种惯例（专名号）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

要强调就用 <em> 或 <strong>（见粗体），书名用 <cite>。如果只是想要这种外观，就用 CSS。

删除线：s 和 del

HTML 有两个给文字画删除线的标签，它们的含义不同：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

用 ins 和 del 标记修改

<ins> 是 <del> 的搭档：它标记新增的文字。浏览器默认给它加下划线。两者都接受 datetime（修改发生的时间）和 cite（说明修改的 URL）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

这种红绿配色就是大家熟悉的 diff 外观。给 ins 加上 text-decoration: none 可以去掉默认的下划线，免得它看起来像链接。

用 CSS 实现下划线和删除线

text-decoration 能给任何元素加上视觉效果：它可以设置颜色和样式，text-decoration-thickness 则设置线的粗细。对于纯装饰性的线条，这才是合适的工具：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

去掉链接的下划线、下划线偏移以及 text-decoration 的其他细节，见 CSS 下划线页面。

无障碍

屏幕阅读器对 <s>、<del> 和 <ins> 的支持并不一致：有些会读出“已删除”或“已插入”，很多则当作普通文字朗读，所以听众可能听到“价格 49 美元 29 美元”，却不知道哪个才是当前价格。当这种区别很重要时，也要用文字说明，比如加一段视觉上隐藏但会被朗读的文字，或者干脆写“原价 49 美元，现价 29 美元”。

常见错误

• 给不是链接的文字加下划线。 读者会试着去点击。要突出显示，改用粗体、颜色或背景。
• 用 <u> 表示强调。 应该用 <em> 或 <strong>。
• 使用 <strike>。 它已经废弃。改用 <s>、<del> 或 text-decoration: line-through。
• 在文档修订历史中用 <s> 表示删除的内容。 那应该用 <del>，它还能记录删除发生的时间。
• 只靠这条线来传达含义。 很多屏幕阅读器不会读出它。