HTML+CSS+JavaScript购物商城实战：从布局到购物车逻辑全解析-代码聚汇网

每次期末季，总有一批人被“HTML+CSS+JavaScript购物商城”这个题目卡住。这个题目看似常见，其实很考验你对前端三大件的综合运用能力：HTML负责页面骨架，CSS负责颜值和布局，JavaScript负责交互和业务逻辑。很多同学不是不会写代码，而是不知道如何把三个部分串成一个完整项目，最后交上去的东西要么是纯静态页面，要么是JS只会弹个alert，答辩时一问就露馅。

这篇文章我按自己的实操经验，把整个购物商城的完整实现拆开讲透，从页面结构设计、CSS布局方案、购物车交互逻辑，到常见报错排查、提交答辩时的加分细节，全部写清楚。不管你是零基础想抄作业，还是有一定基础想优化项目拿高分，都可以直接参考这套思路。

1. 项目整体设计：为什么购物商城是期末大作业的稳妥之选

1.1 选题背后：三大件的最小闭环

购物商城这个题目能成为“经典款”，不是没有道理。它几乎覆盖了前端入门的全部核心场景：商品数据需要展示（HTML结构）、页面要好看（CSS样式）、点击加入购物车要实时反馈（JavaScript事件）、购物车数量变化要重新计算总价（JS逻辑运算）、不同页面之间要跳转（链接和参数传递）。

换句话说，做完一个购物商城，你就把HTML、CSS、JavaScript三大件的基础用法全部串起来练了一遍。相比纯静态的“个人主页”或者“学校官网介绍”，购物商城的优势是有明确的交互场景，老师一眼就能看出你的JavaScript是真写了，还是只贴了文档里的demo。

从评分的角度看，购物商城也天然适合分模块打分：页面结构完整度、样式美观度、交互功能完整性、代码规范性、答辩表现，每个维度都有东西可展示。我见过很多同学题目一样、最后分数差出两个档，差的往往不是技术难度，而是有没有把基础功能做扎实。

1.2 页面结构设计的四个核心模块

在动手写代码之前，先把项目拆成四个模块：

头部导航区：网站Logo、搜索框、购物车入口、用户登录入口。这部分是每个页面共用的，建议单独提取成一段代码，后面每个页面复制粘贴就行。
商品展示区：这是主页面最核心的区域，包括商品分类导航和商品卡片列表。商品卡片至少包含图片、名称、价格、加入购物车按钮。
购物车区域：可以是侧边滑出面板，也可以是独立页面。核心元素是商品条目列表、数量加减按钮、单项小计、总价结算。
页面底部：版权信息、友情链接、备案信息等，虽然不起眼，但缺了会显得页面不完整。

我建议第1次做的时候，把购物车做成页面右侧的滑出面板，而不是单独跳一个页面。原因很简单：滑出面板的显示和隐藏只需要CSS和JS配合处理class，逻辑链路短，不容易出错；独立购物车页面则涉及页面跳转、参数传递、数据持久化，代码量翻倍，期末时间紧张的时候没必要跟自己过不去。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 核心页面实现：HTML结构 + CSS样式细节

2.1 HTML骨架：语义化标签与DOCTYPE陷阱

很多同学从网上复制代码，第一行总是写个 <!DOCTYPE html> 却不知道它干嘛用的。这个声明的作用是告诉浏览器“我是按现代HTML标准来渲染的”，不加的话，有些浏览器会进入“怪异模式”，导致CSS盒模型计算方式直接变掉，margin、padding都对不上，明明写了相同的样式却显示不一致。

html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XX商城 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
</head>

这里有几个容易被忽略的细节：

<meta charset="UTF-8"> 必须写，而且要放在<head>最前面。不写或者放太靠后，中文字符在部分浏览器下会出现乱码。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是移动端适配的开关，不写的话手机打开页面会整体缩小，后面做的响应式布局基本等于白做。
页面标题不要写成“无标题文档”，改成“XX购物商城”这种真实名字，印象分会高很多。

