HTML - <del> 標籤



HTML <del> 標籤用於標記網站上已刪除的文字內容。它代表“已刪除文字”,表示已從文件中刪除的一段文字。這在呈現“修訂跟蹤”或原始碼提供不同資訊時非常有用。當我們使用 <del> 標籤時,瀏覽器通常會在已刪除的文字上新增刪除線。

注意: 要查詢文件中已刪除和插入的內容,請將 <ins> 標籤與 <del> 標籤一起使用,這將顯示已刪除和插入的文字。

語法

<del >...</del >

屬性

HTML del 標籤支援 HTML 的全域性事件屬性。也接受一些特定的屬性,如下所示。

屬性 描述
cite URL 它定義了引文來源的 URL。
datetime YYYY-MM-DDThh:mm:ssTZD 儲存文字被刪除的日期和時間。

HTML del 標籤示例

在這些示例中,我們將看到 del 標籤在文字元素上的用法。我們還將使用內部 CSS 裝飾我們的 del 標籤。

使用 del 標籤在文字上新增刪除線

在以下示例中,我們建立一個 HTML 文件,並使用 <del> 標籤在不需要的內容上新增刪除線。

<!DOCTYPE html>
<html>
<body>
   <h2>Example of del tag </h2>
   <p>
      This is tutorialpoint; here learning is easy 
      <del>and difficult</del>, 
      so their caption is easy to learn. 
   </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>
      This is tutorialpoint; here learning is easy 
      <del cite=
"https://tutorialspoint.tw/index.htm">
      and difficult</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>

使用 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>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <del>when an unknown printer took a galley of type and scrambled it to make a type specimen book</del>. </p>
</body>
</html>

支援的瀏覽器

標籤 Chrome Edge Firefox Safari Opera
del
html_tags_reference.htm
廣告