插入文本标签 - <ins>

什么是 <ins> 标签？

<ins> 标签用于表示已经插入到文档中的新文本。浏览器通常会在插入文本下添加一条下划线。它与 <del> 标签配合使用，可以显示文档的修改历史。

基本语法

html 
<ins>新插入的内容</ins>

语义与用法

<ins> 标签用于表示文本的插入或新增，主要用于以下场景：

  • 文档版本控制中新插入的内容
  • 比较文档的不同版本
  • 显示修改建议或变更历史
  • 表示新添加的信息

<ins> 标签具有明确的语义含义，不仅改变文本的外观，还传达了文本是新插入的信息。

示例：

html 
<!-- 文档修改 -->
<p>会议时间：<del>上午10点</del> <ins>下午2点</ins>。</p>

<!-- 版本比较 -->
<p>这个项目需要 <del>3个月</del> <ins>6个月</ins> 完成。</p>

<!-- 新增信息 -->
<p>产品特点：高性能 <ins>、低功耗</ins>。</p>

<!-- 修改建议 -->
<p>这个 <del>不好</del> <ins>优秀</ins> 的方案值得考虑。</p>

核心属性

cite 属性

cite 属性用于指定一个URL，该URL解释了插入文本的原因或提供了插入的来源。

html 
<p>
  会议时间：<del>上午10点</del> <ins cite="https://example.com/meeting-update">下午2点</ins>。
</p>

datetime 属性

datetime 属性用于指定插入文本的日期和时间。日期和时间格式应符合ISO 8601标准。

html 
<p>
  会议时间：<del>上午10点</del> <ins datetime="2026-02-06T10:00:00">下午2点</ins>。
</p>

与 <del> 标签的配合使用

<ins> 标签和 <del> 标签经常一起使用，以显示文档的修改历史或变更：

示例：

html 
<!-- 显示修改前后的内容 -->
<p>
  我们将在 <del>周一</del> <ins>周二</ins> 上午 <del>9点</del> <ins>10点</ins> 召开会议。
</p>

<!-- 详细的修改信息 -->
<p>
  产品规格：
  <del datetime="2026-02-05T14:30:00">2GB RAM</del>
  <ins datetime="2026-02-05T14:30:00">4GB RAM</ins>
</p>

全局属性

<ins> 标签支持所有HTML全局属性，包括 class、id、style、title 等。

示例：

html 
<!-- 使用class自定义样式 -->
<p>
  产品价格：<del>¥999</del> <ins class="new-price">¥799</ins>。
</p>

<!-- 使用style自定义样式 -->
<p>
  这是 <ins style="text-decoration: underline wavy green;">新插入的文本</ins>。
</p>

<!-- 使用title提供额外信息 -->
<p>
  <del title="2026-02-06 删除">旧内容</del>
  <ins title="2026-02-06 插入">新内容</ins>
</p>

最佳实践

  1. 用于实际插入的内容：仅在文本确实是新插入或修改时使用 <ins> 标签，不要用于装饰性目的。

  2. 与 <del> 标签配合使用：当表示修改时，最好同时使用 <ins> 和 <del> 标签显示前后变化。

  3. 提供修改信息：使用 datetime 和 cite 属性提供插入的日期时间和原因，提高文档的可追溯性。

  4. 自定义样式：可以使用CSS来自定义下划线的样式，但应保持其可识别性。

  5. 考虑可访问性：确保插入文本的样式不会影响页面的可读性和可访问性。

好的示例：

html 
<!-- 清晰的修改记录 -->
<p>
  <del datetime="2026-02-06T10:00:00" cite="https://example.com/update">旧地址：北京市朝阳区</del>
  <ins datetime="2026-02-06T10:00:00" cite="https://example.com/update">新地址：北京市海淀区</ins>
</p>

<!-- 功能更新 -->
<p>
  软件新增功能：
  <ins>用户认证系统</ins>、<ins>数据分析模块</ins>
</p>

不好的示例：

html 
<!-- 用于装饰性目的 -->
<p>
  <ins>这只是为了添加下划线</ins> <!-- 不推荐 -->
</p>

<!-- 没有上下文的插入 -->
<p>
  <ins>新内容</ins> <!-- 没有说明替代了什么 -->
</p>

<!-- 过度使用 -->
<p>
  <ins>这</ins> 是 <ins>新</ins> 的 <ins>内容</ins>。
</p>

浏览器兼容性

<ins> 标签在所有现代浏览器中都得到广泛支持，它是HTML规范的基础部分。

总结

<ins> 标签是HTML中用于表示新插入文本的语义化标签，它不仅在文本下添加下划线，还传达了文本是新插入的信息。与 <del> 标签配合使用，可以有效地显示文档的修改历史和变更内容。正确使用 <ins> 标签可以提高页面的语义化程度和可访问性，帮助用户更好地理解文档的修改过程。

最后更新：2026-02-07