静态网页作业

我花了三个通宵，静态用记事本敲出一份关于老北京胡同的网页静态网页作业。提交那天，作业老师盯着屏幕看了半分钟，静态然后问我：“这真是网页你写的？”我点头。他说：“行，作业有点意思。静态”

静态网页这事儿，网页说穿了就是作业HTML加CSS，不用数据库，静态不用服务器，网页连JavaScript都可以不碰。作业但正因为简单，静态反而考验人对结构的网页理解。我见过太多同学用Dreamweaver拖出一堆表格嵌套的作业页面，代码乱得像被猫抓过的毛线球。我偏不，我手写。

写胡同那页的时候，我特意去拍了二十多张照片，选了七张色调相近的，统一调成暖黄色。每张图下面配一段百来字的文字，讲门墩的雕刻，讲鸽哨的声音，讲夏天槐树荫下的棋局。图片用figure标签包着，figcaption里写图注。段落之间用hr隔开，但把默认的横线样式改成了虚线，像老墙上的砖缝。

有个细节我到现在还记得。为了让页面在手机上也好看，我用了flex布局，但导航栏在窄屏时需要折叠。我没学JavaScript，就用了details和summary标签。点开“菜单”二字，下面弹出链接列表。这招是逛国外一个复古网页论坛时偷学来的，纯HTML5，零脚本。老师后来评价说，这种“笨办法”反而比引入一堆框架更显诚意。

最费劲的是配色。我选了深灰做底色，字用浅米色，超链接是砖红，悬停时变成铜绿。这四样颜色是我从胡同墙上剥落的漆皮、旧木门上的铜环、青砖缝里的苔藓里提炼出来的。为了对比度达标，我调了不下二十遍。有个晚上室友都睡了，我盯着屏幕上的色块，突然觉得这跟调一碗炸酱面的酱没什么区别——多一分则咸，少一分则淡，全凭手感。

交作业前夜，我把所有图片压成webp格式，体积小了近一半，但肉眼看不出差别。又给每张图加了alt属性，描述得具体，比如“一扇半开的朱漆木门，门环是黄铜兽首”。这习惯是跟一个做无障碍测试的朋友学的，他说网页不光给人看，也得给读屏软件听。

提交后第二天，老师把我叫到办公室，问能不能把这份作业留作下一届的参考样例。我说行，但有个条件——得把源代码里的注释留着。那些注释里有我半夜改代码时骂自己手残的话，也有突然想通某段布局后写的“哦，原来这样就行”。老师说没见过这么“有人味儿”的代码。

其实静态网页就像手写信。现在谁还手写信呢？都发微信。但正因为少，一笔一画才显得贵重。我那份作业里没放一个花哨的动画，也没用任何现成模板，就是老老实实的语义化标签，清晰的层级，恰到好处的留白。它不炫技，但每个标签都摆在该在的位置上，像胡同里的砖，一块压着一块，严丝合缝。

后来我把那份作业传到了自己的域名下，偶尔还会打开看看。页面加载时，那张门墩的照片会先模糊后清晰，像从远处走近一扇门。这种体验靠的不过是loading="lazy"加上CSS的过渡效果。但每次看到，我还是会想起那个凌晨三点，我盯着屏幕，终于把导航栏对齐了，窗外传来第一声鸽哨。