异常教程

HTML <strike> 标签（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，HTML 标签如同乐高积木的模块，通过组合构建出丰富的视觉效果和交互功能。其中，<strike> 标签作为早期用于“删除线”效果的工具，虽然在现代网页开发中已逐渐被更语义化的标签取代，但依然值得开发者深入了解其原理与适用场景。本文将从基础用法、历史背景、替代方案到实际案例，系统性解析这一标签的全貌，并帮助读者在不同场景下做出合理选择。

基础用法：如何使用 <strike> 标签

语法结构

<strike> 标签用于给文本添加删除线效果。其基本语法如下：

<strike>被删除的内容</strike>

例如，以下代码将显示为：

<p>原价：<strike>¥999</strike>，现价：¥599</p>

渲染效果：
原价：¥999，现价：¥599

核心特性

  • 语义模糊性：<strike> 标签本身不携带明确语义，仅表示“被划掉”的视觉效果。
  • 兼容性广泛：所有主流浏览器均支持该标签，但需注意其在语义化网页中的局限性。
  • 与 CSS 的结合：可通过 CSS 进一步调整样式，例如修改颜色或线宽： 
    strike {
  color: red;
  text-decoration-thickness: 3px;
}

历史背景与弃用原因

起源与早期用途

<strike> 标签诞生于 HTML 2.0（1995 年），最初用于表示文本的删除或失效状态。在那个网页设计工具匮乏的时代，开发者依赖此类标签实现基础样式，例如：

  • 标记过时的价格
  • 表示已取消的活动
  • 强调文本的修改痕迹

现代开发中的问题

随着时间推移，HTML 语义化（Semantic HTML）理念逐渐成为行业标准，<strike> 标签的缺陷暴露无遗：

  1. 语义不明确：无法区分“删除内容”与“文本错误”等场景。
  2. 可访问性不足：屏幕阅读器无法通过该标签推断内容的实际含义。
  3. 替代方案更优：HTML5 引入 <del>（删除内容）和 <s>（不准确内容）标签，提供更精准的语义支持。

现代替代方案对比

替代标签的选择逻辑

以下表格对比了 <strike> 与语义化标签的适用场景：

标签语义含义典型用例
<strike>仅表示视觉上的删除线过时价格、临时注释
<del>标记被删除或修正的旧内容文章修订历史、已下架商品
<s>表示不准确或无效的内容错误数据、计算错误

具体案例分析

案例 1：商品价格标注

<!-- 使用 <del> 标签，明确表达价格变更 -->  
<p>原价：<del>¥999</del>，现价：¥599</p>  

<!-- 使用 <strike> 标签，仅实现视觉效果 -->  
<p>原价：<strike>¥999</strike>，现价：¥599</p>

选择 <del> 更符合语义化原则，便于搜索引擎和无障碍工具解析内容含义。

案例 2：错误数据修正

<!-- 使用 <s> 标签，表示数据不准确 -->  
<p>实验结果显示：<s>95% 的成功率</s>，实际为 82%。</p>  

<!-- 使用 <strike> 标签，仅实现删除线样式 -->  
<p>实验结果显示：<strike>95% 的成功率</strike>，实际为 82%。</p>

此处 <s> 的语义更贴合“数据错误”的语境，避免歧义。

浏览器兼容性与样式控制

兼容性说明

<strike> 标签在所有主流浏览器中均能得到支持，包括：

  • Chrome 1+
  • Firefox 1+
  • Safari 1+
  • Edge 12+
  • IE 4+

样式定制技巧

通过 CSS 可进一步增强 <strike> 的表现力：

/* 改变删除线颜色与粗细 */  
strike {  
  text-decoration-color: #ff4444;  
  text-decoration-thickness: 2px;  
}  

/* 添加动态效果 */  
strike:hover {  
  text-decoration-style: double;  
  animation: strikeAnim 1s infinite;  
}  

@keyframes strikeAnim {  
  0% { transform: translateX(-5px); }  
  50% { transform: translateX(5px); }  
  100% { transform: translateX(-5px); }  
}

最佳实践与常见误区

推荐使用场景

  1. 临时标注：在开发过程中快速标记待修改的文本。
  2. 非语义化需求：当页面仅需视觉删除线，且无需依赖语义信息时。

需避免的误区

  • 滥用语义模糊标签：优先选择 <del> 或 <s>，提升代码可维护性。
  • 忽略样式覆盖：默认删除线样式可能与页面设计冲突，需通过 CSS 统一调整。

兼容性处理方案

若需同时支持旧版浏览器和语义化标签，可结合 <span> 和 CSS 实现：

<!-- 使用 CSS 实现删除线，兼容所有场景 -->  
<p>原价：<span class="strike-text">¥999</span>，现价：¥599</p>  

/* CSS */  
.strike-text {  
  text-decoration: line-through;  
  color: #888;  
}

结论

<strike> 标签如同 HTML 历史长河中的“过渡工具”，其存在价值在于提供基础样式功能，但在现代开发中应谨慎使用。开发者需根据项目需求权衡语义化、可访问性和浏览器兼容性，优先选择 <del> 或 <s> 等语义标签，并通过 CSS 实现灵活的样式控制。通过本文的案例与解析，读者可系统性掌握这一标签的全貌，并在实际项目中做出合理的技术决策。

扩展阅读

  • HTML5 语义化标签规范（W3C）
  • CSS 文本装饰属性详解
  • 网页可访问性指南（WCAG 2.1）

通过理解 <strike> 标签的定位与局限，开发者既能继承 HTML 的历史经验，又能拥抱现代开发的最佳实践。

最新发布

查看更多文章