HTML 格式化的核心就一句话：用统一的缩进、换行和属性排列规则重新排版代码，只改排版不动逻辑。如果你正为标签嵌套混乱、属性顺序随意、团队代码风格不统一而头疼，下面这套规范可以直接照着用。
为什么需要格式化
写 HTML 时常见的偷懒做法是：一行堆十几个标签，div 套 div 套 div，缩进全靠随缘，属性顺序全凭手感。这样写的代码在你自己电脑上看着没问题，换台电脑、换个编辑器就可能排版全乱。
带来的直接后果是：想改需求时翻半天找不到对应位置，只能从头捋一遍；提交代码后同事拉下来一看，排版全乱；代码审查时为空格和换行反复争论。
格式化解决的就是这些问题：该缩进的缩进，该换行的换行，属性该对齐的对齐，标签该闭合的闭合。代码结构清晰后，查找变快，改 bug 也顺手，团队协作时代码风格统一，省下的时间很实在。
核心规则：缩进与层级对齐
缩进用什么
统一使用空格还是制表符，必须在项目内统一。多数前端项目的做法是用 2 个空格或 4 个空格，制表符容易在不同编辑器里显示宽度不一致，导致同一份代码在两个人屏幕上看起来完全不同。
层级怎么对齐
子元素相对父元素缩进一级，同级元素保持相同缩进。闭合标签与对应的开始标签对齐在同一缩进层级。自闭合标签（如 img、br、input）不需要单独的闭合标签。
嵌套层级不宜过深。div 套 div 套 div 到第四五层时，就应该考虑是否可以拆分结构或改用更语义化的标签。
属性换行规则
什么时候换行
元素属性较少时，可以全部写在同一行。当属性数量较多、单行过长时，应把每个属性单独换行，并保持与开始标签相同的缩进再加一级。
属性顺序
属性顺序没有强制标准，但项目内应保持一致。常见做法是把影响元素识别的属性（如 class、id、name）放在前面，把配置类属性（如 data-、aria-）放在后面。这样在代码中查找元素时更容易定位。
分步操作：格式化一次 HTML 文件
- 备份或确认文件已提交到版本控制，确保格式化后可以对比差异。
- 选定缩进方式（空格数或制表符），在整个项目内统一。
- 逐层检查标签嵌套，把同级标签对齐到相同缩进层级。
- 检查所有开始标签是否有对应的闭合标签，自闭合标签是否写成了自闭合形式。
- 对属性过多的开始标签，把每个属性单独换行并对齐。
- 检查 pre、textarea、script、style 等标签内部的内容是否被意外改动，这些标签内的空白和换行往往有实际意义。
- 用编辑器的格式化功能或命令行工具执行一次，再人工核对上述特殊标签。
- 提交前用版本控制对比差异，确认改动只涉及排版。
常见错误
- 把 pre 或 textarea 标签内的内容也重新缩进，导致页面显示内容发生变化。
- 缩进混用空格和制表符，在不同编辑器里显示错位。
- 属性换行后没有对齐，反而比不换行更难读。
- 格式化后没有检查闭合标签，把原本就缺失的闭合标签掩盖过去。
- 只在本地格式化，没有和团队统一规则，导致每次提交都产生大量无关差异。
适用与不适用的场景
适用于：多人协作的项目、需要长期维护的页面、代码审查流程中要求风格统一的情况。
不适用于：已经压缩过的生产环境代码、由构建工具自动生成的文件、以及内部空白有实际语义的标签内容。
正规的 HTML 格式化工具只调整排版，不动逻辑。标签还是那些标签，属性还是那些属性。但前提是选择靠谱的工具，避免把特殊标签里的内容也搞乱。在线版、编辑器插件、命令行工具都可以，挑一个顺手的并保持使用即可。
常见问题
格式化会改坏我的代码吗？
正规工具只调整缩进和换行，不修改标签名、属性名和属性值。但 pre、textarea、script、style 等标签内部的内容需要单独确认，这些地方的空白可能影响实际显示或执行。
缩进用空格还是制表符？
两种都可以，关键是项目内统一。空格在不同编辑器里显示更一致，制表符输入更快。混用是问题，单选一种不是。
属性必须每个都换行吗？
不是。属性少时写一行更紧凑，属性多或单行过长时换行更易读。规则由团队约定，重要的是保持一致。
格式化后产生大量差异怎么办？
说明之前没有统一的格式化规则。建议先单独提交一次纯格式化改动，之后再提交功能改动，避免两者混在一起难以审查。
有没有必要每次都手动格式化？
可以在编辑器里配置保存时自动格式化，但涉及 pre、textarea 等标签时仍建议人工确认一次。