如何使用 HTML5 顯示錯誤內容?


在 HTML 中,我們有兩個元素,即 sdel,用於顯示錯誤內容。‘s’ 和 ‘del’ 標籤之間沒有實驗上的區別,也沒有證據表明搜尋引擎會對這些元素採取任何措施。

例如

假設有兩句話,用於檢視錯誤句子與正確句子之間的區別。正確句子與普通文字相同,而錯誤句子則用黑色刪除線標記。

語法

<s>

<s> 標籤表示刪除線或橫線文字,即不再正確或精確。

<del>

<del> 表示已刪除的文字或已移除的文字,會在句子或單詞上劃一條刪除線。

使用屬性

以下屬性用於下面的示例:

  • color - 此屬性定義文字的顏色。

  • font-size - 此屬性定義文字的高度。

  • font-weight - 此屬性定義文字屬性的顯示方式,例如正常、粗體、超粗體等。

示例 1

在本例中,我們將使用段落、sdel 等元素顯示正確和錯誤的句子。然後使用內部 CSS 設計 h1p 元素的部分,以更好地表達網頁。

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
   <style>
      h1{
         color: Purple;
      }
      p{
         font-weight: bold;
      }
   </style>
</head>
<body>
   <center>
      <h1>Correct VS Incorrect Sentence</h1>
      <p>I shall make him to go</p> 
      <s><p>I shall make him go</p></s>
      <p>He will come for meeting you</p>
      <s><p>He will come to meet you</s></p>
      <p>Always help the poor</p>
      <del><p>Always helps the poor's</p></del>
   </center>
</body>
</html>

示例 2

在本例中,我們將使用內部 CSS 設定兩個類,即 tpgp 來設定屬性。tp 類設定 div 元素的屬性,而 gp 類設定另一個 div 元素的屬性,該元素使用 sdel 元素顯示錯誤內容。

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
   <style>
      .tp{
         font-size: 40px;
         font-weight: bold;
         color: darkgreen;
      }
      .gp{
         font-weight: bold;
         color: darkred;
      }
   </style>
</head>
<body>
   <h1>The incorrect content using HTML5</h1>
   <div class="tp">
      Tutorialspoint
   </div>
   <div class="gp">
      The front-end development skill includes <s> ML, Arduino, Fortran,</s> HTML5, CSS3, <del> Jailwind CSS </del>  and, JavaScript.
   </div>
</body>
</html>

結論

我們探討了使用 HTML5 顯示錯誤內容的概念。我們看到兩個示例的輸出有一些變化,即透過定義 style 標籤來設定元素的樣式。示例的主要目的是瞭解 <s><del> 標籤之間的區別,它們顯示出類似的行為。

更新於: 2023年5月15日

97 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.