大学生HTML期末大作业：美食网站从规划到实现全解析-嵌云网-嵌入式AI开发资源站

每年期末季都会遇到一批同学来问同一个问题：HTML+CSS+JavaScript的美食网站大作业到底怎么做得像样一点？说实话，这个题目在高校里几乎快被做成“标准模板”了——红橙配色、圆角卡片、几张菜品图一摆、鼠标划上去有点阴影效果，就交差了。但既然花了整个学期去学前端三件套，期末作业完全值得做得更完整、更有逻辑一些，既能拿高分，答辩的时候也有的聊。

这篇内容我按自己做项目评审时比较看重的几个角度来拆解：先讲整体怎么规划，再讲页面结构、样式细节、交互逻辑分别怎么做，最后整理一些高频报错和答辩现场容易被追问的问题。整篇内容围绕“大学生HTML期末大作业——美食网站”这个选题展开，用的全是原生HTML+CSS+JavaScript，不涉及任何框架，适合初学者直接参考，也适合想给期末作业加分的同学照着优化。

1. 项目整体设计与思路拆解

1.1 拿到选题后先别急着写代码

很多同学拿到“美食网站”这个题目，第一反应是从网上找个模板改一改，或者打开编辑器直接写首页。这两种方式都会踩同一个坑：做到一半发现页面之间跳转关系混乱，样式越写越多但效果越来越差，最后自己也看不懂代码。我做项目的时候习惯先花半小时把整体框架定下来，哪怕只是在一张纸上画几个方框，都比直接动手写强。

美食网站虽然听起来只是一个“展示菜品的站点”，但它天然包含了一套完整的信息层级：用户进入首页，看到品牌形象和推荐菜品；进入菜单页，按分类浏览菜品；点进某个菜品，看到详细信息和图片；最后可能还会有一个“关于我们”或者留言功能。这四层关系正好对应了前端课程里最基础但也最核心的页面组织能力。期末大作业如果只做一个首页，技术上就显得单薄；但如果一口气做五六个页面，代码量和维护成本又会失控。我的建议是控制在四个页面左右：首页、菜品列表页、菜品详情页、留言或者关于页面。

选这四个页面的逻辑很清晰：首页负责展示整体视觉风格和设计感；列表页需要用到数组渲染和分类筛选，是JavaScript的主战场；详情页要处理参数传递和动态内容；留言页则用来做表单验证和本地存储。每个页面承担的任务不同，覆盖的知识点恰好又是课程大纲里最常考的几个模块。这样安排下来，页面数量不多，但每页都有自己的技术重点，答辩评阅的时候老师问什么你都能答上来。

1.2 页面规划与技术选型背后的考量

确定好页面数量之后，下一步是决定用什么技术方案。这里要先说明一个背景：大学生期末大作业通常有明确的要求，大多数课程规定只能用原生HTML、CSS和JavaScript，不允许使用Vue、React这类框架，也不建议用Bootstrap。有些同学觉得这是限制，但我个人觉得这是好事——框架帮你把很多问题藏起来了，用原生代码反而能逼着你把原理搞明白。

整个项目的目录结构也建议在一开始就定好，别把所有文件堆在一个文件夹里。我常用的结构是这样：

text复制food-website/
├── index.html          // 首页
├── menu.html           // 菜品列表页
├── detail.html         // 菜品详情页
├── about.html          // 关于/留言页
├── css/
│   ├── style.css       // 全局样式
│   └── responsive.css  // 响应式样式
├── js/
│   ├── common.js       // 公共交互（导航、回到顶部、轮播）
│   ├── menu.js         // 列表页筛选逻辑
│   ├── detail.js       // 详情页动态渲染
│   └── about.js        // 表单验证与本地存储
└── images/
    ├── banner/         // 轮播图
    ├── dishes/         // 菜品图
    └── icons/          // 小图标

写代码之前把目录分好，表面上只是“整理习惯”，但实际作用很大。一是css和js文件分离后，每个文件职责单一，调试的时候定位问题快得多；二是老师查看代码的时候一眼就能看出你的工程意识，这在评分标准里往往被列为“代码规范”的加分项。图片单独放一个文件夹还有一个好处：HTML里引用图片路径时用相对路径会非常清晰，比如images/dishes/宫保鸡丁.jpg，不会出现路径混乱导致图片加载不出来的问题。

