HTML版本行级对比标注方法详解

本文详解如何在HTML中安全、规范地实现版本差异的行级对比标注，强调HTML原生仅提供语义化标签（和）用于标记增删内容，但绝不具备自动对比能力；所有高亮效果必须通过符合可访问性标准（如WCAG对比度、色觉友好波浪线/删除线）的CSS实现，同时严格规避常见错误——如直接渲染未转义的Git diff文本、滥用内联样式或破坏DOM结构的标签误用，确保语义准确、视觉清晰且对屏幕阅读器友好。

HTML 里没有原生的“版本差异行级对比”功能

浏览器解析 HTML 时只认标签语义和 DOM 结构， 和 是唯一被规范支持的、用于标记新增/删除内容的语义化标签，但它们不自带样式，也不自动高亮——高亮靠 CSS 控制，更不会“对比”或“计算差异”。

常见错误现象：直接把 Git diff 输出塞进 HTML，或者用 手动加类，结果样式不生效、语义丢失、屏幕阅读器无法识别变更意图。

• 表示插入内容，应包裹新增文本； 表示删除内容，应包裹被删文本（哪怕已不可见）
• 必须成对使用，不能只写 不闭合，否则破坏 DOM 结构，影响后续 JS 操作
• 若内容含换行或块级元素（如

  ），/ 默认是行内元素，需用 CSS 设为 display: inline-block 或 display: block 才能正确包裹

用 CSS 实现基础行级高亮效果

仅靠 HTML 标签不够，必须配 CSS 才能视觉上区分。重点不是“怎么好看”，而是“不破坏可访问性”和“适配不同上下文”。

• 推荐用 text-decoration: underline wavy #28a745（绿色波浪线），比背景色更兼容深色模式和色觉障碍用户
• 用 text-decoration: line-through #dc3545（红色删除线），避免纯背景色遮盖原文本
• 若需背景高亮（如浅绿/浅红底色），务必同时设置 color 和 background-color 对比度 ≥ 4.5:1，否则 WCAG 不合规
• 不要用 !important 强覆盖全局样式，容易在富文本编辑器或 CMS 中失效

diff 工具输出不能直接当 HTML 用

像 git diff、diff -u 或 VS Code 的 diff 视图，输出的是纯文本格式（带 +/- 行前缀），不是合法 HTML。直接 innerHTML 渲染会触发 XSS 风险，且 < > 会被转义或解析出错。

• 必须先做 HTML 转义（如把 < 变成 <），再把 + 行替换为 ...，- 行替换为 ...
• 注意空格和缩进：diff 中的空行、制表符需保留，否则影响代码可读性；但 HTML 会合并空白，建议用

   包裹整段，并设 white-space: pre

• 别用正则粗暴替换 ^+ —— 某些 diff 输出中 + 可能出现在行中（比如 JSON 字符串里），应逐行解析，按 diff 格式规范判断行类型

服务端渲染 vs 前端 JS 渲染的选择陷阱