HTML怎么创建商品展示区_HTML product card结构教程【电商】

商品卡片应优先用标签以确保语义清晰、利于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> 主标题，会干扰大纲层级

如果卡片内容由 js 动态注入且初始无意义，先用 <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 没问题

结构本身不难，难的是每张卡片里的文本节点是否可访问、图片是否按需加载、容器是否随内容自然呼吸——这些细节堆起来，才是用户划过页面时真正感受到的“顺”。