购物车结算页需确保结构语义、JS钩子预留和移动端交互细节三者到位：HTML用role="group"与data-item-id标识商品项，input[type="number"]约束数量，结算区包裹于<form>内并用id精准更新总价，localStorage仅存纯数据，且须处理移动端touch事件与聚焦延迟。
直接说结论：购物车结算页不是“堆个 div 写个总价”就完事，关键在结构语义、JS 钩子预留、以及移动端交互细节——这三点没对，后面所有逻辑都会卡在“点不动”“算不对”“手机上点错行”上。
HTML 结构必须带 data-item-id 和 role="group"
很多人用 class="item-123" 或文本内容来识别商品，结果 JS 批量操作时取错节点、删错行。真正可靠的方式是每个商品项用 <li role="group"> 包裹，并强制加上唯一 data-item-id 属性：
-
data-item-id必须是字符串（如"prod-1024"），不能是数字或含空格，否则document.querySelector('[data-item-id="1024"]')会失效 -
role="group"不是可有可无——它让屏幕阅读器把整块商品当一个单元读，也方便 JS 用el.closest('li[role="group"]')快速定位父容器 - 别用
<tr>套死表格结构，移动端小屏下<ul><li>更易响应式重排，且 CSSflex控制更稳
数量输入框必须用 type="number" + min="1"
写成 <input type="text"> 看似省事，但用户输 "abc" 或 "-5" 后，JS 得额外做校验、提示、重置，还容易漏掉键盘粘贴场景。用原生约束更干净：
-
type="number"自动禁用非数字字符输入，移动端唤起数字键盘，体验直接提升 -
min="1"防止用户手动改 HTML 或用开发者工具输负数，比 JS 判断if (val < 1)更前置 - 别依赖
value属性初始化值，JS 动态渲染时要显式设input.value = item.quantity，否则首次加载可能显示空或 0
结算区必须用 <form> 包裹，总价用 <span id="total-price">
很多新手把结算按钮写成 <div onclick="submitOrder()">，结果回车无法提交、Tab 键跳过按钮、屏幕阅读器读不出“这是提交动作”。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 整个结算区包在
<form>里，即使后端暂不接管——这是让浏览器识别“这是一个表单”的最小成本 - 总价必须用带
id的<span id="total-price">，而不是<div class="total">，JS 更新时document.getElementById('total-price').textContent = '¥199.00'比 querySelector 快且稳定 - 优惠金额用
<dd id="discount-amount">，配合<dt>构成语义化描述，JS 替换时不会误伤其他文字 - 按钮必须是
<button type="submit">，禁用状态靠disabled属性控制，仅加opacity: 0.5会让键盘仍可聚焦
localStorage 存储商品时别直接存 DOM 节点
常见错误是把整个 <li> 字符串塞进 localStorage.setItem('cart', htmlString)，下次读出来再 innerHTML 插入——这会导致事件监听丢失、重复绑定、甚至 XSS 风险。正确姿势是只存纯数据：
- 存对象数组：
[{id: "prod-1024", name: "小米耳机", price: 199, quantity: 2}]，用JSON.stringify()存，JSON.parse()取 - 价格统一存 number 类型（如
199），不要存字符串"¥199.00"，避免后续计算时还要正则提取数字 - 每次更新购物车前先从 localStorage 读一次，合并新操作，再整体写回——避免多标签页操作导致数据覆盖
最容易被忽略的其实是移动端 touch 事件穿透和 input 聚焦延迟：iOS Safari 在快速连点数量增减按钮时，click 事件可能丢失，得补 touchend；而 input[type="number"] 在部分安卓机上 focus 后键盘弹出慢，得用 setTimeout(() => el.focus(), 0) 微调时机。这些不在 HTML 结构里，但结构没搭对，后面根本调不到这一步。
