HTML 中的 ins

学习目标

理解 <ins> 标签的语义用途及其在文档修订中的作用
掌握 <ins> 标签的基本语法与常用属性（cite 和 datetime）
学会结合 CSS 自定义插入文本的显示样式
了解 <ins> 与 <del> 标签的配合使用场景

正文内容

什么是 `<ins>`

HTML 中的 <ins> 标签用于标记文档中被插入的新内容。它具有明确的语义含义，表示该部分文本是在原始版本基础上新增的。

默认情况下，大多数浏览器会将 <ins> 标签内的文本以下划线形式显示，以区别于普通内容。这种视觉提示有助于用户快速识别文档的更新部分。基本语法如下：

<ins>被插入的文本内容</ins>

注意：<ins> 是一个双标签元素，必须包含开始标签和结束标签。

常用属性

除了支持所有全局属性外，<ins> 标签还提供两个语义化属性，用于记录插入操作的元信息：

属性	说明
`cite`	可选属性，指定一个 URL，指向解释此次插入原因的文档或消息（如修订日志、变更说明等）
`datetime`	可选属性，标明文本插入的具体日期和时间，格式为 `YYYY-MM-DDThh:mm:ssTZD`（符合 ISO 8601 标准）

示例：带属性的 <ins> 标签

<ins cite="https://example.com/revisions/123" datetime="2025-03-15T10:30:00+08:00">
    新增功能说明
</ins>

这些属性对普通用户不可见，但可被搜索引擎、辅助技术或开发者工具读取，提升文档的可追溯性与可访问性。

与 `<del>` 配合

在展示文档修订时，<ins> 常与 <del>（表示删除的内容）搭配使用，形成“删改对比”效果。

示例 1：基础用法

<!DOCTYPE html>
<html>
<body>
    <h1>CodeHub</h1>
    <h2>HTML ins 标签</h2>
    <p>
        CodeHub 是一个 <del>数学</del> <ins>计算机</ins> 科学学习平台。
    </p>
</body>
</html>

在此例中：

“数学”被标记为已删除（通常显示为删除线）；
“计算机”被标记为新插入内容（通常显示为下划线）。

使用 CSS

虽然浏览器默认以下划线显示 <ins>，但可通过 CSS 的 text-decoration 属性进行覆盖或增强。

示例 2：结合 CSS 与 datetime 属性

<!DOCTYPE html>
<html>
<head>
    <style>
        del {
            color: red;
            text-decoration: line-through;
        }
        
        ins {
            color: green;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>CodeHub</h1>
    <h2>HTML ins 标签</h2>

    <p>
        CodeHub 是一个 <del>数学</del>
        <ins datetime="2018-11-21T15:55:03Z">
            计算机
        </ins> 科学学习平台。
    </p>
</body>
</html>

效果说明：

删除内容显示为红色并带有删除线；
插入内容显示为绿色并保留下划线；
datetime 属性记录了插入时间，便于版本管理。

提示：你也可以完全移除下划线（text-decoration: none）并改用背景色、边框等方式突出新增内容。

重点总结

特性	说明
标签类型	行内元素（inline）
默认样式	下划线（可通过 CSS 修改）
核心语义	表示文档中新增的内容
关键属性	`cite`（插入依据）、`datetime`（插入时间）
常见搭档	`<del>` 标签（用于标记删除内容）
替代方案	若仅为视觉效果，应直接使用 CSS；若需语义表达，则必须使用 `<ins>`

思考题

在一个多人协作的技术文档中，如何利用 <ins> 和 <del> 标签配合 datetime 属性实现清晰的版本变更追踪？
如果仅想让某段文字显示下划线，但并无“新增”语义，是否应该使用 <ins> 标签？为什么？
如何通过 CSS 使 <ins> 标签在打印页面时显示为高亮背景而非下划线，以提升纸质文档的可读性？