html结构重构不是重写，而是用语义标签“校准”内容意图；判断是否该动需看三类信号：仅靠class支撑语义、div占比超60%且无业务逻辑、tab焦点顺序跳脱视觉流。
怎么判断当前HTML结构该不该动
别急着删
。先打开 DevTools，用 Elements 面板选中任意区块，看它是否只靠
class="header" 或 class="sidebar" 表达语义——没有对应原生标签，就是信号。运行 document.querySelectorAll("div").length / document.querySelectorAll("*").length，结果超过 0.6（即 div 占比超 60%），且多数没业务逻辑，说明结构已退化为样式容器。再试键盘 Tab 导航：焦点顺序跳脱视觉流（比如从页脚直接跳回导航栏），基本可断定 landmark 缺失或 tabindex 滥用。
替换语义标签时最常踩的坑
不是所有 div 都能直接换成 section 或 article，关键看内容是否具备独立性与可分发性：
-
<header></header>和<footer></footer>必须是其最近的body或article/section的直系子元素；嵌套错层会让屏幕阅读器把页脚读成某篇文章的结尾 -
<main></main>全局只能出现一次，且不能是article、aside、nav的子元素；仪表盘多卡片场景应改用多个section+aria-labelledby -
<nav></nav>只包裹主导航链接组；面包屑、分页、文章内锚点链接不属于它，误用会干扰 NVDA 等工具的快捷键导航 -
<section></section>要求内部至少含一个标题（h1–h6），否则语义失效；它不是div的高级替代品
嵌套层级控制在多少层才安全
不是越浅越好，而是每层都得有明确职责。实测中，DOM 嵌套超过 4 层就会明显拖慢 CSS 选择器匹配和 querySelector 查询速度：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 典型健康路径：
body→main→section→article→h2/p/figure - 遇到必须深嵌的情况（如表单内嵌动态组件），优先用
template或slot拆离渲染逻辑，而不是堆div - 用
document.querySelectorAll("*").forEach(el => el.children.length > 50 && console.log(el.tagName))扫描子元素超 50 的节点——这类容器建议拆成多个section分批加载 - 连续
div > div > div的选择器（如.a .b .c p）会触发深度回溯，应改用 Flex/Grid 布局压平 2–3 层包裹
重构后怎么验证是否真变好了
别只看代码缩进整齐了。真正有效的验证点很务实：
- 用 Lighthouse 运行 Accessibility 审计，确保
"heading-levels"、"landmark-roles"、"logical-tab-order"全部通过 - 手动关闭 CSS，检查纯 HTML 是否仍能按逻辑顺序阅读——这是语义结构是否成立的黄金测试
- 在 Chrome DevTools 的 Elements 面板里右键任意元素 →
"Break on" → "Attribute modification"，观察 DOM 变更是否聚焦在预期区域，避免无意识污染其他模块 - 用
document.querySelectorAll('div > div > div > div')检查是否返回非空结果；若有，说明深层嵌套未收敛，需继续重构
复杂点不在标签怎么换，而在于每个语义容器是否真的承载了它该承载的逻辑边界——一旦脱离上下文单独拎出来，还能被正确理解，才算重构到位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
