HTML - del 标签



HTML <del> 标签用于标记网站上已删除的文本内容。它代表“已删除的文本”。它表示已从文档中删除的文本范围。当呈现“跟踪更改”或源代码提供不同信息时,可以使用此功能。当我们使用 <del> 标签时,浏览器通常会在已删除的文本中划出一行。

注意:若要在文档中查找已删除和插入的内容,请使用带有 <del> 的 <ins> 标签,这将显示已删除和插入的文本。

语法  


<del >...</del >

属性

<del> 标签支持 HTML 的 全局属性事件属性。除此之外,还支持一些特定属性,这些属性在下面列出:

属性 描述
cite URL 定义来源的 URL。
datetime YYYY-MM-DDThh:mm:ssTZD 保留删除文本的日期和时间。

<del> 标签的示例

在这些示例中,我们将看到 <del> 标签在 text 元素上的用法。我们还将使用内部 CSS 来装饰我们的 <del> 标签。

<del> 标签简单示例

在下面的示例中,我们正在创建一个 HTML 文档,并使用 <del> 标签在不需要的内容上划一行。


<!DOCTYPE html>
<html>
<body>
	 <h2>Example of del tag </h2>
	 <p>
			启科普(www.qikepu.com)提供了 
			<del>编程的</del>, 
			基础技术教程. 
	 </p>
	 <p>
			<del>I am deleted paragraph</del>
	 </p>
</body>
</html>

<del> 标签使用属性示例

在此示例中,我们将使用 cite 和 datetime 属性来提及上下文的源和删除日期。


<!DOCTYPE html>
<html>
<body>
	 <h2>Example of del tag </h2>
	 <p>
			启科普提供了编程的基础技术教程
			<del cite=
"https://www.qikepu.com/index.html">
			教程</del>, 
			so their caption is easy to learn. 
	 </p>
	 <p>
			<del datetime="2024-01-03T12:00:00Z">I am deleted paragraph</del>
	 </p>
</body>
</html>

<del> 标签设置CSS样式

考虑以下示例,我们使用<del> 标签为不需要的内容提供删除线,并使用 CSS 属性设置已删除内容的背景颜色。


<!DOCTYPE html>
<html>
<head>
	 <style>
			del {
				 text-decoration: line-through;
				 background-color: #fbb;
				 color: #555;
			}

			ins {
				 text-decoration: none;
				 background-color: #d4fcbc;
			}
	 </style>
</head>
<body>
	 <p>There is <del>nothing</del>
			<ins>no code</ins> either good or bad, but <del>thinking</del>
			<ins>running it</ins> makes it so.
	 </p>
	 <p>启科普提供了编程的基础技术教程, <del>启科普提供了编程的基础技术教程</del>. </p>
</body>
</html>

支持的浏览器

浏览器 Chrome Edge Firefox Safari Opera
<del> Yes Yes Yes Yes Yes