规避偶发未闭合引起的页面变形：HTML代码质量自愈机制
html5解析器严格按规范自动补全未闭合标签，依据插入模式和开放元素栈逆序闭合，目标是生成可遍历dom树而非还原作者意图，故补全后结构虽合法但语义可能错乱，如nav意外包裹main导致css选择器失效、js获取父节点错误。
靠编辑器自动补全或浏览器容错，解决不了偶发未闭合导致的页面变形——它不是“少打一个<header></header>或<nav></nav>里。
为什么浏览器自动补全反而让布局更糟
HTML5 解析器不看缩进、不读语义，只按插入模式和开放元素栈逆序闭合。比如写<nav><div>content</div></nav><main>…</main>但漏了<main></main>变成<nav></nav>的子元素——CSS 的nav > main选择器突然失效，JS 用document.querySelector('main')拿到的父节点却是nav。
- 表格类标签（
<table>、<code><tr>、<code><td>）对嵌套错误极度敏感，一处漏闭合，整块结构被提前截断
<li>
<code><p></p>遇到块级标签（如<div>）会立刻自闭合，导致后续内容脱离预期段落流
<li>粘贴外部 HTML 片段时，若原片段已有部分闭合标签，编辑器盲目补全会造成重复闭合，比如<code><div></div>
用 htmlhint + tidy-html5 做最小可行自愈流水线
这不是“AI 修复”，而是检查 → 报错 → 结构重建三步闭环。关键在tidy-html5：它比编辑器懂嵌套逻辑，能基于 HTML5 规范重建合法 DOM 树，而不是机械配对。
HTML Extract
使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...
下载
- VS Code 安装
HTMLHint插件，配置.htmlhintrc启用end-tag、id-unique等规则
- 安装
tidy-html5命令行工具（macOS 用brew install tidy-html5，Windows 下载二进制）
- 绑定保存时自动执行：
"html.format.enable": false（禁用 VS Code 自带格式化），改用tidy -w 120 -i -m -utf8覆盖原文件
- 注意：
tidy不会保留注释位置，也不处理 JS 字符串内的
开发者工具 Elements 面板才是真实源码
别信你写的 HTML 源码，要信浏览器渲染出的 DOM 树。F12 打开 Elements 面板后，重点盯三处：
- 所有
<div>、<code><section></section>、<article></article>是否成对出现，且闭合顺序与开启顺序严格倒置
-
<p></p>下面有没有意外出现<div>——规范禁止，但浏览器会容错，结果是<code><p></p>被提前闭合
<table>内部是否出现<code><div>或<code><span></span>直接子元素——这些会被解析器移到 table 外，造成布局断裂
真正难防的不是漏写
