跳到正文

HTML 美化与压缩

HTML Beautifier & Minifier

格式化或压缩 HTML,保留内联元素,是否折叠空白可选。

重新缩进 HTML,让别人扔给你的页面能读;或者在字节数要紧时压缩它。分词器实现了 WHATWG 的 raw-text 和 RCDATA 状态,正是这一点让脚本字符串里的 `</div>` 不会被当成标签、毁掉它后面的一切。

🔒 完全在你的浏览器里运行htmlformatminifyweb
模式
缩进
属性引号
行宽

HTML 输入

拖入 .html 文件

只在这个标签页里读取,不上传。

整理后的 HTML

元素

20

文本节点

13

注释

1

最大深度

5

它管到哪一步

  • · 手写的分词器把 <script>、<style> 当作原始文本读,把 <textarea>、<title> 当作 RCDATA 读,所以字符串里的 </div>不会被当成标签。
  • · <pre>、<textarea> 里面一个字符都不改; <script>、<style> 只是逐行重新缩进,里面的代码不会被改写。
  • · <br>、<img> 这样的空元素(void),以及 <li>、<p>、<td> 这类可以省略结束标签的元素,都按规范处理。缺掉的结束标签不会替你补上。
  • · 压缩只删注释、空白和多余的引号。它不会去掉可选的结束标签,也不会重排属性。
  • · 标签对不上、属性重复,都会带着行号和列号报出来,同时像浏览器那样尽量把文档读完。

里面的 CSS 可以另外用 CSS 美化与压缩整理,脚本可以用 JavaScript 美化与压缩。

怎么用

  1. 粘贴页面或片段

    带 doctype 的整份文档,或从模板里复制出来的一小段。两种都可以;片段只是没有可以往里缩进的 `html` 元素。

  2. 设置布局

    缩进宽度、属性是否统一成双引号、长属性列表在多宽处折行,以及 `html`、`head` 和 `body` 的内容是否缩进——很多手写页面让它们顶格。

  3. 读问题列表

    不匹配的标签和重复的属性会带行列号列出。文档仍然会被格式化——浏览器也照样会渲染它——但每一条都是值得修的东西。

  4. 或者为传输压缩

    注释、空白和不必要的属性引号会被去掉。条件注释和 `<!--!` 注释会保留,前/后的数字显示这样做换来了什么。

常见问题

我的 `<pre>` 块安全吗?

安全。两种模式下 `<pre>` 或 `<textarea>` 里的内容一个字符都不会改——那里的空白就是内容。`<script>` 和 `<style>` 会逐行重新缩进,但它们的内容从不改写。

它会补上我漏写的闭合标签吗?

不会。它理解这些——`<li>`、`<p>` 和 `<td>` 隐式闭合,`<br>` 和 `<img>` 这样的空元素本来就没有闭合标签——所以树是正确建起来的。但写出你没写的标签是编辑,不是格式化。

能格式化模板文件吗——Jinja、ERB、Handlebars?

只在模板语法恰好看起来像文本的范围内可以。`{% if %}` 块不会被理解为结构,所以只要有一个标签在一个分支里打开、在另一个分支里关闭,里面的缩进就是错的。请格式化渲染后的输出。

压缩会改变页面外观吗?

行内元素之间的空白在 HTML 里是有意义的,折叠它是这里唯一可能挪动一个像素的设置——`<span>a</span> <span>b</span>` 和两个 span 紧挨着不一样。如果你的布局依赖它,把「折叠空白」关掉。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。