HTML文件需先格式化再diff，否则90%差异为格式噪音；推荐tidy或prettier标准化，浏览器端用diff2html可视化，语义级对比须用lxml或html5lib解析DOM树。
直接用 diff 命令对比原始 HTML 文件，90% 的“差异”都是空格、换行、缩进或标签大小写导致的噪音——不是内容变了，是格式乱了。真要对比语义或可读内容，必须先清洗再比，否则结果没法看。
HTML 文件必须格式化后再 diff
原始 HTML 经常混用制表符、多空格、不闭合标签、大小写不一致（<DIV> vs <div>），diff a.html b.html 会把整行标为不同。必须统一格式：
- 推荐用
tidy -indent -wrap 0 -quiet -asxhtml：保留自闭合标签（如<img/>），避免被重写成<img></img> - 没装
tidy？用prettier --parser html --print-width 120，更现代但需 Node.js - Windows 用户临时应急：Python 一行清洗
python3 -c "import sys; print(open(sys.argv[1]).read().replace('\t', ' ').replace(' ', ' '))" a.html > a.clean.html（仅基础替换，不解析 DOM）
浏览器里快速可视化 HTML 差异用 diff2html
不用搭服务、不传文件，纯前端加载就能出带颜色高亮的并排/行内对比视图：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 引入两个资源：
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.4/bundles/js/diff2html.min.js"></script>和对应 CSS - 先用命令生成 unified diff：
diff -u a.clean.html b.clean.html > diff.txt - JS 中调用：
Diff2Html.html(diffText, { drawFileList: false, matching: 'lines' })；加matching: 'lines'防止跨行合并误判（比如把两段<p>合成一个块） - 注意：
diff2html默认不解析 HTML 标签内部结构，<span class="a">和<span class="b">的class属性变化不会单独高亮，只按整行处理
需要语义级对比？别碰字符串 diff，用 lxml 解析 DOM
如果目标是判断“<p>hello</p>”和“<p>\n hello\n</p>”是否等价，或者想忽略注释、属性顺序、空白文本节点，就必须走 DOM 树比对：
立即学习“前端免费学习笔记（深入）”；
- 用
lxml解析后序列化：html.tostring(html.fromstring(html_str), encoding='unicode', method='html')，能抹平大部分格式差异 - 更健壮的解析选
html5lib（兼容性更好，尤其对不规范 HTML），但速度稍慢 - 不要用
difflib.SequenceMatcher直接比原始字符串——它不知道<div>是开始标签，</div>是结束标签，会把嵌套结构拆得七零八落 - 若需细粒度操作（比如只比文本节点、跳过 style/script 内容），得手动遍历
etree.Element树做条件过滤
真正难的不是怎么比，而是你得先想清楚：这次对比到底要回答什么问题？是检查部署前后页面结构是否一致（DOM 树比）？还是审核编辑提交的文案修改（清洗后行级 diff）？还是排查模板引擎输出异常（带上下文的 unified diff）？选错方法，工具越强，干扰越大。
