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