标签用于表示不再准确或不再相关但仍需保留的内容，具有“过时”语义；2. 标签表示内容被明确删除，常用于文档修订，语义更强；3. css 的 text-decoration: line-through 仅提供视觉删除线效果，无语义含义，适用于纯粹设计需求；4. 选择方式应基于语义意图：内容过时用 ，内容被移除用 ，仅需视觉效果用 css；5. 删除线对 seo 影响较小，但滥用可能被视为黑帽行为，合理使用可提升用户体验；6. 从 ux 角度，删除线有助于清晰展示信息变更并保留上下文，但过度使用易造成混淆，且需注意屏幕阅读器的可访问性支持，必要时应辅以文字说明。
s 标签，或者说 <s></s> 元素，它的主要用途是表示那些不再准确或不再相关的文本内容。它会给文本添加一个删除线效果，但其核心意义在于告知读者：这段信息虽然还在那里，但它已经过时、错误或者不适用。至于删除线文本的设置，除了 <s></s> 标签，我们还有 <del></del> 标签，以及更灵活的 CSS 样式 text-decoration: line-through;。选择哪种方式，取决于你想表达的语义和视觉效果。
解决方案
要实现删除线文本，我们通常有以下几种方式，每种都有其独特的语义和应用场景。
首先，是标题中提到的 <s></s> 标签。它的语义很明确：表示内容不再准确或不再相关，但出于某种原因（比如历史记录、版本对比），你仍然希望它能被看到。比如，你发布了一个旧的商品价格，后来更新了，但想让用户知道价格变动了，就可以用 <s></s> 包裹旧价格。
<p>原价：<s>¥199</s> 现价：¥149</p>
接着，是 <del></del> 标签。这个标签的语义比 <s></s> 更强，它表示文档中已被删除的内容。通常用于修订历史或法律文档中，明确指出某个部分已被移除。它经常与 <ins></ins> 标签（表示插入的内容）一起使用。
<p>合同条款：本协议于2023年1月1日生效，<del>有效期一年</del>，<ins>有效期延长至三年</ins>。</p>
最后，也是最灵活的方式，是使用 CSS 的 text-decoration 属性。如果你只是想要一个纯粹的视觉上的删除线效果，而不涉及任何特定的语义（比如，只是为了设计上的美观，或者临时性的标记），那么 CSS 是最佳选择。
<p style="max-width:90%">这段文字只是视觉上加了删除线，没有特别的语义。</p>
<!-- 或者在样式表中定义 -->
<style>
.strikethrough-visual {
text-decoration: line-through;
}
</style>
<p class="strikethrough-visual">这段文字通过CSS添加删除线。</p>选择哪种方式，关键在于你希望传达的“为什么”：是内容过时（<s></s>），是内容被移除（<del></del>），还是仅仅为了视觉效果（CSS）。
什么时候应该使用 <s></s> 标签而不是 <del></del> 标签？
这确实是个让人纠结的问题，因为它们在视觉上看起来一模一样，都是一条横穿文本的线。但从语义上讲，它们代表的意图是完全不同的。我个人在实际项目中，会非常注意区分这两者，因为这不仅关乎代码的规范性，更影响到内容的准确传达，甚至对辅助技术（比如屏幕阅读器）的用户体验也有影响。
<s></s> 标签，或者说 <s></s> 元素，它代表的是“不再准确”或“不再相关”的内容。想象一下，你发布了一篇文章，里面提到某个软件的最新版本是1.0。过了一段时间，软件更新到了2.0，那么你可能会把1.0这个信息用 <s></s> 标签包起来，然后旁边写上2.0。这里，1.0的信息并没有被“删除”或“移除”，它只是“过时了”，但你仍然希望读者能看到它，知道曾经有过这个信息。它更多的是一种“历史遗留”或“纠正”的标记。比如，一个商品原价是100元，现在降价到80元，你会写：原价：<s>100元</s> 现价：80元。这个100元并没有从世界上消失，它只是不再是当前的价格了。
而 <del></del> 标签，它的语义是“被删除的内容”。这通常意味着这部分内容在文档的某个版本中被移除了。它通常与 <ins></ins> 标签（表示插入的内容）成对出现，用于展示文档的修订历史。例如，在法律文档、合同或者版本控制系统生成的差异报告中，你会看到大量使用 <del></del> 和 <ins></ins>。它强调的是“变更”和“删除”这个动作本身。屏幕阅读器在遇到 <del></del> 标签时，可能会读出“删除的文本”或者直接跳过，这取决于用户的设置和阅读器本身。所以，如果你真的想表达“这段文字已经不在了”，那么 <del></del> 是更准确的选择。
总而言之，如果你只是想标记一些信息“不再有效”或“过时”，但仍希望它可见，用 <s></s>。如果你想明确表示文档的某个部分“被移除”了，特别是在版本修订的语境下，那么 <del></del> 是不二之选。
除了 <s></s> 和 <del></del>，还有哪些方式可以实现删除线效果？
当然有，而且在很多情况下，我发现纯粹的视觉需求下，CSS 是最常用且最灵活的。如果你仅仅是想让文本看起来有条删除线，而没有任何特殊的语义含义，那么 text-decoration: line-through; 就是你的朋友。
这种方式的优点在于它的“纯粹性”。它不带有任何语义信息，仅仅是改变了文本的视觉样式。这意味着你可以把它应用到任何元素上，而不仅仅是文本。比如，你想给一个图片或者一个按钮添加删除线效果（虽然这在实际设计中可能不常见，但技术上可行），CSS 就能做到。
<p style="text-decoration: line-through;">这段文字只是为了视觉效果。</p> <span style="text-decoration: line-through;">这里是行内元素的删除线。</span> <div style="text-decoration: line-through;"> <p>整个div内的文本都带有删除线。</p> <span>包括这个span。</span> </div>
更进一步，CSS 提供了 text-decoration-line、text-decoration-color 和 text-decoration-style 等属性，让你对删除线的样式有更多的控制权。比如，你可以改变删除线的颜色，或者让它变成虚线、点线等。这在品牌设计或特定视觉效果需求时非常有用。
.custom-strikethrough {
text-decoration-line: line-through; /* 确保是删除线 */
text-decoration-color: red; /* 删除线颜色为红色 */
text-decoration-style: wavy; /* 删除线样式为波浪线 */
}这种灵活性是 <s></s> 和 <del></del> 标签所不具备的。它们的功能被HTML规范严格定义，主要关注语义，视觉效果是其附带的默认样式，通常不建议通过CSS去大幅改变其默认的删除线外观，因为那可能会混淆其语义。所以，当你的需求仅仅是“画一条线”，而不是“表达内容过时/删除”时，CSS 是更直接、更推荐的方案。
删除线文本对SEO和用户体验有何影响？
谈到SEO和用户体验，删除线文本的处理方式确实值得我们深思。这不仅仅是技术实现的问题，更是内容策略和用户心理的体现。
从 SEO（搜索引擎优化） 的角度来看，删除线文本的直接影响通常被认为是比较小的，甚至可以忽略不计。搜索引擎（比如Google或百度）在抓取和索引网页内容时，会解析HTML的语义。它们知道 <s></s> 和 <del></del> 标签表示内容可能不再相关或已被移除。理论上，这可能会导致搜索引擎在评估该部分内容的权重时有所降低，因为它被标记为“不那么重要”或“已过时”。
然而，这并不是一个主要的排名因素。搜索引擎更关注的是内容的整体质量、相关性、权威性以及用户行为。如果你为了SEO而滥用删除线，例如把大量关键词用删除线标记，试图“隐藏”它们，这反而可能被视为黑帽SEO行为，从而损害你的排名。正确的做法是，当内容确实需要更新或纠正时，才使用删除线。这间接有助于SEO，因为你提供了更准确、更实时的信息，提升了用户体验，而良好的用户体验是搜索引擎非常重视的信号。
从 用户体验（UX） 的角度来看，删除线文本的影响则更为显著和直接。
-
清晰的信息更新： 删除线最直接的好处是能够清晰地告知用户：这部分信息曾经是这样的，但现在已经不是了。这在价格变动、产品规格更新、政策条款修订等场景中尤其有用。用户一眼就能看出哪些信息被修改了，避免了混淆。比如，电商网站上显示“原价：
¥100现价：¥80”，用户会立刻明白价格有优惠。 - 保留上下文： 有时，保留旧信息并用删除线标记，比直接删除旧信息更有价值。它能提供历史背景，帮助用户理解当前状态的由来。例如，一个教程中的某个步骤现在不再适用，用删除线标记并添加新的步骤，比直接移除旧步骤更能帮助读者理解变化。
- 潜在的困惑： 如果删除线被滥用，或者在不恰当的语境下使用，可能会导致用户困惑。例如，如果大量文本都被删除线标记，用户可能会觉得内容混乱，或者不确定哪些信息是有效的。过度使用也可能让页面显得杂乱。
-
可访问性考虑： 对于使用屏幕阅读器的用户来说，删除线文本的处理方式可能有所不同。一些屏幕阅读器可能会明确读出“删除的文本”或“划掉的文本”，而另一些可能只是简单地读出内容，而忽略删除线的视觉提示。因此，如果删除线文本包含重要信息（例如，需要用户知道它被“纠正”了），最好在旁边提供明确的文字说明，而不仅仅依赖视觉效果。例如，
<s>旧信息</s> (已更新为：新信息)。
我的看法是，删除线文本是一个强大的工具，但它的力量在于其语义和上下文。合理、有目的地使用它，可以极大地提升信息传达的效率和用户体验的清晰度。而如果仅仅为了视觉效果，或者为了“欺骗”搜索引擎，那最终只会适得其反。始终记住，好的内容和用户体验才是王道。
