ins 和 del 是语义化标签，分别表示插入和删除内容，必须成对闭合、正确嵌套并合理设置 display 样式；diff 转 html 需逐行解析与转义；cite 和 datetime 属性须规范使用以保障可访问性与语义准确性。
ins 和 del 必须成对闭合，否则会破坏后续 DOM 操作
常见错误是只写 <ins>新内容</ins> 不写
document.querySelectorAll('ins') 可能漏掉节点，innerHTML 替换后父容器的 childNodes 顺序错乱，甚至导致 React/Vue 的 diff 失效。务必检查浏览器开发者工具 Elements 面板里标签是否完整嵌套，尤其注意跨行、含换行符或空格的场景。
包裹块级元素时需显式设置 display 样式
<ins></ins> 和 <del></del> 默认是 inline 元素，但规范允许它包含 <p></p>、<ul></ul> 甚至 <table>。如果直接这么写：
<pre class="brush:php;toolbar:false;"><ins>
<p>这是新增的一整段</p>
<ul><li>第一项</li></ul></ins></pre>
<p>浏览器会渲染异常（比如列表项缩进丢失、段落间距塌陷）。解决方法只有两个：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>给 <code>ins 和 del 加 CSS：display: block 或 display: inline-block（后者更安全，避免意外触发 BFC）
<ins></ins> 分别包每段文字或列表项diff 文本转 HTML 时不能靠正则粗暴替换 +/− 行
从 git diff 或 API 返回的纯文本 diff（如 + console.log("hello")）不能直接用 str.replace(/^\+/, '<ins>')</ins> 这类正则处理。原因有三：
-
+可能出现在字符串字面量里（如 JSON 中的"status": "+ok"），误替换会毁掉语义 - diff 中的空行、制表符、混合空格缩进必须原样保留，HTML 会合并空白，得用
<pre class="brush:php;toolbar:false;"><code></code> 包裹整块</pre> - 必须先对原始 diff 字符串做 HTML 转义（
&→&，→ <code><等），否则 XSS 风险极高
正确做法是逐行解析：按 diff 规范识别以 + 开头且非 +++ 的行，再对内容单独转义并包裹 <ins></ins>；− 行同理处理 <del></del>。
cite 和 datetime 属性不是摆设，但要用对场景
cite 应指向解释修改原因的文档 URL，比如 PR 描述页、需求文档链接；datetime 必须是完整 ISO 8601 时间（2026-04-09T14:22:00+08:00），不能只写日期或随便填数字。这两个属性在屏幕阅读器中会被读出，也影响某些 CMS 的版本比对逻辑。但注意：
— 不要填虚构 URL 或空字符串，会降低可信度
— 后端生成时若时间精度不够（如只到天），datetime 值仍需补全时分秒（可用 T00:00:00Z）
— cite 值必须可访问，否则辅助技术可能报错
<p></p>。混用或过度包裹会让 AT 工具（如 NVDA、VoiceOver）朗读混乱，也削弱 diff 的可读性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
