Web学习网站

Appearance

<ins> 标签 ​

<ins> 标签用于定义已被插入文档中的文本。它表示文档中新增加的内容，通常浏览器会以下划线的形式显示。

概述 ​

<ins> 标签是 HTML 中的语义化标签，用于标识文档中新增加的文本内容。浏览器通常会在 <ins> 标签中的文本下方添加一条下划线。

语法 ​

html
<ins>新增的文本</ins>

使用 datetime 属性指定插入时间：

html
<ins datetime="2023-01-01">新增的文本</ins>

使用 cite 属性指定插入说明的来源：

html
<ins cite="修改说明URL">新增的文本</ins>

基本用法 ​

简单新增文本 ​

html
<p>新价格：<ins>¥199</ins></p>

带时间戳的新增 ​

html
<p>新价格：<ins datetime="2023-01-01">¥199</ins></p>

实际示例 ​

价格更新 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ins 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    .price-update {
      background-color: #f8f9fa;
      padding: 1.5rem;
      border-radius: 8px;
      margin: 1.5rem 0;
    }
    
    .old-price {
      color: #6c757d;
      font-size: 1.2em;
    }
    
    .new-price {
      color: #28a745;
      font-size: 1.5em;
      font-weight: bold;
    }
    
    del {
      text-decoration: line-through;
      color: #6c757d;
    }
    
    ins {
      text-decoration: none;
      background-color: #d4edda;
      color: #155724;
      padding: 0.1em 0.2em;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <h1>商品价格更新</h1>
  
  <div class="price-update">
    <h2>智能手机 X1</h2>
    <p>原价：<del datetime="2023-01-01">¥2999</del></p>
    <p>新价格：<ins datetime="2023-06-01">¥2499</ins></p>
    <p><small>价格更新时间：2023年6月1日</small></p>
  </div>
  
  <div class="price-update">
    <h2>笔记本电脑 Y2</h2>
    <p>原价：<del datetime="2023-01-01">¥5999</del></p>
    <p>新价格：<ins datetime="2023-06-01">¥4999</ins></p>
    <p><small>价格更新时间：2023年6月1日</small></p>
  </div>
</body>
</html>

文档修订 ​

html
<article>
  <h1>公司政策更新</h1>
  
  <p>根据最新规定，我们的休假政策有所调整：</p>
  
  <ul>
    <li>年假天数：<del>15天</del> <ins>20天</ins></li>
    <li>病假天数：<del>10天</del> <ins>15天</ins></li>
    <li>事假天数：<del>5天</del> <ins>10天</ins></li>
  </ul>
  
  <p>此政策自<del>7月1日</del> <ins datetime="2023-07-15">2023年7月15日</ins>起生效。</p>
  
  <p>如有疑问，请联系人力资源部。</p>
</article>

与相关标签的区别 ​

与 <del> 标签的区别 ​

html
<!-- del 标签：表示删除的内容 -->
<p>原价：<del>¥299</del></p>

<!-- ins 标签：表示新增的内容 -->
<p>新价格：<ins>¥199</ins></p>

与 <u> 标签的区别 ​

html
<!-- ins 标签：表示新增的内容，具有语义含义 -->
<p>新增功能：<ins>夜间模式</ins></p>

<!-- u 标签：表示需要标注的文本，无语义含义 -->
<p>重要事项：<u>请仔细阅读</u></p>

样式化 ​

自定义新增文本样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 ins 样式 */
    ins {
      text-decoration: underline;
    }
    
    /* 背景色新增 */
    .bg-ins {
      background-color: #d4edda;
      color: #155724;
      padding: 0.1em 0.2em;
      border-radius: 3px;
    }
    
    /* 边框新增 */
    .border-ins {
      border-bottom: 2px solid #28a745;
      padding: 0.1em 0.2em;
    }
    
    /* 箭头新增 */
    .arrow-ins {
      background-color: #e8f4fd;
      color: #004085;
      padding: 0.1em 0.2em;
      border-radius: 3px;
    }
    
    .arrow-ins::before {
      content: "➕ ";
    }
    
    /* 高亮新增 */
    .highlight-ins {
      background: linear-gradient(to bottom, #fff 50%, #fff3cd 50%);
      padding: 0.1em 0.2em;
    }
  </style>
</head>
<body>
  <p>默认样式：<ins>新增的文本</ins></p>
  
  <p>背景色新增：<ins class="bg-ins">新增的文本</ins></p>
  
  <p>边框新增：<ins class="border-ins">新增的文本</ins></p>
  
  <p>箭头新增：<ins class="arrow-ins">新增的文本</ins></p>
  
  <p>高亮新增：<ins class="highlight-ins">新增的文本</ins></p>
</body>
</html>

在不同语境中的使用 ​

修订标记 ​

html
<section>
  <h2>文档修订历史</h2>
  
  <p>版本 2.0 <ins datetime="2023-06-01">新增了用户权限管理功能</ins>。</p>
  
  <p>版本 2.1 <ins datetime="2023-06-15">优化了界面交互体验</ins>。</p>
  
  <p>版本 2.2 <ins datetime="2023-06-30">修复了已知的安全漏洞</ins>。</p>
</section>

协议条款更新 ​

html
<div class="terms">
  <h3>用户协议更新</h3>
  
  <p>第5条：<del>用户需在注册后30天内完成实名认证。</del></p>
  
  <p>第5条：<ins datetime="2023-06-01">用户需在注册后15天内完成实名认证。</ins></p>
  
  <p>第12条：<ins datetime="2023-06-01">新增数据隐私保护条款，详见第12.1至12.5款。</ins></p>
</div>

无障碍访问 ​

屏幕阅读器支持 ​

html
<p>价格变更：<del aria-label="原价">¥299</del> <ins aria-label="新价格">¥199</ins></p>

最佳实践 ​

  1. 语义化使用：只在表示新增内容时使用 <ins> 标签
  2. 配合使用：常与 <del> 标签配合使用表示内容变更
  3. 时间戳：使用 datetime 属性记录插入时间
  4. 样式化：通过 CSS 为新增文本提供合适的样式
  5. 可读性：确保新增文本仍然具有良好的可读性

浏览器兼容性 ​

<ins> 标签在所有浏览器中都得到完美支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

  1. <ins> 标签是内联元素
  2. 浏览器默认在其文本下方添加下划线
  3. 主要用于表示新增的内容
  4. 可以使用 datetime 属性记录插入时间
  5. 可以使用 cite 属性指定插入说明的来源

相关标签 ​

  • <del> - 删除文本标签
  • <u> - 下划线文本标签
  • <span> - 内联容器标签