用记事本写第一个HTML文件时，网页我把<h1>标签错打成了<hl>，制作总结浏览器里那个标题死活不显示。实验盯着屏幕看了十分钟，报告才反应过来是网页字母l和数字1搞混了。这大概是制作总结每个网页制作新手都会踩的坑——标签闭合、属性引号、实验路径斜杠，报告少一个字符页面就给你脸色看。网页

这次实验课要求用HTML+CSS做一个个人主页。制作总结我选了深色背景配亮色文字，实验觉得这样看起来“专业”。报告结果在浏览器里打开，网页文字和背景糊成一团，制作总结对比度太低，实验自己都看不清。后来翻教程才知道，深色背景得配浅灰或白色文字，而且字号不能太小。改完之后页面顺眼多了，但导航栏又出了问题——用<ul>做的菜单，每个<li>前面都有个小圆点，怎么都去不掉。查了半天，原来要加list-style: none;。这种细节，光看教材根本记不住，非得亲手调一遍。

布局方面，我最初用<table>来排版。对，就是那种老掉牙的方法。把导航、内容、页脚全塞进表格单元格里，调来调去还是歪的。后来换成<div>加float，勉强能看了，但清除浮动又折腾了一阵。clear: both;写上去的瞬间，页脚终于不再往上跑。现在回头看，flexbox才是真香，可惜实验那会儿还没学。不过用float踩一遍坑也有好处，至少明白了文档流和盒模型到底怎么回事。

图片路径是另一个重灾区。我把图片放在images文件夹里，HTML文件在根目录，写src="images/photo.jpg"没问题。但CSS文件在css文件夹里，背景图路径就得写成../images/bg.png。那个“..”代表上一级目录，我一开始漏了，背景死活不出来。浏览器控制台报404错误，我盯着Network面板看了半天才找到原因。这种路径逻辑，说穿了很简单，但第一次接触就是会绕晕。

表单部分我加了个留言框，用<textarea>和<input type="submit">。点提交按钮没反应，因为没写action和method。其实实验不要求后端处理，但看着按钮点下去页面刷新一下又回到原样，总觉得少了点什么。后来加了个onsubmit="return false;"，至少不刷新了。这种“假装能用”的感觉，做前端的人应该都懂。

调试过程中，F12开发者工具成了我最常按的键。右键检查元素，直接改CSS看效果，比改文件再刷新快多了。有次改着改着，发现浏览器里的样式和文件里不一样，原来是缓存问题。Ctrl+F5强制刷新之后才同步。这个坑让我养成了随时清缓存的习惯，虽然有点神经质，但确实省时间。

实验报告要求写“心得体会”，我本来想写“学会了HTML和CSS基础”。太假了。真实情况是：我学会了用搜索引擎精确描述问题，学会了看浏览器报错，学会了在W3C文档里找属性说明。代码本身倒背如流没用，关键是知道去哪儿查、怎么试。网页制作这件事，看十遍教程不如自己敲一遍，敲一遍不如故意改错再修一遍。那个把<hl>改成<h1>的瞬间，比任何理论讲解都记得牢。

最后交上去的页面其实很简陋——深色背景、居中标题、三张图片、一个表单。但每个标签都是我手打的，每行CSS都是调过的。打开浏览器看到自己的名字显示在标题栏上，那种感觉，比考试拿高分实在。