这学期Web实验课一共做了六个实验，验总从HTML基础到前后端交互，验总踩了不少坑，验总也搞明白了一些之前一直模糊的验总东西。下面按我实际做的验总顺序和遇到的问题来梳理。

实验一：HTML结构不是验总背标签

第一个实验要求手写一个个人主页，不能用框架。验总我一开始觉得这有什么难的验总，标签嘛，验总h1、验总p、验总div往上堆就是验总了。结果老师看了一眼说：你整个页面全是验总div，语义化标签一个没用。验总后来我把header、验总nav、main、section、article、footer重新理了一遍，才发现HTML不是把内容堆上去就完事。比如article和section的区别，我之前一直混着用——article是独立完整的内容块，section是主题分组。这个区分在写博客页面的时候特别明显，每篇博文用article包，评论区用section，结构一下就清楚了。

实验二：CSS布局踩了float的坑

第二个实验做三栏布局。我按老思路用float，左栏左浮，右栏右浮，中间用margin撑开。浏览器里看着没问题，但一缩小窗口就塌了，footer直接跑上来叠在内容上。查了半天才知道要清除浮动，加了个clearfix。后来老师提了一句flex，我试了一下，三行代码搞定，当时就觉得之前折腾float的时间有点冤。不过话说回来，不理解float的问题，也不会觉得flex有多好用。

实验三：JavaScript操作DOM

这个实验做的是一个待办事项列表，能添加、删除、标记完成。写的时候遇到一个典型问题：用innerHTML动态添加列表项之后，新加的元素绑定不上事件。我一开始把事件绑在具体的li上，后来改成事件委托，绑在父级ul上，通过e.target判断点的是哪个元素。这个坑踩过一次就记住了。另外localStorage存数据的时候，JSON.stringify和JSON.parse来回转，第一次忘了parse，页面上直接显示[object Object]，盯着看了半天才反应过来。

实验四：表单验证与正则

表单验证这个实验看起来简单，写起来琐碎。邮箱、手机号、密码强度的正则我查了不少资料。有个细节：HTML5自带的type="email"和required属性只能做基础校验，真正要自定义提示信息还是得用JS。我写了一个实时校验，input事件触发，边输边提示。但有个问题——用户还没输完就弹红字，体验很差。后来改成blur事件触发校验，输入过程中只做轻量提示，感觉合理多了。

实验五：Ajax与Fetch

这个是让我最头疼的实验。用fetch请求一个公开API，渲染数据到页面上。第一次请求直接报CORS错误，浏览器控制台一片红。换了一个支持跨域的API才跑通。然后就是异步的问题——fetch返回的是Promise，我一开始没加await，拿到的data是个Promise对象，console.log出来是pending状态。加上async/await之后正常了。渲染的时候用模板字符串拼HTML，再insertAdjacentHTML插入，比createElement一个个创建要顺手得多。

实验六：响应式页面

最后一个实验要求做移动端适配。媒体查询写了三套断点，但图片在手机上还是溢出。后来给img加了max-width:100%，height:auto，才老实了。还有一个细节：viewport meta标签别忘了加，不然手机上打开就是桌面版缩小的效果，字小得没法看。

六个实验做下来，最大的感受是：Web前端的东西，看教程觉得都会，一动手就露馅。很多问题只有自己调试过、报过错、改过才真正理解。另外，工具和规范在变，但底层的DOM操作、事件机制、盒模型这些基础没变，把基础打牢比追新框架更实在。