技术方案上，我用的是原生三件套加少量简单布局技巧。页面整体采用通栏加内容区定宽的结构，内容区最大宽度设为1200px，居中显示。这种结构虽然朴素，但稳——不管在什么尺寸的屏幕上都不会跑偏，而且写起来简单，不容易出兼容性问题。

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

2. 页面结构与核心模块实现

2.1 导航栏与页脚：全站统一的骨架

美食网站的导航栏看起来简单，但有几个细节值得注意。导航栏需要固定在最顶部，用户往下滚动页面时依然能看到导航入口；菜单项要能在不同页面之间正确跳转；在当前页面时，对应的菜单项应该有高亮状态，告诉用户“你正处在哪个页面”。

先看HTML结构。我用的是语义化标签<header>加<nav>，而不是清一色的<div>。这种细节在检查代码时很加分，因为语义化标签是HTML5的考点之一：

html复制<header class="site-header">
    <nav class="navbar">
        <div class="logo">
            <a href="index.html">
                <img src="images/icons/logo.png" alt="食光小馆">
                <span>食光小馆</span>
            </a>
        </div>
        <ul class="nav-links">
            <li><a href="index.html" class="active">首页</a></li>
            <li><a href="menu.html">菜品菜单</a></li>
            <li><a href="detail.html">菜品详情</a></li>
            <li><a href="about.html">关于我们</a></li>
        </ul>
    </nav>
</header>

CSS方面要注意两点。固定导航用position: fixed; top: 0; left: 0; width: 100%;，但因为它脱离了文档流，会遮住页面顶部内容，所以要给body加一个padding-top，值等于导航栏高度。这个坑非常隐蔽，很多同学做完后发现首页顶部一块被导航挡得严严实实，就是漏了这一步。导航栏高度我用的是70px，因此body的padding-top也设成70px。

高亮状态的处理有几种做法。最直接的就是在HTML里手动给当前页面的<a>标签加class="active"，然后配合CSS做样式区分：

css复制.nav-links li a.active {
    color: #e74c3c;
    font-weight: 600;
    border-bottom: 2px solid #e74c3c;
}

但这种写法的缺点很明显：每新建一个页面就要手动改一次，而且四个页面之间来回切换时，你得记住每个页面里哪项是高亮的。如果你学了JavaScript，可以用更聪明的办法：在common.js里获取当前页面的文件名，然后循环匹配导航里的链接，自动加上active类：

javascript复制const currentPage = window.location.pathname.split('/').pop();
const navLinks = document.querySelectorAll('.nav-links a');
navLinks.forEach(function(link) {
    if (link.getAttribute('href') === currentPage) {
        link.classList.add('active');
    }
});

这段代码放在公共JS文件里，四个页面都能用，而且以后多加页面也不需要改动。实际做项目的时候，我更喜欢这种“代码自动判断”的思路，它能体现你对JavaScript操作DOM的理解，而不只是会写静态页面。

2.2 首页轮播图与美食卡片布局

首页是整个项目的门面，也是视觉分数的主要来源。我的首页规划了四个模块：顶部轮播图、特色菜品推荐、菜品分类展示、用户评价或品牌故事。这四个模块在视觉上形成了“大图-卡片-分类-文字”的节奏，不会让页面显得单调。

轮播图是首页的重头戏，也是很多同学最头疼的部分。先说HTML结构，我习惯用一个<div class="banner">容器，里面放一个ul列表，每个li是一张轮播图，图片用<img>标签正常引进来。往下放两个切换按钮（左右箭头），再放一组小圆点指示器。结构看起来是这样：

html复制<div class="banner-wrapper">
    <div class="banner-list" id="bannerList">
        <div class="banner-slide active">
            <img src="images/banner/banner1.jpg" alt="招牌菜推荐">
        </div>
        <div class="banner-slide">
            <img src="images/banner/banner2.jpg" alt="特色小吃">
        </div>
        <div class="banner-slide">
            <img src="images/banner/banner3.jpg" alt="甜品饮品">
        </div>
    </div>
    <button class="banner-btn prev" id="prevBtn">&#10094;</button>
    <button class="banner-btn next" id="nextBtn">&#10095;</button>
    <div class="banner-dots" id="bannerDots">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</div>

