S标签用于表示已过时或不准确的内容，电商中常标记原价并加删除线，语义上区别于del标签；应添加aria-label增强可访问性，并通过CSS微调样式确保视觉清晰。

S 标签 在 HTML5 中用于表示被删除或不再准确的内容，常用来展示原价（即打折前的价格），配合普通文本显示现价，从而实现清晰的价格对比效果。它语义明确、轻量简洁，是电商网站中标注划掉原价的标准做法。

正确使用 S 标签标记原价

将打折前的价格用 包裹，现价用普通 或直接文本显示，浏览器默认会为 内容添加删除线样式：

<p>
  <s>¥299</s> 
  <span style="color: #e63946; font-weight: bold;">¥199</span>
</p>

这样语义清晰：S 标签表明“¥299 已不适用”，现价 ¥199 是当前有效价格。

避免与 del 标签混淆

和 都渲染为删除线，但语义不同：

• 表示内容**已过时、不推荐或不准确**（如原价、旧配置），适合价格对比场景
• 表示内容**已被移除或编辑删除**，带有时间性（常配合 datetime 属性），更适合文档修订

电商页面中推荐统一用 ，更贴合“价格已调整”的业务含义。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

增强可访问性与SEO的小技巧

仅靠视觉删除线不够，建议补充语义信息：

• 为 添加 aria-label="原价：¥299"，方便读屏软件识别
• 在价格旁用 节省 ¥100 显示差价，再配 sr-only 类隐藏文字供屏幕阅读器读出
• 确保现价字体更大、颜色更醒目（如红色加粗），形成视觉主次

响应式与样式微调建议

默认删除线位置可能偏高，可通过 CSS 微调对齐：

 s {
  text-decoration: line-through;
  text-decoration-thickness: 1.2px;
  text-decoration-color: #999;
  vertical-align: middle;
}

在小屏设备上，可让原价字号略小于现价（如原价 14px，现价 18px），避免拥挤；也可用 display: inline-flex 对齐基线，提升排版一致性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！