促销价应使用标签语义化突出，表示强重要性；原价用标记已被删除，两者需配文字说明（如“原价”“现价”）以保障可访问性与SEO。
用 <strong> 突出显示促销价
促销价需要视觉上更醒目，<strong> 是语义正确的选择——它表示内容具有强重要性，搜索引擎和读屏器都会识别这一点，比单纯用 <b> 更合适。<strong> 默认渲染为加粗，但样式可覆盖，不影响语义。
常见错误是把原价也套 <strong>，结果两者都加粗，失去对比；或者用 <span style="font-weight:bold"> 丢掉语义。
- 只对最终成交价（如“¥89”）使用
<strong> - 避免嵌套：不要写
<strong><strong>¥89</strong></strong></li> <li>如果促销价需额外强调颜色/大小，用 CSS 控制，保留标签本意</li> </ul> <pre class="brush:php;toolbar:false;"><p>原价 <del>¥129</del>，促销价 <strong>¥89</strong></p>
用
<del> 标记被划掉的原价<del>表示已删除或不再准确的内容，语义上完美匹配“原价已被替代”的场景。浏览器默认渲染为中划线，且会被辅助技术识别为过时信息。别用
<strike>（已废弃）或<s>（语义较弱，仅表示“不准确”，不强调“被替换”）；也别用 CSS 的text-decoration: line-through单独加在<span>上——那样丢失语义，对 SEO 和无障碍都不友好。立即学习“前端免费学习笔记（深入）”；
-
<del>必须包裹完整的价格数字，如<del>¥129</del>，不要只包数字不包符号 - 不能空着：
<del></del>无效，也不该用来占位 - 如果原价带单位（如“129元”），整个字符串应一起包裹，保持语义完整性
<p>限时特惠：<del>¥129</del> → <strong>¥89</strong></p>
组合使用时的 DOM 结构与可访问性注意点
两个标签组合本身没问题，但结构松散或缺少上下文会让屏幕阅读器用户困惑。比如单独一句
<del>¥129</del> <strong>¥89</strong>，读出来就是“¥129 被删除，¥89 加粗”，没说明关系。- 务必用文字说明价格关系，例如“原价”“现价”“立减”等，哪怕只是小字号：
<span class="price-label">原价</span> <del>¥129</del> - 避免仅靠颜色/位置传达信息——色盲用户可能分不清哪是原价哪是现价
- 如果页面有多个促销项，考虑用
<figure>或带 ARIA label 的<div role="group">包裹整组价格，提升语义清晰度
<p><span aria-hidden="true">原价</span> <del>¥129</del>，<span aria-hidden="true">现价</span> <strong>¥89</strong></p>
CSS 覆盖默认样式时的兼容性坑
默认的
<del>中划线位置和粗细在不同浏览器略有差异（尤其旧版 Safari 对text-decoration-thickness支持差），而<strong>的 font-weight 在某些字体下可能不明显。- 若需统一划线样式，优先用
text-decoration: line-through而非依赖 UA 默认，但别删掉<del>标签 - 加粗不够明显？检查字体是否支持
font-weight: 700，必要时指定font-family回退 - 移动端小屏下，
<del>划线可能贴得太近数字，用text-underline-offset微调（注意 IE 不支持）
del { text-decoration: line-through; text-underline-offset: 2px; }<br>strong { font-weight: 700; }实际写的时候，最容易被忽略的是语义和视觉的双重对齐——标签选对了，但文案没交代清楚“为什么划掉”“为什么加粗”，等于白做。 -
