HTML <del> 标签-代码号

HTML <del> 标签教程：标记文档中的删除内容

HTML <del> 标签用于表示文档中已被删除或移除的文本范围。它作为已删除内容的标记，浏览器通常会在被删除文本上显示一条删除线，当然这个样式可以通过 CSS 属性进行修改。

基本语法

<del>被删除的内容</del>

核心功能说明

<del> 标签是一个行内元素，需要同时使用开始标签和结束标签。它主要用于文本内容的标记，常与 <ins>（插入）标签配合使用，以显示文档内容的修改历史。

基础示例

示例1：基本删除标记

<!DOCTYPE html>
<html>
<head>
    <title>del标签基础示例</title>
</head>
<body>
    <h2>代码号编程教程：del标签示例</h2>
    <p>HTML5是<del>2025年</del>2025年很流行的Web标准之一。</p>
</body>
</html>

输出效果：
HTML5是<del>2025年</del>2025年很流行的Web标准之一。

示例2：结合CSS和`<ins>`标签

<!DOCTYPE html>
<html>
<head>
    <title>del和ins标签结合使用</title>
    <style>
        del {
            color: #ff5252;
            background-color: #ffebee;
            text-decoration: line-through;
        }
        ins {
            color: #4caf50;
            background-color: #e8f5e9;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h2>代码号学习编程：内容修订示例</h2>
    <p>在代码号编程教程中，我们建议初学者先学习<del>Java</del><ins>Python</ins>作为第一门编程语言。</p>
</body>
</html>

属性详解

cite 属性

值: URL
描述: 指定一个URL资源，用于解释文本被删除的原因或变更说明

datetime 属性

值: YYYY-MM-DDThh:mm:ssTZD
描述: 指定文本被删除的日期和时间

全局属性

<del> 标签支持所有HTML全局属性，如id、class、style等。

事件属性

<del> 标签支持所有HTML事件属性，如onclick、onmouseover等。

实际应用示例

示例3：带有说明的删除内容

<!DOCTYPE html>
<html>
<head>
    <title>带属性的del标签</title>
</head>
<body>
    <h2>代码号课程更新日志</h2>
    <p>我们的Web开发课程已更新：<del cite="https://www.ebingou.cn/jiaocheng/update-log.html" datetime="2025-01-15">jQuery内容</del> <ins>Vue.js框架</ins>。</p>
    <p><small>查看<a href="https://www.ebingou.cn/jiaocheng/update-log.html">更新说明</a></small></p>
</body>
</html>

示例4：价格调整示例

<!DOCTYPE html>
<html>
<head>
    <title>价格调整示例</title>
    <style>
        .price-change {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        del {
            color: #999;
        }
        ins {
            color: #2e7d32;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="price-change">
        <h3>代码号编程课程价格调整通知</h3>
        <p>Python入门课程：<del>¥299</del> <ins>¥249</ins></p>
        <p>Web前端开发课程：<del>¥399</del> <ins>¥349</ins></p>
        <p>Java高级编程：<del>¥499</del> <ins>¥449</ins></p>
    </div>
</body>
</html>