浏览器将未闭合<div>渲染成整页嵌套，因其HTML解析器采用容错重排策略：连续多个<div>仅闭合最后一个时，解析器会将前几个自动延展至文档末尾，导致DOM树深度爆炸、CSS选择器失效、querySelector查找不到元素。
为什么浏览器会把没闭合的 <div> 渲染成一整页嵌套？
因为 HTML 解析器采用“容错重排”策略，遇到未闭合标签时不会报错，而是尝试推测意图——比如连续写 5 个 <div> 却只闭合最后一个，解析器会把前 4 个自动延展到文档末尾，导致 DOM 树深度爆炸、CSS 选择器失效、JS querySelector 找不到目标元素。
用 innerHTML 动态插入时如何避免标签撕裂？
直接拼接字符串极易出错，尤其在循环中混入条件分支。关键不是“写对”，而是“不让它有机会写错”：
- 永远用模板字面量 + 显式闭合结构：
const html = `<div class="card"><h3>${title}</h3><p>${desc}</p></div>`; - 避免在字符串里拼
<div>和</div>分开写，更别用+=累加片段 - 若必须分段构建，改用
DocumentFragment+createElement，绕过字符串解析阶段
VS Code 里怎么一眼揪出漏闭合的 <li> 或 <span>？
依赖人眼扫描不可靠，要靠工具链实时拦截：
- 装 Prettier + ESLint 插件，配置
html-validate规则集，开启no-missing-end-tag - 在
.vscode/settings.json中强制启用格式化 onSave："editor.formatOnSave": true,"html.format.enable": true
- CI 流程中加
npm run lint:html（基于html-validateCLI），让未闭合标签无法合入主干
服务端渲染（SSR）时 res.send() 前还能补救吗？
不能。Node.js 的 res.send() 是流式输出，一旦开始发送就无法回溯修正。真正能干预的环节只有两个：
立即学习“前端免费学习笔记（深入）”；
- 模板引擎层：EJS / Handlebars 必须启用
strict: true模式，让未闭合标签直接抛SyntaxError - 预编译阶段：用
html-validate或tidy --show-warnings yes扫描所有.html和模板文件，失败即中断构建 - 切忌在
res.send()前用正则替换“补漏”——<img>、<input>这类自闭合标签会被误伤
最危险的不是写错，是错得悄无声息；DOM 结构偏差往往在交互逻辑崩坏后才暴露，而那时已难定位到最初那个漏掉的 </section>。
