HTML 格式化
压缩过或由程序生成的 HTML 往往是一整行：标签、属性和文本首尾相连，没有任何换行。这个格式化工具会把它重新缩进成清晰的树状结构，每个元素独占一行，层级一眼可辨。由于真实页面里通常内嵌样式和脚本，它会在同一次处理中一并格式化 <style> 里的 CSS 和 <script> 里的 JavaScript，让整个文件都变得整洁。它先把标记解析成语法树再排版，所以渲染结果分毫不动，改变的只是排版。缩进与换行宽度都可以自己选，全部在浏览器内完成。
功能简介
阅读一段不是你写的、或被构建步骤压平的页面，第一步就是把标记重新排成眼睛能跟上的形状。这个工具就做这件事，而不去揣测页面的含义。
- 01
基于解析器重新缩进
在重新输出之前，先把 HTML 读成一棵语法树，所以工具理解的是元素、属性和层级，而不是靠猜测在哪里断行。来自语法树的排版不会悄悄把内容移出它本该所属的元素。
- 02
内嵌 CSS 与 JS 也一并格式化
真实页面很少只有标记。每个
<style>块里的 CSS 和每个<script>块里的 JavaScript 都会在同一次处理中重新排版，你不必把它们复制到别的工具里才能读。 - 03
缩进、宽度与间距由你决定
选两个空格、四个空格或 Tab，把换行宽度设为 80、100 或 120，让带很多属性的长标签在团队期望的位置折行。「间距」决定行内元素周围怎么取舍：「精确」保持空白原有的语义分量，「易读」让每个元素独占一行。
- 04
可一眼速览的结构
每个元素独占一行，子元素缩进在父元素之下，文档轮廓一眼可见。还能一键全部折叠或展开，专注于某一节。
- 05
行数与字节数
输出栏会显示格式化后的文档展开成多少行以及它的体积，让你一眼看出原始内容到底有多紧凑。
- 06
复制、下载或上传
从剪贴板粘贴，或从磁盘打开不超过 2 MB 的 .html 文件，然后复制整洁的结果，或以打开时的文件名派生出的名字保存下来。整个流程都在本机完成，不会接触服务器。
如何使用
只需几步，就能把一坨不可读的 HTML 变成缩进一致、清爽的文档。
- 01
把压缩或杂乱的 HTML 粘贴到输入栏，或用「上传」从磁盘打开 .html 文件。
- 02
选择缩进风格和换行宽度以匹配项目约定，再挑「精确」间距保持渲染完全一致，或挑「易读」让每个元素独占一行。
- 03
在右侧阅读格式化后的标记，每个元素独占一行，内嵌的 CSS 与 JS 也已排好，并随你调整选项实时更新。
- 04
复制结果或下载为 .html 文件，再放进编辑器里阅读、审查或继续修改。
功能说明
让格式化结果值得信赖、用起来省心的那些细节。
- 基于 Prettier，它从解析后的表示重新排版，而不是靠猜测在哪里插入换行。
- 内嵌的 CSS 与 JavaScript 用同一个引擎重新排版，所以整页从头到尾保持一致。
- 随着输入和切换选项实时格式化，无需先按任何按钮结果就会更新。
- 标记本身读不通会中止本次格式化，并连同原因、行列位置和出错处的代码片段一起报出，而不是产出半成品。
- 内嵌的 CSS 或 JavaScript 解析不了时，那一段会按你写的样子留下，文档其余部分照常重排——一段坏脚本不会让你失去整个结果。
- 不上传、不记录。粘贴的 HTML 留在浏览器里，关闭标签页后即消失。
适合哪些场景
把密集的标记还原成可读形态，在这些场景里最见效。
-
阅读压缩过的页面
当一个页面只剩生产环境或 view-source 里的压缩 HTML 时，在这里格式化，就能看清元素和各部分究竟是怎么组织的。
-
审查生成的标记
模板引擎、CMS 或邮件搭建器的输出常常是压平的。美化之后才谈得上代码审查或审计。
-
排查布局或嵌套问题
缩进后的 HTML 让你更容易发现没闭合的标签、放错位置的元素，或那个悄悄破坏布局的外层容器。
-
产出干净的 diff
把两个版本的页面用同样方式格式化，diff 工具就能显示真正的改动，而不是被空白噪声淹没。
-
整理含内嵌代码的片段
从文档里复制的组件常带着内联的
<style>和<script>。一次处理就把标记和内嵌代码一起排好。 -
教学与分享示例
缩进一致的页面，比随手排版的更容易在教程、代码注释或合并请求里讲清楚。
延伸阅读
只处理单一语言？CSS 格式化 单独格式化样式表，而JavaScript 格式化 则对 JavaScript 文件做同样的事。反过来，当文件已经定稿、要以尽可能小的体积发出去时，那是 HTML 压缩。
美化与压缩
美化和压缩是同一个想法的两个相反方向：两者都只动浏览器在标签之间忽略的字符，从不改变含义。一个加上让标记可读的空白，另一个把它去掉。
-
排版可逆且安全
在元素之间加上缩进和换行，不会改变页面的渲染方式。浏览器把一行和四十行当作同一份文档，所以美化是给人看的排版调整，而不是对页面的重写。
-
压缩后的 HTML 为何难读
构建步骤为了省字节去掉了标签之间可选的空白。这对发布很理想，但留下的是一整行，元素、属性和文本全挤在一起，没有可见的边界。
-
内嵌代码是文档的一部分
样式和脚本就住在 HTML 里，只整理标签的格式化工具会把半个文件留在不可读的状态。把
<style>当 CSS、把<script>当 JavaScript 来处理，才能让真实页面从头到尾都整洁。 -
它不是反压缩
美化恢复的是排版，不是原始源码。压缩去掉的注释一去不回，构建内联进来的标记仍然内联。你得到的是可读的 HTML，而不是作者所写内容的逐字节副本。
-
空白可能有意义
与多数代码不同，两个行内元素之间的那个空格会影响渲染。「精确」间距尊重这一点，在重排文档的同时不改变它在浏览器里的样子——这也是收尾尖括号有时会单独占一行的原因。「易读」间距则用这个保证换更干净的排版。
-
这是阅读与审查工具
重点在于理解：让被压平或陌生的页面更易速览、对比和推敲。要发布时你仍然会压缩，那是这一步的镜像。
使用建议
把 HTML 格式化用到位的一些习惯。
- 用美化来阅读和审查，但只要有原始可读源码，就把它作为事实来源。
- 一个项目固定一种缩进风格和宽度并坚持下去，格式化后的文件之间才能干净地 diff。
- 记住格式化不会找回注释，也不会撤销构建内联进来的标记；它恢复的是排版，不是原始源码。
- 对自己的代码库，把格式化工具接入编辑器或 pre-commit 钩子，文件就能保持一致，无需每次手动粘贴。
- 格式化模板的输出（浏览器实际收到的 HTML），而不是模板语言本身，因为后者用的是这个解析器不认识的语法。
边界与注意事项
这个工具做什么，又把什么留给其他步骤。
- 它重新缩进单个 HTML 文档及其中内嵌的 CSS 与 JS，不会去抓取外链的样式表、脚本或图片。
- 它恢复的是排版，不是丢失的信息。被压缩去掉的注释和结构不会回来。
- Handlebars、Jinja、ERB 等模板语言本身不是 HTML；请格式化渲染后的输出，而不是模板源码。
- 标记里的语法错误会停止格式化，并报出位置。内嵌的 CSS 或 JavaScript 解析不了则不会中止，那一段原样保留即可。
常见问题
关于格式化 HTML 以及何时使用它的常见问题。
美化会改变页面的渲染吗？
不会。它只加上浏览器在标签之间忽略的空白与换行：缩进、元素之间的换行，以及一致的层级。标签、属性和内容分毫不动，会影响行内布局的空白也会被保留，所以渲染出的页面前后看起来一样。
它会格式化 HTML 里的 CSS 和 JavaScript 吗？
会。每个 <style> 块里的 CSS 和每个 <script> 块里的 JavaScript 都会在同一次处理中重新排版，用的是和专门的 CSS、JS 格式化工具相同的引擎，你不必把它们单独拆出来。
它能完全还原压缩吗？
它还原的是排版，不是信息。美化恢复可读的缩进，但压缩去掉的注释一去不回，被内联的标记仍然内联。你得到的是干净可读的 HTML，而不是原始源码的逐字节副本。
有哪些缩进选项？
缩进可选两个空格、四个空格或 Tab，换行宽度可设 80、100 或 120，让带很多属性的长标签在你预期的位置折行。「间距」在「精确」与「易读」之间切换：前者绝不改变页面的渲染，后者让每个元素独占一行，但可能在原本没有空格的两个行内元素之间多出一个空格。阅读时还能全部折叠、全部展开或开启自动换行。
能格式化 Handlebars、Jinja 这类模板文件吗？
不能直接处理。这个工具格式化的是标准 HTML，也就是浏览器收到的内容。{{ }} 或 {% %} 这类模板语法本身不是合法 HTML，请改为格式化渲染后的输出，或使用理解你模板语言的工具。
如果我的 HTML 有语法错误会怎样？
你会拿到原因、行列位置，以及出错处附近的一小段源码，而不是一份半成品文档。解析器遵循浏览器的那套 HTML 规则，所以它能替你补上的未闭合标签会被静默补齐；真正让它停下的是根本无法自洽的标记，比如没有开始标签的结束标签，或者引号从未闭合的属性。
我的 HTML 会被上传吗？
不会。一切都在浏览器内运行。你粘贴的 HTML 和打开的文件都在本地处理，绝不传输或存储，关闭标签页后即消失，所以内部页面和未发布的工作都保持私密。