最稳妥用包裹商品项（），语义清晰、无障碍友好、CSS选择器稳定；禁用，每个须含唯一data-id，数量输入用，结算栏需实时联动重算。
购物车列表用什么 HTML 结构最稳妥
用 <ul></ul> 包裹每个商品项（<li>），而不是 <div> 堆砌。语义清晰、屏幕阅读器友好，且 CSS 选择器更稳定——比如 <code>ul.cart-list > li 能精准命中所有商品，不会被嵌套操作按钮意外干扰。
每个 <li> 内部按顺序组织：图片（<img alt="HTML购物车列表结构_HTML商品项增减与结算布局" >）、名称（<h3></h3> 或 <p class="name"></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>）、规格（可选 <p class="spec"></p>）、单价（<span class="price"></span>）、数量控制器（<div class="quantity-control">）、小计（<code><span class="subtotal"></span>）、删除按钮（<button type="button" class="remove"></button>）。
关键点：
- 不要用 <table>，维护成本高、响应式难调、无障碍支持差<br>
- 每个商品项必须有唯一 <code>data-id 属性（如 data-id="prod_123"），后续 JS 增减、同步状态全靠它
- 数量输入框必须是 <input type="number">，并设 min="1" 和 step="1"，避免非法值
增减数量时 JS 怎么写才不丢精度、不跳变
直接读写 input.value 容易出错：用户手动输入小数、空格、负数，或连续狂点 + 按钮导致异步更新冲突。正确做法是绑定 change 和 input 双事件，并统一走「校验 → 更新 → 重算」流程。
实操建议：
- 监听 input 事件做实时过滤：用 input.value = input.value.replace(/[^0-9]/g, '') 清除非数字字符，再强制转成整数
- 监听 change 事件做最终校验：若值为 "" 或 0，自动设为 1；超出库存则截断（需提前存 data-stock="5"）
- 所有数量变更后，立刻调用 updateCartItem(id, newQty) 函数，而非直接改 DOM 小计——小计必须由单价 × 数量动态计算，不能缓存显示值
- 避免在按钮点击里直接 ++/--：异步场景下可能因多次点击造成数量错乱，应以当前 DOM 的 value 为准重新计算
结算栏位置和数据同步容易被忽略的三个细节
结算栏（含总件数、总金额、去结算按钮）不是静态区域，它必须与列表实时联动。常见错误是只监听“加购”动作，却忽略“删商品”“清空”“跨设备同步”等路径。
立即学习“前端免费学习笔记（深入）”；
必须覆盖的触发点：
- 每次 input 或 change 数量后，调用 recalculateCart()
- 每次点击 .remove 按钮后，先移除对应 <li>，再调用 recalculateCart()
- 页面加载完成时，遍历所有 li[data-id]，用其 data-price 和 input.value 初始化总金额，别依赖 localStorage 里的旧快照
- 总金额建议保留两位小数，但计算过程用分（整数）运算：比如价格存 data-price-cents="2999"，避免 parseFloat("29.99") * 3 产生 89.96999999999999
移动端数量控制器怎么防止误触和布局断裂
原生 <input type="number"> 在 iOS 上会唤出数字键盘但带小数点，在 Android 上可能弹出全键盘。加上加减按钮后，紧凑排列极易误点。
轻量级解法：
- 加减按钮用 <button type="button"></button>，禁用默认焦点环（outline: none），并加 user-select: none
- 整个数量区用 display: flex，左右按钮固定宽（40px），中间 input 占满剩余空间，设 text-align: center
- 给按钮加 touch-action: manipulation 提升点击响应速度
- 在按钮上监听 pointerdown 而非 click，防止长按触发两次（iOS Safari 的 click 延迟问题）
- 必须为按钮设置 aria-label，例如 aria-label="增加商品数量"，否则 VoiceOver 无法正确朗读操作意图
最麻烦的其实是「数量变更后，如何让服务端和本地状态真正一致」——前端校验再严，也挡不住网络中断、接口幂等失败、并发修改。别省略 loading 状态和错误重试 UI，更别把「更新成功」当成理所当然。
