HTML 格式化与压缩 - 变好读或变更小

HTML 格式化与压缩

这个工具能做什么

对同一段文字做两件相反的事。格式化加上换行和缩进,让人能看清嵌套;压缩则去掉浏览器用不上的一切。这里两件事都作用在你给的字符上,而不是在一个重建出来的文档上,所以出来的仍然是你的标记。

使用方法

  1. 1 粘贴 HTML——整页或者只是一个片段都行。
  2. 2 选好缩进,然后点格式化或压缩。
  3. 3 复制结果,或者再按另一个按钮跑一遍做对比。

空白并不总是噪音

在两个行内元素之间,一个空格就是可见的文字:删掉它,「一 二」就变成了「一二」。而在块级元素之间,同样的空格什么也不是。这里的压缩会去掉缩进,但会保留那个真正在干活的分隔空格。

为什么 pre 和 textarea 原封不动

在它们内部,每一个空格和换行都是读者会看到的内容。给代码块重新缩进,会悄悄改变它显示的东西;修剪 textarea,会改变表单提交的值。script 和 style 也一样:里面是另一种语言,原样放行。

它只做格式化,不做修复

建立在浏览器解析器之上的工具会悄悄修好损坏的标记:替你闭合标签、丢掉多余的、把元素挪到规范要求的位置。调试时这往往不是你想要的——你正在追的那个 bug,可能恰好就是被「修好」的那个。这个工具只重排文本,把错误留在你能看见的地方。

压缩 HTML 只是小赢

把一页的空白清掉,通常只省下百分之几,而服务器上的 gzip 本来就会把这部分压掉大半。真正的重量在图片、字体和脚本上。压缩 HTML,是因为某个模板生成器留下了没法读的输出,而不是因为你指望页面会快很多。

HTML 格式化 - 常见问题

格式化在一种特定情况下会:在行内元素之间加换行,会带来一个本来没有的空格。如果某个布局依赖两个 span 紧挨着,那就格式化外面的块,但别动那一行。压缩这一侧,正是为了避免同一个问题的反面。
今日热门
YAML 格式化 重新整理杂乱 YAML 的缩进,按行号定位错误,并以 JSON 形式回看文档。注释、块标量与锚点都会保留。全部在浏览器中完成。
新
Markdown 编辑器 编写 Markdown 并并排查看渲染结果。支持标题、列表、表格、代码块和链接;可复制 HTML 或下载 .md 与 .html 文件。在浏览器中运行。

相关开发工具

JSON 格式化 在浏览器里格式化、压缩并校验 JSON。出错位置精确到行列,可折叠的树状图展示结构。
CSS 压缩 去掉注释和空白来压缩 CSS,或者重新展开成整齐的缩进。calc() 中的空格、字符串和许可证注释都原样保留。
XML 格式化 把乱糟糟的 XML 缩进成能读的样子,或者压小。支持 RSS、CDATA 和命名空间,绝不改写你的文档。
SQL 格式化 把长查询拆成好读的几行,或者再挤回一行。关键字大小写、带引号的名字和字符串原样保留。
JavaScript 压缩 用 Terser 压缩 JavaScript——构建工具用的就是它。它解析代码而不是猜,行为不变。什么都不会上传。

您可能喜欢的其他工具

Word转PDF 免费把 Word 转成 PDF:上传 DOC、DOCX、ODT 或 RTF 文件,几秒内下载排版完好的 PDF,无需注册。
PDF转Word 免费把 PDF 转成 Word:上传 PDF,几秒内下载可编辑的 DOCX 文件,无需注册,也没有水印。
字数统计器 免费字数统计:粘贴文本即可统计字数、字符、句子与段落,并估算阅读时间,内容不会离开浏览器。
字符计数器 免费字符统计:统计含空格与不含空格的字符数、词数和行数,并检查标题与元描述的 SEO 长度限制。
关键词密度检查器 免费关键词密度分析:粘贴文本或网址,查看每个词与短语出现的次数及占比,辅助内容优化。