上周帮朋友改他的网站作业网站作业，打开文件我愣了三秒——首页正中间一张巨大的网站作业GIF动图，火焰特效循环播放，网站作业底下是网站作业彩虹色渐变文字“欢迎来到我的个人主页”。导航栏六个按钮，网站作业点进去四个是网站作业空的。他说老师要求至少五个页面，网站作业他就复制粘贴了五个HTML文件，网站作业改了个标题。网站作业

这不是网站作业个例。我翻过十几份不同学校的网站作业“网站作业”，发现一个规律：大部分人把精力花在了“看起来像个网站”上，网站作业而不是网站作业“网站到底要干什么”。

那些年我们踩过的网站作业坑

最典型的毛病是布局。很多人用<table>做排版，网站作业这玩意儿上世纪确实流行过，但现在你打开任何一个正经网站，没人这么干了。用table布局的页面，缩放窗口时内容会像积木一样散架。有个同学交上来的作业，在1920分辨率下看着还行，我把他浏览器窗口拖窄一点，侧边栏直接飞到页面最底部去了。

CSS写成一锅粥也是常态。我见过一个页面里同时出现行内样式、<style>标签和外部样式表，三套规则互相打架。问就是“网上搜的代码直接粘过来的”。其实把样式统一放一个文件里，用class选择器，能省掉后面80%的调试时间。

还有个隐蔽的问题：图片不压缩。一张手机拍的风景照直接塞进<img>标签，文件大小4MB起步。整个作业文件夹加起来快50MB，打开页面等图片加载等了七八秒。我跟他说你用PS或者在线工具压一下，宽度设成800px就够了，他回我一句“老师没教”。

老师到底在看什么

我拿自己当助教的经历说。批改网站作业时，我首先看的是HTML结构是否语义化。用<div>堆出来的导航栏和用<nav>写出来的，一眼就能分辨。前者是“能跑就行”，后者说明你至少翻过MDN文档。

然后是响应式。不用你写多复杂的媒体查询，但至少把viewport那行meta标签加上。我见过最离谱的，页面在手机上打开，文字小得要用放大镜看——因为整个页面写死了1200px宽度。

最后才是视觉效果。但“好看”不等于“花哨”。有个女生做的摄影作品展示页，灰白配色，图片网格排列整齐，鼠标悬停时图片微微放大，过渡动画0.3秒。没有一处多余装饰，但每个细节都到位。那份作业拿了全班最高分。

一个能救命的建议

如果你现在正在做网站作业，打开你的HTML文件，把下面这行代码加进<head>里：

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

然后再检查你的图片，用在线压缩工具过一遍，目标是把每张图控制在200KB以内。最后，把所有CSS从HTML里抽出来，单独放一个style.css文件。这三步做完，你的作业至少能超过60%的同学。

别追求炫酷特效。一个结构清晰、加载迅速、手机能正常看的网站，比满屏飘雪花要有价值得多。我那个朋友后来把火焰GIF删了，换成一张自己拍的城市夜景做背景，导航栏改成固定的半透明条，作业最后拿了85分。他说早知道这么简单，当初就不该折腾那些花里胡哨的东西。