极简HTML搭建电商购物车界面-html教程-PHP中文网

原生html+css可构建静态购物车雏形，核心是语义化结构与表单规范：用或列商品，每项含、名称、单价、数量框、删除按钮，结算用包裹，价格存data属性便于后续js计算，移动端通过overflow-x: auto或css grid适配。

极简html搭建电商购物车界面

用原生 HTML + CSS 实现购物车结构，不依赖框架

纯静态购物车界面不需要 JavaScript 也能搭出可用雏形，关键是把 <form></form>、<input type="number"> 和语义化标签组合对。很多人一上来就写 JS 增删商品，结果表单提交逻辑全乱——先确保结构能正确收集数据，再加交互。

核心结构必须包含：<table> 或 <code><ul></ul> 列出商品；每个商品行要有：商品图（<img>）、名称（<h3></h3> 或 <p></p>）、单价（<span class="price"></span>）、数量输入框（<input type="number" name="qty-123">）、小计（用 <span data-price></span> 配合 JS 计算更稳）、删除按钮（<button type="button"></button>，注意不是 submit）。

容易踩的坑：

<input type="number"> 默认允许空值和负数，务必加 min="1" 和 value="1"
删除按钮如果写成 <button></button> 在 <form></form> 内会默认触发 submit，必须显式写 type="button"
价格数字别直接写进 HTML 文本，用 data-price="299.00" 属性存原始值，方便后续 JS 读取计算

让数量修改实时更新小计，但避开 innerHTML 拼接

小计更新看似简单，但用 innerHTML = "$" + (price * qty) 容易被 XSS 注入或格式错乱。真实项目里单价可能是 299.99，直接相乘后没保留两位小数，界面上就显示 $299.99000000000003。

推荐做法是用 Number.prototype.toFixed(2) 格式化，并绑定在 input 的 input 事件上：

document.querySelectorAll('input[name^="qty-"]').forEach(input => {
  input.addEventListener('input', function() {
    const row = this.closest('tr');
    const price = parseFloat(row.querySelector('[data-price]').dataset.price);
    const qty = parseInt(this.value) || 0;
    const subtotal = (price * qty).toFixed(2);
    row.querySelector('.subtotal').textContent = '$' + subtotal;
  });
});

注意点：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

用 input 事件而非 change，用户每敲一个数字就响应，体验更顺
parseInt(this.value) || 0 处理清空输入框时的 NaN 情况
别用 row.innerHTML 替换整行，只改 .subtotal 元素的 textContent，避免事件监听器丢失

结算按钮点击后，如何安全提交到后端

购物车最终要传数据给服务器，但很多人直接用 <form method="POST"></form> 提交全部字段，结果后端收到一堆 qty-123=2&qty-456=1&qty-789=0，还得过滤掉 qty=0 的项——不如前端先聚合。

更可控的方式是禁用默认提交，用 fetch 发送 JSON：

document.querySelector('#checkout-btn').addEventListener('click', async function(e) {
  e.preventDefault();
  const items = [];
  document.querySelectorAll('tr[data-id]').forEach(tr => {
    const id = tr.dataset.id;
    const qtyInput = tr.querySelector('input[name^="qty-"]');
    const qty = parseInt(qtyInput.value) || 0;
    if (qty > 0) {
      items.push({
        id: id,
        quantity: qty
      });
    }
  });
<p>await fetch('/api/checkout', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items })
});
});</p>

关键细节：

用 data-id 绑定商品唯一标识，比从 name 属性里 parse 更可靠
提交前主动过滤 qty 的项，减少无效请求
别漏写 headers: { 'Content-Type': 'application/json' }，否则后端可能收不到 body

移动端适配时，表格布局崩了怎么办

<table> 在小屏上横向滚动很难受，又不想引入 Flexbox 大改结构？用 CSS 就能救回来。<p>给 <code><table> 加一层包裹容器，设为 <code>overflow-x: auto，再强制表格不换行：

.cart-table-wrapper {
  overflow-x: auto;
}
.cart-table {
  width: 100%;
  min-width: 600px; /* 确保桌面端不压缩 */
}
.cart-table td, .cart-table th {
  white-space: nowrap;
}

但更轻量的方案是直接放弃 <table>，改用语义化 <code><ul></ul> + <li>，配合 CSS Grid 控制列宽：

ul.cart-list { display: grid; gap: 1rem; }
li.cart-item { display: grid; grid-template-columns: 60px 1fr auto auto auto; } /* 图/名/价/量/操作 */

实际选型看团队习惯：老项目维护用 table + wrapper 更快；新项目直接 grid，后续加动画也方便。

真正麻烦的不是布局，而是“删除商品后是否自动刷新页面”——如果用纯静态 HTML，删完只能靠 location.reload()，体验断层。这时候就得承认：极简 ≠ 零 JS，至少留个 data-cart-id 和轻量事件绑定，才撑得起真实购物车流程。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！