轮播的逻辑其实就一句话：控制当前展示哪一张图，然后定时切换。常用的实现方式有两种，一种是把所有图片横向排成一排，通过改变ul的transform: translateX()来移动；另一种是控制每张图的display属性，显示当前激活的那一张，隐藏其他。我推荐第二种，因为它的代码量更少，也更容易理解。切换的核心逻辑就是用一个currentIndex记录当前在第几张，showSlide(index)函数里把所有slide的active类去掉，再把currentIndex对应的那张加上：

javascript复制let currentIndex = 0;
const slides = document.querySelectorAll('.banner-slide');
const dots = document.querySelectorAll('.dot');

function showSlide(index) {
    if (index < 0) currentIndex = slides.length - 1;
    else if (index >= slides.length) currentIndex = 0;
    else currentIndex = index;

    slides.forEach(function(slide, i) {
        if (i === currentIndex) {
            slide.classList.add('active');
        } else {
            slide.classList.remove('active');
        }
    });

    dots.forEach(function(dot, i) {
        dot.classList.toggle('active', i === currentIndex);
    });
}

document.getElementById('prevBtn').addEventListener('click', function() {
    showSlide(currentIndex - 1);
});

document.getElementById('nextBtn').addEventListener('click', function() {
    showSlide(currentIndex + 1);
});

setInterval(function() {
    showSlide(currentIndex + 1);
}, 3000);

这里有三处细节容易踩坑。第一，setInterval设置的自动轮播如果不清理，用户手动点击按钮后，下一次自动切换可能会和点击冲突，导致跳两张图。解决办法是在用户点击时先clearInterval，再重新开启一个定时器。第二，头部和轮播图同时存在时，轮播图的margin-top要预留导航栏的高度，否则图片会被挡住一部分。第三，轮播图的图片尺寸尽量统一，比如全部设成1200px宽、480px高，并在CSS里用object-fit: cover裁剪，这样不会出现某张图拉伸变形的情况。

美食卡片布局是另一个重点。我用Grid布局来实现，一行四列，每列一个卡片。初始HTML结构是：

html复制<section class="featured-section">
    <h2 class="section-title">招牌推荐</h2>
    <div class="dish-grid" id="featuredDishes">
        <!-- 卡片通过JS渲染，也可以先写死 -->
    </div>
</section>

卡片本身包含三张图信息：图片、菜名、价格、简介。我建议先用静态HTML把一部分卡片写出来，后续再在“菜品列表页”用JavaScript动态渲染。这样首页能保证加载速度快，老师看代码时也能看到完整的HTML结构，不会让人觉得全站都是空壳子。

卡片样式的核心是hover效果。我用的是“图片轻微放大+阴影加深”，实现起来很稳定：

css复制.dish-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dish-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.dish-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.dish-card:hover img {
    transform: scale(1.05);
}

这套写法的好处在于动画过程非常平滑，而且只需要定义CSS，不需要额外写JavaScript。很多同学想用鼠标移入移出做放大效果，第一反应是写mouseenter、mouseleave事件，但纯CSS就能解决的问题没必要动用JS，还能减轻代码复杂度。

2.3 菜品详情页与搜索功能的实现思路

菜品列表页和详情页是JavaScript发挥作用最大的两个页面。但好多作业里这两个页面只是静态展示，完全没有交互，这非常可惜。列表页其实很适合做两件事：一是按分类筛选，二是按价格或销量排序。这两个功能合在一起，技术难度适中，但能显著提升项目的完整度。

我先把菜品数据用一个数组存起来。要注意的是，期末大作业阶段还没学到后端，数据只能存在前端JavaScript里。常见做法是定义一组对象数组：

javascript复制const dishes = [
    { id: 1, name: '宫保鸡丁', category: '热菜', price: 38, sales: 220, img: 'images/dishes/gongbao.jpg', desc: '经典川菜，鸡丁滑嫩，花生酥脆。' },
    { id: 2, name: '麻婆豆腐', category: '热菜', price: 28, sales: 180, img: 'images/dishes/mapo.jpg', desc: '麻辣鲜香，豆腐嫩滑。' },
    { id: 3, name: '水晶虾饺', category: '点心', price: 32, sales: 150, img: 'images/dishes/xiashuijiao.jpg', desc: '皮薄馅大，鲜美多汁。' }
    // 更多菜品数据...
];