结构上用语义化标签：头部用<header>，导航用<nav>，主体内容用<main>，商品卡片列表用<section>，底部用<footer>。语义化标签的好处是代码结构一眼能看懂，老师翻你的代码时不用费劲找每一块是干嘛的，而且对搜索引擎友好，如果你做SEO方向的优化也方便。

商品卡片的基本结构是这样：

html复制<div class="product-card">
    <div class="product-img">
        <img src="images/goods1.jpg" alt="商品名称">
    </div>
    <div class="product-info">
        <h3 class="product-name">无线蓝牙耳机</h3>
        <p class="product-desc">轻巧佩戴，超长续航</p>
        <div class="product-bottom">
            <span class="price">¥199.00</span>
            <button class="add-btn" data-id="1" data-name="无线蓝牙耳机" data-price="199.00">加入购物车</button>
        </div>
    </div>
</div>

data-id、data-name、data-price 这几个自定义属性非常关键，后面JavaScript获取商品数据全靠它们。把商品信息挂在HTML标签上，比你在JS里再手动维护一个商品数组要省事得多，而且不容易出现“数据对不上”的问题。

2.2 CSS布局：从Flex到Grid的自适应方案

购物商城的页面布局，我推荐优先用Flex布局，能够覆盖绝大多数场景。Flex布局的核心逻辑就是“一条轴上的空间分配”，它的好处是子元素宽度、间距、对齐方式都很好控制，而且代码量小，理解成本低。

商品列表这种多列布局，用Flex配合flex-wrap: wrap就能实现：

css复制.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.product-card {
    width: 23%;
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

这里重点说两个容易踩坑的地方：

第一，Flex子元素宽度自适应。 很多同学给product-card设置width: 23%之后，发现最后一行商品卡片数量不满时会自动拉伸或出现奇怪的间距。解决方法是给每个卡片设flex: 0 0 23%，意思是“不允许放大、不允许缩小、基础宽度是23%”，这样每张卡片都保持同样的宽度，不会因为内容不同而变形。也可以用flex: 1 1 200px配合max-width，让卡片在宽度足够时自动填满，宽度不足时换行。

第二，gap属性比margin好用得多。 老版本写法往往用margin-right控制间距，结果最后一个元素的margin会“顶出去”，还得用nth-child选择器去单独清零。gap直接写在父元素上，子元素之间的间距统一处理，不会出现多出来边距的问题。当前主流浏览器对gap支持已经很好了，可以放心用。

如果你想把布局做得更工整，可以尝试CSS Grid。Grid适合做二维布局，也就是“同时控制行和列”的场景。购物商城首页的版式其实非常适合用Grid：左侧分类栏固定宽度，右侧商品区自适应剩余宽度。

css复制.main-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
}

这行CSS的意思是：左侧分类栏220像素宽，右侧商品区域占据剩余的1份空间。相比用Flex再套一层结构，Grid的代码更简洁，而且含义清楚。不过我的建议是：如果两者你都只是刚接触，优先玩明白Flex就够了，Grid作为加分项写在代码注释里说明“这里用了Grid实现双栏布局”，老师会觉得你有拓展意识。

2.3 动效细节：字体渐变与涟漪光圈这类加分项

期末大作业想要拿高分，一定不能只做静态页面。CSS动画是性价比很高的加分方向，因为代码量不大，但视觉效果提升非常明显。

字体渐变效果，适合用在商城Logo或者主标题上。实现方式很简单：文字背景渐变 + 背景裁剪 + 透明文字，三行代码：

css复制.logo-text {
    background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 32px;
    font-weight: bold;
}

效果是文字呈现出彩虹渐变色，视觉冲击力很强。需要注意：background-clip: text 的浏览器兼容性虽然已经不错，但-webkit-前缀还是要带着，否则部分浏览器会显示成一块颜色块。

涟漪光圈扩散动画，适合用在“加入购物车”按钮的反馈上。点击按钮时，以点击位置为中心扩散出一圈水波纹，这个效果实现起来也不难，核心是伪元素配合动画帧：

