HTML格式化与压缩
格式化或压缩HTML代码，支持自定义缩进和实时预览
输入大小: 0 bytes
输出大小: 0 bytes
HTML压缩器与美化器文档
这个工具是什么？
此工具允许您压缩（精简）或美化HTML代码。压缩可删除不必要的空白和注释，以减少文件大小用于生产部署。美化则使用适当的缩进格式化HTML，以提高开发期间的可读性。
主要功能
- 压缩HTML - 删除空白、换行符和注释以减少文件大小
- 美化HTML - 使用适当的缩进和换行符格式化HTML以提高可读性
- 可自定义缩进大小（2个空格、4个空格或制表符）
- 压缩时保留注释的选项
- 文件大小对比显示压缩比
- 实时 HTML 预览功能，即时查看代码渲染效果（沙箱安全保护）
常见用例
- 优化HTML文件用于生产部署以减少页面加载时间
- 格式化压缩的HTML以便于调试和代码审查
- 清理格式不一致的HTML代码
- 通过向用户提供压缩的HTML来减少带宽使用
最佳实践
在构建流程中压缩HTML
使用Webpack html-loader、Gulp或posthtml等构建工具在部署时自动压缩HTML。避免手动压缩。
保留条件注释
某些HTML注释具有功能性（如IE条件注释）。配置压缩器保留必要的注释或使用 <!--[if IE]> 语法。
谨慎处理内联脚本
HTML中的内联JavaScript和CSS需要特殊处理。为每种语言使用单独的压缩器，或确保您的HTML压缩器支持它们。
保留特定标签中的空白
以下标签内的空白是有意义的： <pre>、<code> 和 <textarea>。 配置压缩器保留这些元素中的空白。
测试视觉外观
如果内联元素之间的空白很重要，HTML压缩可能会影响布局。压缩后始终测试视觉外观。
结合压缩使用
除HTML压缩外，还要启用服务器端Gzip/Brotli压缩。基于文本的HTML压缩效果好，通常可实现70%以上的减少。
常见问题排查
为什么压缩后布局出现问题？
inline-block或inline元素之间的空白会影响布局。向父元素添加CSS 'font-size:0'或使用flexbox可以解决此问题，或配置压缩器保留部分空白。
为什么我的内联脚本不工作？
HTML压缩器可能错误处理