应使用 标签配合 css 强化样式实现删除线，避免使用已废弃的 ； 语义明确且可无障碍支持，需通过 css 如 del { text-decoration: line-through; color: #d32f2f; } 提升视觉效果。

HTML 里加删除线，别用 <del></del> 就完事——它语义对但默认样式弱，真要视觉明显得配 CSS；纯靠 <s></s> 更危险，它已被废弃多年，现代项目里该直接绕开。

用 <del></del> 标记语义删除，再用 CSS 强化样式

这是推荐做法。<del></del> 表示内容被正式删除（比如价格变更、条款修订），浏览器默认只画一条细灰线，实际页面里几乎看不见。

实操建议：

• 必须配合 CSS 覆盖默认样式，例如：

  del { text-decoration: line-through; color: #d32f2f; }

• 如果要区分“已删”和“待删”，可加自定义 class：<del class="pending">待审核内容</del>，再写对应规则
• 注意：某些旧版 IE（如 IE8）不支持 <del></del> 的 CSS 伪类，需测试兼容性

避免用 <s></s> —— 它不是“快捷写法”，而是过时标签

<s></s> 在 HTML4 里表示“不再准确或不再相关”的内容，但语义模糊，W3C 已明确不鼓励使用。HTML5 中它被降级为纯表现标签，等价于 <span style="text-decoration:line-through"></span>，且部分屏幕阅读器会忽略其含义。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

常见错误现象：

• 用 <s>¥199</s><span>¥99</span> 做促销价，结果无障碍工具读不出“原价已失效”
• 在 React/Vue 等框架中，<s></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

真正容易被忽略的是语义与样式的耦合点：划掉一行字，到底是“编辑痕迹”“价格变更”还是“用户操作反馈”？选错标签，后期改起来比重写样式还麻烦。

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