规避非闭合错误导致页面错位的HTML代码质量自愈重构机制
浏览器elements面板可一眼识别未闭合标签：一见footer误入header等异常嵌套，二见节点边缘红色/灰色提示，三见edit as html后结构跳变，四查table/ul/ol内非法子元素导致dom失真。
页面突然错位、footer跑进header、JS查不到元素——八成不是CSS或JS写错了，而是某个<div>漏了<code>
，浏览器已偷偷重排DOM结构。
浏览器Elements面板里怎么一眼看出标签没闭合
别翻源码，直接看DevTools的Elements面板，那是浏览器实际构建的DOM树：
，漏了立刻可见
开启html.suggest.html5，确保补全建议符合HTML5规范，不推荐XHTML风格写法
配合emeraldwalk.runonsave + tidy-html5命令，保存时自动格式化并报未闭合节点错误
注意：Prettier默认不检查结构闭合，加了htmlWhitespaceSensitivity: 'strict'也只管空格，不管<div>有没有<code>
。
W3C Validator和jsdom验证逻辑差异在哪
本地开发用W3C在线校验最快，但CI流程必须程序化验证：
-
W3C Markup Validation Service是规范级检查，标出Unclosed element div、End tag for element p omitted等原始错误
-
jsdom（Node环境）是解析级检查，能模拟浏览器真实纠错行为，比如<div><p>text</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div>会被重排成两个独立块
- Java用
Jsoup.parse(html)无法直接捕获普通块级标签遗漏闭合，得靠doc.body().html()对比原始字符串长度突变来间接判断
真正要交叉验证：先用htmlhint扫文本级错误（如tag-pair规则），再用W3C或jsdom加载后检查实际生成的DOM结构。
动态插入HTML时怎么避免innerHTML撕裂
拼字符串极易出错，尤其在循环+条件分支里：
- 永远用模板字面量+显式闭合结构：
const html = `<div class="card">
<h3>${title}</h3>
<p>${desc}</p>
</div>`
- 避免分开拼
<div>和<code>