css复制.add-btn {
    position: relative;
    overflow: hidden;
}

.add-btn::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.add-btn:active::after {
    transform: translate(-50%, -50%) scale(10);
    opacity: 1;
    transition: transform 0.5s, opacity 0.8s;
}

这个效果的核心思路是：让一个圆形伪元素从点击中心放大、淡出。虽然我在这里写的是:active触发（点击时）的版本，更进阶的做法是用JavaScript监听点击位置，把top和left设成鼠标事件的坐标，让涟漪从手指按下的精确位置扩散。对期末作业来说，:active版本已经足够，而且不用写JS。

我个人总结的一个原则：动效是为交互服务的，不是单纯堆砌特效。你给商品卡片加hover上浮效果，用户会觉得“这个按钮可以点”；你给Logo加渐变，页面显得精致。但如果整个页面各种动画闪个不停，反而会让老师觉得你审美有问题。控制在一到两个核心动效就够了。

3. JavaScript交互与购物车逻辑实现

3.1 数据渲染：用数组驱动商品列表

如果你有了一点基础，建议直接用JavaScript渲染商品列表，而不是在HTML里手写十几个商品卡片。这么做有两个好处：一是代码简洁，商品数据全在一个数组里，想改价格、加商品，直接改数组就行，不用复制粘贴二十行HTML；二是数组遍历、对象操作、模板字符串这些JS核心语法全用上了，答辩的时候被问到“你用什么方式管理数据”也有话可说。

商品数据数组：

javascript复制const products = [
    { id: 1, name: '无线蓝牙耳机', desc: '轻巧佩戴，超长续航', price: 199.00, img: 'images/goods1.jpg' },
    { id: 2, name: '运动手环', desc: '心率监测，IP68防水', price: 159.00, img: 'images/goods2.jpg' },
    { id: 3, name: '便携充电宝', desc: '20000mAh大容量', price: 89.00, img: 'images/goods3.jpg' },
    { id: 4, name: '桌面台灯', desc: '三档调光，护眼无频闪', price: 129.00, img: 'images/goods4.jpg' },
];

渲染函数：

javascript复制function renderProducts() {
    const list = document.getElementById('productList');
    list.innerHTML = products.map(item => `
        <div class="product-card">
            <div class="product-img">
                <img src="${item.img}" alt="${item.name}">
            </div>
            <div class="product-info">
                <h3 class="product-name">${item.name}</h3>
                <p class="product-desc">${item.desc}</p>
                <div class="product-bottom">
                    <span class="price">¥${item.price.toFixed(2)}</span>
                    <button class="add-btn" 
                        data-id="${item.id}" 
                        data-name="${item.name}" 
                        data-price="${item.price}">加入购物车</button>
                </div>
            </div>
        </div>
    `).join('');
}

这里用到了模板字符串（${}），它比字符串拼接好用太多，代码里不用写一堆加号和引号，结构也清晰。这里有一个容易出的问题：join('') 必须写。map返回的是一个数组，如果直接赋给innerHTML，数组会被自动转成字符串，但元素之间会带逗号，可能会导致布局多出奇怪的空隙。join('')就是把数组元素无缝拼接成一个字符串。

3.2 购物车加减与总价计算

购物车是整个项目的核心逻辑，也是面试和答辩时老师最喜欢追问的部分。我推荐用对象来存储购物车数据，而不是数组。原因是：对象可以用商品id作为键，方便判断某个商品是否已经在购物车里；而且修改数量时不需要遍历查找索引，直接cart[id].count++就行。

javascript复制let cart = {}; // 结构：{ "1": { name: '...', price: 199.00, count: 2 } }

function addToCart(id, name, price) {
    if (cart[id]) {
        cart[id].count++;
    } else {
        cart[id] = { name: name, price: price, count: 1 };
    }
    renderCart();
}

渲染购物车列表的函数是这个逻辑的第二个关键点：

