Del 和 Ins 标签是 HTML5 语义化元素，分别标记删除与插入文本，支持 datetime 和 cite 属性，适用于协作编辑场景，需配合 CSS 增强可读性与无障碍支持。
Del 和 Ins 标签是 HTML5 中专为标记文本删除与插入而设计的语义化元素，非常适合在内容协作平台中直观呈现编辑建议——无需依赖 JavaScript 渲染，原生支持、语义清晰、无障碍友好。
用 del 标记被建议删除的内容
当协作者提议删掉某段文字时，用 <del> 包裹它。浏览器默认会添加删除线样式（如 过时表述），同时保留原始文本供审阅者比对。
- 可添加
datetime属性记录修改时间，例如：<del datetime="2024-06-15T14:22:00Z">旧方案</del> - 支持
cite属性指向修改依据（如评审意见链接）：<del cite="/comments/237">需替换术语</del> - 避免嵌套使用
<del>，也不要用它替代 CSS 的text-decoration: line-through—— 语义和用途不同
用 ins 标记被建议新增的内容
<ins> 用于包裹建议加入的文本，浏览器通常显示为下划线（如 推荐采用新流程），视觉上与删除形成互补，便于快速识别增补点。
- 同样支持
datetime和cite属性，例如：<ins datetime="2024-06-15T14:23:15Z" cite="#suggestion-88">参考 ISO/IEC 25010 标准</ins> - 可与
<del>配合使用实现“替换”效果：<del>手动校验</del><ins>自动化校验</ins> - 注意：不要用
<ins>替代强调（应使用<em>或<strong>），它的核心作用是标示“新增编辑操作”
结合 CSS 增强协作可读性
默认样式较简略，协作平台中建议通过 CSS 强化视觉区分度，同时保持语义不变。
立即学习“前端免费学习笔记（深入）”；
- 为
del添加背景色与半透明删除线：
del { background-color: #ffebee; text-decoration: line-through; text-decoration-color: rgba(233,30,99,0.5); } - 为
ins使用虚线下划线+浅绿色背景：
ins { background-color: #e8f5e9; text-decoration: underline; text-decoration-style: dashed; text-decoration-color: #4caf50; } - 确保颜色对比度满足 WCAG AA 级可访问性要求，必要时为屏幕阅读器补充 ARIA 标注（如
aria-label="建议删除"）
在协作流程中合理使用不破坏内容结构
<del> 和 <ins> 是行内元素，适用于词、短语、句子级修改；不应用于块级结构调整（如整段删改）。
- 段落级建议宜结合
<section>或<aside>+ 注释说明，而非强行用del/ins包裹整个<p> - 多人并行编辑时，服务端需按时间戳或版本号合并
del/ins标记，避免嵌套冲突（HTML 不允许<del><del>…</del></del>） - 导出为 PDF 或纯文本时，应提供“清理模式”选项，自动移除这些标签并保留其包裹的原始文本逻辑
