学习 HTML 插入文本

介绍

在 HTML 中，<ins> 标签用于表示某段文本已被插入或添加到网页中。它对于展示对网页文档或网页所做的更改或更新非常有用。在本实验中，我们将探索 <ins> 标签的使用和功能。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70781{{"HTML 插入文本"}} html/text_dir -.-> lab-70781{{"HTML 插入文本"}} html/inter_elems -.-> lab-70781{{"HTML 插入文本"}} html/custom_attr -.-> lab-70781{{"HTML 插入文本"}} end

基本语法

<ins> 标签需要一个开始（开放）标签和一个结束（闭合）标签。基本语法如下：

<ins> Inserted text </ins>

示例

让我们来看一个展示 <ins> 标签用法的示例。

<!doctype html>
<html>
  <head>
    <title>Example of <ins> Tag</title>
  </head>
  <body>
    <p>HTML stands for Hypertext Markup Language.</p>
    <p>
      HTML is the basic building block of any webpage. It is used with CSS and
      Javascript to create interactive web pages.
    </p>
    <p><ins>HTML5 is the latest version of HTML</ins></p>
  </body>
</html>

在这个示例中，我们有两段文本，最后一行使用了 <ins> 标签，表示该文本已被插入或添加到原始文本中。

使用属性

<ins> 标签没有特定的属性，但有两个常用属性，通常与全局属性和事件属性一起使用。与 <ins> 标签一起使用的两个属性是：

cite：用于指定一个 URL，说明文本被更新或更改的原因。
datetime：用于指定文本最后一次更新的日期和时间。datetime 的格式为 YYYY-MM-DDThh:mm:ssTZD。

<p>
  <ins
    cite="https://en.wikipedia.org/wiki/HTML5"
    datetime="2022-09-15T08:00:00Z"
    >HTML5 is the latest version of HTML</ins
  >
</p>

默认 CSS 设置

默认情况下，大多数浏览器对 <ins> 标签使用以下 CSS 设置：

<style>
  ins {
    text-decoration: underline;
  }
</style>

总结

在本实验中，我们学习了 HTML 中 <ins> 标签的用途和功能。它用于表示文本已被插入或添加到网页中。我们探讨了 <ins> 标签的基本语法、示例、属性以及默认的 CSS 设置。