价格标签语义上应优先用元素，因其支持value属性便于机器读取数值，如¥299；视觉定位需父容器设position: relative，子元素用position: absolute配合top/right留白；单位紧贴数字、小数点后两位、红色加粗提升可读性；响应式下可移至右下角或回归文档流。
价格标签该用什么HTML元素
语义上，价格属于“数据”，不是标题也不是段落。<span></span> 最常用，但若价格是商品核心属性（比如电商列表），<data></data> 更合适——它支持 value 属性，方便机器读取数值：<data value="299">¥299</data>
。别用 <div> 或 <code><p></p> 包裹价格，会破坏行内流布局，导致换行或额外间距。
怎么让价格标签视觉上“贴”在卡片角落
关键是脱离文档流 + 定位控制。position: absolute 是主流做法，但必须确保父容器有 position: relative。
position: absolute 是主流做法，但必须确保父容器有 position: relative。常见错误：
• 忘设父容器定位，导致价格相对整个页面定位
• 用 top: 0; right: 0 却没留边距，文字紧贴边缘难读
• 在 Flex 容器里滥用 align-self: flex-end，结果只对齐到内容区而非卡片右上角
<div class="card"> @@##@@ <div class="price-tag"><data value="199">¥199</data></div> </div>配合 CSS：
.card { position: relative; }
.price-tag { position: absolute; top: 12px; right: 12px; }
价格单位和样式怎么处理才不踩坑
中文场景下，“¥”符号应紧贴数字，不能有空格；小数点后两位是通用规范（即使整数也建议写成 ¥299.00）。
容易忽略的细节：
• 用 ¥ 或 ¥ 都可以，但别混用字体导致符号渲染异常
• 如果用 font-size: 0.8em 缩小价格标签，记得同步调 line-height，否则可能上下偏移
• 红色（#e74c3c）是默认警示色，但色弱用户可能分辨困难，加粗 font-weight: 700 比单靠颜色更可靠
响应式下价格标签怎么自适应 小屏幕时右上角空间紧张，直接缩放文字易看不清。
更稳妥的做法：
• 在移动端改用 bottom: 12px; right: 12px 移到右下角
• 或者用 @media (max-width: 480px) 把 .price-tag 改为 position: static，让它回归文档流放在标题下方
• 绝对不要用 vmin 或 vw 控制价格字号——不同设备视口宽高比差异大，会导致同一设备上价格忽大忽小
min-width，否则窄屏下绝对定位的价格标签可能被截断。
