HTML Span 标签

HTML 中的“Span”标签是什么？

在 HTML 中，span 标签是一个通用的内联元素。借助 span 标签，我们可以包装特定的文本，并通过 CSS 属性提供样式。我们可以借助尖括号的开闭来编写 span 标签的语法。

语法

我们可以借助尖括号的开闭来编写 span 标签的语法。

我们也可以将 span 元素称为通用标签，因为开发人员无法通过其名称了解任何信息。此外，用户也不知道“span”的含义。通用标签的对应词是语义标签。语义标签的名称描述了所有关于名称的标签。

span 标签也称为内联标签。内联标签意味着元素停留在当前行，不创建任何新行。然而，语义标签在新行中创建元素。

注意：HTML <span> 与 <div> 标签非常相似，但 <div> 用于块级元素，而 <span> 标签用于内联元素。

“span”在 HTML 中有什么作用？

<span> 标签不影响页面的渲染。但 <span> 标签功能强大得多。我们还可以将全局属性分配给任何其他内联元素。内联标签中使用的属性是 ID 和 class。让我们通过示例来理解。

示例 1

输出

我们可以将 CSS 属性应用于 HTML <span> 标签内的 HTML 元素。我们可以借助内部 CSS 属性提供 CSS 属性。我们还可以为 span 标签实现其他 CSS 属性。在 HTML 中，有一个 lang 属性，用于通知浏览器存在临时语言更改。

示例 2

输出

借助 span 标签，我们可以使用 JavaScript 针对特定部分。让我们看下面的示例。在下面的示例中，span 标签隐藏了一些文本。当我们点击该 span 标签时，它会显示文本。

示例 3

输出

点击 span 标签后，隐藏的文本将按以下输出显示。

借助 span 标签，我们还可以使文本变为粗体和斜体。但为了编码实践，我们必须使用 strong 标签。因为对于粗体和斜体，我们现在有语义标签，如 <strong> 和 <em>。让我们看下面的示例。

示例 4

输出

在查看 span 标签和 div 标签的区别之前，让我们先看看编码输出视图中的区别。

示例 5

输出

Div 标签和 Span 标签的区别

当我们创建网页时，<div> 和 <span> 标签是常用标签。我们也可以称 <div> 标签为块级元素，而 <span> 标签为内联元素。

借助 <span> 标签，我们无法像 <div> 标签那样创建换行符。借助 <span> 标签，我们可以将事物与其他元素分开，并将它们放在一行中。