应使用 <del> 标签配合 CSS 强化样式实现删除线，避免使用已废弃的 <s>；<del> 语义明确且可无障碍支持，需通过 CSS 如 del { text-decoration: line-through; color: #d32f2f; } 提升视觉效果。
HTML 里加删除线，别用 <del> 就完事——它语义对但默认样式弱，真要视觉明显得配 CSS；纯靠 <s> 更危险，它已被废弃多年，现代项目里该直接绕开。
用 <del> 标记语义删除，再用 CSS 强化样式
这是推荐做法。<del> 表示内容被正式删除（比如价格变更、条款修订），浏览器默认只画一条细灰线，实际页面里几乎看不见。
实操建议：
- 必须配合 CSS 覆盖默认样式，例如：
del { text-decoration: line-through; color: #d32f2f; } - 如果要区分“已删”和“待删”，可加自定义 class：
<del class="pending">待审核内容</del>，再写对应规则 - 注意：某些旧版 IE（如 IE8）不支持
<del>的 CSS 伪类，需测试兼容性
避免用 <s> —— 它不是“快捷写法”，而是过时标签
<s> 在 HTML4 里表示“不再准确或不再相关”的内容，但语义模糊，W3C 已明确不鼓励使用。HTML5 中它被降级为纯表现标签，等价于 <span style="text-decoration:line-through">，且部分屏幕阅读器会忽略其含义。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 用
<s>¥199</s><span>¥99</span>做促销价，结果无障碍工具读不出“原价已失效” - 在 React/Vue 等框架中，
<s>可能触发严格模式警告 - 团队代码审查时会被标记为“语义污染”
纯 CSS 实现删除线：更灵活，也更适合动态场景
当删除状态由 JS 控制（比如用户勾选后划掉列表项），直接操作 class 比切换标签更可靠。
实操建议：
- 定义通用类：
.strikethrough { text-decoration: line-through; opacity: 0.7; } - JS 动态添加：
item.classList.add('strikethrough')，移除时用.remove() - 注意：不要只依赖
text-decoration: line-through，搭配opacity或color才能让删除效果在高对比度模式下仍可见 - 若需动画（如划线渐显），得用伪元素模拟，因为
text-decoration本身不支持 transition
真正容易被忽略的是语义与样式的耦合点：划掉一行字，到底是“编辑痕迹”“价格变更”还是“用户操作反馈”？选错标签，后期改起来比重写样式还麻烦。
