电商价格变更必须用<del>与<ins>成对标记，带合法ISO 8601格式datetime（含时分秒及时区），且<ins>时间不得早于<del>；二者为行内元素，不可包裹块级标签，CSS不得禁用text-decoration。
<del> 和 <ins> 在电商价格展示中不是“可选装饰”，而是必须成对出现、带合法 datetime 的语义化修订标记；只加删除线不标插入，或时间戳格式错误，等于没用。
价格变更必须用 <del> + <ins> 成对包裹对应文本
用户看到“原价¥299 → 现价¥249”，背后要表达的是“一次替换动作”，而非两个孤立样式。浏览器和屏幕阅读器不会自动推断“删掉 A 就是换成 B”。
- ✅ 正确：
<p>价格：<del datetime="2026-04-20T09:00:00Z">¥299</del><ins datetime="2026-04-25T14:20:00Z">¥249</ins></p> - ❌ 错误：
<p>价格：<del>¥299</del>¥249</p>（<ins>缺失，语义断裂） - ❌ 错误：
<p>价格：<del datetime="2026-04-25">¥299</del><ins datetime="2026-04-25">¥249</ins></p>（datetime缺时分秒，被浏览器忽略）
注意：<ins> 的时间不能早于 <del>，否则逻辑矛盾——不能“先插入新价再删旧价”。
datetime 必须是完整 ISO 8601 时间，且不能由 JS 动态生成
电商系统常从后端模板或 CMS 渲染价格，datetime 值必须在 HTML 输出时就写死为真实修订时刻，不能留空、不能填 "now()"、不能靠前端 JS 补充。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：
datetime="2026-04-25T14:20:00+08:00"或datetime="2026-04-25T06:20:00Z" - ❌ 非法：
datetime="2026-04-25"（无时分秒）、datetime="2026/04/25"（非 ISO 格式）、datetime="{{ now }}"（未渲染成字符串）
搜索引擎和比价爬虫会提取这些时间戳做价格趋势分析；填错=丢数据。
避免把 <del>/<ins> 当块级容器用
电商页常有复杂价格结构，比如带单位、符号、副文案，但 <del> 和 <ins> 是行内元素，强行包裹 <span> 外的块级内容易触发浏览器隐式修正，导致 DOM 不稳定或样式塌陷。
- ✅ 安全写法：
<span class="price"><del datetime="...">¥299</del><ins datetime="...">¥249</ins></span> - ❌ 危险写法：
<del><div>¥299</div></del>（<div>不允许出现在<del>内） - ❌ 危险写法：
<del><p>¥299</p></del>（虽被部分浏览器容忍，但违反规范，React/Vue diff 可能出错）
如果价格含多词（如“¥299 / 件”），建议只包数字部分：<del>299</del>/ 件，避免跨字符破坏语义粒度。
CSS 样式别覆盖 text-decoration，尤其别设 text-decoration: none
<del> 和 <ins> 的语义不依赖样式，但可访问性依赖视觉反馈。若父级设置了 text-decoration: none，子元素的删除线/下划线会消失，而屏幕阅读器仍播报“已删除”，造成信息错位。
- ✅ 推荐微调：
del { text-decoration: line-through; text-decoration-color: #dc3545; } - ✅ 推荐微调：
ins { text-decoration: underline; text-decoration-style: dashed; text-decoration-color: #28a745; } - ❌ 绝对避免：
del, ins { text-decoration: none; }或父容器设text-decoration: none
真正容易被忽略的是：邮件客户端、旧版 Safari、某些安卓 WebView 对 text-decoration-color 支持有限，稳妥做法是同时加背景色辅助识别。