有了数据之后，列表页就可以实现分类筛选了。我的思路是：点击某个分类按钮，先按分类条件过滤数组，再重新渲染列表。筛选过程中要注意一点：如果你用了排序功能，两者叠加时要先筛选后排序，避免排序把已经过滤掉的数据又拉回来。

渲染部分，推荐用innerHTML拼接字符串的方式。虽然这种方式在大型项目里存在安全隐患，但在期末作业里完全够用，而且代码直白好懂：

javascript复制function renderDishes(list) {
    const container = document.getElementById('dishContainer');
    let html = '';
    list.forEach(function(dish) {
        html += `
            <div class="dish-card" data-id="${dish.id}">
                <img src="${dish.img}" alt="${dish.name}">
                <div class="dish-info">
                    <h3>${dish.name}</h3>
                    <p class="desc">${dish.desc}</p>
                    <p class="price">¥${dish.price}<span> 已售${dish.sales}</span></p>
                </div>
            </div>
        `;
    });
    container.innerHTML = html;
}

详情页的设计思路是：用户在列表页点击某张卡片，跳到详情页，并且能显示对应的菜品信息。既然纯前端没有数据库，参数传递就用URL的查询字符串来完成。列表页里每个卡片都绑定了点击事件，跳转时带上菜品id：

javascript复制container.addEventListener('click', function(e) {
    const card = e.target.closest('.dish-card');
    if (card) {
        const id = card.getAttribute('data-id');
        window.location.href = 'detail.html?id=' + id;
    }
});

详情页的detail.js则负责解析URL参数，再从数组中找到对应菜品，把信息渲染进页面：

javascript复制function getQueryParam(name) {
    const params = new URLSearchParams(window.location.search);
    return params.get(name);
}

const dishId = parseInt(getQueryParam('id'));
const dish = dishes.find(function(item) {
    return item.id === dishId;
});

if (dish) {
    document.getElementById('dishName').textContent = dish.name;
    document.getElementById('dishImg').src = dish.img;
    document.getElementById('dishPrice').textContent = '¥' + dish.price;
    document.getElementById('dishDesc').textContent = dish.desc;
}

这里有个细节容易出错：菜品id在URL中是字符串，需要parseInt转成数字再和数组里的id比较。如果忘记转换，用严格相等比较时永远找不到菜品，页面会一直白屏。这类问题排查起来又费时间又不显眼，值得提前记住。

搜索功能如果时间充裕，可以在列表页顶部加一个输入框，按名称关键词过滤菜品。实现思路和分类筛选完全一样，只是匹配条件从dish.category === '热菜'改成dish.name.includes(keyword)。这个功能加到项目里属于“锦上添花”，但如果列表页已经做了分类和排序，搜索功能就不建议再加了——不是技术做不到，而是交互逻辑一旦叠加复杂，代码量和出bug的概率都会翻倍，期末阶段稳一点更重要。

3. CSS样式细节与视觉亮点

3.1 布局方案的选型：Flex与Grid怎么用

很多同学在写布局时经常遇到一个问题：到底用Flex还是Grid？选择的标准其实不难：一维布局用Flex，二维布局用Grid。导航栏里的菜单项是水平排列的，这是一维布局，用Flex；美食卡片网格有行也有列，这是二维布局，用Grid。

拿首页的菜品展示区举例，网格布局的写法非常简洁：

css复制.dish-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

这段代码的意思是：4列等宽，间距24px。不管屏幕怎么变，这个网格结构都能稳定成立。如果项目里还打算做响应式，可以用媒体查询在手机屏幕上把网格改成2列：

