网页删除线怎么加？Del标签使用方法

本文深入解析了HTML中del标签的正确用法，不仅阐明其默认渲染为删除线的视觉表现，更强调其核心语义价值——准确传达“内容曾存在但已被移除”的修订意图；文章纠正常见误区，指出del不可替代为纯样式工具，须慎用datetime属性增强可追溯性，区分其与仅表过时的s标签的本质差异，并提供打印样式修复、PDF导出兼容等实战方案，帮助开发者兼顾语义准确性、可访问性与跨场景一致性。

del 标签的语义用途和渲染表现

del 是 HTML 中表示「已删除内容」的语义化标签，浏览器默认用删除线（strikethrough）渲染它。但它不是纯样式工具——它的核心价值在于传达内容变更意图，比如文档修订、价格调整、条款废止等场景。

常见错误是把它当 span + CSS 用：只图视觉效果，却忽略辅助技术（如读屏器）会把 del 内容读作“已删除”，影响可访问性。如果只是想加条横线而无语义删除含义，该用 text-decoration: line-through。

del 标签必须配合 datetime 属性才合规吗？

不强制，但强烈建议补上 datetime。W3C 规范中 del 允许省略 datetime，但缺失后会丢失关键上下文：没人知道这行字是哪天删的、是否还有效、是否被新内容替代。

实际使用中，以下情况容易出问题：

• 服务端生成 HTML 时未注入时间戳，导致所有 del 都无时间信息
• 前端动态插入 del 时硬编码了固定时间（如 2020-01-01），后续无法追溯真实删除时刻
• 用户复制带 del 的文本时，datetime 不可见，但 RSS 或爬虫可能依赖它做版本比对

推荐写法：¥199 ¥159

del 和 s 标签在视觉与语义上有啥区别？

s 标签仅表示「不再准确或不再相关」，比如过期公告、失效链接、废弃 API 名称；而 del 明确表示「曾存在、已被移除」，常与 ins 配对使用，构成修订闭环。

两者默认都渲染为删除线，但语义不可互换：

• 用 s 包裹「Windows XP 支持已终止」——强调状态变化，不强调谁删的、何时删的
• 用 del + ins 标记价格修改：¥299¥249
• CSS 重置时注意：s 和 del 可能被不同 UA 样式覆盖，若统一去线，需同时写 s, del { text-decoration: none; }

如何让 del 在打印样式中保留删除线？

多数浏览器打印预览里，del 的删除线会消失——因为默认 print 媒体查询里禁用了部分装饰性样式。这不是 bug，是历史遗留的兼容策略。

解决方法很简单，在打印 CSS 中显式恢复：

@@media print {
  del {
    text-decoration: line-through;
  }
}

注意两点：

• 别只写 text-decoration: line-through solid #000 —— solid 在部分旧版 Safari 打印中不生效，留空更稳
• 如果页面用了 CSS 重置库（如 Normalize.css），检查它是否对 print 媒体做了 text-decoration: none 全局覆盖

真正难处理的是 PDF 导出：Puppeteer 或 wkhtmltopdf 对 del 的支持不一致，有些版本直接忽略 datetime，有些连删除线都不渲染，得靠截图或后端补逻辑。

到这里，我们也就讲完了《网页删除线怎么加？Del标签使用方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！