网页结构分析

浏览器拿到一串HTML，网页干的结构第一件事不是急着画界面，而是分析先搭骨架。就像装修房子，网页瓦工不可能上来就刷漆，结构得先把承重墙砌好、分析梁柱立起来。网页这个骨架，结构就是分析DOM树——文档对象模型。

你按下F12，网页看到的结构那些层层嵌套的标签，其实已经是分析浏览器解析完之后的“成品”。它把每一个元素都变成了树上的网页一个节点。html是结构根，head和body是分析它的两个大枝丫，div、p、span这些又挂在各自的枝头。这棵树长什么样，页面就长什么样。有意思的是，很多新手以为HTML写错了浏览器会报错，其实不会。它特别宽容，你漏了个闭合标签，它也能猜出你的意思，硬生生把树给补全。这种宽容有时候反而是坑，因为你根本不知道浏览器替你做了多少“阅读理解”。

树的层级关系，用专业话讲叫“嵌套”，用大白话讲就是“谁在谁里面”。这决定了CSS选择器怎么写，也决定了JavaScript用querySelector能不能精准命中目标。我见过最离谱的页面，一个div套了十几层，每层都有七八个class，改个字体颜色得翻半天。这种结构的病根，多半是当初写的时候没想清楚——到底谁是这块内容的容器，谁是修饰用的“壳”。

再往下看，盒模型是另一个绕不开的东西。每个元素都是一个盒子，有内容、内边距、边框、外边距。这四个东西加起来，决定了元素实际占多大地方。很多人调样式调得抓狂，最后发现是box-sizing没设成border-box。这玩意儿就是浏览器对盒子的默认算法和咱们直觉不一样——你设个宽度200px，结果加上padding和border，实际占了220px。你说气不气人。

布局这块，现在的页面基本靠Flexbox和Grid撑起来。Flex适合一维排列，要么横着排，要么竖着排，几个按钮要对齐，它最顺手。Grid是二维的，像棋盘，你想让某个区域跨两列、另一块占三行，它天生就是干这个的。可很多人混着用，结果搞出一堆嵌套的flex容器，看着都累。其实选哪种，取决于你脑子里想的是“一排按钮”还是“一个面板”。

还有个容易被忽略的点——标签的语义。div和span是万金油，什么都能装，但搜索引擎和屏幕阅读器看不懂。你用div写了个导航栏，又用div写了个页脚，在机器眼里，这俩没区别，都是普通盒子。换成nav和footer，至少人家知道哪里是导航、哪里是版权信息。这不光是为了SEO，更是为了那些靠读屏软件上网的人。说实话，写语义化标签不费多少功夫，收益却是长期的。

最后说个观察：很多人分析网页结构，只盯着视觉呈现，忽视了DOM顺序和实际渲染顺序的差异。CSS的flex-direction能让你把视觉上的第一个元素放在最右边，但DOM里它还是第一个。这对键盘操作和读屏软件影响很大——人家按Tab键走的是DOM顺序，不是你看屏幕的顺序。你要是光顾着视觉爽，把关键操作按钮用flex排到视觉左边，DOM里却在最底下，那用键盘的用户得按十几次Tab才能摸到它。

网页结构说白了，就是一棵树、一套盒模型、一组布局规则，加上一个有意义的标签命名。搞懂这些，你再看任何页面，都像拿着X光机扫视——表面花里胡哨，底子清清爽爽。底子烂的，表面再好看，一改需求就塌。