HTML+CSS+JavaScript旅游网站教程：从零搭建完整期末项目-代码聚汇网

HTML+CSS+JavaScript旅游网站教程：从零搭建完整期末项目

天马行空的味道·2026-08-31·阅读 22 GEO检测（免费）

HTMLCSSJavaScript

|难度：普通|阅读约 43 分钟

又到了期末交大作业的密集阶段，最近私信里问得最多的就是“旅游网站怎么做”。这个题目可以说是HTML+CSS+JavaScript期末大作业里的经典款，上手门槛不高，却能把前端三件套的核心知识点都串起来。做出来的成果是一套多页面、带轮播、带表单、带交互动画的旅游展示站点，既能拿去课程验收，也能当作品放在简历里。不管你是刚学完语法还不会拼项目的初学者，还是已经能写一点页面但总在交互上翻车的同学，这篇内容都适合照着一路做完。

我的建议很明确：先想清楚整个项目的页面结构和功能边界，再动手写代码。很多人一上来就急着敲HTML，结果写到一半发现导航无法串联、图片路径混乱、JS和CSS互相打架。与其踩一圈坑，不如先按我下面这套思路把方案定下来。

1. 内容整体设计与思路拆解

1.1 为什么旅游网站是期末大作业的“安全牌”

期末大作业最怕什么？怕选题太偏，老师不好理解；怕功能太复杂，做不完；怕页面太单调，拿不到高分。旅游网站恰好避开了所有雷区。

从技术覆盖面上看，一个旅游网站天生就需要展示大量图片、卡片、列表、表单和动效，这正好把HTML的结构能力、CSS的视觉表达和JavaScript的交互能力全部覆盖进去。从视觉呈现上看，风景图天生好看，即使你美工基础一般，只要会挑图、会用基础排版，效果也不会差。更重要的是这个主题功能边界清晰，不需要处理订单、支付、后台管理这些复杂逻辑，期末展示阶段基本不会翻车。

我见过不少学生纠结：做博客、做电商、做个人主页哪个更好？说句实在话，电商需要购物车和结算逻辑，个人主页内容单薄，博客虽然简单但容易做得像“作业模板”。旅游网站能做的内容形式非常丰富，你可以放目的地推荐、攻略列表、行程介绍、用户留言，每一个都是独立的模块，做多做少都能自圆其说。这也是我为什么一直推荐它作为课程大作业的原因。

1.2 需求梳理：先列清单再动手

项目正文里有一句话非常关键——做网站不能想到哪写到哪，一定要先做需求清单。这里给大家一个我自己带学生时的拆分方法：先定页面，再定技术点，最后才是写代码。

一个合格的旅游网站至少需要这些页面：

页面	核心内容	主要技术点
首页	品牌介绍、轮播图、热门景点推荐	轮播图、卡片布局、hover动画
目的地列表页	多个景点以卡片或列表形式展示	网格布局、图片展示、筛选按钮
景点详情页	单张景点的图文介绍和攻略	语义化标签、图文混排、列表样式
关于我们	网站介绍和团队信息	页面结构、样式统一
留言反馈页	用户提交姓名、邮箱、留言内容	表单校验、JS交互反馈

如果你时间紧张，可以把目的地列表页和详情页合并成一个页面，但至少保留首页+列表页+表单页的组合。老师在验收时最常问的就是“这个网站有哪些页面”“页面之间如何跳转”，如果只有一个单页面，那项目完整度会打不少折扣。

技术点也要提前明确。HTML负责内容结构，CSS负责视觉表现，JavaScript负责行为交互。这三者各管一摊，但最后要在同一个浏览器里配合起来。很多同学的代码之所以写着写着就乱，不是因为某一项技术没学会，而是没想清楚谁管谁。CSS管样式时别去动HTML结构，JS管逻辑时别用内联样式写死外观，按这个纪律走，项目维护起来会轻松很多。

1.3 技术选型：原生三件套还是用框架

