技术咨询：<s>与<del>标签视觉效果一致，二者区别是什么？

虽然这两个标签默认都显示删除线，但它们的语义和适用场景完全不同：

1. 语义本质 #

• <del>：代表被主动删除的内容，强调内容是被人为移除、替换的操作结果。
• <s>：代表不再准确、有效或相关的内容，不涉及主动删除操作，只是内容本身已经过时或不再适用。

2. 典型使用场景 #

• 用<del>的情况：
  • 文档修订时的内容替换，比如：<p>本次活动奖品是<del>蓝牙耳机</del>智能手表</p>
  • 电商商品的原价标注（表示该价格已被取消，替换为现价）
• 用<s>的情况：
  • 过时的信息提示，比如：<p><s>Windows 7</s> 已停止官方技术支持</p>
  • 不再提供的服务说明，比如：<p><s>线下自提服务</s> 目前暂停开放</p>

3. 样式自定义 #

默认样式都是删除线，但可以通过CSS单独给两个标签设置不同样式，强化语义区分：

del {
  text-decoration: line-through red;
}
s {
  text-decoration: line-through gray;
}

内容的提问来源于stack exchange，提问作者Syed Tanvir Hossain