del和ins标签必须成对出现才能体现修改语义，单独使用仅具视觉效果而无修订含义；需严格配对、填合法iso 8601 datetime时间戳、提供有效cite链接，并物理相邻包裹原内容与新内容，否则无法被浏览器、屏幕阅读器或工具识别为完整修改动作。
del 和 ins 标签必须成对出现才能体现修改语义
单独用 <del></del> 或 <ins></ins> 只是视觉删/加，浏览器和屏幕阅读器无法识别“这是从 A 改成 B”的完整修改动作。语义上，修改需有「原内容」和「新内容」的对应关系。
常见错误是只标删除不标插入，比如把 “价格：100元” 改成 “价格：95元” 时只写：
<p>价格：<del>100</del>元</p>——这会让辅助技术认为“100”被删了，但没说明替换成什么。
- 正确做法是包裹在同一个上下文里，如：
<p>价格：<del>100</del><ins>95</ins>元</p> - 如果修改跨多词或含空格，建议用
<span></span>包一层再套<del></del>/<ins></ins>，避免破坏段落流 - 不要嵌套使用
<del></del>里再套<ins></ins>（如<del><ins>xxx</ins></del>），语义冲突且多数屏幕阅读器不支持
ins 的 datetime 属性不是可选装饰，而是关键时间证据
如果你要记录“谁在什么时候改了什么”，datetime 是唯一标准方式。没有它，<ins></ins> 只表示“新增”，不表示“何时新增”。浏览器不自动填充该值，必须手动设置。
常见错误是写成：<ins>95</ins> 或随便填个字符串如 <ins datetime="2024">95</ins>——前者无时间信息，后者格式非法，会被忽略。
- 合法格式必须是 ISO 8601，例如：
<ins datetime="2024-05-22T14:30:00+08:00">95</ins> - 服务端生成 HTML 时，推荐用后端时间（而非 JS
Date.now()）保证一致性 - 若时间精度要求不高，至少保留日期部分：
datetime="2024-05-22"，仍算有效
样式覆盖容易破坏默认可访问性表现
浏览器对 <del></del> 默认加删除线、<ins></ins> 默认加下划线，这些样式本身承载语义提示。强行用 CSS 移除或替换为颜色块，可能让低视力用户或键盘导航者丢失修改线索。
典型翻车操作：del { text-decoration: none; color: #999; } —— 删除线没了，灰色又和普通文本难区分，等于抹掉了修改标识。
- 保留
text-decoration是底线，最多增强（如ins { text-decoration: underline wavy #2a7ae2; }） - 想加背景色？用
background-color+ 透明度，别盖住文字或下划线 - 务必测试键盘聚焦时的 outline 是否被意外隐藏——
<ins></ins>元素可能被 tab 进入，尤其在表单中
diff 场景下避免直接操作 DOM 插入 del/ins
如果是在代码里做文本 diff（比如对比两个版本的合同条款），别手写一堆 <del></del>/<ins></ins> 拼接字符串。HTML 转义、嵌套边界、空格处理极易出错。
真实场景中，你大概率会遇到 “旧文本含 &、新文本含 ”，或者连续空格被 HTML 合并导致 diff 错位。
- 用成熟库如
diff-match-patch（Google 开源）或pretty-diff，它们输出的是带语义标记的结构化 diff 结果 - 渲染时，让库负责转义和标签注入，你只控制容器和基础样式
- 特别注意：服务端渲染时，确保 diff 逻辑运行在可信上下文，避免将用户输入未经处理就塞进
<ins></ins>导致 XSS
真正麻烦的从来不是怎么标修改，而是怎么让修改在不同设备、不同辅助工具、不同 diff 粒度下都保持可读、可追溯、不可绕过。时间戳、语义配对、样式克制，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
