使用标签或css的text-decoration: line-through;属性可设置html删除线文本；2. 标签具有语义意义，表示文本被删除，适合用于文档修订，而css方法更灵活，适用于仅需视觉效果的场景；3. 与标签的区别在于语义：表示被删除的内容，通常与配合展示修改历史，而表示不再准确或相关的内容，如商品原价；4. 可通过text-decoration-color、text-decoration-thickness和text-decoration-style等css属性自定义删除线的颜色、粗细和样式，如波浪线或虚线；5. 使用css伪元素和@keyframes动画可实现删除线的动态效果，例如从左到右逐渐划过的动画；6. 删除线适用于文档修改、价格对比、任务完成状态和失效选项等场景，以增强信息的可读性和用户理解。
HTML设置删除线文本，可以使用
<del>标签或者CSS的
text-decoration: line-through;属性。
<del>标签语义上表示被删除的文本，而CSS属性则更灵活，可以应用于任何元素。
解决方案
使用
<del>标签是最直接的方法。例如：
<p>这是<del>错误的</del>文本，这是正确的文本。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
这段代码会在“错误的”文本上显示删除线。
另一种方法是使用CSS：
<p>这是 <span style="text-decoration: line-through;">错误的</span> 文本，这是正确的文本。</p>
或者，更好的做法是将CSS样式定义在样式表里：
<style>
.strikethrough {
text-decoration: line-through;
}
</style>
<p>这是 <span class="strikethrough">错误的</span> 文本，这是正确的文本。</p>选择哪种方法取决于你的具体需求。如果文本的删除具有语义含义，应该使用
<del>标签。如果只是为了视觉效果，CSS更合适。
<del>
标签和<s>
标签有什么区别？
<del>标签表示文档中被删除的文本，通常用于标记文档的修订。浏览器通常会在被
<del>标签包围的文本上显示删除线。
<ins>标签则用于标记文档中新添加的文本，与
<del>标签配合使用，可以清晰地展示文档的修改历史。
<s>标签，虽然也常用来显示删除线，但其语义已经过时。它表示文本不再准确或不再相关，但不一定是被删除的。在HTML5中，推荐使用
<del>标签来表示删除的文本，而
<s>标签则用于表示不再准确或相关的文本，例如商品的价格打折前后的价格。
举个例子：
<p>原价：<s>100元</s>，现价：80元。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a>
<p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p>
</div>
<a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>我们决定<del>取消</del>推迟会议。</p>在这个例子中，
<s>标签用于标记商品的原价，表示这个价格已经不再有效。而
<del>标签用于标记会议的取消，表示这个决定被撤销了。
如何自定义删除线的样式？
虽然
<del>标签默认会显示删除线，但我们可以使用CSS来修改删除线的样式，使其更符合设计需求。
text-decoration属性提供了多种选项，可以改变线条的颜色、粗细和样式。
例如，修改删除线的颜色：
<style>
del {
text-decoration: line-through red; /* 设置删除线为红色 */
}
</style>
<p>这是 <del>错误的</del> 文本，这是正确的文本。</p>还可以改变删除线的粗细和样式，例如使用虚线：
<style>
del {
text-decoration: line-through;
text-decoration-color: blue; /* 设置删除线颜色为蓝色 */
text-decoration-thickness: 2px; /* 设置删除线粗细为2像素 */
text-decoration-style: wavy; /* 设置删除线样式为波浪线 */
}
</style>
<p>这是 <del>错误的</del> 文本，这是正确的文本。</p>通过
text-decoration-color、
text-decoration-thickness和
text-decoration-style属性，可以精细地控制删除线的样式，使其与页面的整体风格保持一致。
如何实现删除线的动画效果？
除了静态的删除线，我们还可以使用CSS动画来实现删除线的动态效果，增加页面的互动性和趣味性。
一个简单的例子是让删除线从左到右逐渐显示：
<style>
.animated-strikethrough {
position: relative;
display: inline-block;
}
.animated-strikethrough::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 2px;
background-color: red;
transform: translateY(-50%);
animation: strikethrough-animation 2s linear forwards;
}
@keyframes strikethrough-animation {
to {
width: 100%;
}
}
</style>
<p>这是 <span class="animated-strikethrough">错误的</span> 文本，这是正确的文本。</p>这段代码使用CSS伪元素和动画，创建了一个从左到右逐渐显示的删除线效果。可以根据需要调整动画的持续时间、颜色和样式，实现更丰富的动态效果。
什么时候应该使用删除线文本？
删除线文本主要用于以下几种情况：
-
表示文本的删除或修改： 在文档修订、版本控制等场景中，使用
<del>
标签可以清晰地标记被删除的文本，方便读者了解文档的修改历史。 -
表示价格的变动： 在电商网站中，可以使用
<s>
标签或<del>
标签来标记商品的原价，与现价进行对比，突出优惠信息。 - 表示任务的完成： 在任务列表中，可以使用删除线来标记已完成的任务，让用户一目了然地了解任务的完成情况。
- 表示选项的无效： 在表单中，可以使用删除线来标记已失效的选项，提示用户这些选项不再可用。
总之，删除线文本是一种有效的视觉提示方式，可以用于标记文本的状态变化，提高信息的可读性和可理解性。
