为什么和里的内容没有重新缩进？

和中的空白会原样显示，而改动或里的缩进可能改变代码或字符串，所以这些块会被原样保留。

HTML 格式化 - 免费在线工具

功能特性

HTML 标签自动缩进

缩进方式可自定义

保留或删除注释

语法高亮

使用方法

1. 把 HTML 标记粘贴到左侧的输入框。

2. 点击「格式化」按正确缩进美化代码。

3. 点击「压缩」去除所有空白。

4. 在右侧复制或下载结果。

关于这个工具

从浏览器、CMS 或压缩构建里复制出来的 HTML 常常是一整行，根本没法读。这个格式化工具重新缩进代码，让每个嵌套元素比父元素多缩进一级，结构、缺失的闭合标签和放错位置的元素一眼就能看出来。它能识别 <br>、<img>、<input> 这类永远没有闭合标签的空元素，并完整保留 <pre>、<textarea>、<script> 和 <style> 中的内容，因为其中的空白是有意义的。可以选择两个空格、四个空格或制表符，然后复制或下载结果。“压缩”则反过来，删除注释并折叠标签之间的空白，为生产环境减小页面体积。

常见问题

格式化会改变页面的显示效果吗？

大多数情况下不会，浏览器会忽略块级元素之间的空白。但在行内元素之间（比如并排的两个链接或 span），增减一个换行可能让间距多出或少掉一个空格，所以行内元素较多的代码格式化后请检查一下。

为什么 <pre> 和 <script> 里的内容没有重新缩进？

<pre> 和 <textarea> 中的空白会原样显示，而改动 <script> 或 <style> 里的缩进可能改变代码或字符串，所以这些块会被原样保留。

格式化工具会修复无效的 HTML 吗？

不会修复或校验标记。它只缩进收到的内容，这通常能让未闭合的标签等问题暴露出来。检查规范符合性请使用 W3C 验证器。

“压缩”会删除什么？

它删除 HTML 注释和标签之间不必要的空白，依赖空白的内容（例如 <pre> 中的文字）会被保留。对生产网站来说，服务器端的 gzip 或 Brotli 压缩比单纯压缩 HTML 节省得更多。

能格式化 Vue、Angular 等模板语法吗？

{{ name }} 这样的模板表达式会作为文本保留，组件标签像普通元素一样缩进。但属性值中含有尖括号的复杂指令可能让普通 HTML 格式化工具出错，请检查输出结果。

HTML 格式化与美化

功能特性

使用方法

关于这个工具

常见问题

相关工具