在 HTML 中创建删除线文本

介绍

在 HTML 中，<s> 标签用于表示带有删除线的文本，即文本中间有一条横线穿过。它可以用来显示不相关或不再准确的文本内容。在文档编辑时，建议使用 <del> 标签代替 <s> 标签。在本实验中，你将学习如何使用 <s> 标签在 HTML 中创建删除线文本。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70841{{"HTML 删除线文本"}} html/head_elems -.-> lab-70841{{"HTML 删除线文本"}} html/text_dir -.-> lab-70841{{"HTML 删除线文本"}} html/doc_flow -.-> lab-70841{{"HTML 删除线文本"}} html/inter_elems -.-> lab-70841{{"HTML 删除线文本"}} html/custom_attr -.-> lab-70841{{"HTML 删除线文本"}} end

创建一个基本的 HTML 文件

创建一个名为 index.html 的 HTML 文件。以下是创建一个基本 HTML 结构的方法：

<!doctype html>
<html>
  <head>
    <title>Creating a Strikethrough Text in HTML</title>
  </head>
  <body>
    <!-- Your HTML code will go here -->
  </body>
</html>

添加删除线文本

在你的 HTML 文件的 body 标签内，添加表示删除线文本的 <s> 标签。以下是基本语法的写法：

<s>This text has a strikethrough.</s>

你将在 HTML 输出中看到上述文本中间有一条横线穿过。

添加属性

虽然 <s> 标签没有任何特定的属性，但它支持全局属性和事件属性。以下是如何为 <s> 标签添加事件属性的示例：

<s onclick="alert('This is a strikethrough text.')">Click me!</s>

在上面的代码中，onclick 事件属性会在你点击删除线文本时显示一条带有文本的警告消息。

添加 CSS 样式

你还可以添加自定义的 CSS 样式来改变删除线文本的外观。以下是如何为 <s> 标签添加 CSS 样式的示例：

<style>
  s {
    text-decoration: line-through;
    color: red;
    font-size: 20px;
  }
</style>

在上面的代码中，text-decoration 属性用于添加删除线，color 属性将字体颜色更改为红色，而 font-size 属性将字体大小设置为 20px。

总结

在本实验中，你学习了如何使用 <s> 标签在 HTML 中创建删除线文本。你可以通过添加 CSS 样式或事件属性来自定义文本的外观。<s> 标签非常适合用于表示不再准确或相关的文本，同时在文档编辑中也很有用。