应使用 包裹促销价，因其语义准确、默认删除线样式且无障碍友好； 仅用于现价样式强化，二者协作而非替代。
用 <del></del> 还是 <span></span> 包裹促销价？
直接用 <del></del> 标签，别套 <span></span>。HTML5 明确把 <del></del> 定义为“被删除或修正的内容”，语义准确、浏览器默认渲染为删除线，且对屏幕阅读器友好。强行用 <span></span> 加 CSS（比如 text-decoration: line-through）会丢失语义，还可能在无障碍测试中报错。
<del></del> 的常见误用场景
很多人把 <del></del> 当成纯样式标签，塞进价格对比结构里却忽略上下文逻辑：
- 只写
<del>¥199</del> ¥99，但没说明原价为什么“被删”——它应该是旧价、划掉的错误标价，或已失效的促销价 - 在价格旁加“原价”“划线价”等文字，却没用
<span></span>或<small></small>区分，导致语义混乱 - 把
<del></del>套在动态计算后的价格上（如 JS 拼接字符串），结果生成了<del><span>¥199</span></del>—— 多余嵌套，既无必要也影响可访问性
正确组合：用 <del></del> + <span></span> 做语义分层
实际电商页面中，通常需要同时表达“原价被划掉”和“现价突出”，这时 <del></del> 和 <span></span> 是协作关系，不是替代关系：
<p class="price"> <del>¥199</del> <span class="current-price">¥99</span> </p>
关键点：
-
<del></del>只包数字本身，不包单位（如“¥”）或说明文字；单位可放在外面统一控制 -
<span></span>仅用于视觉强化或添加类名（如class="current-price"），不承担语义职责 - 如果需兼容老版本 IE（已极少见），
<del></del>默认样式可用，无需额外 CSS；现代项目中可微调color或font-size，但避免重置text-decoration
当 JS 动态插入时要注意什么
用 JavaScript 更新价格时，别拼 HTML 字符串去替换整个 <p></p> —— 容易破坏 DOM 结构或丢失事件绑定。更稳妥的做法是分别操作节点：
const delEl = document.querySelector('.price del');
const spanEl = document.querySelector('.price .current-price');
delEl.textContent = '¥299';
spanEl.textContent = '¥149';
容易踩的坑：
- 用
innerHTML直接写<del>...</del>，结果把已有<span></span>冲掉了 - 没检查元素是否存在就调用
textContent，导致脚本报错中断后续逻辑 - 价格含千分位或小数（如
¥1,299.00），但后端返回的是纯数字，前端格式化时忘了同步更新<del></del>和<span></span>两个地方
语义标签不是装饰，它在 SSR、SEO、无障碍和维护性上都有实际影响。删掉的价，就该用 <del></del>；要强调的现价，用 <span></span> 加类控制样式即可——别为了“看起来一样”而模糊语义边界。
