<strike>标签在HTML5中已完全失效且不应使用,应改用语义化的<del>(表示已删除)或<s>(表示内容过时),二者均支持样式定制与无障碍访问。

<strike> 标签在现代 HTML 中已**完全失效且不应使用**,它既不合法(HTML5 无定义),也不具备语义价值,仅保留历史兼容性。
为什么不能用 <strike> 标签
浏览器虽仍能渲染 <strike>(显示删除线),但它是 HTML4 的废弃标签,XHTML 1.0 Strict 和所有 HTML5 规范中均被移除。W3C 明确要求用语义化替代方案。继续使用会导致:
- HTML 验证失败(
validator.w3.org报Element strike is obsolete) - 无障碍访问工具无法正确识别文本状态(如屏幕阅读器忽略其“已删除”含义)
- 未来浏览器版本可能彻底停用该标签(目前仅靠兼容模式兜底)
<del> 是首选:语义 + 默认样式
<del> 表示“已被删除的内容”,是 HTML5 官方推荐的语义化标签。它自带删除线,且支持标准属性和事件:
- 可设置
datetime属性记录删除时间:<del datetime="2026-06-20">旧价格</del> - 支持 CSS 伪类
:focus、:hover等交互样式 - 与
<ins>搭配天然形成“删/增”对比逻辑
示例:<p>原价 <del datetime="2026-06-20">¥199</del>,现价 <ins>¥149</ins></p>
立即学习“前端免费学习笔记(深入)”;
<s> 适用场景:内容过时但非删除
当文本只是“不再准确”或“已作废”,而非从文档逻辑中被移除时,用 <s> 更贴切。比如促销倒计时失效、技术参数淘汰:
-
<s>IPv4 地址即将耗尽</s>—— 事实已不成立,但不是“被编辑删除” -
<s>支持 IE8</s>—— 表明该能力已被弃用
注意:<s> 无 datetime 属性,也不暗示内容曾存在于文档中——它只表达当前无效性。
自定义删除线样式必须重置默认行为
直接对 <del> 或 <s> 写 text-decoration: line-through 会叠加(出现双线)。正确做法是先清除默认线:
del, s {
text-decoration: none;
}
del {
text-decoration: line-through;
text-decoration-color: #d32f2f;
text-decoration-thickness: 2px;
}
更彻底的控制方式是用 all: unset 清空所有继承/初始值,再手动设定字体、颜色、删除线位置等——否则不同字体下删除线垂直偏移差异明显,尤其在中文环境里容易上浮或下沉。
真正关键的不是“怎么画线”,而是“为什么画这条线”:语义决定标签选择,样式只是辅助传达。忽略这点,哪怕代码跑通,也等于把结构层和表现层搅在一起,后续维护和协作成本会指数级上升。



