有同学问要不要用Bootstrap或者Vue这种框架。这里给出我的建议：期末大作业优先用原生HTML+CSS+JavaScript写。

原因很简单，课程考核的核心是看你对基础知识的掌握程度。用框架可能短期内页面效果更好看，但一旦老师追问某个原理，比如这个轮播为什么这样写、这个布局的底层逻辑是什么，你如果只会调用框架方法就很容易答不上来。原生三件套虽然代码多一些，但每一步都是你自己控制的，答辩时能讲清楚的东西非常多。

更重要的是，原生代码能完整展示你的排错能力。CSS样式冲突了、JS控制台报错了，这些真实开发中的问题用原生写法更容易定位和修复。用框架反而会多一层抽象，对初学者并不友好。如果你后续还想往深里学，先把原生玩明白，再去上手Vue或React会顺很多。

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

2. 核心细节解析与实操要点

2.1 HTML骨架：doctype、charset和语义化标签

先写一个标准页面骨架。这段代码是每个页面都要有的，也是很多同学最容易忽略的。

html复制<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫步旅行 - 发现美好风景</title>
    <meta name="description" content="热门旅游景点推荐、出行攻略、目的地指南">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <!-- 导航区域 -->
    </header>
    <main>
        <!-- 页面主体内容 -->
    </main>
    <footer>
        <!-- 页脚信息 -->
    </footer>
    <script src="js/main.js"></script>
</body>
</html>

这里有几个点要重点说。<!doctype html>是文档类型声明，告诉浏览器用标准模式渲染页面。少了这行，不同浏览器对同一段HTML的解析可能会有差异，甚至出现诡异的排版偏移，所以不要删。<meta charset="utf-8">的作用是声明字符编码，防止中文乱码。我见过太多同学漏掉这一行，结果整页标题变成“鍝堝搱鍝”，其实不是代码写错，就是编码声明丢了。<meta name="viewport">则是为移动端适配打基础，它在后面做响应式时很重要，属于期末加分项。

还有个小习惯值得养成：所有图片都要写alt属性。你可能觉得“alt又不在页面上显示，写了干嘛”，但如果图片加载失败，alt就是页面上的文字提示；更重要的是这是HTML规范的一部分。答辩时主动说“我所有图片都加了alt，这是为了可访问性”，老师对你的印象会立刻不一样。

2.2 导航栏和Banner的结构设计

旅游网站的灵魂是导航清晰。顶部导航推荐用<header>包裹<nav>，里面放logo和菜单列表。为了做“当前页高亮”，可以在每个页面对应的菜单项上加class="active"。这样CSS里只需要写一个.active的样式，就能让当前页面在导航中高亮显示，用户不会迷路。

Banner轮播区是首页的门面。结构上我建议这样组织：

html复制<section class="banner">
    <div class="banner-list">
        <div class="banner-item active">
            <img src="images/banner1.jpg" alt="海边度假">
        </div>
        <div class="banner-item">
            <img src="images/banner2.jpg" alt="城市夜景">
        </div>
        <div class="banner-item">
            <img src="images/banner3.jpg" alt="山川湖海">
        </div>
    </div>
    <button class="banner-prev">上一张</button>
    <button class="banner-next">下一张</button>
    <div class="banner-dots">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</section>

这个结构里，.banner-list是轮播项目的容器，.banner-prev和.banner-next是左右切换按钮，.banner-dots是底部圆点指示器。后续JavaScript操作的就是这几个元素。把结构与交互分离，JS代码会好写很多。

注意这里我用了button标签而不是a标签。轮播的左右切换是功能性按钮，不是链接跳转，语义上更适合用button。细节虽小，但能体现你对HTML语义的理解。

2.3 景点卡片和表单结构

景点卡片是首页的主体。每个卡片建议用<article>标签包裹，因为卡片是可以独立分发的内容块。卡片内部基本结构是：图片、标题、简介描述、价格或评分、查看详情按钮。

