在Web开发过程中，HTML作为页面结构的基础语言，代码的规范性和可读性直接影响开发效率与协作体验。很多新手编写HTML时容易忽略缩进和格式，导致代码层级混乱，后续修改和维护十分困难。合理的格式化能让代码结构一目了然，那么HTML代码如何格式化？又有哪些好用的缩进与格式化工具值得推荐呢？
HTML代码格式化的核心规则
手动格式化HTML代码不需要复杂的操作，遵循几个基础规则就能让代码变得清晰易读：
- 标签嵌套时，子标签要比父标签多缩进一个层级，通常使用2个或4个空格作为缩进单位，保持全项目统一即可。
- 每个标签单独占一行，不要将多个标签挤在同一行，尤其是包含内容的标签，分开书写更容易区分层级。
- 闭合标签要和对应的开启标签对齐，比如<div>的</div>要和<div>处于同一缩进层级。
- 属性较多的标签，可以将属性分行书写，每个属性单独占一行并对齐，提升可读性。
手动格式化示例
下面是未格式化和格式化后的HTML代码对比：
<!-- 未格式化的代码 -->
<div class="container"><h1>标题</h1><p>段落内容</p><ul><li>列表项1</li><li>列表项2</li></ul></div>
<!-- 格式化后的代码 -->
<div class="container">
<h1>标题</h1>
<p>段落内容</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>好用的HTML格式化工具推荐
1. 编辑器内置格式化功能
主流代码编辑器都自带HTML格式化功能，无需额外安装插件就能使用：
- VS Code：打开HTML文件后，按下
Shift+Alt+F（Windows）或Shift+Option+F（Mac）即可快速格式化当前文件，还可以在设置中自定义缩进空格数、标签换行规则等。 - WebStorm：右键点击编辑区域，选择
Reformat Code选项，或者按下Ctrl+Alt+L（Windows）或Command+Option+L（Mac）就能完成格式化，支持批量格式化整个项目文件。
2. 编辑器插件
如果需要更灵活的格式化规则，可以给编辑器安装专门的格式化插件：
- VS Code的
Prettier插件：支持HTML、CSS、JavaScript等多种语言的格式化，可以配置自动格式化时机，比如保存文件时自动格式化，还能统一团队内的格式化规则，避免协作时的格式冲突。 - VS Code的
Beautify插件：专门针对前端代码的格式化工具，支持自定义缩进、标签换行、属性排序等规则，适配不同的编写习惯。
3. 在线格式化工具
如果不想安装编辑器或插件，也可以使用在线工具快速格式化HTML代码：
- FreeFormatter：打开网页后粘贴HTML代码，选择格式化选项，点击格式化按钮即可得到规范代码，还支持压缩、转义等附加功能。
- Code Beautify：支持多种代码的格式化，HTML格式化功能可以自定义缩进大小、是否保留空行等参数，操作简单便捷。
格式化工具的配置建议
使用自动化工具时，建议根据项目需求统一配置格式化规则，避免不同开发者格式化后的代码风格差异过大。如果是团队项目，可以将格式化配置文件（比如Prettier的.prettierrc）提交到代码仓库，所有成员使用相同的规则，保证代码风格一致。
下面是Prettier的HTML格式化配置示例：
{
"tabWidth": 2,
"useTabs": false,
"printWidth": 120,
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": true
}总的来说，HTML代码格式化并不复杂，掌握基础规则后，结合合适的自动化工具，能大幅减少手动调整格式的时间，让开发过程更顺畅，代码也更易维护。