在线展开 HTML 压缩代码
将压缩的网页源代码整理成易读的标记。标签按嵌套深度缩进,属性合理排版,内嵌脚本和样式也会与文档一起格式化。
网页源代码为什么会变成这样
HTML 压缩工具会合并标签之间的空白、删除注释、去掉可省略的结束标签,并移除不必加引号的属性值两侧的引号。服务端模板还会让情况更复杂:由数十个模板片段拼装的页面,最终成为一段连续文本,看不出与原始文件的对应关系。打开几乎任何生产网站的源代码,都会看到由几行超长文本组成的文档,想找到某个区块的结束标签,往往只能用眼睛数尖括号。
看清结构才是关键
HTML 是树形结构,将树压成一行就很难阅读。按照嵌套深度缩进后,文档轮廓一目了然:页头在哪里结束、哪个容器包裹主要内容、组件嵌套了几层、哪个元素缺少结束标签。因此,格式化后的网页源代码很适合检查标题层级、查看框架生成的标记,或了解其他网站某个区块的结构设计。
内嵌脚本和样式也会格式化
真实页面通常不只有标记。统计片段、JSON-LD 结构化数据、配置对象和关键 CSS 都可能直接嵌在文档中,也会一并被压缩。格式化工具会为每个内嵌代码块选择合适的解析器,因此 script 标签中的压缩 JavaScript 会变得易读,style 标签中的 CSS 也会整理好,并保留在缩进正确的文档中。
妥善处理对空白敏感的标签
为 HTML 添加缩进会改变标签之间的空白,而空白有时会影响显示。格式化工具会考虑这一点:pre 和 textarea 中的内容保持原样,行内元素也会谨慎换行,避免增加或删除文本周围可见的空格。这样,您可以得到便于阅读的文档,同时尽量保持页面原有的渲染效果。
常见问题
可以粘贴整个网页的源代码吗?
可以。通过浏览器的 view-source 复制源代码,或保存网页后打开文件,整个文档都会格式化,包括 head、body、内嵌脚本和结构化数据。
格式化会改变页面的显示效果吗?
通常不会。pre 和 textarea 等对空白敏感的元素会保持原样,行内内容也会谨慎处理。不过,建议始终对副本进行格式化以便阅读,不要未经测试就将输出直接用于生产环境。
支持 Twig 或 Blade 之类的模板吗?
部分支持。普通 HTML 标记可以正常格式化,但带有专用语法的模板标签可能干扰 HTML 解析器。本工具面向的是浏览器实际收到的 HTML,而不是生成这些 HTML 的模板源文件。