表单页的HTML结构有一个非常容易被忽视的规范：<label>要和input通过for和id配对。比如姓名输入框，<label for="name">姓名</label>配合<input id="name" name="name">。这样点击label文字时，对应的输入框会自动聚焦，对用户更友好。更重要的是，表单控件的可访问性会显著提升，这正是答辩时的加分细节。

提交按钮记得用type="submit"，这样JavaScript才能通过监听submit事件来拦截表单提交并做校验。如果误用type="button"，点击后不会触发提交事件，逻辑会绕很多弯路。

2.4 页面之间的链接规划

多页面网站最忌讳每个页面各自为政。我的建议是：公共的<header>和<footer>在所有页面保持完全一致，然后提前规划好相对路径。

推荐的项目结构如下：

text复制travel-site/
├── index.html
├── destination.html
├── detail.html
├── about.html
├── contact.html
├── css/
│   └── style.css
├── js/
│   ├── main.js
│   └── banner.js
└── images/
    ├── banner1.jpg
    ├── banner2.jpg
    └── ...

从根目录下的index.html链接到css/style.css，路径写成css/style.css。从destination.html链接也是css/style.css，因为这些页面都在同一级目录下。千万不要写成../css/style.css，那是从子目录返回上级目录的写法，很多人把图片放在images/scenic/images.jpg这种深层嵌套里，结果自己都数不清路径层级，项目跑起来全是裂图。

如果你要写二级目录里的页面，比如pages/detail.html，那链接CSS就要写成../css/style.css。这个规律用顺口溜记就是“在哪个目录，就从哪个目录开始找”。经验之谈，路径问题占期末大作业Bug的六成以上。

3. 实操过程与核心环节实现

3.1 全局CSS：变量、重置、字体

写CSS之前最值得做的事是“清零”浏览器默认样式。不同浏览器对margin、padding的处理不一样，不重置就会出现“这个页面在Chrome里是好的，换个浏览器间距全乱”的尴尬。

可以用最简单的方式开始：

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

然后再用CSS变量统一主题色和字体。变量是CSS里特别好用的功能，它能让你后边改主题色只动一个地方。

css复制:root {
    --primary-color: #2a9d8f;
    --secondary-color: #f4a261;
    --text-color: #333;
    --bg-color: #f8f9fa;
    --radius: 12px;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
}

这里用的是--primary-color这种变量写法，所有现代浏览器都支持。它的优势很实际：如果老师临时要求把主题色从绿色改为蓝色，用变量的项目改一行就够；如果到处写死#2a9d8f，可能要翻遍十几个地方替换，还容易漏。这个技术点本身也是答辩时能主动展示的“代码规范性”亮点。

3.2 Flex和Grid布局实战

CSS布局是很多同学的痛点。我的经验是：导航栏、卡片内部用Flex，整体网格用Grid。

先看Flex。顶部导航最常见的需求是“logo在左，菜单在右，两端对齐”：

css复制.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nav-menu {
    display: flex;
    gap: 24px;
    list-style: none;
}

justify-content: space-between让logo和菜单一个靠左一个靠右，gap: 24px给菜单项之间留出间距，比挨个设margin-right省事得多。热词里提到的“css flex布局子元素宽度自适应”，本质是理解flex-grow、flex-shrink和flex-basis三者的关系。想让某个子元素占满剩余空间，就给flex-grow: 1；不想被压缩就用flex-shrink: 0。三个属性合在一起可以写成flex: 1 0 auto这种简写形式，知道它每一段代表什么才是真懂。

再看Grid。景点卡片列表用Grid是最省心的方案：

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

repeat(3, 1fr)生成三列等宽的轨道，1fr表示按比例分配剩余空间。列表项数量不是3的倍数时，前面的行会自动补齐排列，不需要手动处理。如果想做两列或四列，改一个数字就行。这就是Grid相对浮动布局的最大优势，代码简洁、逻辑清晰。

