应使用而非或，因二者语义不符且易导致无障碍、SEO及样式问题；标签应紧贴价格元素放置，避免绝对定位；需适配多端显示、确保颜色对比度达标。

促销标签不是 HTML 原生语义元素，直接用 <span></span> 或 <div> 加 class 是最稳妥、最可控的做法。 <h3>为什么不用 <code><mark></mark> 或 <strong></strong> 标促销

<mark></mark> 本意是“高亮文档中与当前上下文相关的部分”，比如搜索结果中的关键词匹配，不是为营销设计的；<strong></strong> 表达的是内容重要性，跟价格折扣毫无语义关联。强行套用会导致：屏幕阅读器误读、SEO 混淆、CSS 重置困难（比如某些 CSS reset 会清掉 <mark></mark> 的背景色）。

常见错误现象：<mark>限时5折</mark> 在暗色主题下背景色消失，或被全局 mark { background: transparent; } 覆盖而完全不可见。

• 坚持用 <span class="promo-tag"></span>，语义清晰、样式完全自主
• 避免嵌套在 <h1></h1> 或 <p></p> 内部时影响行高，建议加 display: inline-flex 或 vertical-align: top
• 若需支持无障碍，可加 aria-label="促销：满299减50"，但不要用 role="alert"——这不是实时状态变更

促销标签该放在 HTML 的哪个位置才真正醒目

视觉醒目 ≠ DOM 位置靠前。实际渲染中，用户第一眼看到的是「布局流 + 层叠上下文 + z-index」共同作用的结果。很多页面把促销标签塞在商品标题前面，结果被图片遮挡、被浮动元素挤到角落。

立即学习“前端免费学习笔记（深入）”；

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

使用场景：电商列表页、商品卡片、价格旁、按钮上方。

• 最佳实践是紧贴价格元素右侧或正上方，例如：

  <div class="price"><span class="promo-tag">直降80元</span><span class="actual-price">¥299</span></div></li>
  <li>避免放在 <code><img  alt="HTML怎么标注促销标签_HTML促销信息醒目位置【介绍】" >

  的 alt 里——那是给盲人看的，不是给所有人展示促销的
• 不要用 position: absolute 脱离文档流后硬塞进卡片右上角，容易在响应式断点下错位或被裁切

怎么让促销标签在不同设备上都保持可读不溢出

移动端小屏是最大雷区：一个 "VIP专享折上95折" 在 375px 宽度下直接换两行，撑开卡片高度，破坏网格对齐。

参数差异主要体现在字体缩放、行高、最小宽度控制上。

• 强制单行显示：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但仅适用于可截断文案（如“满减100”可以，“买一送一加赠小样”不行）
• 更优解是用 CSS @media 控制文案长度：PC 端显示完整文案，移动端用短文案（通过 data-mobile-text 属性 + JS 切换，或两个 <span></span> 配合 display: none/block）
• 字体大小别用固定 px，改用 rem 或 clamp(0.7rem, 0.85vw, 0.9rem)，防止 iOS 缩放失效

最容易被忽略的是颜色对比度——很多团队用红色做促销标签，但没校验是否满足 WCAG AA 级对比度（至少 4.5:1）。深灰背景上的浅红文字，看着“很醒目”，实则大量用户根本看不清。检查工具用浏览器 DevTools 的无障碍面板，或者在线跑一次 axe-core 扫描。