HTML 的 ＜s＞ 元素

1. 什么是 <s> 元素

<s> 元素用于在文本上呈现删除线 效果，表示内容已经不再准确、不再相关。它通常用于标记已过时、已删除或需要更正的信息。

<p><s>原价 199 元</s> 现价 99 元</p>

浏览器默认会给 <s> 元素内的文本添加一条贯穿线。

2. 与 <del> 元素的区别

<s> 和 <del> 外观相似，但语义不同：

元素	语义	典型场景
<s>	内容不再准确/相关	促销划线价、过时信息
<del>	内容被删除/修订	文档修订记录、编辑痕迹

<!-- s：表示内容不再准确 -->
<p><s>本活动截止到 5 月 1 日</s></p>

<!-- del：表示内容被删除 -->
<p>原方案 <del>采用 A 方案</del>，现改为 B 方案。</p>

3. 基本用法

<p>今天天气 <s>晴朗</s> 多云。</p>

效果：今天天气 晴朗 多云。

4. 结合 CSS 自定义样式

默认删除线样式可以通过 CSS 覆盖：

s {
  text-decoration: none;
  background: #ffe0e0;
  padding: 0 4px;
  border-radius: 3px;
}

<p>优惠价：<s>¥299</s> ¥199</p>

5. 注意事项

• <s> 是短语内容元素，不能包含块级元素。
• 不要用 <s> 单纯为了视觉装饰；若只是想要删除线效果，建议用 CSS 的 text-decoration: line-through。
• 需要表达「删除/修订」语义时，优先使用 <del>。

6. 总结

<s> 元素用于标记不再准确或相关的文本，默认呈现删除线效果。它与 <del> 语义不同，使用时需根据内容含义选择合适的标签。