快速开始

对比两个 HTML 文档是审查模板输出、UI 变更或网页抓取快照时常见的任务。本指南将带您使用 Compare HTML 完成从输入数据到阅读结果的完整流程。

粘贴或上传 HTML

打开 Compare HTML，将您想要对比的两个 HTML 文档分别粘贴到基准和对照编辑器中。您也可以拖拽 .html 文件，或从 URL 加载 HTML。

点击对比按钮。工具会将两个输入解析为 DOM 树，规范化空白字符，并递归比较 HTML 结构。

与基于文本的差异工具不同，Compare HTML 理解 DOM 结构。它将每个输入解析为虚拟 DOM 树，并基于语义对比节点，因此格式变更不会产生误报。

由于 HTML 在对比前会被解析为 DOM，缩进、换行或属性间多余空格的差异都会被忽略。属性顺序也被视为无关。只有结构和内容的实际变更才会被报告为差异。

本工具可处理完整的 HTML 文档，包括 <!DOCTYPE>、<html>、<head>、<body>、注释和所有嵌套元素。您可以对比 HTML 片段，也可以对比完整页面。

运行对比后，Compare HTML 会以结构化、颜色标注的视图展示差异。

仅在对照 HTML 中出现的元素或文本节点以绿色展示。

<!-- 基准 -->
<div>
  <p>Hello</p>
</div>

<!-- 对照 -->
<div>
  <p>Hello</p>
  <p>World</p>
</div>

第二个 <p> 元素会被报告为新增。

在对照 HTML 中不再存在的元素或文本节点以红色展示。

当元素在两边都存在，但属性值或文本内容不同时，变更以黄色高亮。

<!-- 基准 -->
<div class="container">Alice</div>

<!-- 对照 -->
<div class="wrapper">Alice</div>

class 属性的变更会被报告为值变更。

每条差异都包含完整的元素路径，例如 html > body > div.main > p::text，让您准确知道变更发生的位置。结果侧边栏列出了各类差异的数量，点击某个类型即可筛选视图。