Air君陈怡帆又到期末了，很多同学都在为HTML+CSS+JavaScript的大作业发愁。今年我选了足球这个主题，做成一个带赛事信息、球星卡片和计分交互的网站，全程用前端三件套手写，没有依赖任何框架。这篇就把我从构思到交作业的完整过程拆开讲，包括怎么设计页面结构、怎么用Flex和Grid布局、怎么做CSS动画，以及JavaScript交互里最容易踩的坑。想对着做一份像样期末作业的同学，可以直接抄作业。
1. 先想清楚再动手：足球网站的整体设计思路
1.1 为什么选足球主题：期末作业的选题方法论
很多同学一到期末就纠结，到底做什么主题。我的建议是，选题一定要选自己稍微了解的东西。我平时看球，所以天然知道足球网站需要放什么内容：赛事信息、球队名单、球星资料、比分数据。这些内容本身就是结构化的，做起来思路清晰；更重要的是，足球相关的视觉元素（绿茵场、足球、球衣配色）给了CSS很大的发挥空间，能让你在样式上做出亮点，而亮点恰恰是期末评分里拉开差距的地方。
选题还有一个容易被忽略的点——主题要有足够的“素材密度”。做美食网站要放菜谱、图片和制作步骤，做读书网站要放书单和书评，做足球网站则天然有赛程、球队、球星、积分榜这些现成内容。内容越丰富，页面越充实，答辩时老师问“你这些内容是从哪来的”，你也好回答。如果选一个自己完全不了解的冷门主题，很可能做到一半发现内容凑不满，最后只能靠大段占位文字凑数，得不偿失。
1.2 HTML、CSS、JavaScript各自负责什么
这里必须先把三者的分工说清楚，这是期末答辩时几乎所有老师都会问的第一个问题。HTML决定页面有什么，比如标题、图片、表格、按钮，它负责内容和结构；CSS决定页面长什么样，比如颜色、大小、间距、动画，它负责表现和布局；JavaScript决定页面怎么动，比如点击按钮切换图片、提交表单弹提示、比分自动累加，它负责行为和交互。
对应到足球网站里，HTML是赛程表本身，CSS是球队的主场配色和球衣设计，JavaScript就是裁判的哨子——一吹哨，比赛结果就开始变化。这个类比我在答辩时直接用上了，老师听完点了点头。所以哪怕你代码写得一般，只要能把三者关系讲清楚，也能给老师留下“这学生是真理解了”的印象。
1.3 页面结构规划：一页式还是多页式
考虑过做成多个页面，但后来发现对期末作业来说，一个结构清楚的长页面反而更容易拿高分。原因有几点：第一，一页式网站天然适合用锚点导航，导航栏点“最新赛程”“球星阵容”“给我们留言”就能平滑滚动到对应区域，这个交互本身就是评分点；第二，一页式便于老师快速浏览，不需要在不同HTML文件里跳来跳去；第三，多页式网站需要处理多个页面间的链接和样式的统一，如果对CSS不熟很容易出现“这页样式和那页不一样”的尴尬。
所以我最终的目录结构只有三个文件：
text复制football-website/
├── index.html # 页面结构
├── styles.css # 所有样式
└── script.js # 所有交互
这样文件少、依赖少，交作业时也不容易漏发文件。如果你想把项目做得更有“体系感”，可以再加一个images文件夹专门放图片素材，但核心建议是保持文件精简，不要整出一堆连自己都记不清用途的文件。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 用HTML搭出足球页面的骨架
2.1 文档头部的规范写法
很多同学交上来的HTML文件，头部直接写个就开始堆内容，其实这是会被扣印象分的。规范的文档头应该包含DOCTYPE声明、语言标识、字符编码、视口设置和标题。我用的就是最常见的那套：
html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>足球世界 - HTML+CSS+JavaScript 期末大作业</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
...
<script src="script.js"></script>
</body>
</html>
DOCTYPE声明放在第一行，告诉浏览器这是HTML5文档；lang="zh-cn"表示页面内容以简体中文为主，对SEO和屏幕阅读器友好；charset="utf-8"保证中文不乱码，很多新手页面出现乱码，90%都是因为少了这行。viewport是给移动端适配用的，虽然期末作业不一定要求响应式，但加上