git diff 看 html 文件“看不懂”是因为它默认逐行比对，将格式变动（如空格、换行、属性顺序）误判为语义变更；可用 --color-words 配合正则聚焦词级差异，或借助 diff-so-fancy、vs code 等工具可视化结构化对比。
git diff 本身不区分文件类型，它对 HTML 文件和其他文本文件一样，只做逐行字符串比对——所以你不需要特殊配置就能直接用它看 HTML 差异，但默认输出是纯文本 patch 格式，可读性差，尤其面对缩进、属性换行、空格等 HTML 常见格式变动时，容易误判“改了什么”。
为什么 git diff 看 HTML 文件常觉得“看不懂”
HTML 是结构化标记语言，人眼习惯按标签层级和语义理解，而 git diff 默认只按行比较：一个属性顺序调整、<div> 换行位置变化、甚至只是多了一个空格，都会触发整行标为“删除+新增”，导致差异块又长又散。这不是 bug，是设计使然——它忠实反映字节变化，不是语义变化。<ul>
<li>浏览器渲染忽略多数空白和换行，但 <code>git diff 把它们全当有效变更
<img src="a"> vs <img src="a">）会被当成两行不同用 --word-diff 或 --color-words 让 HTML 差异更聚焦
把对比粒度从“行”降到“词”（以空格/标点分隔），能过滤掉格式扰动，突出真正改动的标签名、属性名或文本内容。对 HTML 这类以空格分隔属性的语法特别有用。
推荐命令：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
git diff --color-words='[^[:space:]]+|]*>' -- path/to/file.html
-
--color-words启用词级高亮，配合正则精准匹配 HTML 标签和非空格字符 - 正则
[^[:space:]]+|]*>表示：“一串非空白字符” 或 “一个完整的开始/结束标签” - 这样
<div class="old"> → <code><div class="new"> 就只会标红 <code>"old"和"new"，而不是整行 - 注意：该正则不处理属性值内嵌引号或注释，简单修改够用；复杂场景建议导出后用专用工具
- 装
diff-so-fancy：npm install -g diff-so-fancy，再配 Git：git config --global pager.diff "diff-so-fancy | less --tabs=4 -R" - VS Code 内置 GitLens 扩展，右键文件 → “Open Changes with Working File”，会以左右分栏 + 标签高亮方式展示，自动折叠未改动节点
- 若需浏览器级预览，可用
git show HEAD~1:path/to/file.html > old.html && git show HEAD:path/to/file.html > new.html，再丢进在线 HTML diff 工具（如 textcompare.org/html） - 别依赖 GitHub Web 界面的 diff：它会自动格式化 HTML，掩盖原始换行和空格差异，有时反而误导
用外部工具（如 diff-so-fancy 或 VS Code）可视化 HTML 差异
终端里看颜色 patch 仍不够直观，尤其涉及嵌套结构变动时。这时候应让 Git 调用支持 HTML 渲染的 diff 工具。
真正关键的不是“怎么显示”，而是“比什么”。如果 HTML 文件被多人编辑且没约定格式规范，git diff 会持续给你噪音；与其花时间调参，不如先统一 .prettierrc 并加 pre-commit 钩子——否则再好看的 diff 也解决不了语义混乱的问题。
