Back

HTML 格式化器

HTML（超文本标记语言）是网页的标准标记语言。此工具使用正确的缩进格式化 HTML，将其压缩用于生产环境，提取元数据（标题、描述、Open Graph 标签），并验证常见问题，如缺少 alt 属性或弃用标签。

规范

常见用例

  • 格式化从查看源代码或 API 响应中获取的压缩 HTML
  • 在部署前优化 HTML 大小
  • 审计页面元数据用于 SEO（标题、描述、OG 标签）
  • 调试 HTML 结构和嵌套问题
  • 验证基本的无障碍性（alt 属性）
  • 为文档准备 HTML 片段

功能

  • 使用一致的缩进美化 HTML
  • 为生产环境压缩 HTML（移除空白和注释）
  • 提取页面元数据（标题、描述、字符集）
  • 解析 Open Graph 标签用于社交媒体预览
  • 统计脚本和样式表数量
  • 验证常见 HTML 问题（缺少 alt、弃用标签）
  • 显示原始版本与压缩版本的大小对比

示例

带元数据的网页

试试看 →

一个包含 head 元数据和 body 内容的完整 HTML 文档。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A sample web page for testing">
  <meta property="og:title" content="Sample Page">
  <meta property="og:description" content="This is a sample page">
  <title>Sample Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <p>Hello, world!</p>
  </main>
  <script src="app.js"></script>
</body>
</html>

HTML 片段

试试看 →

一个组件或部分 HTML 片段。

<div class="card">
  <img src="image.jpg" alt="Card image">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p class="card-text">Some description text here.</p>
    <button class="btn btn-primary">Learn More</button>
  </div>
</div>

提示

  • 使用压缩版本用于生产环境以减少页面加载时间。
  • Open Graph 标签控制你的页面在社交媒体上分享时的显示方式。
  • description 元标签对 SEO 和搜索结果摘要很重要。
  • 始终在图片上包含 alt 属性以确保无障碍性。
  • 使用语义化 HTML 元素（header、main、nav、article）以获得更好的结构。

理解 HTML 格式化器

HTML（超文本标记语言）是 Web 的基础语言。每个网页都是一个 HTML 文档——一棵元素树，浏览器将其解析并渲染为数十亿人每天使用的可视化界面。当前版本由 WHATWG 作为活标准维护，持续演进而非通过编号版本发布。

HTML 提供页面的语义结构。<header>、<nav>、<main>、<article> 和 <footer> 等元素向浏览器、屏幕阅读器和搜索引擎传达含义。<head> 部分包含元数据：文档标题、字符编码、视口设置、样式表、脚本、用于社交分享的 Open Graph 标签以及用于 SEO 的结构化数据。<body> 包含可见内容。

现代 HTML 远不止简单的标记。<canvas> 元素支持 2D 和 3D 图形。<video> 和 <audio> 元素提供原生媒体播放。Web Components（<template>、<slot>、自定义元素）允许可重用的封装组件。表单元素通过 required、pattern、min 和 max 等属性支持客户端验证。语义元素通过给辅助技术提供清晰的文档大纲来改善无障碍性。

对于开发者来说，HTML 很少在规模上手写。React、Vue、Svelte 和 Astro 等框架从组件模板生成 HTML。服务端渲染在服务器上生成 HTML 以加快初始页面加载。静态站点生成器在部署时预构建 HTML。尽管有这些抽象，理解输出的 HTML 对于调试布局问题、优化性能、确保无障碍合规性和诊断 SEO 问题至关重要。

HTML 对语法错误是宽容的——浏览器会尽力渲染未闭合的标签和缺少引号的属性。相比之下，XHTML 应用严格的 XML 规则：所有标签必须闭合，属性值必须加引号，元素必须正确嵌套。XHTML 在 2000 年代初期很流行，但 WHATWG HTML 活标准回归了更宽容的 HTML 解析模型。如今，编写同时也是有效 XHTML 的良好格式化 HTML 被认为是最佳实践，即使浏览器不要求这样做。

Open Graph（og:）元标签控制页面在 Facebook、LinkedIn 和 Twitter 等社交媒体平台上分享时的显示方式。关键标签包括 og:title、og:description、og:image 和 og:url。Twitter 有自己的 twitter:card 标签，当存在时会覆盖 Open Graph。没有这些标签时，平台将尝试猜测标题和图片，通常效果不佳。语义化 HTML 元素如 <nav>、<main>、<article> 和 <aside> 有类似的作用——它们向浏览器、屏幕阅读器和搜索引擎传达内容的结构和含义。使用语义元素改善了残障用户的无障碍性，帮助搜索引擎理解页面层次结构，并使代码库更易维护。

HTML 压缩在不改变功能的情况下移除不必要的字符：标签之间的空白、HTML 注释、可选的闭合标签、冗余属性以及属性值周围不必要的引号。这减少了文件大小并改善了页面加载时间，在 gzip 压缩前通常可节省 10-30%。html-minifier-terser 等工具在构建管道中自动处理这些，使其成为一种简单的生产环境优化。

← 返回所有工具