javascript复制function renderCart() {
    const cartItems = document.getElementById('cartItems');
    const cartKeys = Object.keys(cart);
    if (cartKeys.length === 0) {
        cartItems.innerHTML = '<p class="empty-cart">购物车还是空的</p>';
        document.getElementById('cartTotal').innerText = '¥0.00';
        return;
    }
    let totalPrice = 0;
    let html = '';
    cartKeys.forEach(id => {
        const item = cart[id];
        const subtotal = item.price * item.count;
        totalPrice += subtotal;
        html += `
            <div class="cart-item">
                <div class="cart-item-info">
                    <span class="cart-item-name">${item.name}</span>
                </div>
                <div class="cart-item-ctrl">
                    <button class="minus-btn" data-id="${id}">-</button>
                    <span class="cart-item-count">${item.count}</span>
                    <button class="plus-btn" data-id="${id}">+</button>
                </div>
                <span class="cart-item-price">¥${subtotal.toFixed(2)}</span>
            </div>
        `;
    });
    cartItems.innerHTML = html;
    document.getElementById('cartTotal').innerText = '¥' + totalPrice.toFixed(2);
}

加减按钮的事件处理是新手最容易写崩的地方。常见的错误做法是：给每个按钮都绑定一个独立的事件函数，结果点了之后有时触发、有时不触发。正确做法是使用事件委托：把点击事件绑定到购物车列表的父容器上，然后根据event.target的class或data-id来判断点击的是哪个按钮。

javascript复制document.getElementById('cartItems').addEventListener('click', function(e) {
    const target = e.target;
    const id = target.getAttribute('data-id');
    if (!id) return;
    if (target.classList.contains('plus-btn')) {
        cart[id].count++;
    } else if (target.classList.contains('minus-btn')) {
        cart[id].count--;
        if (cart[id].count <= 0) {
            delete cart[id];
        }
    }
    renderCart();
});

这里面的关键知识点：事件冒泡。子元素的点击事件会顺着DOM树一层层往上冒，父容器可以捕获到，然后通过e.target拿到真正被点击的元素。用这种写法，你以后动态添加的商品按钮不需要重新绑定事件，也能正常响应，逻辑统一且不出bug。

总价计算逻辑要特别注意浮点数问题。0.1 + 0.2在JavaScript里不等于0.3，原因是浮点数在计算机里有精度误差。实际开发中的处理方式是：不要直接用item.price * item.count的结果去累加，这样多次累加后误差可能会累积。稳妥做法是先用Math.round(price * 100)计算“分”为单位的整数，最后显示时再除以100并调用toFixed(2)。

javascript复制// 推荐写法
const subtotalCents = Math.round(item.price * 100) * item.count;
totalCents += subtotalCents;
// 最后：'¥' + (totalCents / 100).toFixed(2)

不处理这个精度问题，大多数作业也不会被扣分，毕竟价格都是最多两位小数，误差肉眼几乎看不出来。但答辩时你若能主动说出“这里我考虑了浮点精度问题，用整数分来累加”，这是很加分的细节。

3.3 事件绑定的正确姿势：别用 javascript:void(0)

很多同学在抄网上代码时，会发现按钮的onclick属性里写着javascript:void(0)，或者 <a href="javascript:void(0)">。这个写法的本意是“点击链接但不产生页面跳转”，它确实能屏蔽默认行为，但它是一个典型的“历史遗留写法”，在现代开发中已经不推荐使用。

它的问题在于：把JavaScript写在HTML标签里，导致行为层和结构层耦合，代码不好维护；而且有概率触发某些浏览器安全策略的拦载，你点击按钮后页面毫无反应，浏览器的控制台还会报一个不痛不痒的错误。我自己调试的时候就被这玩意坑过：明明事件绑定了，点击却没有任何反馈，排查了半天发现是href="javascript:void(0)"在某个浏览器内核下触发了异常。

正确的做法是：按钮用<button>标签，不需要href；如果有链接跳转需求，用<a>标签配合JS的e.preventDefault()来阻止默认跳转。

