答案：应优先使用css的text-decoration属性而非标签添加下划线，因语义不符且影响可访问性；删除线统一用text-decoration: line-through实现，避免废弃标签；多装饰线需用新子属性或伪元素模拟。

用 <u></u> 标签加下划线（但不推荐）

HTML 确实有 <u></u> 标签，写 <u>文字</u> 能显示下划线，但它在语义上表示“非标准文本”（比如拼写错误、专有名词注释），不是用来做装饰性下划线的。现代项目里滥用 <u></u> 会被 Linter 报警告，屏幕阅读器也可能误读。

真正该用的是 CSS：text-decoration: underline。它可控、可组合、无障碍友好：

<p style="text-decoration: underline">这段文字有下划线</p>

• 想取消默认下划线（比如链接）？加 text-decoration: none
• 要控制颜色或样式？用 text-decoration-color 和 text-decoration-style（如 dotted、wavy）
• 只给部分文字加？套 <span></span>，别用 <u></u>

用 text-decoration: line-through 实现删除线

删除线没有专用 HTML 标签（<strike></strike> 和 <del></del> 已废弃或语义受限），统一走 CSS 最稳妥。

<del></del> 标签虽未被移除，但它的语义是“内容已被删除”，浏览器默认渲染为删除线——仅适用于真实编辑历史场景（如文档修订）。日常 UI 中想视觉上划掉价格或旧文案，直接用 CSS 更干净：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

<span style="text-decoration: line-through">¥199</span> <span>¥99</span>

• <del></del> 会触发辅助技术播报“已删除”，若只是促销展示，反而造成误解
• 删除线颜色默认继承文字色，想单独设色？加 text-decoration-color: red
• 和下划线一样，支持 text-decoration-style（如 double），但多数浏览器对 line-through 的样式支持有限

同时用下划线和删除线？小心叠加冲突

CSS 的 text-decoration 是简写属性，多个值写一起才共存，不能重复声明：

<span style="text-decoration: underline line-through">又划又删</span>

• 错写成两行 text-decoration: underline + text-decoration: line-through？后一条会覆盖前一条
• 想控制每条线的位置或颜色？做不到——CSS 目前不支持分别设置多条装饰线的偏移或颜色
• 真需要精细控制（比如删除线靠上、下划线靠下）？得用伪元素 ::before/::after 模拟，代价是 DOM 变复杂、可访问性需额外处理

React/Vue 里动态加删除线？别拼字符串

框架中常见需求：根据状态切换删除线。错误做法是拼 HTML 字符串或用 v-html/dangerouslySetInnerHTML：

<div v-html="'<span style=" text-decoration: :>' + price + ''"></div>

这既危险又难维护。正确姿势是绑定内联样式：

<span :style="{ 'text-decoration': isOld ? 'line-through' : 'none' }">{{ price }}</span>

• Vue 用 :style，React 用 style={{ textDecoration: isOld ? 'line-through' : 'none' }}
• 避免用类名切换再写一堆 CSS 规则，除非样式复用率极高
• 注意：布尔值直接传 true/false 不生效，必须是字符串 'line-through' 或 'none'

实际项目里，text-decoration 看似简单，但语义混淆、多线叠加、框架绑定这三处最容易出错。尤其当设计稿要求“浅灰删除线+蓝色下划线”时，别硬扛 CSS，老老实实用伪元素——那才是真要动手的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！