如何使用 HTML 格式化工具
- 将 HTML 粘贴到输入框中：可以是整个页面、模板，或从浏览器开发者工具复制的片段。
- 点击美化为标记添加缩进，使每个嵌套元素各占一行。
- 点击压缩去除注释和不必要的空白，使文件更小。
- 将结果复制回您的编辑器或 CMS。
格式化工具完全在您的浏览器中运行。您的标记不会被上传或存储，并且被当作文本处理：您粘贴的任何内容都不会被执行。
为什么要格式化 HTML？
由页面构建器、邮件编辑器、CMS 导出和构建工具生成的 HTML 往往经过压缩或缩进混乱。这对浏览器没有问题，但让人很难看清结构。美化后的 HTML 能清楚地显示文档树，让您看出每个 <div> 在哪里闭合、找出放错位置的元素，并在差异对比中审查改动。
压缩则恰好相反。去掉注释、缩进和换行会使文件变小，从而略微减少传输体积。在大多数网站上，服务器压缩（gzip 或 Brotli）已经让 HTML 缩小了很多，所以压缩带来的额外收益较小，但它在生产构建中仍然很常见。
常见的 HTML 问题及解决方法
浏览器很宽容：HTML 解析算法会从大多数错误中恢复，而不是直接失败。这很方便，但也意味着损坏的标记往往“差不多正确”地渲染出来，并引发令人困惑的布局问题。美化能让这些问题更容易看出来。
未闭合的元素。当缩进不断向右漂移而且再也回不来时，很可能是某个元素没有闭合：
<div class="card">
<div class="card-body">
<p>Hello
</div>这一个 </div> 闭合了 card-body（并隐式结束了段落），所以外层的 card 仍然敞开，吞掉了后面的所有内容。请显式闭合每个元素：
<div class="card">
<div class="card-body">
<p>Hello</p>
</div>
</div>块级元素放在行内元素或 <p> 内部。在 <p> 里放 <div> 是不允许的：浏览器会提前关闭段落，您的 CSS 也就不再按预期匹配。
标签嵌套错误。<b><i>text</b></i> 应写成 <b><i>text</i></b>。内层元素必须先于外层元素闭合。
重复的 ID。id 在文档中必须唯一。重复会破坏 getElementById、标签关联和页内锚点。
空元素与空白
有些元素永远不能有内容，也没有结束标签。这些空元素（void elements）是：
| 空元素 |
|---|
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr |
在 HTML 中，<br> 和 <br /> 是等价的；末尾的斜杠是可选的。写成 </br> 或 <img></img> 则是错误。
行内元素之间的空白可能是可见的。两个以换行隔开的行内块按钮之间会出现一小段间隙，而同样的按钮写在一行时则没有。好的格式化工具会原样保留 <pre> 和 <textarea> 的内容，但如果美化或压缩后布局略有变化，通常就是行内空白造成的。
技巧与最佳实践
- 用两个空格缩进；嵌套很深的 HTML 如果用四个空格会变得非常宽。
- 把较大的内联
<style>和<script>代码块放到单独的文件中，并用 CSS格式化与压缩和 JavaScript格式化与压缩来整理。 - 把压缩作为构建流程的一部分，而不是手动操作，这样可读的源码仍保留在版本控制中。
- 部署之后，用 SEO检测检查页面的站内 SEO，并用网站速度测试检查加载时间。
常见问题
美化会改变我的页面外观吗？
通常不会。在块级元素之间添加缩进没有可见的影响。行内元素之间的空白可能产生或消除小间隙，所以格式化之后请检查行内布局紧凑的页面。
这是 HTML 验证器吗？
不是。它只重新缩进和压缩标记，并不按 HTML 规范进行检查。不过，格式化确实能让许多结构性错误一目了然。
压缩后的 HTML 对 SEO 更好吗？
搜索引擎读取压缩后的和格式化后的 HTML 效果相同。压缩可以让页面略小一些，对性能有一点帮助，但内容、结构和速度的影响远比空白重要。
可以格式化 HTML 邮件模板吗？
可以。邮件 HTML 常常依赖嵌套表格和内联样式，美化能让编辑容易得多。之后请在您的邮件平台中测试结果，因为有些邮件客户端对空白很敏感。
更新于