使用 HTML Span 标签为元素添加样式

HTMLHTMLBeginner
立即练习

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

介绍

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

注意:你可以在 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/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/LayoutandSectioningGroup -.-> html/access_cons("`Accessibility Considerations`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70839{{"`使用 HTML Span 标签为元素添加样式`"}} html/head_elems -.-> lab-70839{{"`使用 HTML Span 标签为元素添加样式`"}} html/para_br -.-> lab-70839{{"`使用 HTML Span 标签为元素添加样式`"}} html/nav_links -.-> lab-70839{{"`使用 HTML Span 标签为元素添加样式`"}} html/doc_flow -.-> lab-70839{{"`使用 HTML Span 标签为元素添加样式`"}} html/access_cons -.-> lab-70839{{"`使用 HTML Span 标签为元素添加样式`"}} html/inter_elems -.-> lab-70839{{"`使用 HTML Span 标签为元素添加样式`"}} html/custom_attr -.-> lab-70839{{"`使用 HTML Span 标签为元素添加样式`"}} end

添加 HTML 代码

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

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

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

为 Span 元素添加样式

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

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

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

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

将 Span 与其他 HTML 标签结合使用

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

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

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

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

为链接文本添加样式

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

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

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

添加事件属性

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

为包裹单词 "simple" 的 <span> 标签添加 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 类的 <span> 标签内的内容的字体大小增加到 20px。

使用 Span 标签实现语义化

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

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

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

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

总结

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

您可能感兴趣的其他 HTML 教程