数据

HTML 格式化

压缩过或由程序生成的 HTML 往往是一整行：标签、属性和文本首尾相连，没有任何换行。这个格式化工具会把它重新缩进成清晰的树状结构，每个元素独占一行，层级一眼可辨。由于真实页面里通常内嵌样式和脚本，它会在同一次处理中一并格式化 <style> 里的 CSS 和 <script> 里的 JavaScript，让整个文件都变得整洁。它先把标记解析成语法树再排版，所以渲染结果分毫不动，改变的只是排版。缩进与换行宽度都可以自己选，全部在浏览器内完成。

  • 把压缩或一整行的 HTML 重新缩进成可读的树状结构，每个元素独占一行、层级与结构一致
  • 不只整理标记，还会在同一次处理中格式化 <style> 里的 CSS 和 <script> 里的 JavaScript
  • 从真正的语法树重新排版，标签、属性与渲染结果分毫不变
  • 全部在浏览器内完成，内部页面、第三方或未发布的内容都不会离开本机
工具/HTML 格式化
正在加载格式化引擎
8%
Prettier 引擎只需下载一次，本次访问期间会被缓存。
缩进
宽度

功能简介

阅读一段不是你写的、或被构建步骤压平的页面，第一步就是把标记重新排成眼睛能跟上的形状。这个工具就做这件事，而不去揣测页面的含义。

  1. 01

    基于解析器重新缩进

    在重新输出之前，先把 HTML 读成一棵语法树，所以工具理解的是元素、属性和层级，而不是靠猜测在哪里断行。来自语法树的排版不会悄悄把内容移出它本该所属的元素。

  2. 02

    内嵌 CSS 与 JS 也一并格式化

    真实页面很少只有标记。每个 <style> 块里的 CSS 和每个 <script> 块里的 JavaScript 都会在同一次处理中重新排版，你不必把它们复制到别的工具里才能读。

  3. 03

    缩进与宽度由你决定

    选两个空格、四个空格或 Tab，把换行宽度设为 80、100 或 120，让带很多属性的长标签在团队期望的位置折行。

  4. 04

    可一眼速览的结构

    每个元素独占一行，子元素缩进在父元素之下，文档轮廓一眼可见。还能一键全部折叠或展开，专注于某一节。

  5. 05

    行数与字节数

    输出栏会显示格式化后的文档展开成多少行以及它的体积，让你一眼看出原始内容到底有多紧凑。

  6. 06

    复制、下载或上传

    从剪贴板粘贴，或从磁盘打开 .html 文件，然后复制整洁的结果或保存下来。整个流程都在本机完成，不会接触服务器。

如何使用

只需几步，就能把一坨不可读的 HTML 变成缩进一致、清爽的文档。

  1. 01

    把压缩或杂乱的 HTML 粘贴到输入栏，或用「上传」从磁盘打开 .html 文件。

  2. 02

    选择缩进风格和换行宽度，以匹配你的项目约定。

  3. 03

    在右侧阅读格式化后的标记，每个元素独占一行，内嵌的 CSS 与 JS 也已排好，并随你调整选项实时更新。

  4. 04

    复制结果或下载为 .html 文件，再放进编辑器里阅读、审查或继续修改。

功能说明

让格式化结果值得信赖、用起来省心的那些细节。

  • 基于 Prettier，它从解析后的表示重新排版，而不是靠猜测在哪里插入换行。
  • 内嵌的 CSS 与 JavaScript 用同一个引擎重新排版，所以整页从头到尾保持一致。
  • 随着输入和切换选项实时格式化，无需先按任何按钮结果就会更新。
  • 语法错误会就地连同信息一起显示，而不是产出半成品或空结果。
  • 不上传、不记录。粘贴的 HTML 留在浏览器里，关闭标签页后即消失。

适合哪些场景

把密集的标记还原成可读形态，在这些场景里最见效。

  1. 阅读压缩过的页面

    当一个页面只剩生产环境或 view-source 里的压缩 HTML 时，在这里格式化，就能看清元素和各部分究竟是怎么组织的。

  2. 审查生成的标记

    模板引擎、CMS 或邮件搭建器的输出常常是压平的。美化之后才谈得上代码审查或审计。

  3. 排查布局或嵌套问题

    缩进后的 HTML 让你更容易发现没闭合的标签、放错位置的元素，或那个悄悄破坏布局的外层容器。

  4. 产出干净的 diff

    把两个版本的页面用同样方式格式化，diff 工具就能显示真正的改动，而不是被空白噪声淹没。

  5. 整理含内嵌代码的片段

    从文档里复制的组件常带着内联的 <style> 和 <script>。一次处理就把标记和内嵌代码一起排好。

  6. 教学与分享示例

    缩进一致的页面，比随手排版的更容易在教程、代码注释或合并请求里讲清楚。

