用<article>而非<div>语义化包裹产品卡片，因其代表独立可复用内容单元；需含标题、正确DOM顺序、图片懒加载及焦点样式，配合Flex流式布局提升SEO、可访问性与性能。
用 <article> 而不是 <div> 包卡片
产品列表本质是「一组独立、可复用、脱离上下文也能理解的内容单元」，<article> 的语义完全匹配。用 <div> 不仅让屏幕阅读器失去结构感知，还会削弱 SEO 权重——搜索引擎会把 <article> 内的标题、图片、价格等自动关联为一个商品实体。
常见错误：<div class="product-card"> 写满一页，检查元素时发现全是匿名容器；正确做法是直接用 <article>，必要时加 itemprop 或 data-id 等属性。
-
<article>是块级元素，天然独占一行，无需额外 reset - 每个
<article>应包含至少一个标题（<h3>或<h4>），否则语义断裂 - 避免嵌套
<article>：一个商品一张卡，不把「推荐搭配」也塞进同一张卡里
display: flex + flex-wrap: wrap 控制多列流式布局
固定列数（如 4 列）看似简单，但响应式下容易在小屏上溢出或留白严重。用 Flex 实现「尽可能多列，不够就换行」更健壮。
CSS 关键片段：
立即学习“前端免费学习笔记（深入）”；
.product-list {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 推荐用 gap，比 margin 更可控 */
}
.product-list > article {
flex: 1 1 calc(25% - 12px); /* 4 列基础宽度，减去 gap 占用 */
max-width: calc(25% - 12px);
}
注意点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 不要设死
width: 25%：当父容器宽度不能被 4 整除时，最后一列可能被挤到下一行 -
gap在 Flex 和 Grid 中都原生支持，IE 不支持，但 2026 年绝大多数项目已可忽略 IE - 移动端建议在
@media (max-width: 768px)下改为flex-basis: 100%，确保单列显示
图片、标题、价格三要素的 DOM 顺序必须符合阅读逻辑
视觉上可能是「图 → 标题 → 价格」，但 DOM 顺序错乱会导致键盘 Tab 焦点跳转异常、屏幕阅读器朗读错序。标准顺序应为：
<article> <img src="..." alt="无线降噪耳机" /> <h3>AirSound Pro</h3> <p class="price">¥899</p> </article>
为什么重要：
-
<img>放最前：它是内容起点，且alt文本是商品第一描述 -
<h3>紧跟其后：标题是核心识别信息，不应被价格或按钮打断 - 价格用
<p>或<span>，别用<h4>：它不是层级标题，而是辅助数据 - 如果加「立即购买」按钮，放在价格之后，且必须带
type="button"或包裹在<form>中，避免意外提交
别忽略 loading="lazy" 和 decoding="async"
产品列表通常有大量图片，滚动加载不处理会拖慢首屏渲染和 LCP 指标。
正确写法：
<img src="product-1.jpg" alt="真无线蓝牙耳机" loading="lazy" decoding="async" width="300" height="300" />
关键说明：
-
loading="lazy"原生支持，Chrome/Edge/Firefox/Safari 全部可用，无需 JS 库 -
decoding="async"让浏览器异步解码图片，避免阻塞主线程渲染 -
width/height必须写：防止图片加载时页面重排（layout shift），影响 CLS 分数 - 不要依赖 CSS 设置宽高来“撑开”容器：没有尺寸的
<img>在加载前高度为 0，用户滚动时会突然跳动
最易被忽略的一点：卡片内所有交互元素（如按钮、链接）必须有明确的焦点样式，不能只靠默认 outline。很多团队上线后才发现键盘用户根本没法用 Tab 键操作产品列表——这不是细节，是可访问性底线。