3.3 动画效果：从hover到CSS transition

课程作业里最容易被老师夸奖的就是“这个动画做得好”。但动画不是越多越好，要克制、有逻辑。

最常用的hover反馈效果是卡片悬浮抬起：

css复制.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

注意transition写在原状态而不是hover状态，这样鼠标移开时也能平滑还原。很多同学把transition写在:hover里面，结果鼠标移走时页面“啪”一下弹回去，观感很差。

再写一个图片缩放效果：

css复制.card-image {
    overflow: hidden;
}

.card-image img {
    transition: transform 0.6s ease;
}

.card-image:hover img {
    transform: scale(1.08);
}

这里的关键是overflow: hidden，它把放大的图片裁在卡片范围内。如果漏掉这个属性，图片放大后会溢出卡片边界，整个布局都会被顶乱。

热词里提到的“css涟漪光圈扩散”，其实是一个伪元素动画。给按钮加一个::after伪元素，初始scale(0)，hover时scale(1)并配合transition，视觉上就像涟漪一圈圈荡开。不需要额外引入动画库，原生CSS就能实现，感兴趣的同学可以自己写一个试试。

3.4 响应式布局：让老师忍不住在手机上打开

响应式是很容易被忽略却非常加分的部分。核心是用@media在屏幕宽度变化时调整网格列数和导航方向：

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

@media (max-width: 600px) {
    .destination-grid {
        grid-template-columns: 1fr;
    }

    .navbar {
        flex-direction: column;
    }
}

这样在手机上打开，三列变一列，导航栏自动竖排，不会出现文字挤成一团的情况。轮播图片的height也尽量不要写死，可以用height: auto保持比例，或者用aspect-ratio指定宽高比，这样在窄屏上不会变形。做完响应式，你可以按F12打开开发者工具，切换成手机模拟视图看一眼效果，这一步花不了几分钟，但成品观感会提升一大截。

4. JavaScript交互功能开发

4.1 导航高亮与平滑滚动

JS是整个项目的“大脑”。先做一个最简单的场景：单页内锚点跳转时平滑滚动。

javascript复制document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});

这里e.preventDefault()阻止了浏览器的默认跳转行为，然后改用scrollIntoView做平滑滚动。选择器a[href^="#"]的含义是“只选中href属性以#开头的链接”，这样不会误伤普通页面跳转链接。如果你的网站是多页面结构，这一步不是必须的，但如果首页里做了“关于我们”这类同页锚点，这个功能会很实用。

4.2 图片轮播：期末作业最容易翻车的功能

轮播是旅游网站标配。我建议用原生JS写一个自动播放加左右切换加圆点指示的完整版本。先定义一个状态变量记录当前索引：

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

function show(index) {
    items.forEach((item, i) => {
        item.classList.toggle('active', i === index);
    });
    dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
    });
}

function next() {
    currentIndex = (currentIndex + 1) % items.length;
    show(currentIndex);
}

function prev() {
    currentIndex = (currentIndex - 1 + items.length) % items.length;
    show(currentIndex);
}

let timer = setInterval(next, 3000);

const nextBtn = document.querySelector('.banner-next');
const prevBtn = document.querySelector('.banner-prev');
nextBtn.addEventListener('click', function () {
    clearInterval(timer);
    next();
    timer = setInterval(next, 3000);
});
prevBtn.addEventListener('click', function () {
    clearInterval(timer);
    prev();
    timer = setInterval(next, 3000);
});

这个代码里有几个关键点。取上一张时currentIndex - 1 + items.length再取模，是为了避免currentIndex变成负数导致取到undefined。手动点击后先清除之前的定时器再重新开启，是为了防止多个定时器叠加，否则切换速度会越来越快。这个坑我在辅导时见过最多，多数同学都卡在“为什么轮播点了几次之后就飞一样地自动切换”。

CSS里配合给.banner-item加隐藏和显示状态：

css复制.banner-item {
    display: none;
}
.banner-item.active {
    display: block;
}

