HTML <del> 标签（建议收藏）

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

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

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

在 HTML 的世界中，每个标签都有其独特的使命。今天我们将聚焦于一个看似简单却充满实用价值的标签——<del>。它像是一位低调的编辑者，在网页中默默标记内容的删除或修改痕迹。无论是电商页面标注历史价格、文档修订时的版本对比，还是学习笔记中的错误修正，<del> 标签都能以清晰的视觉信号传递信息。本文将从基础语法到高级用法，结合实际案例，帮助你全面掌握这一工具的使用场景与技巧。

一、HTML <del> 标签的基础语法

1.1 基本用法与功能

<del> 标签是 HTML 5 中用于表示被删除或已过时文本的标准标签。其核心功能是通过添加删除线样式（通常为红色虚线或黑色实线），直观地向用户展示内容的历史状态。例如：

<p>原价 <del>¥500</del>，现价仅 ¥200！</p>  

这段代码会在浏览器中显示为：
原价 ¥500（带删除线），现价仅 ¥200！

1.2 与类似标签的对比

初学者常将 <del> 与其他标记标签混淆，如 <strike> 或 <s>。这里需要明确：

• <del>：强调内容被删除或已失效，常用于版本修订或价格变更。
• <s>：表示内容不再适用，但删除原因可能不明确（如小说中角色的谎言）。
• <strike>：已过时的标签，现被 <s> 替代，仅用于视觉效果。

类比说明：

如果 <del> 是“正式的修改声明”，那么 <s> 就像“随意的划掉笔记”，而 <strike> 则是“老式打字机上的删除符号”。

二、进阶用法：样式定制与语义强化

2.1 结合 CSS 自定义样式

默认的删除线可能无法满足设计需求，通过 CSS 可以灵活调整样式。例如：

<!-- HTML结构 -->  
<p>旧版本描述：<del class="custom-del">支持 IE 浏览器</del></p>  

<!-- CSS样式 -->  
<style>  
  .custom-del {  
    text-decoration: line-through;  /* 保留删除线 */  
    color: #ff4444;                /* 设置文字为红色 */  
    font-style: italic;            /* 添加斜体效果 */  
  }  
</style>  

此代码将生成带有红色斜体删除线的效果，增强视觉冲击力。

2.2 语义化与 ARIA 属性

在无障碍网页设计中，可通过 aria-label 属性补充说明删除原因，帮助屏幕阅读器用户理解上下文：

<p>  
  最新政策：<del aria-label="此条款因法规变更于2023年废止">  
    员工可自由使用公司电脑处理私人事务  
  </del>  
</p>  

三、实际应用场景与案例分析

3.1 电商场景：标注历史价格

在商品详情页中，<del> 可清晰展示折扣前的价格：

<div class="product-price">  
  <del>¥1999</del>  
  <span class="current-price">¥999</span>  
</div>  

配合 CSS 的颜色对比，能瞬间吸引用户关注促销信息。

3.2 文档修订：版本控制与修改记录

在技术文档或学术论文中，<del> 标签可用于标记被删除的段落：

<p>  
  根据旧方案：<del>系统支持最大 1000 个并发用户</del>  
  <br>  
  根据新方案：<ins>系统支持最大 10,000 个并发用户</ins>  
</p>  

结合 <ins> 标签（新增内容），形成完整的修订记录。

3.3 学习笔记：错误修正与知识迭代

在个人博客或学习记录中，可用 <del> 标记已纠正的错误：

<p>  
  初学时认为：<del>JavaScript 是一种编译型语言</del>  
  <br>  
  经过学习发现：<strong>JavaScript 是一种解释型语言</strong>  
</p>  

这种写法既保留了思考过程，又突出了知识更新。

四、注意事项与最佳实践

4.1 SEO 优化要点

• 关键词布局：在描述删除内容时，可自然嵌入关键词。例如：“原价 ¥500 的高端耳机，现仅售 ¥200！”
• 避免滥用：过度使用 <del> 可能被搜索引擎视为内容不稳定，建议仅保留对用户有实际意义的修改记录。

4.2 可访问性（Accessibility）

• 提供上下文说明：对于关键删除内容，建议添加 title 或 aria-describedby 属性。
• 确保对比度：删除线颜色需与背景保持足够对比度（如深色文字用浅色删除线）。

4.3 兼容性与浏览器支持

<del> 标签在所有现代浏览器中均良好支持，但需注意旧版 IE 的兼容性。若需兼容 IE 8 及以下版本，可考虑通过 JavaScript 动态添加类名。

五、常见问题与解决方案

5.1 删除线颜色无法修改？

原因：某些浏览器默认样式可能覆盖自定义 CSS。
解决方案：使用 !important 强制应用样式，或通过更具体的 CSS 选择器：

del {  
  color: #ff4444 !important;  
}  

5.2 删除线与其他元素重叠？

原因：文字换行或元素布局冲突。
解决方案：通过 white-space: nowrap; 防止换行，或调整父容器的 padding。

5.3 如何实现动态删除效果？

方案：结合 JavaScript 实现渐显渐隐的删除动画：

function toggleDeletion(element) {  
  element.style.textDecoration = 'line-through';  
  element.style.color = '#ff4444';  
}  

HTML <del> 标签如同网页中的“修改痕迹笔”，在电商促销、文档修订、知识分享等场景中发挥重要作用。通过掌握其基础语法、样式定制技巧以及语义化最佳实践，开发者不仅能提升用户体验，还能增强网页的可访问性和 SEO 效果。无论是标注价格调整，还是记录知识迭代，<del> 标签都是构建信息清晰、易于理解的网页不可或缺的工具。

记住，在使用时始终关注语义准确性和视觉一致性——这将帮助你创建既专业又友好的数字内容。