在线HTML格式化工具: 整理压缩混乱的HTML
📷 Negative Space / Pexels在线HTML格式化工具: 整理压缩混乱的HTML
压缩后的HTML本就难以阅读。本文介绍何时以及为何需要反向格式化，HTML格式化的工作原理，以及在线格式化工具的局限。
打开来自CMS导出、第三方模板或网页爬虫的HTML文件，发现40,000个字符完全没有缩进的压缩标记全部挤在一行——这是一种特殊的痛苦。你需要理解它的结构。你需要找到导航在哪里结束、主要内容从哪里开始。但现在，你做不到。
这就是HTML格式化工具的用途: 把那堵字符墙还原成人类能阅读和导航的东西。ToolBox Hubs的HTML格式化工具正是做这件事，本指南将介绍何时使用它、它如何工作以及它的局限。
HTML为什么会被压缩
压缩是一种刻意的优化。HTML文件通过网络传输，每个字节都需要时间。通过去除空白、换行，有时还有注释，压缩工具可以在不改变功能的情况下将HTML文件大小减少10-30%。在大规模场景下——每天数百万的页面访问——节省的带宽很重要。
做这件事的工具 (webpack、Vite、各种构建系统、CDN) 并不是故意要让你的生活变得困难。它们只是在做自己的工作。压缩后的文件是生产构件; 格式化后的版本是给开发用的。
问题出现在以下情况:
- 你正在检查一个不是你构建的页面，想要理解它的结构
- 供应商的邮件模板返回时是一行难以理解的代码
- 你的CMS导出压缩HTML，而你需要自定义某些东西
- 你正在调试渲染问题，需要快速找到特定元素
- 同事给你发了「这个HTML」，但很明显它经过了构建流水线
在所有这些情况下，你需要压缩的反向操作: 格式化。这就是我们要做的。
格式化实际上做了什么
HTML格式化工具的核心做两件事: 添加缩进以显示嵌套，添加换行以分隔元素。
给定这个压缩输入:
<!DOCTYPE html><html><head><title>My Page</title></head><body><header><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav></header><main><h1>Hello</h1><p>Some content here.</p></main></body></html>
格式化工具会产生类似这样的输出:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<h1>Hello</h1>
<p>Some content here.</p>
</main>
</body>
</html>
你立刻能看到页面结构: head、带导航的header、主要内容。嵌套展示了文档层次。这就是全部要点。
注意 <li><a href="/">Home</a></li> 保持在一行，而不是被展开成三行。这是有意的——锚点是列表项内的内联内容，把它分割成多行没有任何好处。稍后会详细说明。
块级元素 vs. 内联元素: 为什么对格式化很重要
块级元素和内联元素的区别是HTML格式化工具工作方式的基础，值得简单理解一下。
块级元素 创建自己的「块」空间: 它们从新行开始，占据可用的全部宽度。例如: div、p、section、article、header、footer、h1 到 h6、ul、ol、li、table。这些是缩进的自然候选——每个都有自己的行，其内容缩进在其下方。
内联元素 在文本内容中流动，就像句子中的单词。例如: span、a、strong、em、code、img、button (在大多数情况下)。这些更难格式化。如果你有:
<p>Click <a href="/docs">the documentation</a> for more details.</p>
而格式化工具天真地在 <a> 标签周围添加换行:
<p>
Click
<a href="/docs">the documentation</a>
for more details.
</p>
……这些换行在渲染的HTML中会变成空格，可能改变视觉输出。一个实现良好的格式化工具知道要保守地处理内联元素。
Void元素 是第三类: 不能有子元素因此不需要闭合标签的元素。例如: br、hr、img、input、meta、link。如果它们是块上下文元素，会被格式化为独立的一行，并且不会添加闭合标签，因为HTML规范明确禁止。如果你看到 <br> 而不是 <br />，那是正确的HTML5——自闭合斜杠在HTML中是可选的 (尽管在XHTML和JSX中是必需的)。
实际有用的场景
阅读邮件模板
HTML邮件几乎普遍使用糟糕的、基于表格的标记，然后压缩后投递。当供应商发送邮件模板让你定制时，或者当你调试为什么邮件在Outlook中看起来不对劲时 (一种真正令人沮丧的体验)，第一步是让HTML可读。
把它粘贴到格式化工具中。找到对应你正在编辑的那部分的表格单元格。做出修改。如果需要重新压缩 (尽管大多数邮件提供商也接受格式化后的HTML)。
分析竞争对手的页面
在浏览器DevTools中检查页面会显示格式良好的HTML，因为浏览器的检查器会为你格式化。但如果你通过curl或爬虫下载了原始HTML，得到的是生产构件——通常是压缩的。
格式化工具让你能快速阅读结构。你可以从类名和结构中看出他们在使用什么CMS或框架，理解他们的布局方法，并找到你好奇的特定元素。
这是合法的、常见的，也确实有教育意义。HTML是公开的; 阅读它没问题。
调试CMS输出
WordPress、Drupal等系统经常产生深度嵌套、重复的HTML标记。当某些东西在视觉上看起来不对，你需要找到导致问题的元素时，格式化后的HTML比压缩的代码块要容易搜索得多。
从DevTools复制相关部分，粘贴到格式化工具中，找到有问题的div或错位的类。对于复杂布局，这比浏览检查器树更快。
审查包含HTML变更的Pull Request
如果有人改了一个被自动格式化或空白被规范化的模板文件，diff可能难以阅读——每一行都显示为已更改，因为缩进发生了变化。用一致的设置把新旧版本都通过格式化工具处理，会得到干净、可比较的输出。然后你可以对格式化版本使用文本Diff工具来查看实际的语义变化。
什么时候不该使用格式化工具
格式化工具并不总是合适的工具。明确这一点可以避免混淆。
当你在一个有强制格式化的代码库中工作时。 如果你的项目使用Prettier (大多数现代项目都是)，你已经有了一个格式化工具。再加入另一个会造成不一致和潜在冲突。Prettier处理HTML、JSX以及十几种其他格式。对项目文件请坚持使用它。
当精确的空白很重要时。 在 pre 标签、textarea 元素或用 white-space: pre 样式化的元素内，空白是有意义的。重新格式化会改变内容。一个好的格式化工具不会触碰那些区域，但如果你的会，请停止用于此目的。
当你需要压缩而不是格式化时。 如果你的目标是减小文件大小，你需要的是HTML压缩工具——这个工具的反向。格式化会增加文件大小; 压缩会减小它。
当处理JSX时。 JSX有与HTML不同的规则。请使用带有正确解析器的Prettier。HTML格式化工具会错误处理JSX的类名、自闭合要求和表达式语法。
缩进之争: 2个空格、4个空格还是Tab
我在这里有自己的看法。HTML会快速变得深度嵌套。一个完全正常的页面结构可能看起来像:
html
body
main
section
article
div
p
span
在你写下任何真正的内容之前，已经有8层深度。每层4个空格，你的文本在32个字符处。在标准的80字符行上，你只剩48个字符。加上一两个属性，就要换行了。
每层2个空格时，相同深度是16个字符——你有64个字符的行空间。一切都装得下。结构仍然可见。缩进仍然清晰地显示层次。
Tab会让这更干净 (因为Tab在文件中是单个字符，你的编辑器可以按你喜欢的任何宽度显示)。但Tab在跨编辑器一致性方面有分歧。
我的看法: HTML用2个空格。这是实际中最常见的选择 (Google的HTML样式指南，大多数前端框架)，并且在4空格缩进开始让人感到压抑的深嵌套层级下也能工作。
如果你的团队有不同的标准，请使用那个。代码库内的一致性比任何外部意见 (包括我的) 都更重要。
工具如何处理边界情况
一些值得了解的行为:
注释会被保留。 条件注释 (<!--[if IE]>...)、版权声明和构建时注释都保留在输出中。
Script和style的内容不会被改动。 <script> 标签内的JavaScript不是HTML，<style> 标签内的CSS也不是HTML。一个正确实现的格式化工具会让那些内容保持原样，而不是试图把它们当作HTML标记缩进。如果你想格式化JavaScript，反向粘贴到JS压缩工具中——或者更好的是，单独使用在线JS格式化工具。
格式错误的HTML会被优雅地处理。 现实世界的HTML经常技术上无效: 缺少闭合标签、嵌套不当的元素、没有引号的属性。格式化工具会尝试解析和格式化它得到的内容，而不是拒绝处理无效输入。结果可能不完美，但你会得到可读的东西，而不是错误。
属性顺序被保留。 格式化工具不重新排序属性。如果输入中 class 在 id 之前，输出中也是。这防止了与原始版本比较时不必要的差异。
压缩反向问题
需要知道的一件事: 格式化并不总是完美地反转压缩。压缩工具有时会做出不可逆的选择，例如:
- 删除可选的闭合标签 (
</li>、</td>)——浏览器可以推断，压缩工具省略，格式化工具可能不会重新添加 - 折叠布尔属性 (
disabled="disabled"变为disabled) - 规范化属性引号样式
这意味着如果你格式化一个压缩文件然后重新压缩格式化版本，可能会得到与原始压缩文件略有不同的输出。这没问题——两者在功能上是等效的。只是不要期望完美的往返。
实用工作流程
这是我拿到神秘HTML时如何使用格式化工具:
-
把原始HTML粘贴到HTML格式化工具。
-
先扫描顶层结构。
body下的根级别有哪些元素?那告诉你页面的大致布局。 -
使用浏览器的查找功能 (在格式化输出中按 Ctrl+F / Cmd+F) 跳转到特定的类名、ID或元素类型。
-
如果需要比较两个版本，我会格式化两个版本并通过文本diff工具运行它们以查看实际差异。
-
如果需要清理我自己的HTML模板，我会格式化它，审查结构，然后让我编辑器的Prettier配置处理后续的格式化。
格式化工具是理解的起点，而不是适当开发工具的替代品。
相关工具
格式化工具作为一组工具的一部分效果很好:
- HTML压缩工具 — 反向操作; 通过去除空白来减少文件大小
- HTML转Markdown — 将HTML转换为可读的Markdown; 对从页面提取内容很有用
- XML格式化工具 — 同样的概念但针对XML; 对SVG文件、RSS订阅和API响应很有用
如果你从格式化的HTML开始，想要了解一个页面在语义上实际做什么，HTML转Markdown转换器可以剥离标签并清晰地显示内容结构——这有时比原始标记更有用。
HTML格式化工具是免费的，不需要账户。粘贴、格式化、完成。