javascript复制document.querySelector('.cart-toggle').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('cartPanel').classList.add('open');
});

记住一个原则：HTML只负责结构，JavaScript统一通过事件监听来挂行为。这样代码结构清晰，答值时老师问你“点击购物车按钮之后是怎么触发显示逻辑的”，你可以直接答出来“在JS里用addEventListener给它绑定了点击事件”。

3.4 一键返回顶部：最简单的算法也要有体验感

搜索热词里经常出现“html一键返回顶部算法”，这个功能虽然简单，但它的实现里藏着“是否理解用户体验”的判断。最简单的版本就是给按钮绑一个点击事件，然后执行window.scrollTo(0, 0)，页面立刻跳到顶部。但实际体验并不好，因为用户从底部一下被甩到顶部，视觉上没有缓冲，很多人会有“页面闪了一下”的感觉。

推荐平滑返回顶部：

javascript复制function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

代码非常简单，浏览器原生支持平滑滚动，不需要你自己写定时器动画。

如果你想展示一下自己会写动画逻辑，可以手写一个帧动画版本：

javascript复制function smoothScrollToTop() {
    const currentY = window.scrollY;
    const duration = 300;
    const startTime = performance.now();
    function step(now) {
        const progress = Math.min((now - startTime) / duration, 1);
        window.scrollTo(0, currentY * (1 - progress));
        if (progress < 1) {
            requestAnimationFrame(step);
        }
    }
    requestAnimationFrame(step);
}

这里的核心算法是线性插值：从当前滚动位置到顶部0，按时间比例逐渐移动。requestAnimationFrame会按照屏幕刷新率（一般是60帧每秒）来调度动画帧，比setInterval更平滑、更省资源，因为浏览器会在即将重绘时调用它，不会出现丢帧或卡顿。

“返回顶部”按钮一般固定定位在页面右下角：

css复制.back-top {
    position: fixed;
    right: 30px;
    bottom: 50px;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    display: none;
    z-index: 999;
}

配合一个滚动监听，滚动超过一定距离才显示按钮：

javascript复制window.addEventListener('scroll', function() {
    const btn = document.getElementById('backTop');
    if (window.scrollY > 300) {
        btn.style.display = 'block';
    } else {
        btn.style.display = 'none';
    }
});

这个功能的实现思路本身就是很好的答辩素材：界面反馈、滚动监听、动画调度、性能优化，每一点都能往外展开说。

4. 实操过程：从零到上手的完整流程记录

4.1 环境准备与文件组织

这个项目不需要安装任何框架或依赖，你只需要一个文本编辑器和一个现代浏览器就能完成全部开发。我推荐使用VS Code，原因不是它有多炫酷，而是它自带了很多方便的功能：代码高亮、自动补全、Emmet快速写法、Live Server插件等等。

文件组织建议这样放：

code复制shopping-mall/
├── index.html          // 首页
├── css/
│   ├── style.css       // 全局样式
│   └── cart.css        // 购物车相关样式
├── js/
│   └── main.js         // 全部JavaScript逻辑
└── images/
    ├── goods1.jpg
    ├── goods2.jpg
    └── logo.png

两个细节需要注意：

图片资源如果没有真实的商品图，可以用占位图服务，比如在<img>标签里写https://picsum.photos/300/300这种在线随机图片链接。这样页面会显得真实，也不用担心版权问题。但如果你交作业的时候需要离线演示，建议下载几张图片放到images目录下，避免链接失效。
CSS文件和JS文件都用相对路径引入（css/style.css、js/main.js），不要写成C:\users\xxx\...这样的绝对路径，否则你在自己电脑上能打开，换一台电脑就全废了。

我建议在做页面之前，先用开发工具打开一个简单的HTML模板确认所有文件路径正确，再开始写样式和逻辑。很多同学最后交上去的技能包，老师在自己电脑上一打开，图片全是裂的。不要在这些基础地方丢分。

4.2 分步搭建：一个可直接落地的开发顺序

