电商商品必须用<article>而非<li>或<div>包裹，因其是独立、可复用、可分享的内容单元；<article>带唯一id和标题，配合<figure>/<dl>等结构化标签，才能保障可访问性、SEO与RSS解析。
用 article 而不是 li 或 div 包裹每个商品
电商商品是独立、可复用、可分享的内容单元，article 是唯一语义匹配的标签。li 暗示顺序依赖（比如“销量 Top 10”才该用 ol），div 则完全无语义，导致屏幕阅读器无法识别内容类型，搜索引擎也难单独索引。
实操要点：
-
article必须带唯一id（如id="prod-8842"），否则 JS 状态管理、锚点跳转、RSS 抓取都会失效 - 内部至少含一个
<h3>或更高级标题（通常是商品名），不能只有图片和价格 - 禁止把多个
article塞进一个div再用 class 命名分类——应改用section+id划分区块
用 section + id 划分一级分类，别用 div + class
“笔记本”“手机”这类一级分类不是视觉容器，而是逻辑分区。section 是 HTML5 明确定义的语义化分区元素，浏览器、读屏器、爬虫都能识别；而 div class="category-phone" 只是样式钩子，JS 查询时还容易误匹配（比如 class="phone-new" 也被选中）。
关键约束：
立即学习“前端免费学习笔记（深入）”；
- 每个
section必须配<h2>标题，且id与 URL 锚点一致（如id="phone"→#phone） - 筛选逻辑应只读
data-category属性（如data-category="phone"），不碰 class 或 id - CSS 和 JS 都应优先基于
section[id]或[data-category]选择器，而非 class 名
商品内图文和参数必须结构化：用 figure/figcaption 和 dl
把商品图和标题价格堆在一堆 p 或 div 里，会让屏幕阅读器失去上下文关联。例如，“¥299”单独一行，读屏器不会自动把它和上面的“轻量跑鞋”绑定。
正确做法：
- 主图用
figure包裹，标题+价格放figcaption，这样语义上明确“这是该图的说明” - 规格参数（品牌、内存、接口等）用
dl，dt是属性名，dd是值，比并列p更利于解析 -
img必须有alt，且建议保留width/height属性防布局抖动；小屏加载需配srcset和sizes，漏掉w单位整个srcset就失效
布局用 grid，但别让语义和样式混在一起
display: grid 是实现响应式多列的最佳手段，但它只是呈现层，不能替代语义结构。常见错误是用 grid 布局却仍用 div 做商品容器——视觉整齐了，可访问性和 SEO 还是零。
要协同生效：
- 容器设
display: grid，子项用article，两者职责分离：grid 控制排列，article 定义内容 - 列定义用
repeat(auto-fill, minmax(280px, 1fr))，IE11 降级方案是flex-wrap+flex-basis，别硬撑 - 间距统一用
gap，不用margin-bottom—— 后者在 margin 合并场景下会失效 - 图片高度不一致？优先加
aspect-ratio: 3/4，老浏览器 fallback 用伪元素或直接写width/height
真正卡住人的从来不是 grid 写法，而是 article 没 id、img 缺 srcset、figcaption 里没 h3——这些细节一漏，页面在读屏器里就成了一段无法导航的文本流。
