在HTML页面开发中，给文本添加删除线是常见的样式需求，比如标注已删除的内容、原价信息等，HTML原生提供了专门的标签来实现删除线效果，最常用的是del标签和s标签，两者在使用方式和适用场景上有所区别。
del标签的基本用法
del标签用于定义文档中已被删除的文本，浏览器默认会为其中的文本添加删除线，同时该标签的语义是表示内容被移除，适合用于版本更新、内容修正等场景，告知用户这段文本已经被删除。
del标签支持两个常用属性：cite指定删除原因的解释文档地址，datetime指定删除操作的日期时间。
基础使用示例：
<p>原价：<del cite="https://ipipp.com/price_change.html" datetime="2024-05-01">199元</del>，现价：129元</p>
s标签的基本用法
s标签同样可以为文本添加删除线，但它的语义是不再准确、不再相关的内容，比如过期的优惠信息、不再生效的规则等，和del标签的语义有所区别，使用场景更偏向内容有效性标注。
s标签没有特殊的语义属性，使用方式和del类似，仅需要包裹需要添加删除线的文本即可：
<p><s>本次活动最终解释权归本平台所有</s>，活动规则以官方公示为准</p>
del和s标签的区别对比
两个标签的默认样式都是删除线，但语义和使用场景不同，具体差异如下：
| 对比项 | del标签 | s标签 |
|---|---|---|
| 语义 | 表示文本已被删除 | 表示文本不再准确、不再相关 |
| 适用场景 | 内容修正、版本变更、删除的内容展示 | 过期信息、无效规则、不再生效的内容 |
| 特殊属性 | 支持cite、datetime属性 | 无特殊语义属性 |
通过CSS自定义删除线样式
如果默认的删除线样式不符合需求，也可以通过CSS自定义删除线的颜色、粗细、样式，这种方式不依赖特定标签，灵活性更高。
使用text-decoration属性可以设置删除线相关样式，示例代码如下：
/* 自定义删除线样式 */
.custom-del {
text-decoration: line-through; /* 添加删除线 */
text-decoration-color: #ff4444; /* 删除线颜色 */
text-decoration-thickness: 2px; /* 删除线粗细 */
text-decoration-style: wavy; /* 删除线样式：波浪线 */
}对应的HTML使用方式：
<p>自定义删除线文本：<span class="custom-del">这段文字有红色波浪删除线</span></p>
使用注意事项
- 如果仅需要视觉上的删除线效果，不需要语义，优先选择s标签或者不依赖语义的CSS方案，避免语义混淆。
- del标签的cite和datetime属性不会被浏览器直接展示，但可以被屏幕阅读器等辅助工具识别，提升无障碍访问体验。
- 部分旧版本浏览器可能不支持text-decoration的细分属性，如text-decoration-thickness，使用时需要做兼容性测试。