s标签不适用于临时下架商品，因其语义表示内容已被删除或废弃；应使用data属性标识库存状态，并用span标注“暂无库存”等明确文案，价格变动时可用del/ins标签。
S 标签在 HTML5 中表示“删除线文本”，语义上用于标记**原本存在但已被删除、废弃或不再准确的内容**，比如价格变动中的原价、过时信息等。它 不适用于标记因库存不足而临时下架的商品 —— 因为商品本身并未被“删除”，只是当前不可售，状态是临时的、可恢复的。
为什么不用 标签？
使用 <s></s> 会向屏幕阅读器、搜索引擎和开发者传递错误语义信号：它暗示该商品已作废（如停产品牌、下线服务），而非“暂无库存”。这会影响无障碍体验、SEO 理解和后续功能扩展（例如库存回补后自动恢复展示）。
更合适的语义化方案
应结合语义清晰的 HTML 元素与 CSS 控制视觉呈现：
-
用
- 包裹商品项，保持列表结构完整性
—— 即使下架，也属于列表中的一项数据 -
添加 data 属性标识状态，例如
data-stock="out"，便于 JS 操作和样式控制 - 用 标注状态文案，如“缺货”“暂无库存”，比删除线更明确
- 必要时视觉弱化（非删除线）：降低 opacity、改用灰色文字、禁用点击态，但保留可读性
示例代码（语义正确 + 视觉友好）
无线耳机
¥299
蓝牙音箱
¥199
暂无库存
.product-list li[data-stock="out"] {
opacity: 0.7;
pointer-events: none;
}
.stock-status {
display: block;
font-size: 0.85em;
color: #999;
margin-top: 4px;
}
如果坚持要视觉上“划掉”价格怎么办？
可以对 价格数字本身 使用 <del></del>（语义为“已删除的价格”），而非整个商品项：¥199 补货中
这里 <del></del> 表示原价已失效，<ins></ins> 表示新状态，符合 HTML5 语义规范。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
