第一次打开 web 实验的验报代码包时，我盯着那个只有十几行的告心 HTML 文件笑了——这也叫实验？结果三小时后，我对着浏览器控制台里满屏的验报红色报错，连 CSS 选择器都没写对。告心事情是验报这样的：实验要求做一个响应式卡片布局，我心想 flexbox 早用熟了，告心直接开写。验报容器设了 display:flex，告心卡片宽度写死 300px，验报浏览器一缩窗口，告心卡片全挤成一条线。验报我以为是告心媒体查询没加，加了三个断点，验报还是告心不对。后来把宽度改成 min-width:280px 加 flex-wrap，验报才勉强能看。但手机模拟器上，卡片间距又莫名其妙多出 8px。查了半天，发现是 HTML 里两个 div 之间有换行，inline-block 的幽灵空白节点。我把父容器 font-size 设成 0，再在卡片里恢复字号，问题消失。这种坑，书上不会写，只有自己踩过才记得住。

实验做到第三天，我开始理解为什么老师坚持让我们手写 CSS 而不是用框架。有个任务是实现一个导航栏，鼠标悬停时下拉菜单要平滑展开。我第一版用 height 从 0 到 auto 做过渡，结果浏览器根本不认——auto 不是可动画值。换成 max-height 设一个固定值，过渡是有了，但菜单项少的时候会延迟，多的时候又会被截断。最后用 grid-template-rows 从 0fr 到 1fr，配合 overflow:hidden，才算干净解决。这个方案我在 MDN 上翻了四遍才找到。那几天我养成了一个习惯：每次写完样式，先按 F12 把盒模型调出来，看 margin 和 padding 到底堆在哪一层。有次一个按钮死活对不齐，查了半小时，发现是 body 默认 margin 8px 没清掉。这种低级错误，在真实项目里可能被 reset.css 挡掉，但实验里没人帮你兜底。

JavaScript 部分更折腾。实验要求用 fetch 拉一个本地 JSON 文件渲染列表，我路径写对了，但浏览器一直报 CORS 错误。我以为是文件协议的问题，换了 http-server 起本地服务，还是不行。后来发现是 JSON 文件里多了一个尾随逗号——就一个逗号，控制台只提示“Unexpected token”，不告诉你哪一行。我用二分法删代码，删到第三轮才定位到。渲染的时候又遇到异步问题：fetch 是异步的，我直接在后面写 DOM 操作，拿到的当然是空数组。改成 async/await 之后，又忘了处理加载状态，页面白屏了两秒，用户根本不知道发生了什么。加了一个简单的 loading 文字，体验立马不一样。这些细节，实验报告里不会扣分，但自己心里清楚——代码是能跑，和代码好用，中间差着几十个这种小决定。

最后一天做表单验证，我写了一个正则检查邮箱格式，测试的时候用“a@b.c”居然通过了。查了 RFC 标准才发现，顶级域名至少两位，我的正则里 { 2,} 写成了 { 1,}。改完又发现，用户输入大写字母时，我的正则没加 i 标志，但邮箱本身不区分大小写——这种边界情况，不自己造测试用例根本想不到。实验结束那天，我把所有代码重新读了一遍，删掉了三处重复的 CSS 变量定义，把两个功能相同的工具函数合并成一个。代码行数少了 15%，可读性反而上去了。这大概就是 web 实验最实在的收获：不是学会了某个 API，而是养成了“先怀疑自己”的调试直觉。浏览器不会骗你，报错在哪，问题就在哪，只是你得学会听懂它的话。