HTML删除线怎么设置？s和del标签使用方法

HTML删除线怎么设置？本文详细讲解了如何使用``和``标签以及CSS的`text-decoration: line-through`属性来实现HTML删除线效果。``标签适用于表示内容不再准确或相关，如过时的价格信息；``标签则用于标记文档中被删除的内容，常用于修订记录。而CSS方法适用于纯粹的视觉效果，不带语义变化，例如待办事项的完成状态。选择的关键在于理解内容的语义：信息过时用``，内容被删除用``，仅需视觉效果则用CSS。掌握这些技巧，能帮助你更有效地呈现网页内容，提升用户体验和[SEO](https://www.baidu.com/s?wd=SEO)效果。

标签表示内容不再准确或相关，适用于过时信息如旧价格；2. 标签表示内容被删除，适用于文档修订等场景，可配合datetime和cite属性；3. 纯视觉删除线应使用CSS的text-decoration: line-through，用于待办事项完成等无语义变化的情况；4. 选择依据是语义：信息过时用s，内容被删用del，仅视觉效果用CSS。

HTML删除线可以通过和这两个语义化标签来实现，它们虽然视觉效果相似，但在语义层面有着显著的区别，各自适用于不同的场景。此外，纯粹的视觉需求也可以通过CSS来满足。

解决方案

在HTML中设置删除线，最直接且语义明确的方式就是使用和标签。

标签，全称是“strikethrough”，它表示内容已经不再准确或不再相关。想象一下你在一个网站上看到一件商品的原价，现在打折了，原价就会被划掉。这个被划掉的原价，就是“不再准确”的信息。它告诉读者，这部分内容曾经是正确的，但现在已经过时了。

<p>原价：<s>¥199.00</s> 现价：¥99.00</p>
<p>旧的地址：<s>北京市朝阳区某某路123号</s> 新的地址：北京市海淀区某某路456号</p>

而标签，全称是“deleted text”，它表示文档中已被删除或移除的内容。这个标签通常用于标记文档修订、版本控制或者追踪修改。它强调的是“内容被删除”这一行为，而不是仅仅“不再准确”。标签还可以配合cite属性（指向解释删除原因的URL）和datetime属性（表示删除发生的时间）来提供更详细的上下文信息。

<p>这篇文章的草稿中，我们曾写道：<del datetime="2023-10-26T14:30:00Z">“AI将完全取代人类工作。”</del> 经过讨论，此观点已修正。</p>
<p>用户评论：<del>（此评论因违反社区规定已被删除）</del> 谢谢您的反馈。</p>

从视觉上看，浏览器默认都会给这两个标签内的文本添加一条横穿的删除线。但它们背后的语义意图，才是我们选择时真正需要考量的。

和 标签在语义上有什么区别？

说到底，这两个标签最大的区别就在于它们所传达的“意图”或者说“语义”。在我看来，理解这一点是正确使用它们的关键。

标签的语义核心是“不再准确”或“不再相关”。它暗示着内容本身曾经是有效的，但随着时间推移、信息更新，它已经失去了其准确性或关联性。举个例子，一家商店的促销活动，原价被划掉，表示这个价格现在已经不适用了，新的价格才是当前的。它不是说这个价格“被删除了”，而是说它“过时了”。它的作用更像是给读者一个提醒：这部分信息已经失效了，请关注旁边的最新信息。

而标签的语义则更为严肃和具体，它强调的是“内容被移除”或“被删除”这一事实。这通常发生在文档修订、版本更新、内容审查等场景。比如，你在编辑一份合同，其中某段条款被删除，这时就应该使用来标记。它不仅仅是视觉上的划掉，更是告诉搜索引擎和辅助技术（如屏幕阅读器），这部分内容在文档的当前版本中已经不存在了。它甚至可以配合datetime属性，精确到秒地记录内容被删除的时间，这在需要追溯历史修改的场景下尤其有用，比如法律文书或学术论文的修订记录。

简单来说，是“这个信息现在不对了”，而是“这个信息被拿掉了”。这种区别，对于构建语义清晰、易于理解和维护的网页内容至关重要。

除了 和 ，还有其他方法可以实现删除线效果吗？

当然有，而且在某些情况下，它可能是更合适的选择。除了这两个语义标签，我们还可以利用CSS的text-decoration属性来纯粹地实现视觉上的删除线效果。

text-decoration属性是一个非常强大的CSS属性，它可以控制文本的装饰线，包括下划线（underline）、上划线（overline）和删除线（line-through）。

.strikethrough-visual {
  text-decoration: line-through;
}

<p class="strikethrough-visual">这是一段纯粹视觉上被划掉的文字。</p>

什么时候应该用CSS而不是或呢？答案很简单：当删除线仅仅是为了“好看”或者“表示状态”，而没有“不再准确”或“内容被删除”的语义时。

举个例子，你有一个待办事项清单（To-Do List），当一个任务完成时，你希望它被划掉。这个“划掉”仅仅是表示任务的状态从“未完成”变成了“已完成”，它并没有说这个任务内容本身“不准确”了，也没有说这个任务“被删除了”。在这种情况下，使用CSS的text-decoration: line-through;是最恰当的。

<ul>
  <li><span class="strikethrough-visual">完成项目报告</span></li>
  <li>安排会议</li>
  <li>回复邮件</li>
</ul>

这样做的好处是，你将内容的语义（