HTML原生仅支持<ins>和<del>语义化标记增删内容，需配CSS实现高亮且确保可访问性；diff输出须转义并按规范解析为合法HTML，不可直接渲染。
HTML 里没有原生的“版本差异行级对比”功能
浏览器解析 HTML 时只认标签语义和 DOM 结构，<ins> 和 <del> 是唯一被规范支持的、用于标记新增/删除内容的语义化标签，但它们不自带样式，也不自动高亮——高亮靠 CSS 控制，更不会“对比”或“计算差异”。
常见错误现象：直接把 Git diff 输出塞进 HTML，或者用 <span class="added"> 手动加类，结果样式不生效、语义丢失、屏幕阅读器无法识别变更意图。
-
<ins>表示插入内容，应包裹新增文本；<del>表示删除内容，应包裹被删文本（哪怕已不可见） - 必须成对使用，不能只写
<ins>不闭合，否则破坏 DOM 结构，影响后续 JS 操作 - 若内容含换行或块级元素（如
<p>），<ins>/<del>默认是行内元素，需用 CSS 设为display: inline-block或display: block才能正确包裹
用 CSS 实现基础行级高亮效果
仅靠 HTML 标签不够，必须配 CSS 才能视觉上区分。重点不是“怎么好看”，而是“不破坏可访问性”和“适配不同上下文”。
-
<ins>推荐用text-decoration: underline wavy #28a745（绿色波浪线），比背景色更兼容深色模式和色觉障碍用户 -
<del>用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-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须先做 HTML 转义（如把
<变成），再把 <code>+行替换为<ins>...</ins>，-行替换为<del>...</del> - 注意空格和缩进：diff 中的空行、制表符需保留，否则影响代码可读性；但 HTML 会合并空白，建议用
<pre><code>包裹整段，并设white-space: pre - 别用正则粗暴替换
^+—— 某些 diff 输出中 + 可能出现在行中（比如 JSON 字符串里），应逐行解析，按 diff 格式规范判断行类型
服务端渲染 vs 前端 JS 渲染的选择陷阱
要不要用 JavaScript 动态解析 diff 并插入 <ins>/<del>？关键看数据来源和性能敏感点。
- 服务端生成（如 Jekyll 插件、Django 模板 filter）更安全、首屏快、SEO 友好，适合静态文档、PR 描述页等场景
- 前端 JS 渲染（如用
diff-match-patch库）灵活，适合实时协作编辑器，但要注意：首次渲染延迟、SSR 不匹配（hydration error）、移动端低端机卡顿 - 如果只是展示两段已知 HTML 的差异（比如旧版 vs 新版文案），别用通用 diff 库——直接用字符串比对 + 逐词 diff 更轻量，
diff-match-patch过重，且对 HTML 标签处理不稳定
真正难的不是标颜色，是保语义、保结构、保可访问性。很多人加了 <ins> 却忘了 aria-label，或用了背景色却没调对比度，最后高亮成了障眼法。
