浏览器按F12，网页开发者工具里那个Elements面板，代码是解析每个网页最诚实的解剖台。你看到的网页不是代码，是代码层层嵌套的盒子里装着文本、图片、解析视频，网页每个盒子有自己的代码边框、间距和填充——像俄罗斯套娃，解析但每层都能单独设置宽高颜色和位置。网页这就是代码HTML的真相：它不是编程语言，是解析一份结构说明书。

写网页的网页人常犯一个错，以为标签越多越厉害。代码实际上，解析一个干净的HTML文件，读起来应该像一张设计图纸。我见过最夸张的案例，有个同事为了给按钮加个小红点，套了五层div——后来需求改了，红点要变成蓝色，他找了半小时才定位到那个样式在第三层的子元素上。这哪是写代码，分明是给自己埋地雷。

标签本身有语义。h1就是大标题，p就是段落，button就是按钮。你用div模拟按钮，浏览器能识别，但读屏软件瞎了——视障用户用屏幕阅读器时，听到的不是“按钮”，而是“分组”。这不是玄学，是实打实的无障碍问题。别小看这个，全球有2.5亿视障人群，你的页面他们打不开，等于把这些人挡在门外。

CSS呢？它管的是“长什么样”。同一个HTML，换个样式文件，能从性冷淡风变成赛博朋克。这有点像装修：结构是毛坯房，CSS是刷墙铺地板的功夫。但装修不能乱来——你见过给承重墙贴泡沫砖的吗？前端圈天天吵的“flex还是grid”，本质就是选哪种砌墙方式更适合当前房间。

说个反直觉的事：很多页面加载慢，不是网速问题，是CSS写得烂。一个10KB的样式文件，如果写满了重复选择器和冗余属性，浏览器解析起来比读100KB的干净代码还费劲。我有次把一个客户官网的CSS从48KB压缩到9KB，加载快了将近一秒。那客户问我做了什么魔法，我说没魔法，就是删掉了2000行没人用的样式。

JavaScript是最后一块拼图，负责让页面“动起来”。但很多人忘了，JS是增强，不是基础。一个页面没有JS，应该还能完整阅读内容；没有HTML，那就真成白纸了。我见过最离谱的页面——整个网站用JS渲染，结果用户禁用脚本后，只剩一片空白和一行提示。搞技术的都明白，这叫本末倒置。

现在打开你手边任意一个网站，按Ctrl+Shift+C，鼠标悬停在标题上。看到那个蓝色高亮框了吗？那个框的边界，就是元素的实际大小。如果你能看到padding区域是绿色的，margin是橙色的——恭喜你，Chrome的检查器默认配色已经教会了你盒模型。这种可视化调试，比背十遍文档都有用。

网页代码解析，说白了就是三件事：HTML定骨架，CSS管皮相，JS给灵魂。但骨架得正，皮相得宜，灵魂才有的附。你去看那些设计得好的网站，源码往往像一篇好文章——段落分明，主次清晰，注释恰如其分。代码是写给人看的，顺带让机器执行。这个顺序，从1991年第一个网页诞生起，就没变过。