S标签不适用于临时下架商品，因其语义表示内容已被删除或废弃；应使用data属性标识库存状态，并用span标注“暂无库存”等明确文案，价格变动时可用del/ins标签。
S 标签在 HTML5 中表示“删除线文本”，语义上用于标记**原本存在但已被删除、废弃或不再准确的内容**，比如价格变动中的原价、过时信息等。它 不适用于标记因库存不足而临时下架的商品 —— 因为商品本身并未被“删除”，只是当前不可售，状态是临时的、可恢复的。
为什么不用 <s> 标签？
使用 <s> 会向屏幕阅读器、搜索引擎和开发者传递错误语义信号：它暗示该商品已作废（如停产品牌、下线服务），而非“暂无库存”。这会影响无障碍体验、SEO 理解和后续功能扩展（例如库存回补后自动恢复展示）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
更合适的语义化方案
应结合语义清晰的 HTML 元素与 CSS 控制视觉呈现：
- 用 <li> 包裹商品项，保持列表结构完整性 —— 即使下架，也属于列表中的一项数据
-
添加 data 属性标识状态，例如
data-stock="out"，便于 JS 操作和样式控制 - 用 <span class="stock-out">标注状态文案，如“缺货”“暂无库存”，比删除线更明确
- 必要时视觉弱化（非删除线）：降低 opacity、改用灰色文字、禁用点击态，但保留可读性
示例代码（语义正确 + 视觉友好）
<ul class="product-list">
<li data-stock="in">
<h3>无线耳机</h3>
<span class="price">¥299</span>
</li>
<li data-stock="out">
<h3>蓝牙音箱</h3>
<span class="price">¥199</span>
<span class="stock-status">暂无库存</span>
</li>
</ul>
.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>（语义为“已删除的价格”），而非整个商品项：
<span class="price"><del>¥199</del> <ins>补货中</ins></span>
这里 <del> 表示原价已失效，<ins> 表示新状态，符合 HTML5 语义规范。
