HTML 美化工具
HTML 格式化工具 的预设方案
把压缩或缩进混乱的 HTML 变回可读的样子。粘贴一整行压缩过的内容,得到嵌套正确、缩进统一的标记——包括页面里嵌入的任何 CSS 和 JavaScript。
- 文件永不离开你的设备
- 免费，无需注册
- 无水印
- 加载后可离线使用
如何HTML 格式化工具
- 1
粘贴你的 HTML
压缩过的、缩进混乱的,或者手写的——都能处理。
- 2
选择缩进方式
2 个空格、4 个空格或制表符。
- 3
复制结果
或者下载为 .html 文件。
阅读别人发布出来的压缩标记
被构建工具压缩到一行或几行长长的压缩 HTML,完全是为传输体积优化的,不是为了给人阅读——这在你需要检查竞争对手的页面结构、通过查看源代码调试一个生产环境问题,或者理解一个第三方嵌入组件到底是怎么构建的时候,会变成一个实实在在的障碍。美化它能还原出人类读者需要跟随的嵌套结构:每个元素独占一行,缩进反映它在父元素里嵌套的深度——这才是一个人真正用来推理的表示形式,而不是构建工具为机器传输而优化出的那一整行密集内容。
从一个你没有写过的页面里还原结构
检查别人构建的页面——竞争对手的落地页、一个嵌入式组件的标记、一个没有可访问源码的老项目——正是专门用到美化工具的最常见场景之一:浏览器开发者工具显示的是实时渲染的 DOM,这适合一种用途,而美化原始 HTML 源码显示的是服务器实际发送的文档结构,缩进得到还原,这是一种不同、且在试图理解一个页面究竟是怎么构建出来的、而不是它最终渲染成什么样时通常更有用的视角。
常见问题
会格式化页面里的 CSS 和 JavaScript 吗?
会。`<style>` 和 `<script>` 标签里的内容会分别交给 CSS 和 JavaScript 解析器处理,所以一整份单文件页面能被完整正确地格式化,而不是让这些代码块原样保持未格式化状态。
格式化会改变我页面的渲染效果吗?
几乎不会,但也不是绝对不会:HTML 在 `<pre>`、`<textarea>` 以及带有 `white-space: pre` 的元素内部,会把空白当作有意义的内容。这些内容会被完全原样保留。行内元素在极少数边界情况下可能会有一个空格的偏差,这也是为什么格式化工具在处理它们时会刻意保守。
为什么它拒绝了我的 HTML?
通常是真正意义上标签不成对,或者混入了 Handlebars、Jinja、Blade 这类模板语法,而这些都不是合法的 HTML。浏览器会悄悄修复损坏的标记;而格式化工具必须理解结构,所以做不到这一点。
我的标记内容会被上传到别处吗?
不会。解析器在你的浏览器里运行,所以未发布的页面和客户项目内容都留在你自己的机器上。