del 和 ins 是语义化修订标签，分别表示删除和新增内容，需配合 cite、datetime 属性及可访问样式使用，并在导出时处理纯文本兼容性。
del 和 ins 标签的基本语义与渲染表现
del 和 ins 是 HTML 中原生支持修订标注的语义化标签，不是装饰性元素，浏览器默认用删除线（del）和下划线（ins）呈现，但它们真正价值在于传达「内容被移除」或「内容被新增」的意图，对屏幕阅读器、搜索引擎、协作工具（如 diff 工具或 CMS 修订模式）有明确信号。
实际使用时要注意：它们不改变 DOM 结构或文本流，只是包裹一段已有文本；不能嵌套自身（比如 del 里再套 del），但可以交叉包裹其他行内元素（如 em、span）。
如何正确添加时间戳与来源信息
修订可信度依赖上下文。HTML 允许为 del 和 ins 添加 cite 和 datetime 属性，前者指向修改依据（如会议纪要链接），后者必须是合法的 ISO 8601 时间格式（如 2024-05-22T14:30:00Z），否则会被浏览器忽略。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
datetime值若省略时区（如2024-05-22），部分浏览器会按本地时区解析，导致协作时时间错位 -
cite不是 URL 必填项，但如果是相对路径（如cite="notes/v2-changes.md"），需确保部署后该路径可访问，否则属性形同虚设 - 不要用
title替代datetime—— 它仅用于悬停提示，无法被辅助技术可靠读取
与 CSS 自定义样式配合时的常见陷阱
默认样式太轻，常被覆盖或误读。用 CSS 强化视觉区分是必要操作，但要注意以下三点：
- 避免只改颜色（如
del { color: #d32f2f; }），色盲用户可能无法识别；必须保留删除线（text-decoration: line-through）且确保粗细足够（建议text-decoration-thickness: 2px） -
ins的下划线容易和超链接混淆，推荐加背景高亮（如background-color: #fff3cd;）并禁用默认下划线（text-decoration: none），再用border-bottom控制样式 - 在
contenteditable区域中，直接编辑del或ins内容可能导致浏览器丢弃其标签——应监听input事件并手动维护标签结构
diff 场景下与纯文本修订的兼容性问题
当 HTML 修订内容需导出为纯文本（如邮件摘要、CLI 工具处理），del 和 ins 会被直接丢弃，只剩内部文本。没有通用方案能自动还原修订痕迹，必须提前约定导出规则：
- 服务端生成 plain text 时，用
[DEL]xxx[/DEL]和[INS]yyy[/INS]包裹对应内容（注意：这不是 HTML，而是自定义标记） - 若用 JavaScript 提取，别只调
textContent—— 应遍历节点，对del节点加前缀-，ins节点加+，再拼接 - 某些 Markdown 解析器（如 remark）支持
~~strikethrough~~，但不识别del标签；若需双向转换，得用专门插件（如remark-html+ 自定义 transformer）
修订不是加个标签就完事，关键在时间、来源、可访问性、导出路径这四点是否闭环。漏掉任意一环，都可能让「标注」变成「摆设」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
