html购物网站代码

一个能跑起来的购物购物网站，核心就三件事：商品列表、网站购物车、代码结算。购物别被那些花哨的网站框架吓住，纯HTML加一点CSS和JavaScript就能把骨架搭起来。代码下面这段代码我去年给一个卖手工皂的购物小店写过，去掉后端接口后，网站前端逻辑依然完整。代码

商品卡片不是购物div堆出来的

很多人一上来就写<div class="product">，然后里面塞图片、网站标题、代码价格。购物能跑，网站但语义丢了。代码搜索引擎和屏幕阅读器不知道那是商品。用<article>包住，每个商品独立成块，价格用<data value="39.9">39.9元</data>，机器能读，人也能看。

<article class="product" data-id="101"> <img src="soap.jpg" alt="薰衣草手工皂"> <h3>薰衣草手工皂</h3> <data value="39.9">¥39.9</data> <button class="add-to-cart">加入购物车</button> </article>

按钮上绑一个点击事件，别用内联onclick。用事件委托挂在父容器上，以后动态加商品也不用重新绑定。

document.querySelector('.product-list').addEventListener('click', e => {  if (e.target.classList.contains('add-to-cart')) {  const card = e.target.closest('.product'); addToCart(card.dataset.id, card.querySelector('h3').textContent, card.querySelector('data').value); } });

购物车状态别塞进DOM里

我见过新手把购物车数量直接写在按钮的innerHTML里，加减全靠读页面文字。页面一刷新全没了。用一个数组存状态，渲染是渲染，数据是数据。

let cart = []; function addToCart(id, name, price) {  const existing = cart.find(item => item.id === id); if (existing) {  existing.qty += 1; } else {  cart.push({  id, name, price: parseFloat(price), qty: 1 }); } renderCart(); }

renderCart函数负责把cart数组画到侧边栏。每次操作后重新渲染整个列表，代码简单，不容易出bug。性能？几十个商品根本不用操心。

结算按钮不是摆设

购物车侧边栏底部放一个<button id="checkout">去结算</button>。点击后先检查cart是否为空，空的话弹个提示，别让用户点进去看空白页。不为空就把cart序列化成JSON，通过fetch发给后端。这里只写前端部分：

document.getElementById('checkout').addEventListener('click', () => {  if (cart.length === 0) {  alert('购物车还是空的，挑点东西吧'); return; } const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0); console.log('应付：', total.toFixed(2)); // fetch('/api/order', {  method: 'POST', body: JSON.stringify(cart) }) });

总价用reduce算，别用for循环累加。toFixed(2)保留两位小数，不然0.1+0.2会给你0.30000000000000004。

移动端适配就加一行meta

忘了写<meta name="viewport" content="width=device-width, initial-scale=1">，手机上打开字小得要用放大镜。商品列表用grid布局，桌面三列，手机一列：

.product-list {  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

auto-fill比auto-fit稳，商品少的时候不会把卡片拉得变形。gap用16px，手指点按钮不容易误触。

代码放哪

全部塞进一个index.html文件就能跑。