经常有同学问我：项目太多代码，不知道先写哪块。我分享一下我自己的搭建顺序，按这个来基本不会乱：

第一步：写HTML结构骨架。 先把页面上所有元素都写出来，不需要想样式和交互，只把结构摆对。导航栏、商品列表区域、购物车面板、返回顶部按钮、页脚，都放好。这步的目的是让页面“内容齐了”，即使没有CSS也能看到所有模块的存在。

第二步：引入CSS写基础样式。 把颜色、字体、间距、布局先大致写出来。这个阶段不用追求完美，先把页面整体观感调到及格线以上。核心工作是布局是否正常、有没有元素重叠、滚动是否异常。

第三步：写JavaScript核心业务。 商品渲染、购物车加减、总价计算、返回顶部，这几个功能逐一实现。每写完一个功能，在浏览器里测试一下，不要攒到最后一次性测试，不然全是bug，排查到崩溃。

第四步：打磨细节。 加了CSS动画、hover效果、响应式适配、空购物车提示等等。这些是“加分项”，就算做得不够完美，也不影响整体框架的完整性。

第五步：整体测试。 在不同浏览器、不同窗口尺寸下测试。用浏览器开发者工具的“设备工具栏”（快捷键一般是Ctrl+Shift+M）模拟手机屏幕，检查布局有没有错位。

这个顺序的核心逻辑是：先结构、再样式、再行为、最后优化。每一步都有可验证的结果，哪一步出了问题，你至少知道是哪个模块的锅，而不是像无头苍蝇一样在几千行代码里乱找。

4.3 响应式兼容：电脑、手机都要能看

期末作业的高分技巧之一就是响应式布局。很多同学做出来的页面，在电脑大屏幕上效果正常，一放到手机上就全乱套。要解决这个问题，核心靠Media Query媒体查询加Flex布局。

我推荐一套比较省心的响应式断点方案：

css复制/* 默认样式：适配桌面端（>992px） */

/* 平板：768px ~ 992px */
@media screen and (max-width: 992px) {
    .product-card {
        width: 30%; /* 一行放3个 */
    }
}

/* 手机：<768px */
@media screen and (max-width: 768px) {
    .main-layout {
        grid-template-columns: 1fr; /* 侧边栏移到内容上面 */
    }
    .product-card {
        width: 48%; /* 一行放2个 */
    }
    .nav-menu {
        display: none; /* 隐藏不重要的导航链接 */
    }
}

这里的断点数值不是固定的，你可以根据自己的页面结构调整。但核心思路是：大屏幕显示多列，小屏幕显示少列，极窄屏幕直接单列。

调试时，切换宽度时发现某个元素“越界”了，先检查它是否设置了box-sizing: border-box。我在讲布局时一直默认使用了这个属性，其实它需要显式声明：

css复制* {
    box-sizing: border-box;
}

没有这个设置，元素的width是指内容的宽度，padding和border会额外加上去，导致实际占据空间比预期大。设成border-box后，width包含了内边距和边框，布局计算会直观很多。这是前端新手最容易忽略的“全局配置”。

还有一个小细节：图片要设置max-width: 100%，不然在窄屏下图片会撑破父容器，导致整体布局错乱。

css复制.product-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

object-fit: cover的作用是让图片保持比例填充容器，不会变形。图片原始尺寸很大时，即使不写width: 100%它也可能撑破容器，这点务必加上。

5. 常见问题排查与避坑实录

5.1 HTML文件无法预览/乱码的排查

问题1：“HTML文件双击打开后是一片空白/显示源代码”

这种情况绝大多数是因为文件扩展名不对，比如保存成了index.html.txt。Windows系统默认隐藏已知文件的扩展名，你看到的是index.html，实际文件名是index.html.txt，浏览器自然不认识。解决办法：在文件资源管理器中勾选“显示文件扩展名”，确认文件真实后缀是.html。

问题2：“页面打开后中文全是乱码”

