ul仅提供无序列表骨架，无法自动渲染商品数据；每个li须包裹完整商品信息块（如figure+figcaption），禁用直接在ul中写img/h3等标签，且必须重置默认样式并配合语义化子元素实现可访问、可复用的商品列表。
ul 标签本身不支持商品数据绑定，得靠配合其他标签和结构
直接写 <ul> 只能生成无序列表骨架，没法自动渲染商品名称、价格或图片。真正展示商品，必须手动或通过 JavaScript 注入内容，且每个 <li> 要包裹完整的商品信息块。
常见错误是把整个商品卡片（含图片、标题、价格）塞进一个 <li> 却忘了用 <div> 或 <section> 做语义分组，导致样式难控制、无障碍支持弱。
- 每个商品对应一个
<li>，不要多个商品共用一个<li> -
<ul>仅用于表示“并列的同级商品项”，不是容器替代品 - 避免在
<ul>里直接写<img>或<h3>，应包裹在<li>内部的语义子元素中
标准商品列表 HTML 结构长什么样
下面是最小可行结构：用 <ul> 包裹商品项，每个 <li> 代表一个商品，内部用 <figure>、<figcaption> 或 <div class="product"> 组织内容。这样既符合语义，也方便 CSS 定位。
<ul class="product-list">
<li class="product-item">
<figure>
<img src="shoe.jpg" alt="运动鞋" width="120" height="120">
<figcaption>
<h3>轻量跑鞋</h3>
<p class="price">¥299</p>
</figcaption>
</figure>
</li>
<li class="product-item">
<figure>
<img src="bag.jpg" alt="托特包" width="120" height="120">
<figcaption>
<h3>帆布托特包</h3>
<p class="price">¥159</p>
</figcaption>
</figure>
</li>
</ul>
注意：alt 属性不可省略，否则屏幕阅读器无法识别图片内容；width/height 建议保留，防止布局偏移。
立即学习“前端免费学习笔记（深入）”；
为什么不用 ol 或 dl 替代 ul
<ol> 表示有明确顺序的商品（比如“销量 Top 10”），但普通商品列表通常无序，用 <ol> 反而误导辅助技术。<dl> 适合键值对（如“品牌：Nike”），不适合多字段商品卡片。
- 商品无天然排序 → 选
<ul> - 需要强调排名/步骤 → 才考虑
<ol> - 只展示单条属性（如规格参数表）→
<dl>更合适
误用会降低可访问性，部分 SEO 工具也会忽略非语义化结构。
CSS 布局时 ul 的默认样式容易踩坑
浏览器会给 <ul> 默认的 margin、padding 和圆点标记（list-style），直接套商品图会导致左侧缩进、圆点遮挡图片。
- 重置默认样式：
ul.product-list { list-style: none; padding: 0; margin: 0; } - 横向排列商品需用
display: flex或display: grid，别依赖float -
<li>设为display: inline-block时要注意换行符产生空隙，建议用font-size: 0或注释掉换行
移动端响应式要额外处理 <li> 宽度和 flex-wrap，否则一行挤不下就溢出。
<ul> 就是个骨架，真正让商品“活起来”的是里面每个 <li> 的结构合理性、图片加载策略和 CSS 布局细节。漏掉任何一个，都可能在小屏上错位、读屏器念错、或者 SEO 抓不到关键信息。 
