<del>表示内容被删除，<s>表示内容不再准确或不推荐；前者支持cite和datetime属性，适用于编辑历史、API废弃字段等，后者适用于过时价格、失效优惠码等，二者均不可用于纯视觉装饰。
del 和 s 标签都加删除线，但语义完全不同
浏览器渲染效果一样，都是文字中间加横线，但 <del> 表示「内容被删除」，<s> 表示「内容不再准确或不推荐」。搜索引擎、读屏软件、代码审查工具会据此做不同处理——不是视觉问题，是语义问题。
常见错误现象：<s> 被当成“样式替代方案”滥用，比如给促销价加删除线，结果被读屏器读作“这个价格已废弃”，用户困惑；又或者用 <del> 标注临时下架商品，但实际只是库存为零，没真删掉数据。
-
<del>适合：编辑历史中被移除的文本、API 响应里明确废弃的字段、Git diff 中的删除行 -
<s>适合：过时的价格（如原价￥199）、失效的优惠码、已停用的功能名称（如“旧版导出按钮”） - 两者都不该用于纯视觉装饰——该用 CSS
text-decoration: line-through的地方硬套标签，会污染语义结构
del 支持 cite 和 datetime，s 完全不支持
<del> 是 HTML5 明确允许带 cite（引用来源）和 datetime（删除时间）属性的，这对协作编辑、法律存证、内容审计很关键；<s> 没有这些扩展能力，强行加会被校验器警告。
使用场景：多人协同写文档时，用 <del cite="https://example.com/minutes#2024-03" datetime="2024-03-15T14:22">下周上线</del>，比光秃秃的删除线更能说明“谁、为什么、什么时候删的”。
-
datetime必须是完整 ISO 8601 格式（如"2024-03-15T14:22:00Z"），只写"2024-03-15"无效 -
cite值必须是合法 URL，不能是中文描述或相对路径片段 - 服务端渲染时若动态生成
<del>，注意后端时间时区与前端显示是否一致，否则datetime可能误导
无障碍访问下，屏幕阅读器对 del 和 s 的播报差异明显
主流读屏软件（NVDA、VoiceOver）默认会把 <del> 读作“已删除：xxx”，把 <s> 读作“已废弃：xxx”或直接跳过修饰词——用户第一反应是“这内容还存在吗？还能点吗？”。而纯 CSS 的 line-through 则完全静默，什么也不说。
立即学习“前端免费学习笔记（深入）”；
性能影响几乎为零，但兼容性要注意：<del> 在 IE9+、所有现代浏览器都支持；<s> 在 IE 低版本中可能无样式，且部分老读屏器不识别其语义。
- 电商详情页中，原价用
<s>，促销价紧跟其后，确保读屏时顺序自然：“已废弃：￥199，当前价：￥99” - 法律条款修订稿里，删除段落必须用
<del>并带datetime，否则无法满足合规存档要求 - 别在
<button>或<a>内部嵌<del>——语义冲突（“已删除的可点击元素？”），浏览器行为不可靠
想控制样式又不破坏语义？优先用 CSS，而非换标签
如果只是要视觉上加删除线，且无语义需求，直接用 text-decoration: line-through 最干净。滥用 <s> 或 <del> 当样式钩子，会导致 HTML 结构膨胀、语义失焦、后续维护困难。
容易踩的坑：用 JS 动态切换 <s> 和 <span> 来控制显示/隐藏删除线，结果 DOM 中残留大量无意义的 <s> 标签；或者用 CSS 强制让 <del> 不显示删除线（text-decoration: none），等于白写了语义标签。
- 需要响应式删除线粗细/颜色？写 CSS 类，不要改标签
- 需要动画效果（如划掉过程）？只能用 CSS +
<span>，<del>和<s>不支持伪元素模拟划线动画 - SSR 页面中，服务端预判不了用户角色时，别用
<del>包裹需权限才能看的内容——语义和权限逻辑混在一起，容易出错