先检查<meta charset="UTF-8">是否在<head>里，而且位置靠前。如果确认填了还乱，那就是文件本身的编码格式不对。用VS Code打开文件，看右下角显示的编码，如果显示的是GB2312或GBK，点击它选择“通过编码保存”，改成UTF-8再保存。

问题3：“明明保存了代码，浏览器刷新还是旧页面”

浏览器缓存搞的鬼。在页面按Ctrl+Shift+R强制刷新，清掉缓存重新加载。如果还不行，关掉浏览器重新打开文件。长期开发建议用VS Code的Live Server插件，保存后浏览器自动刷新，还能模拟服务器环境，避免一些本地文件协议下的兼容性问题。

5.2 JavaScript运行时报错的几个高频原因

我帮别人排查过很多份购物商城代码，报错的原因翻来覆去就那么几种：

第一，JS文件没有正确引入。 最常见的问题是<script>标签放在了页面内容的<head>里，而JS代码又直接操作了DOM元素。浏览器加载HTML是自上而下的，当JS执行时，后面的DOM元素还没有被解析出来，document.getElementById找不到对应节点，返回null，于是报“Cannot read properties of null (reading 'innerHTML')”之类的错误。

解决办法有两个：一是把<script src="js/main.js"></script>放到<body>的底部，这是最稳妥的；二是在JS代码外面包一层window.onload或DOMContentLoaded事件，等页面完全解析后再执行。

javascript复制window.onload = function() {
    // 在这里写所有初始化代码
    renderProducts();
    initCart();
};

第二，addEventListener拼写或大小写错误。 JavaScript是区分大小写的，AddeventListener和addEventListener完全是两个东西。这种报错通常会说“xxx is not a function”，仔细看控制台提示，一般能快速定位。

第三，作用域问题导致变量未定义。 比如你在函数里用let cart = {}声明了购物车对象，但是在另一个函数里访问cart，发现它不存在。原因是let声明有块级作用域，函数外访问不到。解决办法：把购物车对象、初始化数据这些全局状态声明在所有函数外面，或者用一个统一的对象/模块来管理。

我的一个建议是：尽量用let和const声明变量，不要用var。var的作用域规则比较混乱，容易在循环和函数嵌套时产生意外bug。const用于声明不会改变的变量（如商品数组），let用于可能变化的变量（如购物车对象），这个习惯越早养成越好。

5.3 兼容性大坑：CSS效果在你电脑上失效

期末作业最容易出现的情况是：你的代码在电脑上正常，在老师的电脑上打开效果却消失了。这不是代码有毒，而是浏览器兼容性问题。

常见的兼容性问题：

gap属性在很老版本的Chrome/Safari中不支持。万不得已的方案是用margin-right代替，或者用Flex布局的space-between来撑开间距。我的建议是：如果你的浏览器是最新版本，直接使用gap没问题；如果你不确定老师用什么浏览器，可以在交作业时附一个说明文档，注明“推荐使用Chrome最新版打开”。
CSS动画的-webkit-前缀，比如-webkit-background-clip: text。不要依赖自动添加前缀的工具，手动写上也花不了多长时间。
Flex布局在旧版浏览器中有各种怪癖，但2025年了，正常使用问题不大。如果遇到布局错乱，优先检查父容器是否设置了display: flex，子元素是否设置了flex-shrink导致被压缩。我在实战中遇到过的问题是：移动端页面的底部导航用了Flex，在iPhone某些浏览器上出现子元素被压缩成细条的情况。解决办法是在子元素上设置flex-shrink: 0，禁止被压缩。

还有一个很隐蔽的坑：多个CSS样式合并/覆盖顺序。同一个元素上，如果多个选择器设置了同样的属性，最终的显示效果取决于“优先级”而不是“书写顺序”。比如：

css复制.product-card { width: 23%; }
.card-special { width: 100%; }

两个选择器都是单个class，优先级相同，这时后面写的覆盖前面写的。但如果选择器更具体，比如.list .product-card，它的优先级更高，无论写在哪里都会赢。出现样式不生效时，先用浏览器开发者工具选中元素，在右侧“Styles”面板里看哪个样式被划掉了，排查思路会清晰很多。

