纯html无法实现真正可用的购物车，必须结合css构建语义化结构（如带data-属性的）、javascript处理交互与状态（事件委托、localstorage同步）及精度计算。
纯 HTML 无法实现真正可用的购物车——它没有状态存储、不能增删商品、不响应用户操作。所谓“HTML 购物车页面布局”，本质是用 HTML + CSS 搭建静态结构，再靠 JavaScript 驱动交互。直接写一堆 <div> 堆出购物车样子，但点不了“加减”、算不了总价、关掉页面就清空，这种不是购物车，是截图素材。
<h3>怎么用 HTML + CSS 搭出可维护的购物车结构</h3>
<p>核心是语义化与可扩展性。别用 <code><table> 做布局（语义错、响应式难），也别全塞 <code><div class="item">（缺乏数据关联）。推荐用带 <code>data- 属性的 <li> 或 <article></article> 包裹单个商品：
-
无线降噪耳机
¥299.001
-
data-id和data-price是后续 JS 计算和同步的关键，别等写 JS 时再补 - 数量区域用
<button></button>而非<input type="number">：前者更易绑定事件、防非法输入、兼容老浏览器 - 总价单独放一个
<span id="cart-total"></span>，不要塞在列表里重复计算
为什么直接 innerHTML 拼购物车项容易翻车
常见做法是 JS 里用字符串拼 <li>...</li> 再 innerHTML 插入，问题集中爆发在三处：
- 引号嵌套混乱：
"<li data-id='"+id+"'> 这种写法遇到商品名含单引号（如 <code>O'Reilly）直接破坏 DOM 结构 - XSS 风险：如果
name或price来自用户输入或后端未转义，innerHTML会执行其中的<script></script> - 事件监听失效：新插入的按钮没绑定点击事件，得手动
querySelectorAll再遍历addEventListener，代码臃肿
正确姿势是用 document.createElement + textContent（防 XSS）+ 事件委托（在 #cart-list 上监听 click，判断 event.target.dataset.action）。
localStorage 存购物车时最常漏掉的一步
很多人存完 JSON.stringify(cartArray) 就以为完了，但实际刷新页面后发现数量归零或商品消失，原因往往是：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 没在每次增删改后调用
localStorage.setItem('cart', JSON.stringify(cartArray))—— 只在页面加载时读，不写，等于白存 - 把对象直接存进去：
localStorage.cart = cartArray，结果存的是[object Object]字符串，取出来是废数据 - 没处理价格精度：
0.1 + 0.2 === 0.30000000000000004，显示总价时要用parseFloat((a + b).toFixed(2))或Intl.NumberFormat
建议封装一个 saveCart() 函数，在所有修改逻辑末尾统一调用，避免遗漏。
购物车真正的复杂点不在布局，而在状态同步：本地存、接口同步、库存校验、优惠叠加、跨设备一致性……HTML 页面布局只是最表层的一张皮，皮底下没 JS 骨架和数据逻辑，它连“能用”都算不上。
