HTML 删除文本

介绍

HTML 的 del 标签用于表示文档中已删除的文本。通过使用 del 标签，我们可以显示带有删除线的文本。本实验将指导你如何使用 HTML 的 del 标签来创建带有删除线的文本。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

创建删除线文本

在开始之前，创建一个名为 index.html 的 HTML 文件。在这个文件中，我们将使用 HTML 的 del 标签来创建删除线文本。

要创建删除线文本，请按照以下步骤操作：

1. 在代码编辑器中打开 index.html 文件
2. 在需要添加删除线的文本中使用 HTML 的 del 标签 (<del>)

   <p>The <del>quick</del> brown fox jumps over the lazy dog.</p>

   在上面的示例中，单词 quick 将显示为删除线文本。
3. 保存 index.html 文件并在浏览器中打开它。

使用 HTML del 标签的属性

HTML 的 del 标签有两个重要的属性：cite 和 datetime。在这一步中，我们将学习如何使用这些属性。

1. 添加 Cite 属性 - 使用 cite 属性来提供描述删除文本的文档的 URL。

   <p>
     <del cite="http://www.example.com/reason-for-deletion.html"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>

2. 添加 Datetime 属性 - 使用 datetime 属性来指示文本被删除的时间。

   <p>
     <del datetime="2022-09-03T17:12:02Z"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>

创建带有插入文本的删除线文本

通常，当我们从网页中删除某些文本时，可能希望在其位置插入其他文本。在这一步中，我们将学习如何使用 ins 标签来显示插入的文本。

1. 在代码编辑器中打开 index.html 文件
2. 在替换删除文本的插入文本中使用 HTML 的 ins 标签。

   <p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>

   在上面的示例中，单词 quick 将显示为删除线文本，而 brown 将显示为插入文本。

为 HTML del 标签添加 CSS 样式

HTML 的 del 标签的默认 CSS 样式是删除线（line-through）。你可以根据需求修改 CSS 样式。

1. 将以下 CSS 代码添加到你的 HTML 文件中，以更改 del 标签的默认样式。

   <style>
     del {
       color: red;
       text-decoration: line-through;
     }
   </style>

在上面的示例中，del 标签的颜色被更改为红色。

总结

使用 HTML 的 del 标签创建删除线文本非常简单。在本实验中，你学习了如何使用 HTML 的 del 标签创建删除线文本、为 del 标签添加属性、使用 ins 标签进行插入，以及修改 del 标签的 CSS 样式。