VS Code Compare Files对比HTML需统一编码（均用UTF-8无BOM）和换行符（推荐LF）；git diff --no-index可比非仓库文件；在线工具需防script/style过滤，宜用encodeURIComponent编码或选Plain Text模式；Sublime Diffy不处理注释细节，复杂HTML建议VS Code+GitLens。
VS Code 里用 Compare Files 命令对比 HTML 文件，但必须注意文件编码一致
直接在 VS Code 中打开两个 HTML 文件后按 Cmd+Shift+P（macOS）或 Ctrl+Shift+P（Windows），输入 Compare Files 并执行，是最常用也最省事的方式。但它默认不校验文件编码——如果一个文件是 UTF-8 with BOM，另一个是纯 UTF-8，哪怕内容完全一样，也会被标出大量“差异”（尤其是开头的不可见字节）。
解决方法很简单：
- 先分别右下角点击当前文件的编码标识（如
UTF-8），选择Save with Encoding→UTF-8（确保都不带 BOM） - 再执行
Compare Files，结果才可信 - 如果对比后仍看到奇怪的换行或空格差异，检查右下角是否显示
CRLF或LF，统一为LF更稳妥（尤其跨平台协作时）
Git diff 查 HTML 变更时，git diff --no-index 能绕过仓库限制
不是所有 HTML 文件都在 Git 仓库里——比如临时改的运营页、导出的邮件模板、本地测试文件。这时 git diff 默认会报错 fatal: not a git repository。别删文件重加进仓库，直接用：
git diff --no-index old.html new.html
它能跳过 Git 状态检查，纯粹做文本比对。注意两点：
立即学习“前端免费学习笔记（深入）”；
- 路径必须写全，相对路径容易因当前目录不同而失败；建议用
./old.html显式声明 - 输出中
-行是旧版删除内容，+行是新版新增内容，但不会高亮到具体标签层级——比如<div class="a">变成<div class="b">，只会标整行，不标"a"→"b" - 若需看 HTML 结构级差异（比如属性顺序、自闭合写法），得配合
html-beautify先格式化再比，否则空格和换行干扰太大
在线 diff 工具粘贴 HTML 时，<script> 和 <style> 容易被过滤或转义
像 DiffNow、Text Compare 这类纯文本比对网站，遇到含 <script> 的 HTML 片段常会出问题：有的自动剥离 <script> 标签，有的把 & 转成 & 再比，导致差异失真。
安全做法是：
- 提前把 HTML 中的
<script>和<style>块内容复制出来，用外部工具（如 VS Code）单独比对逻辑 - 在线比对前，把整个 HTML 用
encodeURIComponent()编码（浏览器控制台里直接运行），再粘贴；对比完再decodeURIComponent()还原——虽麻烦，但能保结构 - 优先选支持
raw text模式的工具，比如diffchecker.com的 “Plain Text” 选项，比默认的 “HTML” 模式更可靠
Sublime Text 的 Diffy 插件比原生 Compare Side-by-Side 更准，但不处理注释折叠
Sublime Text 自带的 View → Layout → Columns: 2 + 手动并排看，容易漏掉细微差异。装 Diffy 插件后，右键菜单多出 Diffy: Compare with Current，能真正逐行标记增删。但它有个硬伤：如果 HTML 里有大段注释（比如 <!-- 旧版兼容代码 -->），而其中某行被删了，Diffy 会把整块注释当一个单元标红/绿，看不出具体哪行变了。
应对策略：
- 比对前，用正则
<!--[\s\S]*?-->把注释替换成占位符（如/* COMMENT_BLOCK_1 */），比完再换回来 - 复杂 HTML（尤其含 Vue/JSX 模板语法）别依赖 Sublime 的 diff，直接切到 VS Code +
GitLens插件，它能把v-if、{{ }}这类动态部分也纳入语义比对范围
HTML 代码对比真正的难点不在工具选择，而在“什么算差异”——是字符级？标签结构级？还是渲染行为级？多数工具只做到第一层，后面两层得靠人眼+经验兜底。
