PHP小码农

Appearance

del 与 ins ​

<del> 和 <ins> 是一对配合使用的标签，分别表示被删除的内容和被插入的内容。它们通常一起使用来展示文档的编辑历史，让读者清楚知道哪些内容被修改过。

前置知识

阅读本节前，建议先了解：small 小号文本

基础概念 ​

<del>（deleted）表示文本已被删除或移除，浏览器默认以删除线显示。<ins>（inserted）表示文本已被新增或插入，浏览器默认以下划线显示。这两个标签常用于展示文档修订、价格变更、合同修改等内容。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>del 与 ins 示例</title>
</head>
<body>
  <h1>价格调整通知</h1>

  <p>本商品原价 <del>&yen;299</del> <ins>&yen;199</ins>，限时优惠中。</p>

  <p>会议时间已从 <del>1月15日</del> <ins>1月20日</ins> 调整。</p>
</body>
</html>

详细说明 ​

del 与 ins 的属性 ​

属性适用标签说明
citedel、ins指向修改原因或来源的 URL
datetimedel、ins指定修改的时间（机器可读格式）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>del 与 ins 属性示例</title>
</head>
<body>
  <h1>文档修订</h1>

  <p>
    <!-- 使用 cite 和 datetime 属性 -->
    第三季度营收为
    <del datetime="2024-12-01" cite="/meeting-notes/q3">500 万元</del>
    <ins datetime="2024-12-01" cite="/meeting-notes/q3">530 万元</ins>。
  </p>

  <p>
    配送范围已更新：
    <del datetime="2025-01-10">仅限市区</del>
    <ins datetime="2025-01-10">覆盖全城</ins>。
  </p>
</body>
</html>

del 与 s 的区别 ​

标签语义使用场景
<del>内容已被删除（有编辑含义）文档修订、价格变更
<s>内容不再准确或不再相关旧价格标签、已过期的促销
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>del 与 s 的区别</title>
</head>
<body>
  <h1>del 与 s 的区别</h1>

  <!-- del：展示编辑过程，有新内容替代 -->
  <p>文章更新于 2025-01-10：将 <del>10 个</del> <ins>12 个</ins>功能模块。</p>

  <!-- s：旧内容不再相关，无替代内容 -->
  <p><s>已售罄</s> 库存充足</p>
</body>
</html>

默认样式 ​

标签默认样式（Chrome）
<del>text-decoration: line-through
<ins>text-decoration: underline

自定义样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义 del 与 ins 样式</title>
  <style>
    del {
      color: #999;
      text-decoration: line-through;
    }
    ins {
      color: #d32f2f;
      text-decoration: none;
      border-bottom: 2px solid #d32f2f;
    }
  </style>
</head>
<body>
  <p>价格：<del>&yen;599</del> <ins>&yen;399</ins></p>
</body>
</html>

实战示例 ​

文章修订记录 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文章修订</title>
</head>
<body>
  <h1>公司简介（2025年1月更新）</h1>

  <p>我公司成立于 <del>2010</del><ins>2008</ins> 年，总部位于北京，目前拥有 <del>200</del><ins>350</ins> 名员工。</p>

  <p>主营业务涵盖 <del>网站开发</del><ins>全栈软件开发</ins>、<del>移动应用</del><ins>移动端与小程序开发</ins>、云计算和人工智能四大领域。</p>

  <p>去年营收达到 <del datetime="2025-01-15">1.2 亿元</del><ins datetime="2025-01-15">1.5 亿元</ins>，同比增长 25%。</p>
</body>
</html>

注意事项 ​

  • <del> 和 <ins> 应配合使用，展示从旧到新的变更
  • 如果只想表示"内容不再准确"而无新增内容，使用 <s> 而非 <del>
  • datetime 属性的值应为 ISO 8601 格式

最佳实践 ​

  1. 配对使用：<del> 和 <ins> 通常一起出现
  2. 添加 datetime：为修订内容标注时间
  3. 添加 cite：记录修改原因或来源
  4. 自定义样式：使删除和插入的内容在视觉上更易区分

下一节

继续学习：s 删除线

参考链接 ​