html格式化本质是保障dom结构正确，而非仅视觉整齐；缩进不决定嵌套关系，浏览器忽略空白符；等void元素禁用或/>，否则引发dom层级错乱；doctype前空格或bom触发quirks mode；结构错误需通过elements面板而非outline排查。
HTML格式化不是“让代码看起来整齐”就够了，缩进、换行、空格这些视觉排版动作，一旦和浏览器解析逻辑冲突，就会引发 DOM 结构错乱、ARIA 失效、可访问性崩溃等真实问题。
缩进不等于嵌套，浏览器根本不看你的空格
很多人以为把 <div> 缩进四格、<code><p></p> 再缩进两格，就代表它们有父子关系。但浏览器解析 HTML 时完全忽略空白符（除了 <pre class="brush:php;toolbar:false;"></pre> 和 white-space 控制的场景）。真正决定结构的是标签是否合法嵌套、是否被浏览器静默修正。
- 错误现象：
<p></p> <div>文字</div>在编辑器里缩进再漂亮，实际 DOM 是<p></p> <div>文字</div> - 验证方法：在 DevTools 的 Elements 面板里看灰色斜体标签、缩进突兀断裂，或执行
document.body.innerHTML对比源码 - 实操建议：VS Code 开启
editor.matchBrackets，光标停在<section></section>上能高亮匹配的，比肉眼数缩进靠谱得多
<img> 加 /> 或
<img> 是 void 元素，在 HTML5 中禁止闭合。写成 <img src="x"> 不是“多写点更安全”，而是明确告诉解析器：“这是两个标签”——第一个被忽略，第二个被当作普通容器，后续所有子节点都会被整体右移一级。
- 典型后果：
<div> <img src="a"><p>文字</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>可能变成<div><img src="a"></div> <img><p>文字</p> - 正确写法：统一用
<img src="x" alt="描述">（省略/>），W3C Validator 报Element img is not closed必须处理，不是警告 - 特别注意：JSX 或 EJS 模板字符串拼接时容易误加
，建议加注释如<!-- end avatar -->显式标记层级
DOCTYPE 前有空行或 BOM 就直接触发怪异模式
必须是文档第一字节。前面哪怕一个空格、一个换行、一个不可见的 UTF-8 BOM（Windows 记事本默认保存带 BOM），浏览器都会放弃标准模式，进入 Quirks Mode —— 盒模型错乱、<code>width 行为异常、float 清除失效，而且不报错。
- 验证方式：打开 DevTools → Elements，顶部显示
Rendered in Standards Mode才算成功；显示Quirks Mode就已失败 - 排查路径：VS Code 确保文件编码为
UTF-8（不是UTF-8 with BOM）；Sublime Text 保存时选UTF-8；检查文件开头是否有空行 - 修复动作：删掉
前所有字符，包括注释、空行、BOM；<code><meta charset="UTF-8">必须紧贴开始，不能放在<title></title>后面
用 outline 调试布局，却漏掉了最致命的结构断裂
很多人一页面错位就狂加 outline: 1px solid red，结果调了半天 CSS，发现根本问题是 <main></main> 根本没包住内容——因为原始 HTML 是 <main><section><p></p>
<div>...</div></section></main>
<p></p> 里不能放 <div>，浏览器早就把它踢到 <code><main></main> 外面了。- outline 只暴露“渲染位置”，不暴露“DOM 归属”。结构崩坏时，元素看着在框里，其实早已不属于那个父容器
- 真要查结构：右键疑似父容器 →
Edit as HTML→ 删个空格再回车，如果子树整体跳出，说明原始结构已被浏览器修正过 - 语义化标签替换（比如
div.header→header）后样式丢失，90% 是 CSS 选择器没同步更新（.header不匹配header），不是标签本身有问题
格式化误区的复杂点在于：它不报错，不红屏，甚至页面看起来“差不多”，但 DOM 已经悄悄变形。一旦叠加表单绑定、ARIA 关系、JS 动态操作，问题才集中爆发——那时再回头改结构，成本远高于一开始就写对。
