HTML 在线格式化/压缩工具

这是一个免费的在线工具，可以帮助您格式化和压缩 HTML 代码。 格式化可以提高代码可读性，压缩可以减小文件体积，提升网站加载速度。

代码编辑器
源代码
结果代码
HTML 格式化与压缩指南

为什么需要格式化和压缩 HTML？

格式化 HTML 的好处

  • 提高代码可读性，便于团队协作
  • 更容易发现和修复 HTML 错误
  • 统一代码风格，提高开发效率
  • 便于代码审查和维护

压缩 HTML 的好处

  • 减小文件体积，加快网站加载速度
  • 降低带宽使用，节省服务器资源
  • 提升用户体验，减少页面加载时间
  • 有助于提高搜索引擎排名

在不同编程语言中使用 HTML 格式化/压缩

JavaScript (Node.js) 中使用 HTML 格式化

// 使用 js-beautify 库格式化 HTML
const beautify = require('js-beautify').html;
const fs = require('fs');

// 读取 HTML 文件
const html = fs.readFileSync('index.html', 'utf8');

// 格式化 HTML
const formatted = beautify(html, {
  indent_size: 2,
  indent_char: ' ',
  max_preserve_newlines: 1,
  preserve_newlines: true,
  keep_array_indentation: false,
  break_chained_methods: false,
  indent_scripts: 'normal',
  brace_style: 'collapse',
  space_before_conditional: true,
  unescape_strings: false,
  jslint_happy: false,
  end_with_newline: false,
  wrap_line_length: 0,
  indent_inner_html: false,
  comma_first: false,
  e4x: false,
  indent_empty_lines: false
});

// 输出格式化后的 HTML
fs.writeFileSync('index.formatted.html', formatted);

Python 中使用 HTML 压缩

# 使用 htmlmin 库压缩 HTML
import htmlmin
import os

# 读取 HTML 文件
with open('index.html', 'r', encoding='utf-8') as f:
    html_content = f.read()

# 压缩 HTML
minified = htmlmin.minify(
    html_content,
    remove_comments=True,
    remove_empty_space=True,
    remove_all_empty_space=False,
    reduce_boolean_attributes=True
)

# 输出压缩后的 HTML
with open('index.min.html', 'w', encoding='utf-8') as f:
    f.write(minified)

PHP 中使用 HTML 压缩

<?php
// 使用 PHP 压缩 HTML
function minify_html($html) {
    // 保存 pre, textarea 等标签内容
    $pattern = '/<(pre|textarea).*?>.*?<\\/\\1>/is';
    preg_match_all($pattern, $html, $matches);
    $blocks = array();
    foreach ($matches[0] as $i => $match) {
        $blocks[$i] = $match;
        $html = str_replace($match, "", $html);
    }
    
    // 移除注释 (保留条件注释)
    $html = preg_replace('/<!--(?!\\[if).*?-->/s', '', $html);
    
    // 移除空格
    $html = preg_replace('/>\\s+</', '><', $html);
    $html = preg_replace('/\\s{2,}/', ' ', $html);
    
    // 恢复保存的块
    foreach ($blocks as $i => $block) {
        $html = str_replace("", $block, $html);
    }
    
    return trim($html);
}

// 读取 HTML 文件
$html = file_get_contents('index.html');

// 压缩 HTML
$minified = minify_html($html);

// 输出压缩后的 HTML
file_put_contents('index.min.html', $minified);
?>

HTML 格式化与压缩的最佳实践

开发环境使用格式化

在开发过程中，使用格式化后的 HTML 可以提高代码可读性和维护性。建议在团队中统一代码风格，使用相同的缩进规则和格式化工具。

生产环境使用压缩

在网站上线前，应将所有 HTML 文件进行压缩处理，减小文件体积，提高页面加载速度。可以使用构建工具（如 Webpack、Gulp）自动完成这一过程。

保留条件注释

在压缩 HTML 时，通常应保留条件注释（如 IE 兼容性注释），以确保特定浏览器的兼容性功能正常工作。

常见问题解答

压缩 HTML 会影响功能吗？

正确的压缩不会影响 HTML 的功能。我们的工具只移除不必要的空格、注释和换行符，不会改变标签和属性的实际功能。

如何在构建流程中自动压缩 HTML？

可以使用 Webpack（html-webpack-plugin）、Gulp（gulp-htmlmin）或 Grunt（grunt-contrib-htmlmin）等构建工具在构建过程中自动压缩 HTML 文件。

格式化和压缩对大型 HTML 文件的效果如何？

对于大型 HTML 文件，格式化可以显著提高可读性，而压缩则可以减少 10%-40% 的文件体积，具体取决于原始代码的格式和注释量。