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