html格式化核心是用domparser+递归遍历重建结构，而非正则匹配；必须用'text/html'解析，取.body处理，区分//、块级、内联及自闭合标签的缩进逻辑，并保护模板语法。
HTML格式化不是“加个缩进就完事”，核心在于用浏览器原生解析能力重建结构，而不是靠正则瞎匹配或手动敲空格。直接上 DOMParser + 递归遍历，才是安全、可维护、不破坏业务逻辑的实现路径。
DOMParser 解析 HTML 字符串必须用 text/html
很多人用 DOMParser 时传错 MIME 类型，导致标签被自动修复过度（比如把 <my-tag></my-tag> 改成 <my-tag></my-tag>）或忽略自定义属性。
- 始终用
'text/html'，别用'application/xml'或空字符串 -
parser.parseFromString(rawHtml, 'text/html')返回的是完整Document，取.body才是你要格式化的主体内容 - 如果原始 HTML 没有
，浏览器会自动包裹一层，不用担心结构丢失 - 残缺标签（如
<div><span> 缺闭合）会被自动补全，这是优势，不是 bug<h3>递归遍历 DOM 节点时要区分三类元素</h3> <p>缩进逻辑不能一视同仁，否则 <code><pre class="brush:php;toolbar:false;"></pre>里的换行会被吃掉，<script></script>里的 JS 会错位，内联元素（如<span></span>）强行换行还会破坏布局。-
<pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></style>：原样返回 innerHTML，不递归、不缩进、不处理子节点 - 块级元素（
div、p、section等）：每个子节点前加缩进，标签独占一行 - 内联元素（
span、a、strong等）：和父内容连写，不强制换行，避免插入多余空白 - 自闭合标签（
img、input、br）：结尾不加，但需确保有/（取决于你目标是 HTML5 还是 XHTML）
Prettier 处理 HTML 必须手动设为默认格式化器
VS Code 默认根本不管 HTML 文件——哪怕你装了 Prettier 插件、写了
.prettierrc，右键“Format Document”也不会出现它。- 打开任意
.html文件 → 右键 →Format Document With…→Configure Default Formatter…→ 选Prettier - Code formatter - 关掉
"html.format.enable": true（这是 VS Code 自带格式器的开关，和 Prettier 冲突） -
htmlWhitespaceSensitivity: "css"必须显式配置，否则<p><img>text</p>可能被拆成三行，破坏行内流 -
printWidth: 100比默认 80 更合理，HTML 属性多，80 容易把class和data-强行折行
在线工具里粘贴即用的关键是不上传、不解析模板语法
老项目常混着
{{value}}、{% if %}这类模板标记，用 DOMParser 直接 parse 会报错或吞掉内容。真正可用的本地格式化工具得在解析前做两件事：临时替换模板语法（如把
{{换成__MUSTACHE_START__），等 DOM 树建完再换回来；同时把<script type="text/template"></script>这类非执行脚本块也保护起来。这些细节不处理，格式化后代码就废了。 -
