徐翊人1. 项目准备与整体规划
1.1 为什么选择旅游网站作为期末大作业
说句实在话，HTML+CSS+JavaScript这门课的期末大作业，选什么主题直接决定你要写多少代码、踩多少坑。旅游网站是很多人的首选，我当年也是这么过来的。它的优势非常明显：页面结构清晰、内容层级分明、视觉效果好出效果，而且特别容易找到优质素材。无论你是去云南、重庆还是某个海岛，图片一放上去，整个页面的档次就上来了。
另外，旅游网站天然需要展示导航栏、轮播图、景点卡片、表单预订、页脚这些模块，而这些恰恰是HTML+CSS+JavaScript三类知识点覆盖最全面的场景。你不需要为了凑内容而硬造功能，因为这些模块本身就是为了解决实际展示需求而存在的，写起来顺理成章，答辩时也说得清楚明白。
还有一点很实际：旅游网站的信息架构简单直接，首页、目的地列表、景点详情、关于我们，这种结构非常经典。哪怕你做到一半发现代码出问题了，重做成本也比做一个复杂业务系统低得多。对于期末大作业来说，稳定的可交付性比什么都重要。
1.2 整体页面结构与栏目规划
开始写代码之前，先把网站的目录结构定下来。我的做法是先用纸笔画一个简单的站点地图，不用画得多精细，但要把页面之间的跳转关系理清楚。
一个标准的旅游网站大作业通常包含以下页面：
- 首页：导航栏、轮播图、热门目的地推荐、推荐理由简述、页脚
- 目的地列表页：以卡片形式展示多个景点，点击可跳转详情页
- 景点详情页：大图展示、文字介绍、景点参数表格、预订按钮
- 关于我们/联系方式页：团队简介、联系方式表单、地图占位
如果你是单人完成，不建议页面数量超过4个。原因很简单：你写4个页面可以保证每个页面都精益求精，写8个页面大概率会有几个页面属于凑数状态，反而拉低整体印象分。我见过不少同学做了6个页面，结果有3个页面连样式都没写完，还不如踏踏实实做4个完整页面。
页面的层级关系可以这样设计：
text复制index.html -> 首页
destinations.html -> 目的地列表页
detail.html -> 景点详情页（可从列表页跳转）
about.html -> 关于我们页
静态资源单独放一个文件夹：
text复制project/
├── css/
│ ├── style.css // 全局样式
│ └── home.css // 首页专用样式（可选）
├── js/
│ ├── main.js // 公共脚本
│ └── slider.js // 轮播图脚本
└── images/
├── banner1.jpg
├── banner2.jpg
├── banner3.jpg
└── ...其他图片
这种分文件夹的方式，在写代码的时候可能觉得“多此一举”，但等到答辩演示或者后期修改的时候，你会庆幸自己当初分了类。而且老师在看项目的时候，文件夹结构本身就是一项考察点，一个干净整齐的目录结构会留下很好的第一印象。
1.3 配色方案与整体风格定调
旅游网站的配色，我建议走“清爽明亮”路线，少用深色背景。你可以想象一下携程、马蜂窝这些旅游网站，基本都是白色或浅色背景，配合蓝色或绿色作为主色调，看起来干净、专业，也符合旅游这个行业的视觉调性。
我当时用的配色方案是：
- 主色：
#2E8B57（海洋绿），用于导航栏、标题、按钮主色 - 辅色：
#FF8C00（深橙色），用于特价标签、价格文字、预订按钮 - 背景色：
#F8F9FA（浅灰白），用于页面整体背景 - 文字色：
#333333（深灰），用于正文内容
这个配色方案我用了很多年，至今觉得它非常稳。原因在于主色和辅色在色环上距离较远，对比明显，但又不会刺眼。你可以在浏览器里打开任意一个旅游网站，吸取它的颜色看看，大概率也是类似逻辑。
字体的选择上，如果不考虑网络加载，可以直接用系统字体栈：
css复制font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
这样在Windows和macOS上都能正常显示，不需要额外引入字体文件。关于引入外部字体的坑，我后面会用专门的章节细说。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. HTML页面结构搭建
2.1 HTML骨架与DOCTYPE、字符集、视口的正确写法
写完规划，打开编辑器，第一个动作就是写HTML骨架。有些同学喜欢直接复制之前项目的代码，我不建议这样。骨架代码就那么几行，手写一遍反而能加深印象，而且能避免把之前项目里一些乱七八糟的meta标签带进来。
一个标准、规范的HTML骨架应该是这样：
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>
...
</body>
</html>
这里有几个容易忽略的细节，我逐一说：
DOCTYPE声明：<!DOCTYPE html>必须写在第一行。如果不写，浏览器会进入“怪异模式”，导致CSS盒模型的边距计算方式跟标准模式不一样。你可能会遇到明明设置了width: 200px，但实际渲染出来却不对的问题，很多时候就是DOCTYPE缺失导致的。
charset声明：<meta charset="UTF-8">放在<head>标签的最前面。如果你用的是GB2312编码的中文注释，而HTML声明的是UTF-8，那就会出现中文乱码。建议所有文件统一使用UTF-8编码。
viewport声明：<meta name="viewport" content="width=device-width, initial-scale=1.0">这行代码是让页面在手机浏览器上能正常缩放的开关。不写这行，你的响应式布局在手机上会变成“页面上放一个缩小版”的效果，而不是真正的适配。
lang属性：<html lang="zh-CN">标记页面语言为简体中文，这个属性对SEO和屏幕阅读器友好，也应该写上。
2.2 导航栏的HTML布局与语义化标签
导航栏是整个页面的门面。一个干净的导航栏，不仅要视觉上好看，HTML结构上也要符合语义化规范。
我的建议是使用<header>和<nav>标签来构建导航栏，而不是随便用一串<div>拼接。语义化标签的好处有两个：一是方便搜索引擎理解页面结构，二是代码可读性更好，你三个月后回来看自己的代码，也能一眼看出哪里是头部、哪里是导航。
html复制<header class="header">
<div class="container header-inner">
<h1 class="logo">
<a href="index.html">玩转云南</a>
</h1>
<nav class="nav">
<ul class="nav-list">
<li><a href="index.html" class="active">首页</a></li>
<li><a href="destinations.html">目的地</a></li>
<li><a href="detail.html">景点详情</a></li>
<li><a href="about.html">关于我们</a></li>
</ul>
</nav>
</div>
</header>
这里有一个细节值得展开：<h1>标签通常只应该出现一次，放在logo的位置最为合适。有些同学可能会在页面中间加一个<h1>显示“欢迎来到旅游网站”，这其实是多余的。一个页面只有一个<h1>，它在logo上就已经完成了页面主要标题的职责，其余内容应该用<h2>、<h3>逐级递减。
导航栏中的“当前页面”项，我习