纯html+css可构建语义清晰、响应式产品页，关键在正确使用article（含h3）、grid布局（auto-fill+minmax）、img占位与srcset、按钮aria状态及viewport等基础。
用纯 HTML + CSS 就能做出语义清晰、响应式可用的产品展示页，不需要框架或 JS 驱动——前提是结构写对、CSS 用准，否则容易在移动端错位、读屏器报错、SEO 抓不到关键信息。
商品卡片必须用 article 还是 div
优先用 article：每个商品是独立可分发的内容单元（比如被 RSS 抓取、被搜索引擎单独索引），且必须包含一个标题（h3 或更高阶）。如果卡片只是静态占位、无独立语义、后续由 JS 注入数据，那先用 div 更稳妥。
-
article内没写h3？读屏器会跳过整张卡片，SEO 权重归零 - 多个
article套在同一个section里，但section没加h2主标题？页面大纲断裂，无障碍审核失败 - 用
div时加role="article"是折中方案，但别为了“语义正确”硬套标签而破坏实际结构
grid-template-columns: repeat(auto-fill, minmax()) 怎么配才不崩
这是实现等宽自适应商品栅格最稳的写法，但参数一错就全列堆成一竖条或只出一列。关键不是背语法，而是理解三个值的协作关系：
- 最小列宽（如
280px）：低于这个宽度，浏览器宁愿少列也不压缩卡片 -
1fr：剩余空间均分，不是固定像素，所以列数随容器变 -
gap: 16px必须用，别用margin-bottom模拟行距——父子 margin 合并会导致首行/末行间距异常 - IE11 不支持
auto-fill和minmax()，需 fallback 到display: flex; flex-wrap: wrap; flex-basis: 280px
img 标签怎么写才能防抖动、省流量、过审核
图片加载慢导致卡片高度塌陷、页面跳动，这不是 CSS 能修的，得从 HTML 层占位。同时 srcset 配错等于白配：
- 必须设
alt属性，空字符串alt=""都比不写强；电商图缺alt，部分平台上线审核直接拒 - 用
aspect-ratio: 3/4固定卡片比例（Chrome 103+ / Firefox 98+），老浏览器 fallback：product::before { content: ""; display: block; padding-top: 133%; }+img { position: absolute } -
srcset必须带w单位（如"p-400w.jpg 400w"），漏一个就整条失效 -
sizes不是写像素，而是媒体条件 + 宽度描述，例如sizes="(max-width: 768px) 100vw, 300px"；不写sizes，浏览器默认按100vw猜，小屏也拉大图
价格和按钮为什么点击没反馈
纯 HTML 页面没法真加购，但用户点按钮毫无反应，会被当成页面故障。基础反馈必须有：
- 按钮必须显式声明
type="button"，否则在form内可能触发表单提交，整个页面刷新 - 加
aria-pressed="false"，点击后 JS 改为true，再用 CSS 的[aria-pressed="true"]控制背景色变化 - 如果用
<a href="#"></a>伪装按钮，务必在 JS 里写event.preventDefault()，否则页面跳到顶部，长列表里极其干扰 - 价格不能只靠颜色区分原价/现价：
<del aria-label="原价 599 元">¥599</del><strong aria-label="现价 399 元">¥399</strong>
最常被忽略的是 viewport meta 标签和图片占位逻辑——前者导致 iPhone 上文字挤成一团，后者让滚动中页面突然上蹿下跳。这两处不处理，其他都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
