是html5中完全废弃的标签,w3c不再支持;虽保留但仅用于标记“不再准确/不适用的内容”,语义明确;纯视觉删除线必须用css的text-decoration: line-through。

HTML 中 <strike></strike> 已被废弃,别再用了
浏览器仍能渲染 <strike></strike>,但它在 HTML5 中属于**完全废弃标签**,W3C 不再支持,任何新项目都不该出现。用它会导致 HTML 验证失败,且语义缺失——它只描述“样式”,不表达“内容状态”。<s></s> 虽保留,但语义明确:仅用于标记**不再准确或不适用的内容**(比如降价前的价格、已失效的条款),不是通用删除线。
<s></s> 的正确使用场景和限制
它不是视觉装饰工具,而是语义标签。浏览器默认渲染为删除线,但重点在传达“该信息已过时/被否决”。
- ✅ 合理:
<s>¥299</s> ¥199(原价作废,现价生效) - ✅ 合理:
<s>本次活动截止至6月30日</s> 延期至7月15日 - ❌ 错误:
<s>请勿点击此处</s>(这不是内容失效,只是提示) - ❌ 错误:用
<s></s>实现待办事项勾选后的划掉效果(缺乏语义,应由 CSS + JS 控制)
真正需要删除线效果?用 text-decoration: line-through
99% 的“划掉文本”需求其实和语义无关,只是 UI 表达。此时必须用 CSS:text-decoration: line-through。它可控、可复用、无语义污染。
示例:
<p class="deleted">这段文字需要视觉划掉</p>
<style>
.deleted {
text-decoration: line-through;
color: #888;
}
</style>
- 支持与其他
text-decoration值组合(如line-through overline) - 可通过
text-decoration-color和text-decoration-thickness精细控制颜色与粗细(注意兼容性:后者在 Safari 15.4+、Chrome 99+ 支持) - 避免对行内元素(如
<span></span>)直接设display: block后加删除线——可能触发意外换行或布局偏移
为什么不用 <del></del>?它和 <s></s> 有什么区别?
<del></del> 是语义更重的替代方案:它表示**内容已被删除**,常配合 datetime 属性记录删除时间,适合版本对比、编辑历史等场景。
-
<s></s>:内容“不适用了”,但未必被删(比如商品下架,价格仍可查) -
<del datetime="2024-05-20">旧文案</del>:强调这部分是“被主动移除”的,有审计意义 - 两者默认样式都是删除线,但语义不可互换;搜索引擎、读屏器会区别处理
- 如果只是前端临时划掉(如用户勾选任务后视觉反馈),这两个都过度——纯 CSS 更轻量
真正要小心的是把语义标签当样式工具用。划线本身很简单,但选错标签会在协作、可访问性、长期维护上埋坑——尤其是 <strike></strike> 这种早已消失的幽灵标签,连现代编辑器都可能报黄线警告。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











