必须用包裹商品项，每项为并设唯一data-item-id；数量用；结算区须用包裹，总价用，优惠用结构，全选/单选依赖统一name属性。
用 <ul></ul> + <li> 做商品列表，别用 <div> 堆砌
<p>语义错误是后期 JS 绑定失败的头号原因。用 <code><ul class="cart-items"></ul> 包裹所有商品项，每个商品必须是 <li role="group">，而不是一堆 <div class="item">。前者让屏幕阅读器能识别为“一组可操作条目”，JS 也能用 <code>document.querySelectorAll('.cart-items > li') 精准遍历，后者容易因 class 名重复或嵌套过深导致 querySelector 拿错节点。
常见错误现象：document.querySelector('.cart-item') 返回 null，但 HTML 里明明有对应 class —— 很可能是因为该 class 出现在多层嵌套 <div> 里，而你漏写了父级限定；或者多个商品块用了相同 ID。
<ul>
<li>每个 <code><li> 必须带唯一 data-item-id，如 data-item-id="prod-2026"，JS 后续增删改全靠它定位，别依赖 textContent 或 index
alt，哪怕只是“商品缩略图”，否则无障碍测试直接不通过<input type="number" min="1" value="1">，省去 JS 初次校验负数/空值的逻辑结算区必须用 <form></form> 包裹，总价用 <span id="total-price"></span>
看似只是个显示区域，实则影响回车提交、移动端键盘行为和 JS 更新效率。不用 <form></form>，用户在数量框输完按回车，页面不会触发任何动作；移动端键盘右下角“完成”键失效，用户得手动点屏幕外收起键盘。
总价不能写成 <div class="total">¥128.00</div>，而要明确给 id：<span id="total-price">¥0.00</span>。JS 更新时用 document.getElementById('total-price').textContent = '¥' + total.toFixed(2)，比反复 querySelector 找 class 快且稳定。
- 优惠信息建议用
<dl> <dt>满减</dt> <dd id="discount-amount">-¥10.00</dd> </dl>，方便 JS 单独替换<dd></dd>内容而不影响结构 -
<button type="submit"></button>必须放在<form></form>内，哪怕后端还没接入，否则无法响应回车和空格键 - 不要把总价塞进
<h3></h3>或<p></p>里再加 class，ID 是最小成本定位方式
勾选逻辑依赖 name 属性，不是 class 或 data-*
全选/单选联动失效，90% 是因为 checkbox 的 name 不统一。所有商品行的勾选框必须共用一个 name，比如 name="cart-item-check"，全选框则用 name="check-all"。JS 判断是否全选时，靠的是 document.querySelectorAll('input[name="cart-item-check"]:checked').length，而不是靠 class 名找“被选中”的元素。
容易踩的坑：用 jQuery 的 $('input.checked') 去筛选——这个 class 是 JS 动态加的，DOM 初始化时并不存在；或者用 data-checked="true" 控制状态，结果忘了同步原生 checked 属性，导致表单 submit 时 checkbox 值丢失。
- 全选框本身也要有
name，但值不同（如name="check-all"），避免和商品项混在一起被当成同一组 - 不要用
onclick="toggleCheck()"写内联事件，所有监听统一用addEventListener绑定到父容器，委托处理 - 勾选状态变更后，立刻更新对应商品行的
aria-checked属性，兼顾可访问性
表格布局适合固定字段，但响应式差
如果商品字段固定（名称、单价、数量、小计、操作），<table> 结构清晰、语义强、打印友好，且天然支持 <code><thead>/<code><tbody> 分离。但一旦加“规格”“赠品”“库存状态”等动态列，<code><tr> 对齐会崩，移动端横向滚动难控制。
<p>更灵活的做法是用 <code><ul></ul> + Flex 布局模拟表格视觉效果：每项 <li> 设 display: flex，子元素按比例设 flex: 0 0 25% 等。这样字段增减不影响整体结构，也更容易做折叠/展开交互。
- 用
<table> 时，<code><tbody> 必须为空，所有商品由 JS 动态 <code>insertAdjacentHTML插入，否则初始渲染和 JS 渲染逻辑割裂 - 表格内禁止嵌套
<div> 做布局，会破坏 <code>cellspacing和colspan行为 - 移动端若坚持用表格，至少给
<table> 加 <code>class="responsive-table"并配 media query 强制display: block，让每行变成堆叠块 实际开发中，结构没对，后面所有 JS 逻辑都会在边界 case 上反复返工。最常被忽略的是data-item-id的唯一性和<form></form>的包裹完整性——它们不报错，但会让调试时间翻倍。
