del 标签语义为“已删除内容”，默认显示贯穿线，须用于真实删改场景，不可替代装饰性标签；应仅包裹被删数值，避免嵌套块级元素，宜与 ins 配对并标注 datetime 属性。
del 标签的语义和基本用法
del 是 HTML 中表示「已删除内容」的语义化标签，浏览器默认会为它加上贯穿线（strikethrough），适合展示被划掉的原价、旧价格或已失效信息。它不是装饰性标签，不能替代 span + CSS 实现视觉效果——否则会丢失可访问性（如屏幕阅读器会读出「已删除」）和 SEO 意图。
- 必须配合上下文使用，比如和
ins配对表示「删改」，或单独用于明确已作废的价格 - 不要嵌套其他块级元素（如
div），只允许行内容器（span、em、文本等） - 避免用
del表示「打折」本身——折扣应由文案或strong/mark强调，del只负责原价
价格场景下的正确写法示例
常见错误是把整个价格结构塞进 del 里，比如 <del>¥199</del> ¥149，这会让「¥199」语义变成「整条信息被删除」，而实际只是数字值过期。更准确的做法是仅包裹数值部分，并保留货币符号的语义一致性：
<p>原价：<del>199</del><span>元</span>；现价：<strong>149</strong>元</p>
如果需要显示「¥199」完整字符串且保持货币符号不被误读，可以这样：
<p>原价：<del>¥199</del>；现价：<strong>¥149</strong></p>
注意：del 内部的 ¥ 是文本字符，不是 HTML 实体，无需转义；但若用 ¥，也完全合法，不影响渲染。
立即学习“前端免费学习笔记（深入）”；
样式微调与兼容性注意点
浏览器对 del 的默认样式是 text-decoration: line-through，但不同内核下贯穿线位置、粗细略有差异（如 Safari 的线略偏上，Firefox 更居中）。如需统一，建议显式重置：
del { text-decoration: line-through; text-decoration-thickness: 1.2px; text-decoration-color: #999; }
- 不要用
del { color: #999; }单独改颜色——贯穿线颜色默认跟随文字色，改文字色即改线色；若要线色和文字色不同，必须用text-decoration-color - IE 11 及更早版本不支持
text-decoration-thickness和text-decoration-color，但基础贯穿线始终可用 - 移动端 Safari 对
del的点击区域识别较弱，如有交互需求（如点击展开说明），请在外层加span或button，别直接给del绑事件
和 ins 标签配对使用的典型场景
当页面需体现「价格修改过程」（如运营后台预览、合同修订痕迹），del 和 ins 应成对出现，并通过 datetime 属性标注时间：
<p><del datetime="2024-05-20T14:30">¥199</del> <ins datetime="2024-05-20T14:30">¥149</ins></p>
此时 datetime 值必须是合法的 ISO 8601 时间格式，否则会被忽略；省略该属性虽不报错，但失去机器可读的时间线索。
容易被忽略的是：如果原价和现价单位不一致（比如从「¥199」改成「$19.99」），del 和 ins 仍可分别包裹各自字符串，但需确保单位变更本身有文案说明，不能仅靠标签暗示。
