捕获视觉回归前的模板变更
在将 HTML 模板推送到生产环境之前，在此比较旧版本和新版本。CSS 类变化、添加或删除的属性、文本内容调整——这些都会立即高亮显示，使您不必等到部署后才发现视觉回归。
原始 HTML
修改后的 HTML
HTML Diff：在线比较两个 HTML 文件
粘贴、格式化并并排比较两个 HTML 文档。HTML5 语法高亮、美化输出和实时验证内置其中。
什么是 HTML diff 工具？
一个免费的浏览器内工具，用于比较两个 HTML 文档。将旧版本粘贴到左侧，新版本粘贴到右侧，变化会逐字符高亮显示。数据不会离开您的机器。
该工具理解 HTML 结构：标签、属性和文本节点。实时验证检查格式良好性，格式化按钮会以一致的缩进重新排列您的 HTML，使 diff 更易于阅读。
如果您曾在 PR 中盯着一个 HTML 模板，试图找出导致视觉回归的那个属性变化，这个工具能在几秒内帮您定位。对于纯文本，文本 diff 是更简单的选择。对于 JSON API 响应，JSON diff 处理键重排更干净。
diff 的实际工作原理
diff 在字符级别运行，然后通过语义后处理清理，使高亮落在有意义的 HTML 片段上，而不是随机字符上。插入内容在右侧窗格以绿色显示，删除内容在左侧以红色显示。
HTML 有一些独特的特性。属性顺序在 HTML 中是未定义的，因此重新排列属性在技术上不改变元素——但文本 diff 会将其标记为变更。在 diff 前格式化两侧以规范化格式，格式化器会以一致的顺序输出属性。
空白在 HTML 中也很微妙：块级元素之间的空白通常无关紧要，但内联元素内的空白是有意义的。此工具在源代码级别工作，所以它显示精确的文本变化，而不是渲染后的效果。
三步比较 HTML
两个文本窗格，一个 diff。无需注册，无需上传，无需服务器往返。
- 1
粘贴或上传您的 HTML
将旧 HTML 粘贴到左侧，新 HTML 粘贴到右侧。或者点击任意一侧的上传直接加载
.html或.htm文件。点击示例按钮，两个窗格都会填充一个小的 HTML 片段示例。 - 2
格式化两侧以进行公平比较
点击每个窗格上的格式化，以一致的缩进重新排列 HTML。这会规范化空白和换行符，使 diff 突出显示实际的标记变化，而不是格式差异。格式化后，属性以一致的顺序显示，最小化虚假差异。
- 3
查看 diff
删除的标记在左侧以红色高亮显示，插入的标记在右侧以绿色高亮显示。滚动任意一侧，另一侧随之跟随。每个标题中的变更计数会告诉您 diff 找到了多少个不同的编辑。
HTML diff 适合的场景
审查电子邮件模板变更
HTML 电子邮件模板需要精确。将发送的版本与更新版本进行比较，确认变更只影响预期的部分。字符级 diff 会精确显示哪个链接 href 被更新，或者哪个按钮文本被修改。
验证 SEO 元标记变更
比较两个版本的 HTML <head> 部分，确认元标记更新是否正确应用。查看 <title>、<meta name="description">、Open Graph 标记和 canonical URL 是否按预期变化。
审计无障碍属性变更
将模板的两个版本并排放置，检查 aria-label、role、alt 文本和其他无障碍属性是否发生了变化。这对于确保重构不会无意中降低无障碍性特别有用。
比较响应式断点标记
大型重构通常会在 HTML 结构中引入微妙的变化。比较重构前后的 HTML，确认元素结构、类名和数据属性按预期保持不变，或已按计划更改。
检查 CMS 导出的变更
CMS 平台（如 WordPress、Drupal）有时会在导出时重新格式化或重新排列 HTML。将两个 CMS 导出并排放置，精确查看内容管理系统在您不知情的情况下更改了什么。
HTML 快速参考
关于此工具最常暴露的 HTML 解析边缘情况的简短速查表。所有内容均基于 WHATWG HTML Living Standard 和 W3C 规范。
| Topic | What this tool does |
|---|---|
| 自闭合标签 | HTML5 中，void 元素（<br>、<img>、<input>、<meta>、<link>）是自闭合的，不需要斜杠。<br/> 在 HTML5 中是允许的，但斜杠被忽略。 |
| 属性引用 | 属性值可以用双引号、单引号括起来，或者（对于简单值）完全不加引号。<div class=foo> 有效。双引号是惯例；不一致的引号会在文本 diff 中显示为变更。 |
| 布尔属性 | disabled、checked、required 等布尔属性的存在即为真。<input disabled> 和 <input disabled="disabled"> 等价；文本 diff 会将它们标记为不同。 |
| 实体引用 | 命名实体如 、<、& 和数字字符引用如  （不间断空格）是等价的，但文本 diff 会将它们视为不同。在 diff 前规范化为一种形式。 |
| data- 属性 | data-* 属性存储自定义数据，可以是任何合法名称：data-user-id="42"。框架大量使用它们，是 PR 中常见的 diff 噪音来源。 |
| DOCTYPE | HTML5 使用简写 <!DOCTYPE html>。旧的 XHTML 1.0 DOCTYPE 仍然可以解析，并以同样方式触发无怪癖模式。缺失或格式错误的 DOCTYPE 会将页面置于怪癖模式，改变盒模型行为。 |
| 空白 | 连续的空白、制表符和换行符在渲染时折叠为一个空格，除了在 <pre>、<textarea> 和带有 CSS white-space: pre 的元素内部。源代码被保留，所以文本 diff 可以看到每个字节。 |
HTML diff：常见问题
这个工具会保存或上传我的 HTML 吗？
不会。diff 完全在您的浏览器中运行。没有任何内容被发送到服务器、记录或存储。粘贴私有模板或包含敏感内容的页面后关闭标签页，不会留下任何副本。打开 DevTools 并查看网络标签，在比较时没有出站请求。
HTML 属性顺序会显示为变更吗？
如果两侧的属性顺序不同，文本 diff 会将其标记为变更，即使 HTML 规范规定属性是无序的。在 diff 前格式化两侧，格式化器会以一致的顺序输出属性，最小化这种虚假差异。
可以比较两个 HTML 文件而不是粘贴文本吗？
可以。点击任意窗格上的上传，从磁盘直接选择 .html 或 .htm 文件，无需复制粘贴。文件在浏览器中本地读取，永远不会发送到任何地方。点击两侧的格式化，diff 会忽略缩进差异，只显示标记中真正发生变化的部分。
可以比较 HTML 片段而不是完整页面吗？
可以。工具可以处理任何 HTML 文本，包括单个组件片段、部分模板或完整的 HTML 页面。没有要求必须有 <!DOCTYPE html> 或完整的 <head>/<body> 结构。粘贴您拥有的任何内容，diff 都会工作。
免费吗？需要注册吗？
免费，无需注册。没有账户，没有试用期，比较次数也没有限制。粘贴两个 HTML 片段，diff 立即出现。复制和下载按钮会给您干净的输出，没有水印。
这与其他在线 HTML diff 工具有何不同？
比较完全在您的浏览器中运行，所以您的 HTML 永远不会被上传，包括含有私有 API 端点或内部链接的模板。高亮是字符级的，带有语义清理，还内置了 HTML5 语法高亮、格式化和文件上传功能。
可以同时比较两个以上的 HTML 文件吗？
不能在一个视图中。工具为两侧设计：原始版和修改版。如果您有三个版本，请两两比较：先比较版本 A 和版本 B，再比较版本 B 和版本 C，每次对比都能给出干净的结果。
可以在手机上使用，或者离线使用吗？
两者都可以。页面是响应式的，尽管两个 HTML 窗格并排在宽屏上比在窄手机屏幕上更容易阅读。所有内容在浏览器中运行，所以一旦页面加载完成，您可以断开网络，diff 仍然有效。比较时没有服务器调用。
隐私与工作原理
您的 HTML 永远不会离开您的浏览器。格式化器、验证器和 diff 都在您的机器上本地运行。没有对您输入的分析，没有日志，没有"贴心的"云端往返。语法高亮遵循 WHATWG HTML Living Standard，较旧的 W3C HTML 5.2 建议是有用的交叉参考。元素级参考文档在 MDN，无障碍模式来自 ARIA 编写实践指南。关于此格式的背景阅读在 维基百科。