HTML 格式化与压缩
这个工具能做什么
对同一段文字做两件相反的事。格式化加上换行和缩进,让人能看清嵌套;压缩则去掉浏览器用不上的一切。这里两件事都作用在你给的字符上,而不是在一个重建出来的文档上,所以出来的仍然是你的标记。
使用方法
- 1 粘贴 HTML——整页或者只是一个片段都行。
- 2 选好缩进,然后点格式化或压缩。
- 3 复制结果,或者再按另一个按钮跑一遍做对比。
空白并不总是噪音
在两个行内元素之间,一个空格就是可见的文字:删掉它,「一 二」就变成了「一二」。而在块级元素之间,同样的空格什么也不是。这里的压缩会去掉缩进,但会保留那个真正在干活的分隔空格。
为什么 pre 和 textarea 原封不动
在它们内部,每一个空格和换行都是读者会看到的内容。给代码块重新缩进,会悄悄改变它显示的东西;修剪 textarea,会改变表单提交的值。script 和 style 也一样:里面是另一种语言,原样放行。
它只做格式化,不做修复
建立在浏览器解析器之上的工具会悄悄修好损坏的标记:替你闭合标签、丢掉多余的、把元素挪到规范要求的位置。调试时这往往不是你想要的——你正在追的那个 bug,可能恰好就是被「修好」的那个。这个工具只重排文本,把错误留在你能看见的地方。
压缩 HTML 只是小赢
把一页的空白清掉,通常只省下百分之几,而服务器上的 gzip 本来就会把这部分压掉大半。真正的重量在图片、字体和脚本上。压缩 HTML,是因为某个模板生成器留下了没法读的输出,而不是因为你指望页面会快很多。
HTML 格式化 - 常见问题
格式化在一种特定情况下会:在行内元素之间加换行,会带来一个本来没有的空格。如果某个布局依赖两个 span 紧挨着,那就格式化外面的块,但别动那一行。压缩这一侧,正是为了避免同一个问题的反面。
最受欢迎的开发工具
全部时间
新
Markdown 编辑器
编写 Markdown 并并排查看渲染结果。支持标题、列表、表格、代码块和链接;可复制 HTML 或下载 .md 与 .html 文件。在浏览器中运行。
相关开发工具
JSON 格式化
在浏览器里格式化、压缩并校验 JSON。出错位置精确到行列,可折叠的树状图展示结构。
CSS 压缩
去掉注释和空白来压缩 CSS,或者重新展开成整齐的缩进。calc() 中的空格、字符串和许可证注释都原样保留。
XML 格式化
把乱糟糟的 XML 缩进成能读的样子,或者压小。支持 RSS、CDATA 和命名空间,绝不改写你的文档。
SQL 格式化
把长查询拆成好读的几行,或者再挤回一行。关键字大小写、带引号的名字和字符串原样保留。
JavaScript 压缩
用 Terser 压缩 JavaScript——构建工具用的就是它。它解析代码而不是猜,行为不变。什么都不会上传。