HTML Span 标签 | Web 开发教程

介绍

HTML  标签用于将元素分组以便进行样式设置。它可以被视为短语内容的通用容器。 标签与 <div> 标签非常相似，但它是一个内联元素，而 <div> 是一个块级元素。 标签本身并不代表任何内容。在本实验中，你将学习如何使用  标签来对元素进行分组以便进行样式设置。

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

在 index.html 文件中，将以下代码添加到 <body> 标签内：

<p>This is a <span>simple</span> example of using the span tag.</p>

这里我们创建了一个段落，并将单词 "simple" 包裹在  标签中。这将帮助我们实际理解该标签的用途。

现在让我们看看如何为包裹在  标签中的内容添加样式。例如，如果我们想为单词 "simple" 添加颜色，可以使用 CSS 中的 color 属性。

在 <head> 标签内添加以下 CSS 代码：

<style>
  span {
    color: red;
  }
</style>

这段 CSS 代码会将所有包裹在  标签中的内容的颜色更改为红色。由于我们将单词 "simple" 包裹在  标签中，因此它将以红色显示。

 标签也可以与其他 HTML 元素一起使用。让我们看看如何将其与 <a> 标签结合使用。

在 <body> 标签内添加以下 HTML 代码：

<p>
  This is a <span><a href="#">link</a></span> example.
</p>

这段代码创建了一个段落，其中单词 "link" 被包裹在  标签中，并链接到 URL #。

现在让我们看看如何为链接文本添加样式。在 <head> 标签内添加以下 CSS 代码：

<style>
  span a {
    color: green;
    text-decoration: none;
  }
</style>

这段 CSS 代码将 <a> 标签内的文本颜色设置为绿色，并且不显示下划线。

 标签支持全局属性和事件属性。让我们看看如何使用全局属性 class 来应用样式。

为包裹单词 "simple" 的  标签添加 class 属性，如下所示：

<p>
  This is a <span class="example"><a href="#">link</a></span> example.
</p>

在 <head> 标签内添加以下 CSS 代码：

<style>
  .example {
    font-size: 20px;
  }
</style>

这段 CSS 代码会将具有 example 类的  标签内的内容的字体大小增加到 20px。

尽管  标签本身没有任何固有含义，但它可以用来传达其包裹文本的语义。例如，你可以用它来包裹日期或百分比，以表明其中的文本具有特殊含义。

例如，将以下代码添加到 index.html 文件中：

<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>

在这个例子中，90 被包裹在  标签中，并赋予了一个类名 score。通过这种方式，我们传达了  标签内的文本具有特殊含义。此外，我们还添加了 aria-label 属性，以便为屏幕阅读器提供无障碍信息。

在本实验中，你学习了如何使用 HTML  标签对元素进行分组以实现样式化。你还学习了如何为包裹在  标签内的内容添加样式，如何将其与其他 HTML 标签结合使用，如何使用全局属性和事件属性，以及如何使用  标签来传达语义。