应优先用<del>标签标记语义删除（如编辑修订、价格变更），因其支持datetime和cite属性，可被屏幕阅读器识别为“已删除”并影响SEO；纯视觉删除线则用text-decoration: line-through。
删除线效果不需要专门学——用 <del> 或 text-decoration: line-through 两招就能搞定，关键在于选对场景、避开语义误用。
什么时候该用 <del> 标签
它不是“画条线”的视觉工具，而是 HTML 里明确表示「内容已被删除但保留在文档中供参考」的语义标签。浏览器默认渲染为删除线，但它的价值在结构和可访问性上。
- 适合编辑痕迹、价格对比（如原价
<del>¥199</del>现价¥149）、法律文本修订 - 屏幕阅读器会读出「已删除」，对残障用户有意义
- 搜索引擎可能据此判断内容更新状态
- 别用它替代样式需求：比如只想让某段文字带删除线但语义上没被删——这时该用 CSS
什么时候该用 text-decoration: line-through
纯视觉装饰，不带语义。适合标题加戏、测试文案、营销页面中的临时划掉效果。
- 写法简单：
style="text-decoration: line-through"或写进 CSS 类 - 可与其他修饰共存（比如同时加
color: gray），<del>默认样式难覆盖 - 注意：IE8+ 支持，现代浏览器无兼容问题；但别给
<input>或<button>直接加这个样式——它们不继承text-decoration，得用text-decoration-line: line-through（CSS3）或换其他方案 - 示例：
<p style="text-decoration: line-through;">这行只是看起来被删了</p>
<s> 标签能不能用？和 <del> 有什么区别
<s> 是纯视觉删除线标签，HTML5 中已明确「不表示删除语义」，只用于「不再准确或不相关的内容」，比如过期公告、失效链接。
立即学习“前端免费学习笔记（深入）”；
-
<del>：内容曾存在，现在被移除（有时间性、可追溯） -
<s>：内容本身无效了，比如「本活动截止至2023年」写在2024年页面上 - 两者默认样式一样，但语义不同；SEO 和辅助技术处理方式不同
- 别用
<s>替代<del>来图省事——结构混乱会让协作和维护变麻烦
真正容易被忽略的是：删除线在高对比度模式下可能不可见，或者和背景色混在一起。上线前务必在系统级高对比主题下检查 —— 尤其是用 text-decoration 的地方，它没有默认颜色控制，得手动加 text-decoration-color 或改 color 值。
