ins 和 del 是语义化标签，分别表示插入和删除内容，必须成对闭合、正确嵌套并合理设置 display 样式；diff 转 HTML 需逐行解析与转义；cite 和 datetime 属性须规范使用以保障可访问性与语义准确性。
ins 和 del 必须成对闭合，否则会破坏后续 DOM 操作
常见错误是只写 <ins>新内容 不写 </ins>，或者在富文本编辑器里粘贴时自动过滤了闭合标签。后果不只是样式失效——JS 通过 document.querySelectorAll('ins') 可能漏掉节点，innerHTML 替换后父容器的 childNodes 顺序错乱，甚至导致 React/Vue 的 diff 失效。
务必检查浏览器开发者工具 Elements 面板里标签是否完整嵌套，尤其注意跨行、含换行符或空格的场景。
包裹块级元素时需显式设置 display 样式
<ins> 和 <del> 默认是 inline 元素，但规范允许它包含 <p>、<ul> 甚至 <table>。如果直接这么写：
<ins> <p>这是新增的一整段</p> <ul><li>第一项</li></ul> </ins>
浏览器会渲染异常（比如列表项缩进丢失、段落间距塌陷）。解决方法只有两个：
- 给
ins和del加 CSS：display: block或display: inline-block（后者更安全，避免意外触发 BFC） - 不强行包裹块级结构，改用多个内联
<ins>分别包每段文字或列表项
diff 文本转 HTML 时不能靠正则粗暴替换 +/− 行
从 git diff 或 API 返回的纯文本 diff（如 + console.log("hello")）不能直接用 str.replace(/^\+/, '<ins>') 这类正则处理。原因有三：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
+可能出现在字符串字面量里（如 JSON 中的"status": "+ok"），误替换会毁掉语义 - diff 中的空行、制表符、混合空格缩进必须原样保留，HTML 会合并空白，得用
<pre><code>包裹整块 - 必须先对原始 diff 字符串做 HTML 转义（
&→&，<→等），否则 XSS 风险极高
正确做法是逐行解析：按 diff 规范识别以 + 开头且非 +++ 的行，再对内容单独转义并包裹 <ins>；− 行同理处理 <del>。
cite 和 datetime 属性不是摆设，但要用对场景
cite 应指向解释修改原因的文档 URL，比如 PR 描述页、需求文档链接；datetime 必须是完整 ISO 8601 时间（2026-04-09T14:22:00+08:00），不能只写日期或随便填数字。这两个属性在屏幕阅读器中会被读出，也影响某些 CMS 的版本比对逻辑。但注意：
— 不要填虚构 URL 或空字符串，会降低可信度
— 后端生成时若时间精度不够（如只到天），datetime 值仍需补全时分秒（可用 T00:00:00Z）
— cite 值必须可访问，否则辅助技术可能报错
<p>。混用或过度包裹会让 AT 工具（如 NVDA、VoiceOver）朗读混乱，也削弱 diff 的可读性。
