piapia123
zh

HTML 格式化与压缩

格式化

所有处理都在浏览器本地完成,数据不上传服务器

输入
输出

把压缩成一行的 HTML 展开成缩进结构。与「见到标签就换行」的做法不同,这里会看文本内容:元素里出现文字时,它的整棵子树保持内联,因为换行在 HTML 里是真实的空格 —— 把 <p>a<b>x</b> 里的 <b> 换到下一行,渲染结果就从 “ax” 变成 “a x”。同理,原文没有空格的地方也不会自己补一个。

功能

  • 按标签层级缩进,缩进可选 2 空格 / 4 空格 / 制表符
  • 识别空元素(br、img、meta、input、link 等),不会让后面的内容多缩进一层
  • 文本与行内标签保持同一行,并且只在原文有空格的位置补空格
  • script、style、pre、textarea 的内容原样保留,结束标签紧贴内容不插入空白
  • 注释与 DOCTYPE 各自成行,标签内部的连续空白压成一个空格
  • 属性值里的空白原样保留,属性值里的 > 不会把标签切断
  • 压缩模式去掉标签之间的空白与注释
  • 不做语法校验:标签没闭合时尽力缩进而不是报错

使用方法

  1. 把 HTML 粘贴进输入框
  2. 选择处理方式与缩进
  3. 按 Ctrl/⌘ + Enter 或点「运行」
  4. 点「复制」取走结果

常见问题

为什么压缩之后页面上少了一些空格?
压缩会删掉标签之间的空白。多数情况下没影响,但行内元素之间的那个空格在渲染时是真实间隙(<span>a</span> <span>b</span> 会连成 “ab”),需要保留就用格式化模式。
为什么文本没有被拆成多行?
拆行会插入真实空格,改变渲染结果。所以只在结构位置换行,文本内容留在原处。
script 与 pre 里的内容会被重排吗?
不会。这几类元素的内容整体原样搬运,结束标签紧贴着内容写,不会为了「整齐」而改动里面的代码或空白。
HTML 会被上传吗?
不会。全部处理在浏览器内存里完成,页面不发任何请求,断网也能用。

相关工具