<ins> 标签语义化标记新增文本,支持无障碍访问与自动化处理;默认下划线可覆盖;推荐使用合法 ISO 8601 格式 datetime 属性;须与 <del> 并列使用,不可嵌套,且需配套工具链解析才能实现完整修订功能。

<ins> 标签用于标记文档中**被插入的文本**,语义上表示“这部分内容是后来添加的”,常用于版本对比、编辑追踪、协作审阅等场景。它本身不改变样式,但浏览器默认会加下划线(text-decoration: underline),这是可覆盖的 CSS 行为。
为什么不用 <span> 或纯 CSS 模拟?
用 <span> 加 class 也能实现视觉效果,但会丢失语义信息:<ins> 告诉浏览器、屏幕阅读器、搜索引擎和协作工具“这段是新增内容”,这对无障碍访问、自动化比对、Git-like 文档 diff 工具都至关重要。例如,某些 CMS 或文档系统会基于 <ins> 和 <del> 自动高亮修订区域。
<ins> 的 datetime 属性必须填吗?
不是必须,但强烈建议提供:datetime 是唯一标准属性,值需为合法 ISO 8601 时间格式(如 2026-05-02T13:15:00Z)。它让修订时间可被程序解析,否则仅靠视觉样式无法判断“何时插入”。常见错误包括:
- 写成中文日期(如
2026年5月2日)→ 浏览器忽略该属性 - 漏掉时区(如
2026-05-02T13:15:00)→ 不符合规范,部分解析器可能失败 - 用空格代替
T分隔日期与时间 → 无效
和 <del> 搭配使用时要注意什么?
两者语义互补,但不能嵌套互换:<ins> 只能包裹新增内容,<del> 只能包裹删除内容。典型误用:
立即学习“前端免费学习笔记(深入)”;
- 把整段改写包在
<ins>里,却没标出原内容 → 应配合<del>显式标出被替换部分 - 在
<ins>内再套<del>→ 语义冲突,HTML 规范不禁止但逻辑混乱 - 忽略可访问性:屏幕阅读器通常会读出 “inserted” 或 “deleted”,若只用颜色区分(如红/绿),色觉障碍用户无法识别
真正实用的修订结构是并列使用,比如:<del datetime="2026-04-20">旧表述</del><ins datetime="2026-05-02T13:15:00Z">新表述</ins>。
容易被忽略的是:没有 JS 或后端支持时,<ins> 仅提供语义骨架;想自动渲染修订时间、合并差异、导出修订报告,得靠配套工具链解析这些标签及其 datetime 属性——光写对标签远远不够。



