css复制@media (max-width: 768px) {
    .dish-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

Flex的典型场景是导航栏左右布局和卡片内部信息排列。导航栏左侧是Logo，右侧是菜单项，使用display: flex; justify-content: space-between; align-items: center;一行就摆平了。卡片内部想把图片和信息竖着排列，用flex-direction: column，再配合flex：1让底部对齐，整个卡片看起来就会很整齐。

这里我要特别提醒一个常见误区：很多人习惯用float做整页布局。在CSS刚兴起的年代，float是唯一的布局方案，但现在已经完全被Flex和Grid取代了。课堂上可能还会讲float，但做期末作业时最好别用它来搭主体框架。float布局容易造成父元素高度塌陷，还要用clearfix来清理浮动，代码又长又难维护，而且写出来给老师看，会显得你对现代CSS布局掌握不够。

3.2 配色与字体：让网站更有“食欲感”

做美食网站，配色是第一印象。我的经验是：主色调选暖色系，一般从红、橙、棕三色里挑。这类颜色在心理学上容易让人联想到“热腾腾的食物”“烘焙的香气”，能直接唤起食欲。我在模拟项目里用的是“番茄红”为主色，辅助色选深灰和奶白，整体亮度和饱和度都控制在中高水平。

具体配色方案可以这样拆解：

主色：#e74c3c，用于导航栏高亮、按钮、价格文字、分类标签
辅色：#f39c12，用于小面积点缀，比如评分星星、折扣图标
背景色：#fdf7f0，偏暖的奶白色，比纯白看起来更柔和
文字主色：#2c3e50，深蓝灰色，避免纯黑产生的生硬感
文字辅色：#7f8c8d，用于简介、辅助说明

这些颜色是从热门美食APP的界面里提炼出来的。实际设计时不需要完全照搬，但至少要做到同类色系统一。最忌讳的是每个模块单独挑颜色，结果整个页面红一块、蓝一块、绿一块，视觉上非常杂乱。统一配色最简单的方法是全局定义CSS变量：

css复制:root {
    --primary-color: #e74c3c;
    --accent-color: #f39c12;
    --bg-color: #fdf7f0;
    --text-color: #2c3e50;
    --text-light: #7f8c8d;
}

用的时候直接var(--primary-color)引用。这样以后想整体换主题色，只改一处定义就够了，不用满页面去找具体色值。

字体方面，中文字体的选择比英文字体更值得花心思。系统默认字体虽然能用，但观感普通。我常用的中文字体栈是：

css复制body {
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

标题部分可以加一些字重和字距调整，比如font-weight: 700; letter-spacing: 1px;，让小标题更有设计感。正文的line-height建议设成1.6到1.8，行距太窄读起来非常累，太宽又显得稀疏。我一般用1.7作为默认值。

3.3 响应式适配的断点选择与图片处理

响应式设计对很多初学者来说有点玄学，但其实核心只有一件事：在不同屏幕宽度下，让页面看起来依然舒服。实现手段主要就是媒体查询加弹性单位。我常用的断点有三个：

断点	目标设备	主要调整内容
max-width: 768px	手机	网格变2列、导航折叠、轮播图高度降低
max-width: 992px	平板	网格变3列、卡片间距缩小
min-width: 1200px	桌面	内容区定宽1200px居中

写响应式时要记住一个原则：先写桌面端样式，再通过媒体查询逐步覆盖小屏。虽然现在业界也有移动端优先的写法，但对初学者来说，桌面端优先更容易把握，因为大部分人在笔记本上开发调试，写完桌面端再看手机端的实际效果更直观。

轮播图在手机端最容易出问题。桌面端设定的高度是480px，手机上还保持这个高度就会占满整个屏幕。我一般会在760px断点下把轮播图高度降到300px。同时建议使用max-width: 100%确保大图不超出容器，用height: auto保持比例。

图片的object-fit属性是个宝藏，适用于所有卡片图。比如卡片图片区域统一高度220px，但源码中的图片尺寸可能五花八门，有的是横图有的是竖图。设置object-fit: cover后，图片会在保持比例的前提下填满整个区域，多出来的部分自动裁掉，不会拉伸变形。但要注意，cover会丢掉图片的边缘部分，如果菜品图里的重点信息在边缘，可能被裁掉。稳妥的办法是前期准备图片时就统一宽高比，比如全部做成4:3的横图。

3.4 微交互细节：让页面不那么“死板”

页面交互的“高级感”往往不是靠动画堆砌，而是落在一个个细节里。比如按钮在被按住时有一个轻微的缩放反馈，卡片悬停时图片有缓慢的放大效果，页面滚动时导航栏背景从半透明变成完全不透明。这些细节加在一起，整个网站的手感就出来了。

我总结三个性价比最高的微交互：

按钮hover和active状态：hover时加一层浅色背景，active时transform: scale(0.98)模拟按下感
链接的过渡：给导航链接加transition: color 0.2s，颜色变化从突变变成渐变
滚动顶部提示：页面滚动超过300px后显示“回到顶部”按钮，点击后平滑滑回顶部

回到顶部按钮的实现很简单，功能核心是window.scrollTo：

javascript复制const backTopBtn = document.getElementById('backTop');
window.addEventListener('scroll', function() {
    if (window.scrollY > 300) {
        backTopBtn.classList.add('show');
    } else {
        backTopBtn.classList.remove('show');
    }
});

backTopBtn.addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

CSS方面，给按钮加opacity和visibility的过渡，让它在显示和隐藏时不是突然跳变，而是平滑过渡。这些微交互阐述起来很简单，但你在答辩时能说出每一处设计的意图，就能明显让老师感觉你“不是照着模板改的”。

4. JavaScript交互逻辑与常见坑

4.1 轮播图实现方案对比：不要盲目炫技

轮播图是前端初学者最常接触的交互组件，网上教程非常多，实现方案五花八门。我见过用Swiper插件实现的，也见过用jQuery插件实现的，还有完全靠CSS动画跑的。对于期末大作业，我强烈建议用原生JavaScript写一个最简单版本就行，理由有三条。

第一，课程考核的重点是原生JS基础能力，如果你用了Swiper插件，老师一眼就看出来这不是你写的。第二，插件版本往往包含大量封装好的代码，出了问题你自己都看不懂，答辩时被问一句“这个函数是干什么的”就卡壳了。第三，原生实现几十行代码就够了，完全能讲清楚原理。

我用的是“显示/隐藏类”方案，前面已经贴过核心代码。这个方案的另一个好处是它天然支持响应式，图片不会因为容器宽度变化而错位。相比之下，位移方案需要动态计算偏移量，还要考虑图片加载前后的宽高差异，对新手很不友好。

轮播图有一个细节一定要处理：给自动播放的定时器留一条清理的路。我的做法是把定时器存到一个变量里，用户手动操作时先停掉旧的，再重新开始：

javascript复制let timer = setInterval(autoPlay, 3000);

function resetTimer() {
    clearInterval(timer);
    timer = setInterval(autoPlay, 3000);
}

如果不这样做，用户点了一下按钮，自动轮播还是按原来的节奏切换，可能出现“人点了一下，隔一会儿又自己跳了”的错乱感。这类细节也是答辩时老师容易问到的，提前处理好了会显得考虑周全。

4.2 分类筛选与排序：数组操作的组合拳

菜品列表页是JavaScript逻辑密度最高的页面。我把数据定义在一个数组里，然后通过不同的函数来处理筛选和排序。筛选用的是数组的filter方法，排序用的是sort方法，渲染用的是innerHTML。这三个方法串起来就是一套非常经典的前端数据处理流程。

分步骤看。先给每个分类按钮绑定事件，用自定义属性data-category记录分类名：

html复制<button class="filter-btn active" data-category="all">全部</button>
<button class="filter-btn" data-category="hot">热菜</button>
<button class="filter-btn" data-category="cold">凉菜</button>
<button class="filter-btn" data-category="dessert">甜品</button>

绑定事件并执行筛选：

javascript复制const filterBtns = document.querySelectorAll('.filter-btn');
let currentCategory = 'all';
let currentSort = 'default';

filterBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
        currentCategory = btn.getAttribute('data-category');
        filterBtns.forEach(function(b) {
            b.classList.remove('active');
        });
        btn.classList.add('active');
        updateList();
    });
});