这种写法简单可靠，但淡入淡出的过渡效果会失效，因为display属性无法做过渡动画。如果想让轮播更丝滑，可以把所有轮播项用position: absolute叠在一起，通过opacity和z-index控制显示。期末展示不想画蛇添足的话，直接切换也没有问题，但你得知道自己在这一个环节上的取舍是什么。

4.3 表单校验：细节里的“程序思维”

表单校验是JS逻辑的另一个重点。基础要求是“不能为空”和“格式合理”。一个干净的写法如下：

javascript复制const form = document.querySelector('#contact-form');

form.addEventListener('submit', function (e) {
    e.preventDefault();

    const name = document.querySelector('#name').value.trim();
    const email = document.querySelector('#email').value.trim();
    const message = document.querySelector('#message').value.trim();

    if (!name) {
        alert('请输入姓名');
        return;
    }

    if (!/^[\w.-]+@[\w-]+(\.[\w-]+)+$/.test(email)) {
        alert('请输入正确的邮箱地址');
        return;
    }

    if (message.length < 5) {
        alert('留言内容至少5个字');
        return;
    }

    alert('提交成功，我们会尽快回复你！');
});

正则表达式是很多同学卡住的地方。其实这个邮箱正则不需要背，你只需要能讲清楚它是“若干个字符+@+域名”的结构就行。\w表示字母数字下划线，[\w-]+表示由这些字符组成的一个或多个字符，.test()返回布尔值。如果不想用正则，也可以用email.includes('@')做简易判断，但答辩时老师追问“如果出现两个@怎么办”你不好回答，所以建议至少正经用一个正规正则。

另一个细节是trim()，它能去掉字符串首尾空格。如果不用它，用户输入三个空格也能通过“不能为空”的校验，这个Bug很隐蔽但很容易被老师现场测出来。

4.4 返回顶部与导航吸顶

返回顶部按钮是旅游网站另一个常见功能。实现逻辑很简单：监听window.scroll事件，滚动超过一定距离就显示按钮，点击后回到顶部。

javascript复制const backTop = document.querySelector('#back-top');

window.addEventListener('scroll', function () {
    if (window.scrollY > 400) {
        backTop.classList.add('show');
    } else {
        backTop.classList.remove('show');
    }
});

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

热词里的“html一键返回顶部算法”其实就是window.scrollTo的封装。window.scrollY返回的是当前页面纵向滚动的像素距离，这个值超过400就显示按钮，算是很常见的阈值选择。如果你觉得页面比较长，可以把阈值调高一点，避免按钮一直悬浮干扰阅读。

导航吸顶则可以直接用CSS实现：header { position: sticky; top: 0; }。这个属性不需要监听滚动事件，浏览器原生处理，性能比JS方案更好。只需要注意sticky的父级不能有overflow: hidden，否则会失效。

4.5 景点卡片筛选：一个能拉开差距的小功能

如果做完基础功能还有时间，我强烈建议加一个“按城市/按评分筛选”的小交互。它能充分体现JS的数组处理能力，是答辩时的亮点。

用一个数组存景点数据，再根据筛选条件重新渲染卡片：

javascript复制const spots = [
    { name: '三亚', city: '海南', score: 4.8 },
    { name: '张家界', city: '湖南', score: 4.7 },
    { name: '西塘', city: '浙江', score: 4.5 }
];

function filterByCity(city) {
    return spots.filter(item => item.city === city);
}

然后在按钮点击事件里调用filterByCity并重新生成DOM。这个功能本身不复杂，但展示了你对数据驱动视图的理解，比单纯写几个静态页面高出一个层次。老师问到“如果数据变成1000条怎么办”时，你至少能说出“可以用数组方法统一处理”的思路。

5. 常见问题与排查技巧实录

5.1 HTML文件无法预览，双击打不开

“html文件无法预览”这个搜索词出现频率极高。原因通常有三个：

