<s>标签不是删除线的视觉实现方案，因为它定义的是“内容已失效”的语义而非样式，浏览器默认加删除线仅为呈现惯例，可通过CSS覆盖；其核心价值在于传达状态变化（如价格不适用），而非编辑动作（如字段被删除），且依赖严格ISO 8601格式的datetime属性支撑机器可读性与无障碍播报差异。
为什么 标签不是“删除线”的视觉实现方案
标签确实渲染为删除线，但它本身不定义“删除线”——它定义的是“内容已失效”。浏览器只是按规范默认给 加了 text-decoration: line-through，这和 <strong> 默认加粗、<em> 默认倾斜一个道理。你完全可以用 CSS 覆盖掉这个样式：s { text-decoration: none; }，此时语义还在（“过时”），但视觉上连横线都没了。
常见错误现象：<s>¥199</s> 被当成“画条线就行”，结果在无障碍场景下读屏器报“已废弃：¥199”，而用户正盯着商品页想点购买——ta 并没意识到这是价格变更，只听到“废弃”，瞬间困惑。
- 视觉效果是副作用，不是目的；语义才是
存在的唯一理由 - 若只需划掉文字（比如待办事项完成态、设计稿标注），直接用
text-decoration: line-through更干净 不支持cite或datetime，没法说明“为什么过时”“从什么时候开始过时”
和 在“内容失效”场景下怎么选
两者都可用于呈现“旧信息”，但触发条件不同： 指向一次明确的编辑动作（删掉了）， 指向一次状态变化（不适用了）。例如商品价格变动，本质是“原价不再生效”，不是“原价被从数据库删了”——该用 ；但如果这是 API 响应字段变更日志，显示“旧字段 user_name 已被 移除，改用 full_name”，这时 才对。
使用场景：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 促销页写“原价：
¥299现价：¥199” → ✅ 合理，“原价”未被删除，只是当前不适用 - 技术文档写“
get_user()fetchUser()” → ✅ 合理，记录函数被删除并替换 - 后台管理页显示“用户状态：
待审核” → ❌ 错误，这不是过时，是当前真实状态，不该加删除线
datetime 属性写错会导致语义彻底丢失
的 datetime 不是装饰字段，它是机器可读的关键元数据。搜索引擎、审计工具、协作平台靠它判断修改时效性。错写成 datetime="2026/04/20" 或 datetime="4月20日"，浏览器照常渲染删除线，但所有依赖该属性的系统都会跳过解析——等于白写。
必须满足：
- 格式严格为 ISO 8601：
datetime="2026-04-20"（仅日期）或datetime="2026-04-20T15:30:00Z"（含时区） - 时间值不参与渲染，所以别指望它自动转成本地时间；后端生成时得确认时区是否一致
根本不支持datetime，强行加会触发 HTML 校验警告，且无任何效果
读屏器对 和 的播报差异很实在
NVDA、VoiceOver 等主流读屏器不会把 和 当成同一件事处理： 通常播报为“已删除：xxx”， 则可能静默跳过修饰词，或读作“已废弃：xxx”。用户听到“已删除”，第一反应是“这内容还能点吗？是不是失效链接？”；听到“已废弃”，则更倾向理解为“历史参考，当前不推荐”。这种差异直接影响操作决策。
容易踩的坑：
- 用
包裹按钮文案（如<s>立即下载</s>），读屏器说“已废弃：立即下载”，用户不敢点 - 用
标注临时缺货商品（实际库存为 0，但商品页仍存在），读屏器报“已删除：iPhone 15”，引发客诉 - 纯 CSS 删除线（
text-decoration: line-through）全程静默，什么也不说——适合真·视觉装饰，不适合传达状态
