HTML 美化与压缩
HTML Beautifier & Minifier
格式化或压缩 HTML,保留内联元素,是否折叠空白可选。
重新缩进 HTML,让别人扔给你的页面能读;或者在字节数要紧时压缩它。分词器实现了 WHATWG 的 raw-text 和 RCDATA 状态,正是这一点让脚本字符串里的 `</div>` 不会被当成标签、毁掉它后面的一切。
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 美化与压缩。
怎么用
粘贴页面或片段
带 doctype 的整份文档,或从模板里复制出来的一小段。两种都可以;片段只是没有可以往里缩进的 `html` 元素。
设置布局
缩进宽度、属性是否统一成双引号、长属性列表在多宽处折行,以及 `html`、`head` 和 `body` 的内容是否缩进——很多手写页面让它们顶格。
读问题列表
不匹配的标签和重复的属性会带行列号列出。文档仍然会被格式化——浏览器也照样会渲染它——但每一条都是值得修的东西。
或者为传输压缩
注释、空白和不必要的属性引号会被去掉。条件注释和 `<!--!` 注释会保留,前/后的数字显示这样做换来了什么。
常见问题
我的 `<pre>` 块安全吗?
安全。两种模式下 `<pre>` 或 `<textarea>` 里的内容一个字符都不会改——那里的空白就是内容。`<script>` 和 `<style>` 会逐行重新缩进,但它们的内容从不改写。
它会补上我漏写的闭合标签吗?
不会。它理解这些——`<li>`、`<p>` 和 `<td>` 隐式闭合,`<br>` 和 `<img>` 这样的空元素本来就没有闭合标签——所以树是正确建起来的。但写出你没写的标签是编辑,不是格式化。
能格式化模板文件吗——Jinja、ERB、Handlebars?
只在模板语法恰好看起来像文本的范围内可以。`{% if %}` 块不会被理解为结构,所以只要有一个标签在一个分支里打开、在另一个分支里关闭,里面的缩进就是错的。请格式化渲染后的输出。
压缩会改变页面外观吗?
行内元素之间的空白在 HTML 里是有意义的,折叠它是这里唯一可能挪动一个像素的设置——`<span>a</span> <span>b</span>` 和两个 span 紧挨着不一样。如果你的布局依赖它,把「折叠空白」关掉。
可以从这些接进来
HTML 转 Markdown
HTML to Markdown
把粘贴的 HTML 或保存下来的网页转成干净的 Markdown——标题、嵌套列表、GFM 表格、围栏代码块都留下——脚本和样式一律丢掉。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS,不重排任何声明,原本的记号序列一个不动。
JavaScript 美化与压缩
JavaScript Beautifier & Minifier
只删注释和空白来压缩 JavaScript 或 TypeScript,不改任何名字;也能把挤成一行的打包产物重新缩进,让它重新可读。
XPath 测试器
XPath Tester
对 XML 或 HTML 求值 XPath 或 CSS 选择器,把命中的节点全部列出来。
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS,不重排任何声明,原本的记号序列一个不动。
HTML 实体编码
HTML Entity Encoder
转义和还原 HTML 实体,输出可选实体名、十进制或十六进制写法。
HTML 转 Markdown
HTML to Markdown
把粘贴的 HTML 或保存下来的网页转成干净的 Markdown——标题、嵌套列表、GFM 表格、围栏代码块都留下——脚本和样式一律丢掉。
JavaScript 美化与压缩
JavaScript Beautifier & Minifier
只删注释和空白来压缩 JavaScript 或 TypeScript,不改任何名字;也能把挤成一行的打包产物重新缩进,让它重新可读。
Base64 编码解码
Base64 Encoder & Decoder
对文本和文件做 Base64 与 Base64URL 编解码,UTF-8 处理正确。
curl 转代码
curl to Code
把一条 curl 命令转成 fetch、axios、Python requests、Go、PHP 或 PowerShell 代码。