延伸阅读

只处理单一语言？CSS 格式化 单独格式化样式表，而JavaScript 格式化 则对 JavaScript 文件做同样的事。

美化与压缩

美化和压缩是同一个想法的两个相反方向：两者都只动浏览器在标签之间忽略的字符，从不改变含义。一个加上让标记可读的空白，另一个把它去掉。

  1. 排版可逆且安全

    在元素之间加上缩进和换行，不会改变页面的渲染方式。浏览器把一行和四十行当作同一份文档，所以美化是给人看的排版调整，而不是对页面的重写。

  2. 压缩后的 HTML 为何难读

    构建步骤为了省字节去掉了标签之间可选的空白。这对发布很理想，但留下的是一整行，元素、属性和文本全挤在一起，没有可见的边界。

  3. 内嵌代码是文档的一部分

    样式和脚本就住在 HTML 里，只整理标签的格式化工具会把半个文件留在不可读的状态。把 <style> 当 CSS、把 <script> 当 JavaScript 来处理，才能让真实页面从头到尾都整洁。

  4. 它不是反压缩

    美化恢复的是排版，不是原始源码。压缩去掉的注释一去不回，构建内联进来的标记仍然内联。你得到的是可读的 HTML，而不是作者所写内容的逐字节副本。

  5. 空白可能有意义

    与多数代码不同，行内元素之间的空格会影响渲染。格式化工具尊重这一点，所以它在重排文档的同时，不改变它在浏览器里的样子。

  6. 这是阅读与审查工具

    重点在于理解：让被压平或陌生的页面更易速览、对比和推敲。要发布时你仍然会压缩，那是这一步的镜像。

使用建议

把 HTML 格式化用到位的一些习惯。

  • 用美化来阅读和审查，但只要有原始可读源码，就把它作为事实来源。
  • 一个项目固定一种缩进风格和宽度并坚持下去，格式化后的文件之间才能干净地 diff。
  • 记住格式化不会找回注释，也不会撤销构建内联进来的标记；它恢复的是排版，不是原始源码。
  • 对自己的代码库，把格式化工具接入编辑器或 pre-commit 钩子，文件就能保持一致，无需每次手动粘贴。
  • 格式化模板的输出（浏览器实际收到的 HTML），而不是模板语言本身，因为后者用的是这个解析器不认识的语法。

边界与注意事项

这个工具做什么，又把什么留给其他步骤。

  • 它重新缩进单个 HTML 文档及其中内嵌的 CSS 与 JS，不会去抓取外链的样式表、脚本或图片。
  • 它恢复的是排版，不是丢失的信息。被压缩去掉的注释和结构不会回来。
  • Handlebars、Jinja、ERB 等模板语言本身不是 HTML；请格式化渲染后的输出，而不是模板源码。
  • 语法错误会停止格式化并报出，所以严重损坏的输入不会悄悄产出部分结果。

常见问题

关于格式化 HTML 以及何时使用它的常见问题。

美化会改变页面的渲染吗？

不会。它只加上浏览器在标签之间忽略的空白与换行：缩进、元素之间的换行，以及一致的层级。标签、属性和内容分毫不动，会影响行内布局的空白也会被保留，所以渲染出的页面前后看起来一样。

它会格式化 HTML 里的 CSS 和 JavaScript 吗？

会。每个 <style> 块里的 CSS 和每个 <script> 块里的 JavaScript 都会在同一次处理中重新排版，用的是和专门的 CSS、JS 格式化工具相同的引擎，你不必把它们单独拆出来。

它能完全还原压缩吗？

它还原的是排版，不是信息。美化恢复可读的缩进，但压缩去掉的注释一去不回，被内联的标记仍然内联。你得到的是干净可读的 HTML，而不是原始源码的逐字节副本。

有哪些缩进选项？

缩进可选两个空格、四个空格或 Tab，换行宽度可设 80、100 或 120，让带很多属性的长标签在你预期的位置折行。阅读时还能全部折叠、全部展开或开启自动换行。

能格式化 Handlebars、Jinja 这类模板文件吗？

不能直接处理。这个工具格式化的是标准 HTML，也就是浏览器收到的内容。{{ }} 或 {% %} 这类模板语法本身不是合法 HTML，请改为格式化渲染后的输出，或使用理解你模板语言的工具。

我的 HTML 会被上传吗？

不会。一切都在浏览器内运行。你粘贴的 HTML 和打开的文件都在本地处理，绝不传输或存储，关闭标签页后即消失，所以内部页面和未发布的工作都保持私密。

更多相关工具

继续探索数据与格式化工具的其余部分。