安德烈卡卡做期末大作业这件事，说难不难，说简单也真不简单。尤其是HTML+CSS+JavaScript这种“三件套”组合的旅游网站，看起来满大街都是模板，但真要从选题、结构、交互到答辩逐层打磨，还是有不少门道。我一个老前端，这几年帮人看过的课程设计少说也有几十个，今天拿一个很有代表性的题目来拆——基于中山的旅游网站。中山这个题材其实相当讨巧，红色文旅和休闲度假都能沾上边，景点密度高、资料好找、图片素材丰富，做出来的视觉效果和内容层次都不容易干瘪。这篇文章我就按完整的开发流程，把从零到一做完这个项目会遇到的事全部捋一遍，尤其是那些一眼看不到但一踩一个准的坑，我会一并写清楚。
1. 项目定位与整体方案选型
1.1 为什么选“中山”作为网页主题
很多同学选城市旅游主题的时候，脑子里全是北京、上海、成都、重庆，但实际做下来会发现热门城市素材虽然多，同质化也太严重，老师一个班能收到五六个“成都美食攻略”，你的页面做得再细，也很难从一堆相似作业里跳出来。选中山就聪明得多。
中山的文旅资源结构很完整：有历史人文类的孙中山故里旅游区，有园林景观类的詹园，有城市休闲类的孙文西路步行街、岐江公园，还有金钟湖、紫马岭这类自然生态目的地。这种“文化+园林+城市+生态”的多元组合，对网站来说太友好了，因为每一类景点都能对应一种页面布局。想做图文列表，有；想做卡片宫格，有；想做大幅首图轮播，也有素材支撑。
而且中山的整体调性偏温润、生活化，视觉设计往浅色系、绿色系靠就会非常顺手，不像某些一线城市非要堆高饱和度大色块才能显得“繁华”。学生们在配色这件事上普遍容易翻车，但选中了中山这种气质本身就比较统一的题材，配色出错的概率会低一大截。
另外还有一点容易被忽略：期末作业是要答辩和讲思路的。中山的旅游定位清晰、规划逻辑简单，你三句话就能说清楚“为什么做、给谁看、核心亮点是什么”。换成那种景点之间没有关联的杂烩城市，你自己串逻辑都得串半天。
1.2 页面结构设计与文件组织
拿到题目后不要急着写代码，先画页面地图。我强烈建议一个普通的旅游网站作业控制在5到7个页面，不是越多越好，而是每一页都要有存在的理由。
我的推荐结构是：首页（index.html）、景点介绍页（scenery.html）、美食推荐页（food.html）、文化专题页（culture.html）、旅行攻略页（guide.html）、关于/留言页（about.html 或 contact.html）。这个结构既有纵向的信息深度，又有横向的维度覆盖，老师问到“你这个网站内容是如何组织的”时，你能拿出清晰的逻辑。
文件组织一定要规范，这直接关系到后期维护和答辩观感。我见过太多人把style写在HTML里、把图片和页面混在一个文件夹底下，代码超过两屏就乱成一团。规范的做法长这样：
code复制project-root/
├── index.html
├── scenery.html
├── food.html
├── culture.html
├── guide.html
├── contact.html
├── css/
│ ├── style.css
│ └── reset.css
├── js/
│ ├── main.js
│ ├── slider.js
│ └── include.js
├── images/
│ ├── scenes/
│ ├── food/
│ └── banner/
└── assets/
└── font/ （如果用了本地字体）
有人问：老师没有要求文件分离，我还需要分吗？我的回答永远是“需要”。CSS和JS分离不是形式主义，它让你的页面代码更短、更清晰，答辩演示的时候可以直接展示这一层工程化思路，这种细节本身就加分。
1.3 技术方案选型的取舍逻辑
HTML、CSS、JavaScript三件套各管一摊：HTML决定页面上有什么，CSS决定这些东西长什么样，JavaScript决定它们怎么响应操作。听起来简单，但三者之间的配比是很有讲究的。
很多学生的通病是：HTML拼命堆，CSS随便写，JS只放一个“点击跳转”糊弄了事。这是典型的战术勤奋掩盖战略懒惰。说句实在话，期末作业里JS的出彩程度，往往是拉开分数差距的核心分水岭。老师见过太多静态页面了，你只要做出一个像样的图片轮播、一个平滑滚动到顶部的按钮、或是一个能正确提示错误信息的表单校验，就已经超过了班里至少七成的人。
但反过来，我同样不建议在这个作业里过度使用复杂框架。比如用Vue或React解决这个题目，方向就偏了。你是在做前端基础课的大作业，重点展示的是对原生三件套的掌握程度，不是框架的熟练度。真要用框架，你反而拿不到分，因为老师这一课讲的就是原生写法。选Bootstrap这类UI框架，同样要谨慎。如果老师明确教学用的是原生HTML/CSS，而你作业里塞了一堆bootstrap类名，答辩时一问“这个样式怎么实现的”，你支支吾吾答不上来，印象分会很难看。
那什么情况下可以适当用一点框架？我的建议是：可以引入一个简单的CSS动画库（比如Animate.css），或者用Font Awesome做图标，这些属于工具提升效果，不涉及核心逻辑。你把核心布局、交互相作用原生代码写明白，工具只起锦上添花的作用，这样才能又稳又好看。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 前端三剑客的分工与前端地基搭建
2.1 HTML语义化：把页面骨架搭得像个正经站点
写HTML不是把标签堆上去就行。语义化这件事，老师一定会在课堂上提，但很多同学并不真正理解。一句话解释：语义化就是让标签自己会说“我是干什么的”。
旅游网站首页可以这样划分区域：header（顶部导航，里面放logo和导航菜单）、nav（主导航）、main（主体内容区）、section（首页里的不同板块，比如景点精选、美食推荐）、article（一篇独立的景点介绍或攻略内容）、aside（侧边信息栏，比如最近浏览量、推荐资讯）、footer（底部版权信息栏）。
这样划分完以后，哪怕不要任何CSS，只看HTML结构，老师也能清楚你网站的层次。更重要的是，你写CSS的时候目标会更明确，因为每一个区块都有对应的语义标签，不用满屏div来div去最后自己都不知道哪个是哪个。
还有两个特别容易忽略的地方：lang属性和meta标签。<html lang="zh-cn">一定要写，它让浏览器正确识别页面语言，也影响屏幕阅读器和搜索引擎的理解。meta标签里charset要写UTF-8，页面上有中文却漏了这个，浏览器就可能会显示乱码。另一个推荐加的是<meta name="description" content="中山旅游网站——带你走进伟人故里，品味岭南水乡风情">，虽然这对期末作业本身没有直接影响，但养成了这个习惯，以后做真正上线项目会省很多事。
2.2 CSS布局方案：Flex与Grid选哪个
旅游网站最常见的布局需求是：横向排列景点卡片、导航项均匀分布、图文并茂的内容块左右分栏、首屏横幅全屏铺开。这些场景，Flexbox和Grid都有各自的发挥空间。
我习惯这样用：一维排列用Flex，二维栅格用Grid。比如导航栏这几个项目排在一条线上，用Flex，因为它的主轴方向很明确；景点卡片想做成三列、四列、并且在不同屏幕宽度下自动换行，用Grid更利索，因为网格的行列控制更强。
以卡片布局为例，Grid的写法非常直观：
css复制.scenery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
这段代码的意思是：每一列最小宽度280px，屏幕够宽就多排几列，不够宽就自动往下换行，列与列之间的间隙是24px。它对响应式的支持是天然自带的，不需要写一大堆media query来进行适配。相比之下，Flex做类似效果需要结合flex-wrap: wrap和flex-basis计算宽度，逻辑上绕一些。
但这个页面如果是一行只有两三个元素，比如“景点列表+侧边栏”，那Flex就更加顺手。比如：
css复制.content-wrapper {
display: flex;
gap: 30px;
}
.content-main {
flex: 1 1 70%;
}
.content-side {
flex: 0 0 28%;
}
Flex和Grid并不是对立关系，它们可以嵌套使用。外层用Grid排大框架，内层用Flex排小项目，这是实战里最常见也最好使的组合。
2.3 JavaScript的介入时机与代码组织
很多初学者对JS的定位就是“交互”，一上来就写，结果写了一堆到处都是的全局函数和互相冲突的监听器。正确做法是先梳理“这个页面到底有哪些地方需要JS介入”。
我建议把这个梳理写在纸上或者注释里。以旅游网站为例，需要JS介入的地方通常有这些：移动端导航菜单的展开收起、首屏图片轮播的切换、滚动到一定高度后返回顶部按钮的出现与点击回滚、表单提交时的非空校验、以及可能有的旅游数据动态渲染。把这些点列出来，你自然就知道JS代码要分成几块来写，而不是把逻辑全部揉在一起。
代码组织上，我推荐把不同功能的代码放到不同的JS文件里，同时用“命名空间”或者“函数模块化”的方式避免变量污染。一个最基础的做法是：
javascript复制// main.js
var TravelSite = TravelSite || {};
TravelSite.init = function() {
// 调用所有模块
TravelSite.nav.init();
TravelSite.slider.init();
TravelSite.backToTop.init();
};
document.addEventListener('DOMContentLoaded', TravelSite.init);
每个模块再这样组织：
javascript复制TravelSite.slider = {
currentIndex: 0,
timer: null,
init: function() {
// 初始化逻辑
},
next: function() {
// 下一张
}
};
这种组织方式，放在期末作业里已经属于超纲的加分项了。你不一定完全照抄，但心里要有一个意识：JS代码是“分模块的”，不是堆在一起的大杂烩。
3. 核心模块实操：导航、轮播、卡片与滚动动画
3.1 导航栏与移动端适配的完整做法
导航栏是每一个页面都会出现的组件，也是老师第一眼就会看到的东西。一个合格旅游网站的导航，应该满足三个要求：视觉上分清层次、当前页面有状态标识、移动端不挤不乱。
一行导航最常用的做法就是Flex均匀分布：
css复制.nav-list {
display: flex;
justify-content: space-between;
list-style: none;
}
当前页面高亮这一块，可以在生成导航时给当前页的<a>加一个active类。如果用的纯静态HTML，每个页面的导航都要手动标注，比如在index.html里：
html复制<li><a href="index.html" class="active">首页</a></li>
<li><a href="scenery.html">景点推荐</a></li>
CSS里再给active加一个底部横线：
css复制.nav-list a.active {
color: #1a7431;
border-bottom: 3px solid #1a7431;
}
移动端适配的关键是：当屏幕宽度变窄的时候，导航里的五个链接不可能还排在一条线。这个时候有两种方案，一种是让链接换行成两行，另一种是做成汉堡菜单。
汉堡菜单是JS交互的典型场景，也是老师最爱看的功能之一。实现逻辑不复杂：默认状态下菜单是隐藏的，点击汉堡图标后给它加一个open类，菜单展开，再点一次就收回去。HTML结构大概是这样：
html复制<button class="nav-toggle" aria-label="打开菜单">
<span></span><span></span><span></span>
</button>
<ul class="nav-list" id="navList">
<!-- 导航项目 -->
</ul>
CSS在移动端设置.nav-list默认display: none，当加上.open类后display: flex。JS用一个classList切换就行：
javascript复制document.querySelector('.nav-toggle').addEventListener('click', function() {
document.querySelector('.nav-list').classList.toggle('open');
});
这里有两个小细节要注意：第一，汉堡按钮要设置aria-label，无障碍属性在作业中是加分项；第二，如果点击菜单项后需要自动收起菜单，可以在每个链接上绑定一个移除open类的操作，不然会出现点了一个链接但是菜单没关掉的尴尬情况。
3.2 首屏轮播图：从零手写一个不依赖插件的轮播
轮播图是旅游网站的门面，也是很多同学纠结最多的地方。用插件吧，代码不是自己写的，一答辩就露馅；不用插件吧，又怕自己写不好。我建议还是自己写，因为原生轮播的逻辑并不复杂，而且学习价值极高。
手写轮播的核心思路是：用一个容器把所有轮播图片都横排放在一起，容器设置overflow: hidden，然后通过改变容器的transform: translateX()值来显示不同位置的图片。千万不要用display: none切换，那样动画过渡效果是做不出来的。
比较标准的实现步骤是这样：
第一，给轮播容器一个固定宽度，比如100%的父容器宽度，内部的slider-track宽度设置为图片数量的倍数：
css复制.slider-track {
display: flex;
transition: transform 0.5s ease;
width: 100%;
}
.slider-track img {
width: 100%;
flex-shrink: 0;
}
第二，JS里用一个索引变量记录当前显示第几张，每次切换时计算translateX的百分比：
javascript复制var currentIndex = 0;
var slides = document.querySelectorAll('.slider-track img');
var total = slides.length;
function goToSlide(index) {
currentIndex = index;
document.querySelector('.slider-track').style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
}
第三，绑定前后按钮和底部圆点的点击。圆点的生成最好用JS循环创建，这样图片数量增加或减少时不需要手动调HTML：
javascript复制var dotsContainer = document.querySelector('.slider-dots');
for (var i = 0; i < total; i++) {
var dot = document.createElement('span');
dot.classList.add('dot');
dot.addEventListener('click', function() {
goToSlide(i);
});
dotsContainer.appendChild(dot);
}
第四，自动播放用setInterval，每隔3到4秒执行一次下一张，到最后一张再回到第一张。另外一个特别值得写的点：鼠标悬停时暂停自动播放，移开后继续。这个交互细节很多插件都要靠配置项才能开，你手写出来了一行代码就能搞定，但答辩的杀伤力完全不一样：
javascript复制sliderContainer.addEventListener('mouseenter', function() {
clearInterval(autoTimer);
});
sliderContainer.addEventListener('mouseleave', function() {
autoTimer = setInterval(nextSlide, 3000);
});
3.3 景点卡片网格与CSS动画效果的落地
景点卡片是旅游网站内容的主体呈现方式。卡片这个形式已经很成熟了：一个圆角矩形容器、里面对应一张图、一个标题、几句描述、一个阅读链接。结构其实很简单，但样式上有很多可以打磨的细节。
我建议卡片设计采用“图片上方、文字下方”的垂直结构，图片比例保持一致（可以用aspect-ratio: 4 / 3统一）。卡片整体加上box-shadow制造悬浮感，稍微带一点border-radius: 12px，视觉上就会比那种方块加直角线的设计舒服很多。
最加分的部分是悬停动画。CSS动画是热搜词里反复出现的主题，也是老师们特别爱看的东西。我见过很多同学把这个理解为“放一个很大的transition值产生鬼畜动画”，其实关键是动效要克制、自然、有反馈感。
一个百搭的方案是：卡片悬停时，图片轻微放大，阴影加深，标题颜色变化。这三个变化配合起来会让人觉得“整个卡片被点亮了”。
css复制.scenery-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.scenery-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.scenery-card img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.5s ease;
}
.scenery-card:hover img {
transform: scale(1.05);
}
这里面有一个特别常见的错误：transform切换了，但是父容器的overflow: hidden没设置，导致图片放大后溢出卡片边框，整个版面就会乱掉。我每次看作业都会碰到这类问题，这个点写出来，你们一定要提前预防。
4. 功能细节与动态交互：让页面真正“活”起来
4.1 表单校验：不用后端也能实现提示反馈
留言页是旅游网站里功能性很明确的一页，通常需要一个表单收集用户的姓名、邮箱和留言内容。但是纯静态的HTML页面没有后端，提交了也无处可去，所以常见的做法是用JS做前端校验，校验通过后弹出“提交成功”的提示。
表单校验的重点在于不让用户产生困惑。如果你的表单只有一堆空字段，用户点了提交之后完全没反应，体验就是零分。用JS拦截submit事件，进行检查，然后显示具体的错误信息，是一个非常标准的交互流程。
javascript复制document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('name').value.trim();
var email = document.getElementById('email').value.trim();
var message = document.getElementById('message').value.trim();
if (name === '') {
alert('请输入姓名');
return;
}
if (email === '') {
alert('请输入邮箱');
return;
}
var emailRegex = /^[\w\.-]+@[\w\.-]+\.\w+$/;
if (!emailRegex.test(email)) {
alert('请输入正确的邮箱格式');
return;
}
if (message === '') {
alert('请输入留言内容');
return;
}
alert('提交成功，感谢您的留言！');
});
在上面的正则表达式里，^和$分别匹配字符串的开始和结束，\w匹配字母数字下划线，\.匹配点号，+表示至少一个。如果你不想解释得这么细，也可以换一种更直白的校验方式，比如用email.includes('@')判断邮箱里有没有@符号，虽然精度差一点，但对初学者更好讲。
这种实现方式最大的优点是不依赖后端环境，在任何浏览器里打开都能看到效果。需要注意的一点是：在HTML5中，表单元素本身也有required属性和type="email"这种原生校验机制，它们会阻止非空内容和错误格式的提交。如果你用了这些原生校验，JS里的submit事件可能不会触发，因为浏览器在提交前就已经拦截了。解决方法是：要么不用required属性，要么在submit监听触发时再手动做校验。
4.2 返回顶部按钮与一键回顶算法
滚动过程中出现的“返回顶部”按钮，是一个非常经典且应用性极强的小功能。看起来简单，但里面埋了不少细节。
按钮的初始状态是隐藏在屏幕角落，当用户向下滚动超过一定距离（比如400像素）时，按钮淡入；滚动回顶部后，按钮淡出。这个功能的JS监听事件是window.scroll。
javascript复制window.addEventListener('scroll', function() {
var backBtn = document.getElementById('backToTop');
if (window.scrollY > 400) {
backBtn.classList.add('show');
} else {
backBtn.classList.remove('show');
}
});
回顶的动画效果有一个算法层面的选择：是瞬间跳回顶部，还是平滑滚动？瞬间跳回虽然快，但体验很生硬；平滑滚动更优雅。老版本的写法是用一个定时器逐步移动滚动条，后来浏览器提供了原生的scrollTo方法，代码就简洁多了：
javascript复制document.getElementById('backToTop').addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
这一行代码，配合前面的滚动监听，一个完整的返回顶部功能就实现了。这个功能虽小，但在“功能完整性”这个维度上的得分效率极高。因为在很多同学的项目里，这个功能要不是完全没做，要不就是点击后直接跳到顶部生硬无比。
4.3 用JavaScript渲染动态景点列表
动态渲染数据是JS能力的进阶体现，也是拉开作业质量的重要环节。你可以预先在JS里定义一个景点数据数组，然后用循环把它们渲染成HTML结构。这样做的好处是：以后要增删景点，只需要改数据，不需要改动页面结构。
以“热门景点推荐”板块为例，数据可以这样定义：
javascript复制var scenicSpots = [
{
name: '孙中山故里旅游区',
location: '南朗街道翠亨村',
desc: '中山最具代表性的文化地标，融合历史与园林景观。',
img: 'images/scenes/sunwen.jpg'
},
{
name: '中山詹园',
location: '南区街道北台村',
desc: '岭南私家园林的代表，以精致水景和古典建筑闻名。',
img: 'images/scenes/zhan.jpg'
},
{
name: '孙文西路步行街',
location: '石岐街道',
desc: '百年骑楼老街，中西合璧的建筑风格极具风情。',
img: 'images/scenes/sunwen-road.jpg'
}
];
渲染的逻辑其实很简单——创建HTML字符串，然后放进容器：
javascript复制function renderScenery(data) {
var container = document.getElementById('sceneryList');
var html = '';
data.forEach(function(item) {
html += '<div class="scenery-card">';
html += '<img src="' + item.img + '" alt="' + item.name + '">';
html += '<div class="card-body">';
html += '<h3>' + item.name + '</h3>';
html += '<p>' + item.location + '</p>';
html += '<p>' + item.desc + '</p>';
html += '</div></div>';
});
container.innerHTML = html;
}
renderScenery(scenicSpots);
这个能力往小了说是一个列表渲染，往大了说就是数据驱动视图的雏形。你甚至不需要引入任何框架，用原生JS就能做出“数据变了页面跟着变”的效果。答辩的时候如果老师问“假如要增加一个景点怎么办”，你的回答是“只需要往数组里加一条数据，页面会自动更新”，这句话放在期末场景里基本是降维打击。
5. 常见问题与调试心得实录
5.1 HTML文件无法预览与编码乱码
先讲一个大部分初学者都会遇到的问题：双击HTML文件，浏览器打开后一片空白，或者只显示几行文字，样式完全没出来。这个问题的排查是有固定套路的。
首先看文件路径。用相对路径引用CSS和JS时，比如<link rel="stylesheet" href="css/style.css">，必须保证css文件夹和当前HTML文件在同一目录下。如果你的HTML在pages文件夹里而CSS在项目根目录的css文件夹里，那路径就要写成../css/style.css，两个点代表回到上一级目录。
其次看文件名大小写。很多学生习惯用大写字母命名图片或CSS文件，比如Css/style.CSS，但服务器环境和浏览器在严格区分大小写时，会找不到文件。全项目统一用小写字母加短横线命名是最稳妥的选择。
乱码问题则简单很多：确保HTML头部有<meta charset="utf-8">，并且这个标签要放在<head>里尽可能靠前的位置。如果页面里还有乱码，那大概率是文件本身的编码就是GBK而不是UTF-8，用编辑器另存为UTF-8格式即可。
5.2 JavaScript运行时报错：控制台是最好的老师
JavaScript写完后浏览器里没有效果，最常见的不是逻辑问题，而是语法错误或者对象获取不到。你只要按F12打开开发者工具，切到Console（控制台）标签，红色报错信息会直接告诉你问题出现在哪一行。
有一个新手特别容易遇到的报错：Cannot read properties of null。这个错误表示你想操作一个不存在的元素，原因通常是JS代码在HTML元素加载之前就执行了。解决办法很简单：把JS的<script>标签放在</body>之前，或者用DOMContentLoaded事件包住整个初始化逻辑。前者是更推荐的做法，因为它直白、不容易错。
html复制<!-- 页面内容 -->
<script src="js/main.js"></script>
</body>
</html>
这个顺序不是玄学，而是浏览器解析HTML是自上而下的，如果脚本放在head里且没有加defer，浏览器执行JS时下面那些div、img还不存在。
5.3 CSS兼容性：为什么你的动画在手机上不动
CSS动画在桌面浏览器上一切正常，放到手机浏览器就“失灵”，这个问题在期末展示阶段经常出现。原因通常有两个：一是缺少-webkit-前缀，二是使用的属性和单位太新。
现代浏览器对CSS标准属性的支持已经很强了，但一些动画属性，尤其是较老的移动端浏览器内核，仍需要带-webkit-前缀才能生效。比如：
css复制.scenery-card:hover img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
另外像aspect-ratio、gap这些属性，虽然现在的主流浏览器都已经支持了，但如果你在兼容性要求比较高的环境里跑，还是建议提供备用方案。比如卡片图片高度想统一，可以直接给height: 240px加object-fit: cover，这个方法在很老的浏览器里也能工作。
5.4 关于响应式设计的一个稳妥策略
很多学生的旅游网站只做PC端，但老师如果用的是大屏幕投影或者自己MacBook的浏览器，宽高比不同会导致各种布局问题。最稳妥的策略是：不要一上来就追求特别复杂的响应式，先把固定宽度的布局做好做稳，再逐步加media query。
一个实际可操作的方法是：给主体内容设置max-width: 1200px; margin: 0 auto;，这样即使在不同宽度的显示器上，网站内容都会居中，不会左右拉伸得乱七八糟。
然后再按三个断点去适配：平板（768px）、小屏移动端（480px）和中等屏幕（1024px）。每个断点只做一对一的调整，不要写一大段只改2px的代码，那样后期维护会很痛苦。
比如说在768px以下，三列卡片就变成一列，导航栏就变成汉堡菜单，这就是一个清晰明确的断点逻辑。
5.5 答辩时容易被追问的几个问题
最后说说答辩，这部分是很多学生的心病，因为写代码是一回事，讲清楚又是另一回事。根据我的经验，老师最喜欢追问的问题有以下几个：为什么整个项目没有用框架？轮播图的自动播放是它自己滚还是定时器？页面打开速度会不会因为图片太多而变慢？
这些问题实际都有预设答案，提前准备好了就不慌。关于框架问题，你就说“这门课的核心是掌握原生前端能力，所以我选择用原生三件套来展示对基础知识的掌握”。关于轮播，你就说“auto play是用了setInterval定时器，鼠标悬停时暂停，移开恢复”。关于图片加载，你可以主动提一个优化方案：给图片加loading="lazy"懒加载属性，或者在Photoshop里把大图压缩到合适体积再使用，比如控制在200KB以内。这样回答既专业又显得你想得足够远。
5.6 一些容易被忽略的细节加分项
这些细节通常是老师不会直接扣分，但会默默在心里给你加印象分的地方：favicon图标（浏览器标签页上的小图标）、页面标题后缀（比如“中山旅游网 - 走进伟人故里”）、图片的alt属性、链接的title或aria-label、代码中的注释。网站做得完整、细节呈现到位，答辩的时候讲起来会顺非常多。
在代码注释方面，建议在关键逻辑上方用一两行中文说明“这里是返回顶部的按钮逻辑”、“这里是轮播图的自动播放”之类的注释。不是为了给老师看，而是让代码更像一个专业的工程，而不是随手凑出来的草稿。这个小习惯对于以后写大型项目的重要性，可以说是怎么强调都不为过。
做旅游网站这个题目，很多人都会做，但大部分人的作品都停在“能交差”的层面。你只要把结构理清楚、把交互做扎实、把一个动画做精，就足以从一堆模板里脱颖而出。我最想强调的一点是——不要以“我只要能运行就行”为标准，而是站在使用者的角度问自己：这个页面打开的时候，用户会不会觉得舒服？点击的时候，有没有反馈？滚动的时候，有没有节奏感？当你开始用这种标准要求自己的页面时，作业的完成度自然就不一样了。在这些基础上，如果还有余力，试着把景点数据数组渲染那一步做出来，它会让你的整份作业在前端思维层面高出一个段位。