在 HTML 中显示删除线文本

htmlweb developmentfront end technology更新于 2025/8/14 6:04:17

删除线文本是指文本中划线，<strike> 标签帮助我们剪切文本中的线。HTML5 不再支持此标签;以前大家都在使用 HTML4 时使用它。现在，HTML5 中使用 <del> 标签来定义已删除的文本，而不是 <strike> 标签。

语法

以下是 HTML 中删除线标签 − 的用法

<strike>text…. </strike>

示例

在下面的示例中，我们尝试使用 <strike> 标签在文本中显示删除线 –

<!DOCTYPE html>
<html>
<body>
   <h2>TutorialsPoint</h2>
   <p>Its an Edutech Company handles all Technical <strike>Non-Technical</strike> Subjects </p>
</body>
</html>

示例

在此示例中，我们尝试使用 <del> 标签实现删除线任务 −

<!DOCTYPE html>
<html>
<head>
   <style>
      del {
         color: red;
      }
   </style>
</head>
<body>
   <h1>My World</h1>
   <h2>
      I Like Blue , <del>Red</del>, Pink colors
   </h2>
</body>
</html>

示例

我们也可以使用 <ins> 标签来为文本添加下划线。以下示例演示了 HTML 中 <ins> 标签的用法

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: red;
      }
   </style>
</head>
<body>
   <h1>My World</h1>
   <h2>
      I Like Orange , <del>blue</del>
      <ins>red</ins>, Pink colors!
   </h2>
</body>
</html>

示例

以下是另一个示例，了解不再正确的标记文本 −

<!DOCTYPE html>
<html>
<head>
   <style>
      h1{
         color: red;
      }
   </style>
</head>
<body>
   <h1>My World</h1>
   <h2><s>I Like red, black colors!</s></h2>
   <h2>But Everyone likes Pleasant colors</h2>
</body>
</html>