第一，文件后缀名被隐藏，实际保存成了index.html.txt而不是index.html。Windows默认不显示扩展名，很多人在记事本里写代码保存时没选对“所有文件”，导致后缀变成txt。解决方法是打开文件资源管理器的“查看-文件扩展名”开关，把后缀改回.html。

第二，用VS Code打开时，编辑器里展示的是源码视图，不是浏览器渲染结果。你需要在VS Code里安装“Live Server”插件，或者直接右键HTML文件选“Open with Default Browser”。用Live Server的额外好处是改完代码浏览器能自动刷新，调试效率高很多。

第三，浏览器缓存了旧版本。修改代码后页面没变化，可以按Ctrl+F5强制刷新。如果用了Live Server还是打不开，检查一下项目路径里是否有中文名或特殊字符，某些本地开发工具对中文路径支持不好。

5.2 图片不显示，样式不生效

图片不显示的第一反应不是去改src，而是打开开发者工具（F12）看Console和Network面板。如果是404，说明路径不对；如果图片在本地能打开但网页里是裂图，大概率是文件名大小写不匹配，或者引用了不存在的外部图片链接。

样式不生效时，优先检查三件事：<link>标签的href路径是否正确；CSS文件里有没有语法错误，比如少写了一个}导致后面全部失效；有没有被同优先级但位置更靠后的样式覆盖。在F12的Elements面板里选中问题元素，右侧Styles面板会显示哪些样式被划掉，被划掉的就是没生效或者被覆盖的。

这个排查流程是通用的。遇到样式问题先别猜，右键“检查”是最快的路径。

5.3 JavaScript报错：void(0)、undefined和加载顺序

热词里出现的javascript:void(0)经常出现在<a href="javascript:void(0)">这种写法里。它的作用是让链接点击后不跳转，只执行JavaScript。比如一个按钮需要用JS控制展开内容，如果不加javascript:void(0)，浏览器会在点击后刷新页面或者跳到页面顶部，体验很糟。理解以后会发现它不是“报错”，而是防止默认行为的常见写法。

真正频繁报错的是这两种情况：

控制台报xxx is not defined，说明调用的函数还没定义。优先检查<script>标签的引入顺序。如果main.js里调用了banner.js的函数，那banner.js必须排在前面。
控制台报Cannot read properties of null，说明document.querySelector没找到元素。JS代码如果写在<head>里，此时DOM还没解析完毕，就会拿到null。解决办法要么把<script>放到<body>末尾，要么用DOMContentLoaded事件包住JS逻辑：

javascript复制document.addEventListener('DOMContentLoaded', function () {
    // 在这里写操作DOM的代码
});

推荐第二种方式，因为它不依赖脚本在HTML中的位置，逻辑更稳。很多同学的“JS运行时报错”都是这个原因。

5.4 CSS字体、渐变与移动端兼容

CSS字体选择上，中文字体建议优先用系统字体栈，比如font-family: "PingFang SC", "Microsoft YaHei", sans-serif，这样不同系统能自动匹配本地字体。不要直接用自定义字体文件，除非你明确知道字体有授权且文件大小可接受。

字体渐变也是热词中出现过的需求，实现方式是这样的：

