HTML span 元素是内联元素和内容的通用内联容器。它用于为样式目的对元素进行分组(通过使用 class 或 id 属性),这是在没有其他语义元素可用时使用它的更好方法。 span 与 div 标签非常相似,但 div 是块级标签,span 是内联标签。 Span 标签是成对标签意味着它同时具有打开(<)和关闭(>)标签,并且必须关闭标签。
- span 标签用于内联元素的分组。
- span 标签本身不会做任何视觉上的改变。
- span 与 div 标签非常相似,但 div 是块级标签,span 是内联标签。
标签是这样写的:
句法:
Some Text.............
在下面的例子中,假设我们要在三行中写三个 GeeksforGeeks,粗体,斜体,下划线,绿色,font-family = courier new,所以我们需要使用很多 HTML 标签,例如 , , , 为每行中的每一次,而我们要进行更改需要修改每个标签。
例子:
HTML
Welcome To GfG
The span tag does not create a line break
it allows the user to separate things from other elements
around them on a page within the same line
GeeksforGeeks
GeeksforGeeks
GeeksforGeeks
HTML
GeeksforGeeks span tag
Welcome To GFG
GeeksforGeeks
GeeksforGeeks
GeeksforGeeks
html
GeeksforGeeks span tag
Welcome To GFG
GFG
-Contribute-
Article
GCET
html
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!!
html
Welcome to GFG
GFG
A computer Science portal for Geeks
html
Example:
gfg
div tag
div tag
div tag
div tag
span-tag
span-tag
span-tag
span-tag
输出:
但是通过使用 标签,我们可以减少代码和 HTML 属性,请参见下面的示例,通过在 span 标签中应用 CSS,使用 标签显示与上述示例相同的输出。
例子:
HTML
GeeksforGeeks span tag
Welcome To GFG
GeeksforGeeks
GeeksforGeeks
GeeksforGeeks
输出:
正如我们所知,span 是一个内联标签,它占用尽可能多的空间,并为其他元素留出空间让我们在下面的示例中看到它所有四跨度元素将显示在同一行中,因为每个标签只占用必要的空间,其余的其他元素的空闲空间。
例子:
html
GeeksforGeeks span tag
Welcome To GFG
GFG
-Contribute-
Article
GCET
输出:
span 标签可用于设置文本一部分的颜色/背景颜色:在下面的示例中,段落内应用了三个不同样式的 span 标签。
例子:
html
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:在下面的例子中,我们在一个id=”demo”的段落中添加一个span标签,我们可以通过在这个例子中应用javascript来改变它的文本,点击按钮后GFG将被更改为“GeeksforGeeks”。
例子:
html
Welcome to GFG
GFG
A computer Science portal for Geeks
输出:
点击按钮之前
点击按钮后
Div标签和span标签的区别
div 和 span 标签是使用 HTML 创建页面时的两个常见标签,并在它们上执行不同的功能,而 div 标签是块级元素,span 是内联元素 div 标签创建一个换行符,默认情况下在文本之间创建一个分隔出现在开始的标记之后,直到标记以
Properties | Div Tag | Span Tag |
---|---|---|
Elements Types | Block-Level | Inline |
Space/Width | Contain Whole Width Available | Takes only required Width |
Examples | Headings, Paragraph, form | Attribute, image |
Uses | Web-layout | container for some text |
Attributes | Not required, with common css, class | Not required, with common css, class |
span 标签不会创建类似于 div 标签的换行符,而是允许用户在同一行内的页面上将事物与它们周围的其他元素分开。避免换行,结果只改变选定的文本,保持它们周围的所有其他元素相同。
下面的示例将显示 span 和 div 标签之间的区别,而 div 标签包含整个宽度,span 标签仅包含所需的宽度,其余部分可用于另一个元素。
html
Example:
gfg
div tag
div tag
div tag
div tag
span-tag
span-tag
span-tag
span-tag
输出:
支持的浏览器:
- 谷歌浏览器
- IE浏览器
- 火狐
- 歌剧
- 苹果浏览器
HTML 是网页的基础,用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。
CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。