updateList函数负责根据当前分类和排序条件，从原始数组中筛选、排序并渲染：

javascript复制function updateList() {
    let filtered = dishes.filter(function(dish) {
        return currentCategory === 'all' || dish.category === currentCategory;
    });

    if (currentSort === 'price-asc') {
        filtered.sort(function(a, b) {
            return a.price - b.price;
        });
    } else if (currentSort === 'sales-desc') {
        filtered.sort(function(a, b) {
            return b.sales - a.sales;
        });
    }

    renderDishes(filtered);
}

排序按钮和筛选按钮同理，只改currentSort再调用updateList。这一套逻辑写下来，你会发现筛选和排序的叠加什么时候都成立：先filter后sort，数据流非常清晰。如果哪天老师问“如果我想按评分排序再按价格排序怎么办”，你只要在sort函数里增加比较条件就行。

4.3 表单验证与本地存储：留言页的完整闭环

留言页（或者“联系我们”页）是期末项目中容易被忽视但技术上很好用的页面。我的设计是在about.html里放一个表单：姓名、邮箱、留言内容、提交按钮。表单验证的逻辑是：邮箱符合基本格式、姓名非空、留言长度大于10个字，全部通过后才提示“提交成功”，不通过则在对应字段下方显示红色提示文字。

HTML部分用简单的表单结构：

