打开Chrome开发者工具，网页随便找一个网页，结构按下F12，分析你会看到一堆嵌套的网页<div>。别急着关掉。结构这些标签不是分析随便堆的，它们构成了页面的网页骨架。分析网页结构，结构本质上就是分析搞清楚这些标签之间的父子、兄弟关系，网页以及它们各自承担什么角色。结构

我习惯从最外层开始看。分析<html>下面通常只有两个子元素：<head>和<body>。网页<head>里装的结构是给浏览器和搜索引擎看的东西——字符编码、标题、分析CSS链接、meta描述。<body>才是用户真正看到的内容。很多人分析结构时直接跳到<body>，结果遇到样式问题又得回头翻<head>，来回折腾。先花十秒扫一眼<head>，知道页面用了什么框架、加载了哪些资源，后面会省事很多。

<body>内部的结构因站而异。新闻类网站通常有清晰的语义标签：<header>包住logo和导航，<main>里放文章，<aside>塞侧边栏，<footer>收尾。但电商网站就乱得多，一个商品列表可能嵌套七八层<div>，class名全是“goods-item-wrapper-inner”这种。这时候别硬啃，用开发者工具的“选择元素”功能，点一下页面上的目标区域，工具会自动高亮对应的DOM节点。从那个节点往上翻，看它的父级、祖父级，很快就能理清局部结构。

分析时注意几个关键点。第一，看标签的语义。<nav>就是导航，<article>就是独立内容块，<section>通常带标题。如果满屏都是<div>，说明开发者没怎么考虑可访问性，但结构本身仍然存在——你只需要靠class名和层级关系来判断。第二，看重复模式。列表项往往有相同的标签结构和class前缀，找到第一个，剩下的就是复制粘贴。第三，看内容与容器的对应关系。一段文字被<p>包着，一张图在<figure>里，一个按钮是<button>而不是<div>，这些细节决定了结构的清晰度。

举个实际例子。假设你要抓取某博客的文章标题和摘要。打开开发者工具，找到标题所在的<h2>，它的父级可能是<div class="post-card">，里面还有<img>、<p class="excerpt">、<span class="date">。这时候你就能写出选择器：.post-card h2 拿标题，.post-card .excerpt 拿摘要。如果结构里用了<article>标签，选择器可以更语义化：article h2。结构分析的目的就是产出这种可复用的定位规则。

还有一点容易被忽略：动态内容。很多页面初始HTML里只有空容器，数据是JS加载后塞进去的。你在开发者工具里看到的DOM可能和“查看网页源代码”看到的不一样。分析时以Elements面板为准，因为那是运行时结构。如果某个区域在源代码里找不到，大概率是异步渲染的，得去Network面板看XHR请求。

最后说个笨办法但很管用：把目标区域的HTML复制出来，粘贴到编辑器里，手动缩进一遍。缩进的过程中，嵌套关系会变得非常直观。哪些标签是多余的，哪些层级可以合并，一眼就能看出来。我做过几次之后，再看复杂页面，脑子里自动就生成树状图了。

网页结构分析没有标准答案。同一个页面，有人看到的是<div>汤，有人看到的是清晰的内容分区。差别在于你有没有带着目的去拆——是为了写爬虫、调样式，还是改模板。目的不同，关注的层级就不同。但底层逻辑一样：从根节点出发，沿着父子关系走，直到找到你要操作的那个元素。