应使用<del>标签标记真实删除行为，如价格调整、法律修订等，并搭配<ins>及ISO 8601格式的datetime属性；<s>仅用于标识自然失效或不推荐内容，不支持时间与来源属性。
用 <del> 标签标记已删除内容
语义最清晰、浏览器兼容性最好，适合表达“这段文字曾存在但已被移除”的含义。<del> 是 HTML 原生语义标签，会被屏幕阅读器识别为删除内容，对可访问性友好。
常见错误是把它当样式工具滥用——比如仅为了视觉划线而用 <del>，结果破坏了语义。如果只是装饰性划线（如价格对比中的原价），应改用 CSS。
-
<del>¥199</del> ¥99—— 语义正确，适合电商页面标原价 - 不要嵌套
<del>在<p>外或与<ins>混用时忽略时间属性（datetime） - 部分旧版 IE 对
<del>默认样式支持弱，建议配合简单 CSS 重置：del { text-decoration: line-through; }
用 CSS text-decoration: line-through 控制样式
当需要精细控制删除线颜色、粗细、位置或与其他修饰线（如下划线）共存时，CSS 是唯一选择。HTML 标签无法设置这些。
注意：直接写 style="text-decoration: line-through" 虽快但难维护；推荐用 class 统一管理。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 删除线默认是单色、居中、细线，要改颜色需加
text-decoration-color（Chrome 64+、Firefox 70+ 支持） - 若需双线或波浪线，
text-decoration-style可设为double或wavy，但 Safari 对wavy支持不稳定 - 避免在行内元素上叠加多个
text-decoration（如同时underline和line-through），渲染可能错位
避免用 <strike> 或过时写法
<strike> 已被 HTML5 废弃，W3C 明确不推荐使用。它只提供视觉效果，无语义，且现代浏览器虽仍渲染，但校验工具会报 warning。
同样，<s> 标签虽被保留，但它表示“无需关注的内容”（如拼写错误、过时信息），语义不同于“已删除”。误用会导致 SEO 和无障碍问题。
- 别写
<strike>旧方案</strike>—— 改用<del>或 CSS -
<s>适合标注明显错误的文本，例如：<s>地球是平的</s>，而非业务逻辑中的删除操作 - 任何用
font标签加size或color模拟删除线的做法，都违背结构与样式的分离原则
React/Vue 等框架里怎么安全加删除线
框架中动态渲染删除线，关键是避免直接拼接 HTML 字符串（XSS 风险），也别在 JSX/Template 中硬编码 <del> 却忽略数据状态变化。
典型坑是：条件渲染没同步更新删除状态，导致视觉与实际数据不一致。
- React 中优先用 className 控制：
<span className={isDeleted ? "deleted" : ""}>{text}</span>，再配 CSS 规则 - Vue 模板中慎用
v-html渲染含<del>的字符串，除非内容完全可信 - 服务端返回富文本含
<del>时，前端需确认其合法性（如通过 DOMPurify 过滤）
<del> 标签背后，可能意味着一次 API 删除调用是否完成；而一段 line-through CSS，可能在暗色模式下因颜色对比度不足而不可见。 
