商品卡片应优先用标签以确保语义清晰、利于seo和无障碍访问，内部须含标题；图片需配合srcset、sizes与src实现响应式加载；价格信息要用/和配合aria-label明确语义；布局推荐grid（等宽流式）或flex（横滑场景），并设gap替代margin。
用纯 HTML + CSS 就能做出可维护、语义清晰、适配屏幕的商品卡片区，关键不是套模板，而是选对标签和结构逻辑。
商品卡片必须用 <article></article> 还是 <div>？
<p>语义上优先用 <code><article></article>：每个商品是独立、可分发、可复用的内容单元（比如 RSS 抓取、SEO 提权、无障碍阅读器识别）。但若卡片只是静态展示、不带独立 URL 或元数据，<div role="article"> 也够用——别硬套语义反而破坏结构。
<ul>
<li>用 <code><article></article> 时，内部必须有标题（<h3></h3> 或更高阶），否则语义断裂
<article></article> 在一个 <section></section> 里却不加 <h2></h2> 主标题，会干扰大纲层级<div>，等数据加载完成再提升语义
<h3>
<code>img 的 srcset 和 sizes 怎么写才不白配？
只写 src 是默认行为，但电商图在不同设备下拉伸模糊或浪费带宽。真正起效得靠三者配合：src（兜底）、srcset（候选图源）、sizes（告诉浏览器“这张图在页面里大概占多宽”）。
-
sizes值不是像素数，而是媒体条件 + 宽度描述，例如sizes="(max-width: 768px) 100vw, 300px"表示小屏占满视口，大屏固定 300px 宽 -
srcset中每个图必须标注宽度，如"product-400w.jpg 400w, product-800w.jpg 800w"；漏掉w单位会导致整个属性失效 - 没配
sizes时浏览器按 100vw 猜，常导致小屏也加载大图——这是最常见带宽浪费点
@@##@@
价格和促销信息怎么标记才利于 SEO 和读屏器？
不能只靠颜色或字体大小区分原价/折后价。搜索引擎和读屏器依赖明确的语义标签和属性。
立即学习“前端免费学习笔记（深入）”；
- 原价用
<del></del>或<s></s>（后者更中性，<del></del>暗示已删除，适合清仓场景） - 折后价用
<strong></strong>或<span aria-live="polite"></span>（动态变价时需触发读屏器重读） - 加
aria-label显式说明关系，例如<del aria-label="原价 599 元">¥599</del><strong aria-label="现价 399 元">¥399</strong> - 避免用
<sup>※</sup>加脚注解释折扣规则——读屏器不会自动关联，必须用aria-describedby显式绑定
卡片容器用 display: grid 还是 flex？
横向等宽流式布局（比如首页推荐区）用 grid 更稳；单行滚动或需要首尾留白的（比如横滑新品）用 flex 更灵活。两者都得设 gap，别靠 margin 控制间距——后者在响应式断点切换时容易错位。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))是安全起点，280px 是移动端最小合理宽度，1fr让大屏自动均分 - 用
flex时，给子项设flex: 0 0 280px（不放大、不缩小、基础宽 280px），比单纯flex: 1更可控 - 别忘了
@supports (display: grid)包裹 grid 样式，并为老浏览器提供flex回退——iOS Safari 10.3 以下不支持subgrid，但基础 grid 没问题
结构本身不难，难的是每张卡片里的文本节点是否可访问、图片是否按需加载、容器是否随内容自然呼吸——这些细节堆起来，才是用户划过页面时真正感受到的“顺”。