html复制<form id="contactForm" class="contact-form">
    <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" placeholder="请输入姓名">
        <span class="error-message" id="nameError"></span>
    </div>
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" placeholder="请输入邮箱">
        <span class="error-message" id="emailError"></span>
    </div>
    <div class="form-group">
        <label for="message">留言内容</label>
        <textarea id="message" rows="5" placeholder="想说的话"></textarea>
        <span class="error-message" id="messageError"></span>
    </div>
    <button type="submit" class="submit-btn">提交留言</button>
</form>

验证逻辑不复杂，重点是正则表达式的写法。邮箱格式的常用正则是/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/，这个正则可以匹配常见的邮箱格式。姓名判断用.trim()去除首尾空格后再检查长度。留言内容的长度判断要特别注意中文字符的统计，JavaScript的value.length对每个字符按一个长度计算，所以“这是一条留言”长度是6，可以正常用。

提交成功后，把留言内容保存到localStorage里。这个功能在期末项目里属于“加分项”，除了能保存数据，还能在下一次打开页面时把历史留言展示出来。保存和读取的代码很简单：

javascript复制form.addEventListener('submit', function(e) {
    e.preventDefault();
    // ...验证逻辑...
    const messageObj = {
        name: nameValue,
        email: emailValue,
        content: messageValue,
        time: new Date().toLocaleString()
    };
    let history = JSON.parse(localStorage.getItem('messages')) || [];
    history.push(messageObj);
    localStorage.setItem('messages', JSON.stringify(history));
    // 提示提交成功并清空表单
});

读取时只需要：

javascript复制const history = JSON.parse(localStorage.getItem('messages')) || [];

这里一定要记得加|| []这个兜底，否则第一次访问时localStorage.getItem返回null，直接JSON.parse(null)会报错，页面就崩了。这类小问题在期末代码里非常常见，多写一个空数组兜底就能避免。

4.4 数组与DOM操作的性能小提醒

在数据量小的情况下，innerHTML拼接字符串完全没问题，但如果数据量很大或者需要频繁更新，innerHTML重新渲染整个容器会导致页面卡顿。期末作业的数据量一般不超过几十条，不用太担心性能问题，但有两个习惯值得养成。

第一，动态创建的DOM元素如果需要绑定事件，优先用事件委托。所谓事件委托，就是把事件绑定到父容器上，通过事件冒泡找到真正点击的子元素。前面列表页的点击跳转就是这么做的，这样做的好处是：无论子元素怎么增删，事件都能正确触发，不需要每次渲染后重新绑定。第二，尽量避免在循环里反复访问document.getElementById。如果需要循环引用某个DOM元素，把它提前存到变量里，不要每次循环都去查询一次DOM。

这些习惯在期末阶段可能感受不到太大差别，但到后续做更复杂的项目时，能少踩很多坑。

5. 常见问题排查实录与答辩准备

5.1 高频报错与解决方案速查表

做前端项目时，大部分报错都可以归纳为几类。我把学生项目里最常遇到的问题整理成一张速查表，遇到类似情况可以直接对照排查。

图片加载不显示

最常见的三个原因：路径写错、文件名大小写不一致、图片没有放进项目文件夹。检查顺序先看浏览器开发者工具里的Network面板，图片请求如果显示404，就是路径问题。路径方面建议全程用相对路径，比如images/dishes/xxx.jpg，不要用file:///C:/Users/...这种绝对路径。另外确认HTML文件和图片文件夹的相对层级关系。

CSS样式完全不生效

先看HTML里<link>引入路径是否正确，再看CSS文件是否有语法错误。一个常见问题是CSS文件用charset = "UTF-8"声明但保存时选择了其他编码，导致中文注释乱码、后面的规则全部失效。还有一种情况是浏览器缓存，F12打开开发者工具，右键刷新按钮选择“清空缓存并硬性重新加载”。

点击按钮没反应

优先打开浏览器控制台看有没有红色报错。报错文案里最常见的几种：“XXX is not defined”，说明某个变量或函数拼写不一致；“Cannot read properties of null”，说明获取DOM元素的时机不对。后面这种问题多发生在<script>标签放在<head>里、但DOM还没加载完时。解决办法是把<script>放到body结束标签之前，或者用DOMContentLoaded事件包起来：

