Web学习网站

Appearance

<del> 标签 ​

<del> 标签用于定义被删除的文本。它表示文档中已被删除的内容，通常浏览器会以删除线的形式显示。

概述 ​

<del> 标签是 HTML 中的语义化标签，用于标识文档中已被删除的文本内容。浏览器通常会在 <del> 标签中的文本中间添加一条删除线。

语法 ​

html
<del>被删除的文本</del>

使用 datetime 属性指定删除时间：

html
<del datetime="2023-01-01">被删除的文本</del>

使用 cite 属性指定删除说明的来源：

html
<del cite="修改说明URL">被删除的文本</del>

基本用法 ​

简单删除文本 ​

html
<p>原价：<del>¥299</del> 现价：¥199</p>

带时间戳的删除 ​

html
<p>原价：<del datetime="2023-01-01">¥299</del> 现价：¥199</p>

实际示例 ​

价格变更 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>del 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    .price-change {
      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-change">
    <h2>智能手机 X1</h2>
    <p>原价：<del datetime="2023-01-01">¥2999</del></p>
    <p>现价：<ins>¥2499</ins></p>
    <p><small>价格调整时间：2023年6月1日</small></p>
  </div>
  
  <div class="price-change">
    <h2>笔记本电脑 Y2</h2>
    <p>原价：<del datetime="2023-01-01">¥5999</del></p>
    <p>现价：<ins>¥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 datetime="2023-07-01">7月1日</del> <ins>2023年7月15日</ins>起生效。</p>
  
  <p>如有疑问，请联系人力资源部。</p>
</article>

与相关标签的区别 ​

与 <ins> 标签的区别 ​

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

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

与 CSS 删除线样式的区别 ​

html
<!-- del 标签：具有语义含义 -->
<p>价格：<del>¥299</del> ¥199</p>

<!-- CSS 样式：仅视觉效果 -->
<p>价格：<span style="text-decoration: line-through;">¥299</span> ¥199</p>

样式化 ​

自定义删除文本样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 del 样式 */
    del {
      text-decoration: line-through;
    }
    
    /* 红色删除线 */
    .red-del {
      text-decoration: line-through;
      color: #dc3545;
    }
    
    /* 粗删除线 */
    .thick-del {
      text-decoration: line-through;
      text-decoration-thickness: 2px;
    }
    
    /* 波浪删除线 */
    .wavy-del {
      text-decoration: line-through;
      text-decoration-style: wavy;
      color: #dc3545;
    }
    
    /* 背景色删除 */
    .bg-del {
      background-color: #f8d7da;
      color: #721c24;
      padding: 0.1em 0.2em;
      border-radius: 3px;
    }
    
    .bg-del::before {
      content: "❌ ";
    }
  </style>
</head>
<body>
  <p>默认样式：<del>被删除的文本</del></p>
  
  <p>红色删除线：<del class="red-del">被删除的文本</del></p>
  
  <p>粗删除线：<del class="thick-del">被删除的文本</del></p>
  
  <p>波浪删除线：<del class="wavy-del">被删除的文本</del></p>
  
  <p>背景色删除：<del class="bg-del">被删除的文本</del></p>
</body>
</html>

在不同语境中的使用 ​

任务列表 ​

html
<section>
  <h2>项目任务清单</h2>
  
  <ul>
    <li><del datetime="2023-06-01">需求分析</del> ✓</li>
    <li><del datetime="2023-06-05">系统设计</del> ✓</li>
    <li><del datetime="2023-06-15">前端开发</del> ✓</li>
    <li>后端开发</li>
    <li>测试验收</li>
    <li>项目部署</li>
  </ul>
  
  <p><small>已完成任务已标记删除</small></p>
</section>

对比表格 ​

html
<table>
  <thead>
    <tr>
      <th>功能</th>
      <th>基础版</th>
      <th>专业版</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>存储空间</td>
      <td>100GB</td>
      <td>1TB</td>
    </tr>
    <tr>
      <td>用户数量</td>
      <td><del>5个</del></td>
      <td>无限</td>
    </tr>
    <tr>
      <td>技术支持</td>
      <td>邮件支持</td>
      <td><del>邮件支持</del> 电话支持</td>
    </tr>
  </tbody>
</table>

无障碍访问 ​

屏幕阅读器支持 ​

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

最佳实践 ​

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

浏览器兼容性 ​

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

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

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

相关标签 ​

  • <ins> - 插入文本标签
  • <span> - 内联容器标签
  • <s> - 无关文本标签