HTML删除线怎么设置？HTML的s和del标签使用教程
一、什么是HTML删除线？
HTML删除线是一种文本装饰效果，通常用于表示文本已被删除、不再准确或不再相关。在网页设计中，合理使用删除线可以增强内容的可读性和语义化。
二、HTML删除线的实现方法
在HTML中，主要有两种标签可以实现删除线效果：<s>标签和<del>标签。虽然它们都能产生删除线视觉效果，但在语义上有明显区别。
1. <s>标签
<s>标签用于表示不再准确或不再相关的文本，但它不强调文本的删除是由于编辑行为导致的。它更多是一种视觉上的删除线效果。
基本语法：
<s>这是带删除线的文本</s>
示例代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>s标签示例</title> </head> <body> <p>原价：<s>￥999</s> 现价：￥699</p> <p>这个方法已经<s>过时</s>，请使用新方法。</p> </body> </html>
2. <del>标签
<del>标签用于表示文档中已被删除的文本，它强调文本的删除是由于编辑行为导致的，具有更强的语义性。搜索引擎和屏幕阅读器等辅助技术会识别<del>标签的含义。
基本语法：
<del>这是被删除的文本</del>
示例代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>del标签示例</title> </head> <body> <p>会议时间从<del>下午3点</del><ins>下午4点</ins>开始。</p> <p>项目预算：<del>$10000</del><ins>$12000</ins></p> </body> </html>
三、<s>和<del>标签的区别
| 特性 | <s>标签 | <del>标签 |
|---|---|---|
| 语义 | 表示不再准确或相关的文本 | 表示被删除的文本，强调编辑行为 |
| 辅助技术识别 | 通常不被辅助技术特殊处理 | 会被屏幕阅读器等辅助技术识别为删除内容 |
| 默认样式 | 删除线 | 删除线 |
| 推荐用法 | 用于非编辑性的删除线效果 | 用于文档修订、编辑记录等场景 |
四、自定义删除线样式
虽然<s>和<del>标签有默认的删除线样式，但我们可以通过CSS来自定义删除线的外观。
CSS属性说明：
text-decoration-line：设置文本装饰线条的类型，如line-through表示删除线text-decoration-color：设置文本装饰线条的颜色text-decoration-style：设置文本装饰线条的样式，如实线、虚线、波浪线等text-decoration-thickness：设置文本装饰线条的厚度
示例代码：
/* 自定义删除线样式 */
.custom-del {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
}
/* 或者使用简写属性 */
.custom-s {
text-decoration: line-through blue dashed 3px;
}HTML应用示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义删除线样式</title>
<style>
.custom-del {
text-decoration: line-through red wavy 2px;
}
.custom-s {
text-decoration: line-through blue dashed 3px;
}
</style>
</head>
<body>
<p>普通删除线：<s>这段文字有默认删除线</s></p>
<p>自定义删除线：<s class="custom-s">这段文字有蓝色虚线删除线</s></p>
<p>自定义del标签：<del class="custom-del">这段文字有红色波浪线删除线</del></p>
</body>
</html>五、实际应用场景
1. 电商网站价格展示
在电商网站中，常用删除线表示商品的原价，以突出显示优惠后的价格。
<p>商品名称</p> <p>原价：<s>￥599</s> 促销价：￥399</p>
2. 文档修订记录
在文档编辑过程中，使用<del>和<ins>标签可以清晰地显示修改前后的内容。
<p>项目计划：<del>原计划10天完成</del><ins>现调整为15天完成</ins></p>
3. 过时的信息标记
对于不再适用的信息，可以使用<s>标签进行标记。
<p>旧版本下载：<s>version_1.0.zip</s></p> <p>新版本下载：version_2.0.zip</p>
六、注意事项
语义化选择：根据内容的实际含义选择合适的标签，<del>用于编辑删除，<s>用于其他类型的删除线。
辅助技术支持：考虑到屏幕阅读器等辅助技术的用户，尽量使用具有明确语义的<del>标签。
样式一致性：在项目中保持删除线样式的一致性，避免同时使用多种不同的删除线样式。
可访问性：不要仅依靠颜色来区分删除线文本和普通文本，确保有足够的对比度。
七、总结
HTML提供了<s>和<del>两种标签来实现删除线效果。<s>标签适用于表示不再准确或相关的文本，而<del>标签更适合用于文档修订等编辑场景。通过CSS可以自定义删除线的外观，以满足不同的设计需求。在实际开发中，应根据具体场景选择合适的标签，并注重语义化和可访问性。