javascript复制document.addEventListener('DOMContentLoaded', function() {
    // 你的代码
});

轮播图自动播放正常，但手动点击后顺序错乱

大概率是多个定时器叠加了。每次点击都新开一个setInterval，旧的没有清理，结果两个定时器都在跑。把定时器引用存到一个变量里，新开之前先clearInterval，就解决问题。

页面在手机端缩放后布局乱掉

检查<head>里有没有加viewport标签：

html复制<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有这行代码，手机浏览器会按桌面宽度渲染页面，导致布局看起来“缩小了一圈”。这是响应式设计最容易忽略的一步。

5.2 答辩现场高频问题与应对思路

答辩环节里，老师很少会逐行看全部代码，更多的问题是围绕整体结构和技术点展开的。我把模拟答辩时最常被追问的问题整理出来，提前准备比临场发挥靠谱得多。

“为什么用原生JavaScript而不是jQuery或者其他框架？”这个问题要正面回答：原生JS是课程基础，使用原生写代码能更清楚底层原理，也方便展示自己对DOM操作、事件处理、数组方法的掌握程度。用框架反而可能让人觉得你没有真正理解原理。

“这个轮播图是怎么实现的？”顺着两条线讲：一是HTML结构，图片列表加切换按钮加指示器；二是逻辑，维护当前索引，通过增删active类来控制显隐，定时器做自动播放。如果老师追问“为什么要用class切换而不是改display”，可以说class切换更方便统一管理样式，也利于以后扩展动画。

“数据存在哪里？为什么刷新后还能看到？”在留言功能里如果用了localStorage，这就是一个标准回答：浏览器本地存储，数据以字符串形式保存在浏览器中，刷新不丢失。还可以顺带提一句localStorage和sessionStorage的区别：localStorage持久保存，sessionStorage关闭标签页后会清空。这些知识点课堂上都讲过，答上来会加分。

“网站有哪些值得说的亮点？”不要泛泛地说“我做了一个好看的网站”，要按模块来盘点——首页轮播图实现了自动+手动无缝切换，列表页完成了分类筛选和排序组合，详情页通过URL参数实现动态渲染，留言页做了表单验证和本地存储。每个模块一句话，把技术点说清楚，老师就能快速评估你的完成度。

5.3 提交前的自查清单

项目提交前，花半小时按这份清单逐项检查一遍，能让最终质量提升一个档次：

所有页面的导航和页脚是否都能正确跳转到对应页面
轮播图是否有手动和自动两种模式，手动点击后自动播放是否恢复
列表页分类筛选后能否正常跳转详情页
详情页刷新后是否能正确拿到参数并显示内容
表单所有字段是否都做了验证，错误提示是否显示在对应位置
留言提交后刷新页面，历史留言是否还在
浏览器的Console面板有没有红色报错
图片是否能正常显示，路径是否都是相对路径
页面在手机模拟器下是否布局不乱、文字是否可读
代码缩进和注释是否规范，命名是否统一

这份清单里的每一项都对应着一个知识点的实践验证。全部通过之后，项目不仅是一个“能跑的作业”，更是一个完整、有逻辑、经得起提问的个人作品。

最后的几点实操建议

我在实际带项目时发现，做得好的期末作业往往不是代码写得多花哨，而是把基础功能做扎实、把每一处交互的边界情况都考虑到了。比如轮播图切到最后一张时能不能回环到第一张，筛选后列表为空时会不会显示一行提示文字，页码和分类状态在跳转后能不能保持。这些细节代码量不大，但对体验和观感的影响非常明显。

另外一个小技巧：如果你不确定自己的页面在不同浏览器下显示是否一致，可以用浏览器自带的开发者工具切换设备模拟器看看效果。Chrome的DevTools虽然不是万能的，但至少能帮你发现90%以上的布局问题。页面做完之后，打开Console面板，把控制台里的报错信息全部清零再交。这个动作花费的时间很少，但对评分的影响很大。

这个项目后续还可以继续扩展的方向其实很多，比如用fetch从本地JSON文件读取菜品数据，或者用localStorage实现一个简单的购物车，再或者把列表页的排序维度从价格和销量扩展到评分和人气。但如果这是你第一次完成一个完整的前端三件套项目，先把目前的版本打磨干净，比盲目加功能更重要。

大学生HTML期末大作业：美食网站从规划到实现全解析