del 和 ins 是 html5 语义化标签，分别标记删除和新增内容，支持 datetime 和 cite 属性记录时间与依据，可嵌套使用并配合 css 增强可读性与可访问性。
Del 和 Ins 是 HTML5 原生支持的语义化标签，专用于标记文档中被删除和插入的内容，适合展示修订痕迹，无需 JavaScript 就能实现基础版本控制效果。
Del 标签：清晰标出被删除的内容
使用 del 包裹被移除的文字，浏览器默认以删除线（如 `text-decoration: line-through`）呈现。它支持 datetime 属性记录删除时间，还可添加 cite 指向修改依据（如评审意见链接）。
- 基础用法：
<del>旧文本</del> - 带时间戳：
<del datetime="2024-06-15T10:30">过时描述</del> - 带引用来源：
<del cite="review-notes.html#sec2">主观表述</del>
Ins 标签：高亮新增内容并注明依据
ins 用于包裹新增文字，浏览器默认加下划线（text-decoration: underline）。同样支持 datetime 和 cite，便于追溯谁在何时为何添加了这段内容。
- 基础用法：
<ins>新说明</ins> - 标注修订者与时间：
<ins datetime="2024-06-15T14:22" cite="#editor-anna">根据用户反馈补充操作步骤</ins> - 可与 del 嵌套使用，体现“删旧补新”逻辑：
<p>请<del datetime="2024-06-10">点击右上角菜单</del><ins datetime="2024-06-15">使用快捷键 Ctrl+M</ins>打开设置面板。</p>
样式增强：让修订痕迹更专业易读
默认样式较简略，可通过 CSS 强化可读性。例如区分作者、突出时间、统一颜色体系：
- 为不同修订者设颜色：
ins[data-author="alice"] { background-color: #e6f7ff; } del[data-author="bob"] { background-color: #fff2f0; } - 让时间戳更显眼：
del::after, ins::after { content: " (" attr(datetime) ")"; font-size: 0.8em; color: #666; } - 禁用默认下划线/删除线，改用背景色+边框更清晰：
ins { text-decoration: none; background-color: #d9f7be; border-bottom: 2px solid #52c418; } del { text-decoration: none; background-color: #ffe9e6; border-top: 2px solid #f5222d; }
注意事项与实用建议
这两个标签是纯语义标记，不触发任何行为，也不影响 DOM 结构或表单提交。它们的价值在于可访问性（屏幕阅读器会读出“已删除”“已插入”）和机器可读性（利于后续解析修订历史）。
- 避免嵌套 del 或 ins 在交互控件内（如按钮中），可能干扰焦点与语义
- 时间格式必须符合 ISO 8601（如
2024-06-15T09:30:00Z），否则 datetime 属性无效 - 若需多人协作修订视图，可结合 data-author 属性 + CSS 类动态渲染，无需后端即可模拟简易审阅模式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
