HTML 格式化与压缩

什么是 HTML 格式化？#

HTML 格式化器处理的是“标签丢了形状”的标记——模板引擎把所有标签压成一行、粘过来的片段带着别人的缩进习惯、或者一块邮件模板改了半年已经没人记得结构——把这些重新缩进，让嵌套层级一眼可见。反方向的操作“压缩”，则是把浏览器不需要的东西全删掉：注释、标签之间的空白，把文档压到最小。

本页两个方向都做，而且做法不同——因为 HTML 就需要区别对待。**Format（格式化）**用 js-beautify 的 html_beautify，统一缩进元素、保留你真正想要的换行。Minify（压缩）是一个保守的手写扫描器。它遵守的最重要的规则是：<pre>、<code>、<textarea>、<script>、<style> 这几种元素的内容一字不动——压缩 <pre> 块或 <script> 里的空白会直接弄坏页面，因为在这些元素里，空白本身就是数据，不是装饰。一个不懂这条规则的 naive 压缩器，正是“线上某个代码示例的缩进突然消失”的典型元凶。

怎么用#

1. 把标记粘进左侧 HTML 框，或点 Sample 加载一段示例文档。
2. 在工具栏选 Indent（缩进）：2、4（HTML 默认）、或 tab。标记嵌套深，4 空格在阅读时更舒服。
3. 点一个操作按钮：
   • Format —— 用 js-beautify 重新缩进，保留已有换行，不会把你手动断行的地方硬捏到一起。
   • Minify —— 删掉 HTML 注释、把标签之间的空白压成零、裁剪普通文本节点里的空白——但 <pre>、<code>、<textarea>、<script>、<style> 内部原样保留。
4. 在右侧 Output 框查看，Copy 复制；Clear 清空两边。

主要特性#

• 该保留的保留。 压缩时，<pre>、<code>、<textarea>、<script>、<style> 的内容逐字复制。这些元素里的空白是有意义的，删了会改变浏览器渲染结果。
• 压缩删注释、格式化留注释。 <!-- ... --> 只在你明确点 Minify 时才删。Format 一律保留。
• 对 HTML 友好的默认缩进。 4 空格——嵌套深的标记用更宽的缩进更好读。需要的话可切到 2 或 tab。
• 左右双栏、复制就绪。 输入可编辑，输出只读，一键复制。
• 只在你的浏览器里跑。 js-beautify 打包进本页、按需加载；无后端、不上传，标记留在你自己的设备上。

实例演示#

一段从模板里抠出来的商品卡片段，里面有注释和一个 <pre> 块：

输入：

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

选 4 空格，点 Format：

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

再对同一份输入点 Minify：

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

三件事值得注意。注释没了。标签之间的空白没了——</span> 和 <pre> 现在直接相邻，这是安全的，因为 HTML 里标签之间的空白是装饰。但 <pre> 内部的换行（npm install 与 npm run build 分两行）原封不动还在。这就是规则在干活：压掉装饰，保留数据。

常见问题#

为什么压缩后有些标签之间还留着单个空格？#

两个块级标签之间“纯空白的文本节点”会被整个删掉。但一行文本里的单个空格——比如 Hello <em>world</em>——是关键，删了就把两个词拼一起了。扫描器保留有意义的文本空格，只删纯装饰性的标签间空白。

压缩会删属性、去引号、改默认值吗？#

不会。它不重写属性语法、不剥引号、不折叠布尔属性、不删 type="text"。这些变换需要带 schema 知识的完整 HTML 解析器，而且很容易改错；本工具选择稳妥路线，只删注释和装饰性空白。

会压缩我 <script> 里的 JavaScript 吗？#

不会。<script> 的全部内容原样透传——既因为改它可能破坏 ASI，也因为压缩 JS 这件事在 format/js 工具页另有一个专门工具。如果你想把脚本也压了，把它单独抠出来、用那个工具跑一遍、再贴回来。

它懂 {{ var }} 或 {% if %} 这种模板语法吗？#

Format 会在模板标记周围重新缩进，通常产出可读的结果。Minify 把模板标签当普通文本处理，所以不会以改变其含义的方式折叠其中的空白。重度使用模板时，把输出当成一个不错的起点，最后对着你的渲染器核一遍。