1. S标签的语义与用途
HTML中 S 标签的定义与语义
在 HTML5 中，<s> 标签表示文本被标记为不再准确或相关的内容。它强调“外观已改动，但并不属于正式的删除记录”的语义，适用于显示历史信息的场景。
与其他标记相比，语义化表示不同于仅仅是视觉效果。使用 <s> 可以帮助搜索引擎与辅助技术理解文本的状态变化，从而提升可访问性。
与其他删除标记的对比
常见的删除相关标记还包括 <del> 和 <ins>，分别表示删除与插入的语义。通常用于标记已从文档中移除的文本，并可携带时间信息的语义支持。
而 与 常用于描述变更记录的对比； 则更强调“外观已改动”而非正式的版本撤销。
2. 删除线的CSS实现全解析
text-decoration 属性的基本用法
在现代前端中，删除线效果的核心是 text-decoration，最简单的实现是使用 text-decoration: line-through;，它会直接给文本加上一条水平线。
通过简写属性 text-decoration，可以同时设置线条类型、颜色和样式，提升样式的一致性和可维护性。
替代方案：CSS 变量与自定义样式
为了在多处使用相同风格时能更方便地维护，可以将样式抽离到一个 CSS 类或自定义属性中，例如：
.strike { text-decoration: line-through; text-decoration-color: #999; text-decoration-style: solid; }将删线的视觉信息与文本语义分离，有助于实现无障碍需求的统一风格。
3. S 标签在前端开发中的实战场景
价格标记中的历史信息展示
在电商页面中，常用删除线来展示历史价格与当前价格的对比。例如：旧价使用 符号或 标签，搭配新价呈现，提升购买信心。
为了语义明确又便于样式统一，推荐将旧价放在 <s> 或 <del> 中，并将新价单独放在一个强调标签内。
旧价：<s>$199</s>，现价：<strong>$99</strong>这种写法既直观地体现了“历史信息”，也对屏幕阅读器友好，帮助用户理解价格变动的时间线。
文本修饰的无障碍实现
在无障碍场景下，使用语义标签比单纯的 CSS 更优雅。<s> 作为语义标签，屏幕阅读器会将其读作“已删改的文本”，传达信息的变化。
如果只是视觉上的删除线，且不改变文本的语义，应结合 aria-hidden 或额外的描述来防止混淆。
4. 常见坑与注意点
兼容性与可访问性
大多数现代浏览器都原生支持 <s> 与 CSS 的 text-decoration。为确保无障碍效果，可以在 CSS 中为文本提供足够的对比度和说明性文本。
在实现删除线时，注意不要与其他装饰冲突，例如同时应用下划线或背景颜色，可能影响可读性。
语义与样式的权衡
推荐的实践是：优先使用语义标签（如 <s>、<del>、<ins>），再通过 CSS 完善视觉风格。这样可以兼顾搜索引擎优化和无障碍性。
若只是美化，亦可用 CSS 类来实现，但应避免放弃语义表达。
