del 表示已被删除的内容，ins 表示新增内容，二者需成对使用以体现修改对比，必须包裹被修改的文本片段而非整块元素，datetime 属性推荐用于审计场景，滥用为样式工具会破坏语义与无障碍。
del 和 ins 标签的基本用法与语义含义
del 表示已被删除的内容，ins 表示新增或插入的内容。它们不是装饰性标签，而是有明确语义的 HTML 元素，浏览器默认会为 del 加删除线、ins 加下划线，但样式可覆盖。关键在于：它们应包裹被修改的文本片段本身，而不是整段文字或无关内容。
- 必须成对出现才体现“修改痕迹”，单独用
del或ins无法表达对比关系 - 不要嵌套在
div或p外层做“区域标记”，那会破坏语义和可访问性 - 时间属性
datetime是可选但推荐的，尤其用于版本比对或审计场景
<p>原句是<del datetime="2024-03-15T10:22:00">今天天气很好</del><ins datetime="2024-03-15T10:22:00">今天气温骤降</ins>。</p>
常见错误：把 del/ins 当作样式工具滥用
很多人用 del 只为画删除线，用 ins 只为加下划线，结果导致语义混乱。比如在表单校验中用 del 标记错误提示，或在代码注释里用 ins 标新功能说明——这些都不是“文档内容的历史变更”，屏幕阅读器会误读，搜索引擎也可能降权。
-
del不等于span style="text-decoration: line-through" -
ins不等于span style="text-decoration: underline" - 若只是视觉强调，用
span+ CSS；若真有增删行为（如编辑记录、法律条文修订），才用del/ins
与 diff 工具或 CMS 输出结合时的关键细节
很多 CMS 或 Markdown 编辑器导出 HTML 时会自动插入 del/ins，但常忽略 datetime 或嵌套层级错乱。例如：
<ins><p>新增整段</p></ins>
这是非法的：p 是块级元素，不能放在 ins（内联元素）内部。正确做法是让 ins 包裹纯文本，或用 CSS 把 ins 设为 display: block（不推荐，破坏语义）。
立即学习“前端免费学习笔记（深入）”；
- 确保
del和ins的父容器是允许内联内容的元素（如p、span、li） - 多行修改建议拆到每个文本节点级别，而非整块包裹
- 若需高亮整段差异，应由外层逻辑控制 class，而非强行用
del/ins套div
无障碍与浏览器兼容性注意事项
所有现代浏览器都支持 del/ins，但辅助技术对它们的处理依赖于正确使用。NVDA 和 VoiceOver 会朗读 “deleted text” 或 “inserted text”，前提是标签未被 CSS 隐藏（如 visibility: hidden 或 display: none）。
- 不要给
del设置opacity: 0或color: transparent，这会让内容对屏幕阅读器不可见 - 若需隐藏已删除内容（如折叠旧版本），应配合
aria-hidden="true"显式声明，而非仅靠视觉隐藏 -
datetime值必须符合 ISO 8601 格式（如2024-03-15T14:30:00Z），否则会被忽略
实际用的时候，最易被忽略的是：修改痕迹必须真实反映内容变更，而不是为了“看起来像修订稿”而硬套标签。语义错了，样式再准也没用。
