html代码对比常因编码、换行符、格式及html特性导致误标差异；需统一utf-8（无bom）和lf换行符，git离线对比用git diff --no-index，粘贴前须转义script/style标签，diff2html需配置matching:'lines'防错位。

HTML 编辑器里做代码版本对比，最常踩的坑不是“比不出来”，而是“比错了”——明明内容一样，却标满红绿块。根源几乎都出在编码、换行、格式和 HTML 特性上，不是工具不行，是没预处理。

VS Code Compare Files 必须先统一编码和换行符

直接按 Ctrl+Shift+P（Windows）或 Cmd+Shift+P（macOS），输入 Compare Files 执行，是最快路径。但它完全不校验底层字节：

• 一个文件是 UTF-8 with BOM，另一个是纯 UTF-8 → 开头三个不可见字节（EF BB BF）会被当成整行差异
• 一个用 CRLF（Windows），一个用 LF（macOS/Linux）→ 每行末尾都被标为“修改”

解决方法只有两步：

• 分别点击编辑器右下角的编码标识（如 UTF-8），选 Save with Encoding → UTF-8（确保都不带 BOM）
• 再点右下角的换行符标识（如 CRLF），统一选 LF

Git diff --no-index 是离线 HTML 对比的兜底方案

不是所有 HTML 文件都在 Git 仓库里：运营页、邮件模板、本地测试稿……这时 git diff 默认报错 fatal: not a git repository，别急着加进仓库。

用这个命令绕过检查：

git diff --no-index old.html new.html

注意两个硬约束：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 路径必须写全，推荐用 ./old.html 显式声明，避免因当前目录不同导致找不到文件
• 输出是纯文本 unified diff 格式（- 表删除，+ 表新增），不解析 HTML 结构 —— 比如 <div class="a"> 变成 <code><div class="b">，只会标整行，不会高亮 <code>"a" → "b"

  若需属性级差异，得先用 prettier --parser html 或 tidy -asxhtml 格式化两边再比。

  在线 diff 工具粘贴 HTML 前必须转义 <script></script> 和 <style></style>

  像 DiffNow、Text Compare 这类网站，遇到含 <script></script> 的 HTML 片段极易出问题：

  • 自动剥离 <script></script> 标签，导致逻辑丢失
  • 把 & 转成 & 再比，差异失真

  安全做法就两条：

  • 把整个 HTML 字符串丢进浏览器控制台运行：encodeURIComponent(document.querySelector('textarea').value)，再粘贴；对比完用 decodeURIComponent() 还原
  • 优先选支持 Plain Text 模式的工具（如 diffchecker.com），绝对别用默认的 HTML 模式

  diff2html 浏览器渲染要防标签解析干扰

  用 diff2html 在页面里展示 HTML 差异很轻量，但默认行为会误伤真实结构：

  • 它把输入当纯文本渲染，<div class="foo"> 中的 <code>class="foo" 不会被单独高亮
  • 若原始 HTML 含未闭合标签或嵌套错误，diff2html 不修复，直接照搬渲染

  关键配置项不能省：

  • 初始化时传 { drawFileList: false, matching: 'lines' }，防止跨行合并导致错位
  • <script></script> 和 <style></style> 内容建议提前抽离，单独比对逻辑，再拼回结果

  真正难的从来不是“怎么比”，而是“比之前要不要动原始 HTML”。格式化、转义、剥离脚本——这些步骤漏掉任何一环，可视化结果就不可信。