<del>标签需包裹真实内容才有效，空标签或仅含空格无效；应通过text-decoration: line-through等CSS增强可读性，勿用无语义样式替代；其语义为“已删除”，区别于<s>和纯样式，可选加合法ISO 8601格式datetime属性。
HTML 中 <del> 标签怎么写才有效
直接写 <del>旧价格</del> 就能渲染删除线，但浏览器默认样式很淡，容易被当成普通文本。关键是它必须包裹**真实内容**，不能空着，也不能只放空格或 ；否则部分浏览器（比如 Safari）可能不渲染删除线，或者在可访问性工具里被忽略。
常见错误现象：<del></del>、<del> </del>、<del> </del> —— 这些都无效。
- 使用场景：电商比价（原价划掉）、文档修订（删掉的句子）、表单中禁用某项时视觉提示
- 它不改变语义权重，搜索引擎仍会索引里面的内容，别指望靠它“隐藏”信息
- 和
<s>不同，<del>明确表示「内容曾存在但已被移除」，对屏幕阅读器有语义提示（会读出“已删除”）
<del> 的样式能改吗？怎么改才不影响语义
能改，而且经常得改。默认的浅灰细线在深色背景或小字号下几乎看不见，尤其移动端。用 CSS 覆盖 text-decoration 是最安全的方式，别碰 border 或 background 模拟删除线——那会破坏语义和可访问性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
text-decoration: line-through，并配text-decoration-color和text-decoration-thickness控制颜色与粗细（Chrome 95+、Firefox 96+ 支持） - 兼容老浏览器？加回退：
text-decoration: line-through #d32f2f;（颜色会生效，粗细忽略） - 别给
<del>设color: #999就完事——用户可能自定义了高对比度模式，硬设颜色反而让删除线消失
和 <s>、text-decoration: line-through 混用会怎样
三者视觉相似，但语义和行为完全不同，混用会导致可访问性问题或 SEO 误判。
关键区别：
-
<del>：内容被删除，有时间语义（可加datetime属性），屏幕阅读器会明确播报“已删除” -
<s>：内容不再准确或不推荐，比如过期优惠、已停售商品，不强调“何时删”，也不触发删除语义 -
text-decoration: line-through：纯样式，无任何语义，对辅助技术完全透明 - 错误用法：
<s><del>xxx</del></s>—— 嵌套冲突，语义混乱，部分读屏软件会重复播报
datetime 属性到底要不要加
加不加取决于是否需要表达「删除发生的时间点」。不是所有场景都需要，但一旦加了，就得是合法的 ISO 8601 时间格式，否则会被浏览器忽略，且可能触发控制台警告。
实操注意点：
- 合法值示例：
<del datetime="2024-04-10T14:30">¥199</del>（注意 T 不可省略） - 如果只写日期如
"2024-04-10"，部分浏览器（Edge）会接受，但规范要求带时间，建议补上T00:00 - 千万别写中文时间、自然语言（如
"昨天"）或错位格式（"2024/04/10"），这些全无效 - 服务端动态生成时，确保时间是 UTC 或带时区偏移，避免用户本地时区解析出错
最容易被忽略的是：即使加了 datetime，它也不会自动显示在页面上，要展示时间得额外用 JS 或 CSS 伪元素配合，而且得考虑多语言和时区。
