应使用<span class="promo-tag">而非<mark>或<strong>，因二者语义不符且易导致无障碍、SEO及样式问题；标签应紧贴价格元素放置，避免绝对定位；需适配多端显示、确保颜色对比度达标。
促销标签不是 HTML 原生语义元素，直接用 <span> 或 <div> 加 class 是最稳妥、最可控的做法。
为什么不用 <mark> 或 <strong> 标促销
<mark> 本意是“高亮文档中与当前上下文相关的部分”，比如搜索结果中的关键词匹配，不是为营销设计的；<strong> 表达的是内容重要性，跟价格折扣毫无语义关联。强行套用会导致：屏幕阅读器误读、SEO 混淆、CSS 重置困难（比如某些 CSS reset 会清掉 <mark> 的背景色）。
常见错误现象：<mark>限时5折</mark> 在暗色主题下背景色消失，或被全局 mark { background: transparent; } 覆盖而完全不可见。
- 坚持用
<span class="promo-tag">，语义清晰、样式完全自主 - 避免嵌套在
<h1>或<p>内部时影响行高，建议加display: inline-flex或vertical-align: top - 若需支持无障碍，可加
aria-label="促销：满299减50"，但不要用role="alert"——这不是实时状态变更
促销标签该放在 HTML 的哪个位置才真正醒目
视觉醒目 ≠ DOM 位置靠前。实际渲染中，用户第一眼看到的是「布局流 + 层叠上下文 + z-index」共同作用的结果。很多页面把促销标签塞在商品标题前面，结果被图片遮挡、被浮动元素挤到角落。
立即学习“前端免费学习笔记（深入）”；
使用场景：电商列表页、商品卡片、价格旁、按钮上方。
- 最佳实践是紧贴价格元素右侧或正上方，例如：
<div class="price"><span class="promo-tag">直降80元</span><span class="actual-price">¥299</span></div></li> <li>避免放在 <code><img>
的alt里——那是给盲人看的，不是给所有人展示促销的 - 不要用
position: absolute脱离文档流后硬塞进卡片右上角，容易在响应式断点下错位或被裁切
怎么让促销标签在不同设备上都保持可读不溢出
移动端小屏是最大雷区：一个 "VIP专享折上95折" 在 375px 宽度下直接换两行，撑开卡片高度，破坏网格对齐。
参数差异主要体现在字体缩放、行高、最小宽度控制上。
- 强制单行显示：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但仅适用于可截断文案（如“满减100”可以，“买一送一加赠小样”不行） - 更优解是用 CSS
@media控制文案长度：PC 端显示完整文案，移动端用短文案（通过data-mobile-text属性 + JS 切换，或两个<span>配合display: none/block） - 字体大小别用固定
px，改用rem或clamp(0.7rem, 0.85vw, 0.9rem)，防止 iOS 缩放失效
最容易被忽略的是颜色对比度——很多团队用红色做促销标签，但没校验是否满足 WCAG AA 级对比度（至少 4.5:1）。深灰背景上的浅红文字，看着“很醒目”，实则大量用户根本看不清。检查工具用浏览器 DevTools 的无障碍面板，或者在线跑一次 axe-core 扫描。
