标签必须配合 datetime 和 cite 属性才能体现语义价值，仅靠默认下划线不可见且无时间/来源信息；需用 text-decoration: wavy underline、显式颜色和浅蓝背景增强可读性，且须与 成对使用构成完整修订上下文。
<ins></ins> 标签本身就能标记插入内容并默认呈现下划线，但直接依赖浏览器默认样式在多数实际页面中几乎不可见——细线+浅灰下划线在正文里根本看不清。必须用 CSS 增强，且不能破坏语义和可访问性。
为什么默认 text-decoration: underline 不够用
浏览器给 <ins></ins> 加的原生下划线是 1px 细线、颜色通常为 currentColor（即文字色），在深灰文字+白背景上对比度极低；更关键的是，它不携带任何时间或来源信息，<ins></ins> 就退化成纯视觉装饰。语义丢失后，屏幕阅读器可能只读作“插入”，却不播报何时、为何插入。
常见错误现象包括：
- 仅加
color: green，没配下划线或背景色，WCAG 对比度检测失败 - 用
<u></u>或text-decoration: underline直接套在普通<span></span>上，失去变更语义 - 删掉默认下划线后忘记重置行高或 padding，导致文字被 border-bottom 切断
<ins></ins> 必须带 datetime 和 cite 属性才真正有用
没有 datetime 的 <ins></ins> 是哑巴标签——它说“这是新加的”，但不说“什么时候加的”。没有 cite，就无法回溯修改依据。这两项不是锦上添花，而是让插入行为可验证、可审计的基础。
使用场景明确：
- 法律条款更新：用
cite指向修订说明页，datetime精确到秒 - 博客勘误：用户反馈错字后修正，
cite可设为 issue 链接 - 产品文档迭代：CI/CD 流水线自动注入
datetime，cite指向 commit hash
示例写法：
<p>本服务协议于<ins cite="https://example.com/terms/v2.4" datetime="2026-05-20T09:15:22Z">新增数据跨境传输条款</ins>。</p>
用 CSS 增强下划线但不破坏语义的实操要点
目标是让下划线醒目、每行都出现、不压字、满足无障碍要求。核心不是“换一种下划线”，而是重建一套可预测的视觉层。
安然企业网站管理系统 V06.0108.H 无组件生成HTML版 AnRowIT Enterprise Site Management System V06.0108.H 简要安装说明 1、上传至虚拟主机[跟目录或子目录均可]。 2、若上传至虚拟主机子目录则要修改文件"Include/EsmsConfig.Asp"中第63行“DatabasePath="/D
推荐组合方式：
- 用
text-decoration: wavy underline替代单线，波浪线天然更抓眼，且不会与连字冲突 - 显式设置
text-decoration-color（如#2a75ff），避免依赖currentColor - 叠加浅蓝背景色
background-color: #f0f8ff，既提升对比度，又不遮挡文字 - 绝对不要用
border-bottom+display: inline-block：多行文本时 border 只出现在最后一行底边，且会撑高行距 - 禁用
font-variant-caps或letter-spacing类调整，它们可能干扰屏幕阅读器对插入范围的识别
最小可用样式：
ins {<br> text-decoration: wavy underline;<br> text-decoration-color: #2a75ff;<br> background-color: #f0f8ff;<br>}
和 <del></del> 配合才能构成完整修订上下文
单独用 <ins></ins> 是残缺的。用户看到“红色”替代了“蓝色”，但不知道“蓝色”是否还存在。必须与 <del></del> 成对出现，才能表达“由 A 改为 B”的完整操作。
容易踩的坑：
- 把
<del></del>和<ins></ins>套在同一段落但不相邻，中间插入其他标签（如<em></em>），导致语义断裂 - 用不同
datetime值但未对齐逻辑顺序（比如删除时间晚于插入时间） - 样式上
<del></del>用删除线 + 红背景，<ins></ins>却只用绿色文字——视觉权重失衡，用户注意力被拉偏
正确结构示例：
<p>我喜欢的颜色是<del datetime="2026-05-10T14:00:00Z">蓝色</del><ins cite="https://example.com/design-decisions#color" datetime="2026-05-20T10:30:00Z">红色</ins>！</p>
真正难的不是写对那几行 CSS，而是让所有编辑者理解：<ins></ins> 不是“高亮新文字”的快捷键，而是一个需要填写时间戳、来源链接、并与删除动作配对的数据节点。漏掉 datetime，它就只是个带下划线的 <span></span>。