css复制.gradient-text {
    background: linear-gradient(90deg, #2a9d8f, #f4a261);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

核心是background-clip: text配合透明文字颜色。注意-webkit-前缀，在部分浏览器上必须保留才能生效。如果页面里出现“为什么别人写的渐变字我复制出来不显示”，大概率就是浏览器兼容前缀没写全。

移动端适配方面，如果做了底部固定导航，在带Home Indicator的全面屏手机上可能会被底边遮挡，这时可以用env(safe-area-inset-bottom)处理安全区，给元素加padding-bottom: env(safe-area-inset-bottom)。这个细节在小程序场景里聊得多，但普通网页适配手机时同样适用。

5.5 性能优化：从能用到好用

期末大作业也可以聊性能，这是答辩的加分话术。最实用的优化有这几个：

图片压到200KB以内，避免一张图就占几MB。给屏幕外的图片加<img loading="lazy">，浏览器会在图片快进入可视区域时才加载。公共的CSS和JS提取成独立文件，多个页面复用时，浏览器可以用缓存，切换页面会更快。页面里的重复样式要整理，能用class复用就不要复制粘贴几十行内联样式。

这些优化对一个小型旅游网站未必能带来肉眼可见的提速，但它体现的是工程意识。老师问“你除了实现功能还做了什么”时，你能说出这些，就是加分项。

6. 答辩汇报与提分要点

6.1 讲解逻辑：先结构、再样式、最后交互

答辩时老师通常让你介绍项目，这时候不要上去就念代码。我建议按下面的顺序讲：

先讲这个网站是什么，包括哪些页面、解决了什么问题。再讲技术选型，为什么用原生HTML+CSS+JavaScript，各负责什么。然后讲核心功能，从轮播、导航、表单校验、返回顶部这几个点里挑两个重点展开。最后讲遇到的问题和解决方案，比如“图片在手机上显示错位，排查后发现是高度写死了，后来改用aspect-ratio解决”。这个顺序既有宏观视角，又有微观细节，给老师的整体印象会很完整。

6.2 加分项：代码规范与细节设计

如果目标分数再高一点，可以提前准备几个“说出来就能加分”的亮点：

用:root变量统一主题色，代码里不出现超过两处硬编码颜色
图片全部带alt，表单label全部和input配对
每个页面都有独立的<title>和meta description
按钮统一圆角、过渡、hover状态
项目文件结构清晰，HTML、CSS、JS、图片分目录存放
增加一个小型筛选或搜索功能，展示JS处理数据的能力

这些任何一条都可以在答辩时主动提出来。多数同学习惯“做完能打开就行”，你只要多做一点规范和细节，老师一眼就能分辨出来。

6.3 时间不够时的保守方案

如果你已经临近截止日期，第一个版本还没做完，这里有个保守排期可以参考：

只做四个页面：首页、目的地、详情页、留言页。首页保留轮播和卡片布局，不做复杂筛选。JS只写轮播、返回顶部和表单校验三个功能。样式统一用Flex和Grid，不做花哨动画。先把基础功能做稳，在保证能运行、能讲清的前提下再考虑加内容。

期末大作业的核心目标是“能够稳定运行、结构完整、答辩能说出逻辑”，而不是把每个动画都堆上去导致页面崩溃。功能性Bug比缺少动效严重得多，这个优先级一定要搞清楚。

7. 实操心得：从改作业老师视角看的几个关键点

在辅导过程中我逐渐发现，能拿高分的作品未必是技术上最炫的，更多是“整体完整、细节规范、能讲清楚”的类型。比如同一个轮播功能，有人只会复制粘贴，有人能说出当前索引怎么计算、为什么取模、为什么手动切换时要重新设置定时器。这个差别在答辩时特别明显。

还有个小技巧：在项目里写一个README.md或者使用说明.txt，把自己的项目结构、运行方式、功能列表写清楚。老师拿到项目后不需要猜，照着说明就能打开网页。这个文档本身不算代码分，但会极大提升项目的完成度和给人的专业感。

最后再说一个非常实际的建议：预览前把所有页面都点一遍，把所有表单都提交一遍。很多同学只在首页做了测试，结果答辩现场点到目的地页，发现图片是裂的，或者表单没弹提示。期末验收最怕这种“局部能跑、整体翻车”的情况。动线测试花不了十分钟，但能帮你避免现场最尴尬的局面。

按照我上面这套思路，旅游网站的页面结构能立起来，CSS效果能做漂亮，JS交互也能讲明白。剩下的就是打开代码编辑器，一步步把它写出来。遇到问题别慌，F12控制台和Elements面板是你最好的调试工具，排错一次比抄十遍代码都管用。