用于内容已被删除的语义场景，支持datetime和cite属性；仅适用于过时但未删除的内容，html5中已不鼓励使用；纯视觉删除线应优先用css，但需注意兼容性和继承问题。
<del></del> 是语义正确、浏览器兼容性好、且支持修订元数据的首选方式；<s></s> 仅适用于“过时但未被删除”的内容，比如旧价格；纯视觉需求直接用 CSS 更灵活。
什么时候该用 <del></del> 而不是 <s></s>
关键看语义：内容是否真被删了？
-
<del></del>表示“已被删除”，适合文档修订、协作编辑、版本对比等场景；可加datetime和cite属性说明何时删、为何删，例如：<del datetime="2026-09-15" cite="/changelog#price-update">¥199</del> -
<s></s>表示“不再准确或相关”，比如促销页上划掉的原价、已搬迁的旧地址；它不强调“删除动作”，HTML5 中已标记为“不鼓励使用” - 两者渲染效果默认一样，但屏幕阅读器和 SEO 工具会区别对待——用错会影响可访问性和语义表达
text-decoration: line-through 的实际限制
它快、轻量、无语义干扰，但有三个硬约束必须提前知道：
- 删除线颜色、粗细无法单独控制：只写
text-decoration: line-through就是浏览器默认样式（通常是细黑线） - 想改颜色或粗细，得同时写全三属性：
text-decoration-line: line-through+text-decoration-color+text-decoration-thickness；缺一个就回退到默认 - 它会继承——父元素设了，子元素如
<strong></strong>或<span></span>也会带删除线，除非显式重置为text-decoration: none - 兼容性：Chrome 90+、Firefox 97+、Safari 15.4+ 才稳定支持
text-decoration-thickness；老版本 Safari 会忽略后两个属性，安全降级但不可控
表格整行加删除线不能直接套 <del></del>
<del></del> 是行内元素，不能包裹 <tr> 或 <code><tbody> —— 这会导致 HTML 结构错误，浏览器可能自动修正甚至破坏表格渲染。
<ul><li>正确做法：对每个 <code><td> 或 <code><th> 内容单独包裹 <code><del></del>，例如：<td><del>废弃配置项</del></td>
row.cells 插入 <del></del>，但需确保不破坏 SSR 或静态生成流程真正容易被忽略的是语义与样式的混用：很多人看到 <s></s> 简短就滥用，结果在无障碍测试里被标为“错误语义”；也有人死磕 text-decoration-thickness 兼容性，在 iOS 14 下白屏——其实加个降级 class 就能绕过。别让“看起来一样”掩盖了结构和体验的差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
