一次有效的修订要求和成对紧邻使用，各自携带iso 8601格式datetime及有效cite，语义清晰、机器可读、可追溯。
<del></del> 和 <ins></ins> 必须成对出现、语义对齐，否则修订痕迹会丢失上下文，变成“删了但没说替换成啥”或“加了但看不出原样”。单纯视觉高亮不等于有效修订记录。
怎么写才算一次有效的修订对
真实协作场景中，用户关心的不是“有没有划线”，而是“原来是什么、现在改成了什么、谁在什么时候改的”。这要求<del></del>和<ins></ins>必须在同一逻辑单位内紧邻使用，且各自携带可验证的元数据：
-
<del></del>包裹被移除的原始文本，<ins></ins>紧跟其后包裹新文本，中间不插其他内容（如空格、标点需明确归属） - 两者都必须带合法
datetime属性：格式严格为 ISO 8601，例如2026-05-22T09:15:00Z；本地时间要带时区偏移，如2026-05-22T17:20:33+08:00 -
cite应指向可访问的修改依据，比如 PR 链接、评审会议纪要页，而不是"#review-123"这类锚点或 404 链接 - 避免把整段
<p></p>塞进一个<del></del>里——浏览器会解析，但屏幕阅读器可能朗读为“已删除一段文字”，丢失细节
常见错误：时间戳无效、嵌套错乱、语义漂移
这些错误不会导致页面崩溃，但会让修订失去机器可读性和协作价值：
-
datetime="2026/05/22"或datetime="May 22, 2026"—— 浏览器忽略该属性，辅助技术无法提取时间信息 -
<del>旧价格<ins>新价格</ins></del>—— 语义矛盾：“既删又插”，屏幕阅读器可能重复播报或跳过 - 用
<s></s>替代<del></del>标记合同条款变更 ——<s></s>表示“内容过时”，不表示“已被撤回”，法律场景下有风险 - 富文本编辑器粘贴时自动剥离
<ins></ins>闭合标签 —— 导致后续所有document.querySelectorAll('ins')查询漏节点，JS 交互失效
CSS 强化样式时，别动语义底线
默认下划线和删除线太轻，必须增强，但增强方式不能掩盖“这是被删/被插”的核心信号：
-
del至少保留text-decoration: line-through，建议加双线：text-decoration: line-through double，再配浅红背景和半透明：background-color: #ffebee; opacity: 0.85 -
ins别只用绿色下划线——容易和链接混淆；推荐禁用默认下划线，改用左侧竖条 + 高亮背景：border-left: 3px solid #4caf50; background-color: #e8f5e9 - 绝对不要写
del { text-decoration: none; color: #d32f2f; }—— 这等于告诉屏幕阅读器“这只是个红色字”，语义全丢 - 悬停显示来源时，用
del:hover::after { content: " ← 来源: " attr(cite); }，但前提是cite真的有效
导出为纯文本时，HTML 修订会直接消失
这是最容易被忽略的断裂点：<del></del> 和 <ins></ins> 在邮件、CLI 工具、Markdown 渲染器里统统不识别，textContent 只返回内部文字，修订痕迹归零：
- 服务端生成 plain text 摘要时，必须主动转换：把
<del>xxx</del>替换为[DEL]xxx[/DEL]，<ins>yyy</ins>替换为[INS]yyy[/INS] - 前端 JS 提取时，别只调
el.textContent；得遍历子节点，对del节点加前缀-，ins节点加+，再拼接 - 若走 Markdown 流程，
~~strikethrough~~不等价于<del></del>，需用remark-html插件 + 自定义 transformer 显式映射 - Git diff 工具输出的
+/-行不能靠正则粗暴转成<ins></ins>/<del></del>—— 要先按行解析，处理缩进、空行、HTML 实体转义
真正难的不是写出这对标签，而是每次插入前问一句：这个改动是否值得被机器读取、被他人追溯、被未来审计？填错一个 datetime，就可能让整段修订在协作系统里排错序；漏掉一个 cite，就等于放弃解释权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
