<ins>是唯一能语义化表达“内容插入”的HTML元素，必须配合正确datetime和cite属性使用，与<u>或CSS下划线有本质区别：前者支持无障碍访问、机器可读和协作审计，后者仅提供视觉效果。
<ins> 标签不是“加下划线的替代方案”，而是唯一能语义化表达“此处被插入”的 HTML 元素。不用它，就等于放弃机器可读的变更记录。
为什么<ins>不能用<u>或 CSS text-decoration代替
视觉相似不等于语义等价：<u> 在 HTML5 中已被标记为“不鼓励使用”，且无时间、来源、上下文信息；纯 CSS 下划线（如 text-decoration: underline）对屏幕阅读器完全静默，搜索引擎无法索引“这是新增内容”，协作系统（如 Git 页面 diff 工具、合规审计插件）也提取不到变更点。
关键差异：
-
<ins datetime="2026-05-27T14:22:00+08:00">触发屏幕阅读器朗读“已插入，2026年5月27日14点22分” -
<u>什么也不读，只渲染一条线 - 仅靠
color: #2a75ff不满足 WCAG 对比度要求，必须叠加text-decoration或background-color
<ins> 的 datetime 和 cite 必须填对
这两个属性不是“可选装饰”，而是语义生效的前提。浏览器和辅助技术会直接忽略缺失或格式错误的 datetime。
正确写法示例：
<ins datetime="2026-05-27T14:22:00+08:00" cite="/docs/2026-q2-updates#section-3">新补充的文字说明</ins>
常见错误：
-
datetime="2026-05-27"— 缺少时分秒与时区，解析失败 -
cite="v3.2-notes"— 相对路径未带斜杠，或跨域引用触发 CORS -
cite指向 404 页面或无意义锚点（如#top），失去溯源价值 - 服务端渲染时用
new Date().toISOString()，导致时区错乱（应由后端注入可信时间戳）
怎么让<ins>的下划线真正看得见又不破坏语义
浏览器默认的细直线 + 浅灰在多数背景上不可见。增强样式时守住三条底线：不切断连字、不改变行高、不转为块级。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
推荐 CSS 写法：
ins {
text-decoration: wavy underline;
text-decoration-color: #2a75ff;
background-color: #f0f8ff;
/* 不要写 display: block; 不要写 float: left; */
}注意点：
-
text-decoration: wavy比solid更易识别，且不会像border-bottom那样切开“fi”“fl”等连字 - 仅改颜色（如
color: green）不满足无障碍对比度，必须搭配下划线或浅蓝底色 - 整段插入请直接包裹
<p>，别包文字再手动换行 — 否则语义断裂，屏幕阅读器会误读为“插入了一堆零散词”
<ins> 必须和 <del> 成对出现才构成一次有效修订
单独一个 <ins> 就像说“我加了东西”，但没说“原来是什么”。真实协作场景中，变更必须可逆、可比、可验证。
典型结构：
<p>原句是<del datetime="2026-05-20T09:15:00+08:00">气候变化缓慢</del>，现更新为<ins datetime="2026-05-27T14:22:00+08:00" cite="/changelog#20260527">全球变暖正在加速</ins>。</p>
最容易被忽略的细节：
- 时间戳必须严格按顺序：删除早于插入，否则逻辑矛盾
- 同一修订事件里，
<del>和<ins>的cite应指向同一出处（如同一个 PR URL 或版本页锚点） - 连续多处插入不要嵌套
<ins><ins></ins></ins>，应拆成多个独立标签，保持时间线清晰
真正难的从来不是写对标签，而是让每次内容更新都携带完整上下文：谁在什么时候、基于什么依据、替换了哪一段——这些信息一旦缺失，<ins> 就退化成一根没意义的线。
