HTML 删除线文本

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在 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> 标签非常适合用于表示不再准确或相关的文本,同时在文档编辑中也很有用。