如何使用 HTML5 显示错误内容?

html5web developmentfront end technology更新于 2024/7/3 4:28:17

HTML 中有两个元素，即 s 和 del，用于显示错误内容。"s"和"del"标签之间没有实验差异，也没有证据表明搜索引擎会对这些元素采取任何行动。

例如

假设有两个句子，让我们来比较错误句子和正确句子之间的区别。正确句子与正常文本相同，而错误句子则以黑色删除线标记。

语法

<s>

<s>标签表示被删除的文本，即不再正确或精确的文本。

<del>

<del>表示已删除的文本或移除的文本，它会在句子或单词上划一条线。

使用的属性

以下示例中使用了以下属性 -

color - 此属性定义文本的颜色。
font-size - 此属性定义文本的高度。
font-weight - 此属性定义文本属性的显示方式，例如正常、粗体、超粗体等。

示例 1

在此示例中，我们将使用诸如paragraph、s和del等元素显示正确和错误的句子。然后使用内部CSS设计h1和p元素中代表网页更好表达的部分。

<!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 设置两个类，即 tp 和 gp，以设置属性。tp 类设置 div 元素的属性，而 gp 类设置另一个 div 元素的属性，该元素使用 s 和 del 元素显示错误的内容。

<!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>