6. 提交与展示：让老师眼前一亮的小技巧

6.1 功能演示脚本：不要现场翻车

期末答辩的时候，最尴尬的事情就是你一边操作一边现场想下一步做什么，结果中途卡住了。我建议你在答辩前写好一个演示脚本，按顺序走一遍：

打开首页，先展示页面整体效果，说一句“这个页面包括导航、商品展示、购物车、底部信息四个模块”。
滚到商品列表区域，演示hover效果，简单提一句“商品卡片悬浮时会有一个上浮效果，这是通过CSS的transition实现的”。
点击“加入购物车”按钮，重点说明“点击后商品以对象形式存入购物车，数量加1”。
展开购物车面板，点击加减按钮，演示数量变化和总价联动。
滚动页面，演示返回顶部按钮的出现逻辑和点击后的平滑滚动效果。
切换手机模拟模式，展示响应式布局。

整个演示过程控制在3到5分钟内，把每个功能点说到“我做的是什么大概是怎么实现的”这个程度就够了，不需要念代码。

6.2 代码规范与注释：老师最快了解你的方式

期末作业的代码质量印象分很重要。我做前端的时候常看到一些代码：“代码能跑，但变量名全是a、b、c”，这种代码答辩时老师看一眼就不想细看了。

几个提升代码观感的简单方法：

文件命名用语义化名称：main.js表示主逻辑，style.css表示全局样式，cart.css表示购物车样式。
函数名用动词词组：renderProducts表示渲染商品，addToCart表示加入购物车，renderCart表示重新渲染购物车。一看函数名就知道它是干嘛的。
关键代码块加注释，但不要每行都加。核心逻辑和复杂逻辑加注释，比如“购物车对象结构：{ id: { name, price, count } }”这类信息，写清楚就行了。
保持缩进统一。用VS Code打开文件后按Shift+Alt+F可以自动格式化整个文档，这一步必须在交作业前做。我见过一个同学，代码里tab和空格混用，在别人电脑上打开后缩进全乱了，看着非常难受，分数也受影响。

答辩时老师让你解释代码，你可以按照“这个函数渲染商品列表，数据来源是products数组，通过模板字符串生成HTML，插入到productList容器里”这样的逻辑来介绍。表达清楚、逻辑通顺，即使代码有小瑕疵，老师也会觉得你的思路是清晰的。

6.3 展示形式：做一个简短的README

如果你想让作业看起来更专业，可以在项目根目录放一个README.md（纯文本文件就行），写清楚：项目名称、功能列表、运行方式、浏览器兼容说明、代码结构说明。内容不用长，一张表格加几行文字就够。

举例：

markdown复制# 购物商城期末作业

## 功能列表
- 商品列表展示（HTML+CSS+JS动态渲染）
- 加入购物车 / 修改数量 / 删除商品
- 购物车总价实时计算
- 平滑返回顶部按钮
- 响应式布局（适配手机/平板/电脑）

## 运行方式
直接双击 index.html 在浏览器中打开即可，无需安装依赖。

推荐使用 Chrome 最新版打开。

## 代码结构
- index.html：页面主体结构
- css/style.css：全局样式
- css/cart.css：购物车样式
- js/main.js：商品渲染与购物车交互逻辑

这个README文件，老师如果看了，会觉得你做事有条理。如果没看，你写了自己也不亏。这属于“多做一步就能加分”的投入。

最后再分享一点个人经验：做期末大作业的时候，不要只盯着“做出来”这个目标，尽量想着“如果我是老师，我会给什么样的作业打高分”。老师不会要求你把页面做得像淘宝那么复杂，但你对基础知识的掌握程度、代码的规范程度、对细节的用心程度，就是通过这样一个个项目展现出来的。把每个基础功能写扎实，比堆砌花里胡哨的效果更值得投入精力。

HTML+CSS+JavaScript购物商城实战：从布局到购物车逻辑全解析