HTML span 元素是内联元素和内容的通用内联容器。它用于为样式目的对元素进行分组(通过使用 class 或 id 属性),这是在没有其他任何其他语义元素可用时使用它的更好方法。 span 与 div 标签非常相似,但 div 是块级标签,span 是内联标签。 Span 标签是成对标签,意味着它同时具有打开(<)和关闭(>)标签,并且必须关闭标签。
- span 标签用于对内联元素进行分组。
- span 标签本身不会做任何视觉上的改变。
- span 与 div 标签非常相似,但 div 是块级标签,span 是内联标签。
标签是这样写的:
句法:
Some Text.............
在下面的例子中,假设我们想在三行中写三次 GeeksforGeeks,分别是粗体、斜体、下划线、绿色,字体家族 = courier new 所以我们需要使用许多 HTML 标签,例如 、、< u>, 每次在每一行中,我们要进行更改需要修改每个标签。
例子:
GeeksforGeeks span tag
Welcome To GFG
GeeksforGeeks
GeeksforGeeks
GeeksforGeeks
输出:
但是通过使用 标签,我们可以减少代码和 HTML 属性,请参见下面的示例,通过在 span 标签中应用 CSS,使用 标签显示与上述示例相同的输出。
例子:
GeeksforGeeks span tag
Welcome To GFG
GeeksforGeeks
GeeksforGeeks
GeeksforGeeks
输出:
正如我们所知,span 是一个内联标签,它占用尽可能多的空间,并为其他元素留出空间让我们在下面的示例中看到它,所有四跨度元素都将显示在同一行中,因为每个标签只占用必要的空间,其余空间可用对于其他元素。
例子:
GeeksforGeeks span tag
Welcome To GFG
GFG
-Contribute-
Article
GCET
输出:
span 标签可用于设置文本一部分的颜色/背景颜色:在下面的示例中,段落内应用了三个不同样式的 span 标签。
例子:
GeeksforGeeks span tag
Welcome To GFG
GeeksforGeeks is A Computer Science
Portal where you can
Publish your own articles
and share your knowledge with the world!!
输出:
使用span标签操作javascript:在下面的例子中,我们在段落中添加了一个span标签,id=”demo”我们可以通过应用javascript来改变它的文本在这个例子中GFG将在点击按钮后更改为“GeeksforGeeks”。
例子:
Welcome to GFG
GFG
A computer Science portal for Geeks
输出:
点击按钮之前
点击按钮后
Div标签和span标签的区别
div 和 span 标签是使用 HTML 创建页面时的两个常见标签,并在它们上执行不同的功能,而 div 标签是块级元素,span 是内联元素 div 标签创建一个换行符,默认情况下在文本之间创建一个分隔出现在开始的标记之后,直到标记以