HTML 中的标签被视为内联元素。它类似于 div 标记，但 div 标记特意用于块级元素，而 span 用于内联元素。它主要用于用户想要将内联元素分组到其代码结构中。HTML 中的 Span 标记用于通过使用元素类或 id 属性为特定内容提供样式。使用 HTML 文档中的 span 标记本身无法进行视觉更改。它用作 HTML 文档中的内联标记。在代码中使用 span 标记有助于减少代码和 HTML 属性。

语法与示例

定义 span 标记的语法如下：

语法：

 Contents
  • 如上所示，包含在开始和结束标记中的语法文本被视为 span 属性。
  • 这主要用于对内联元素进行分组。它有助于最小化HTML文档中的代码。
  • 它的工作方式与 div 标记类似，但一个主要区别是 div 用作块级元素，而 span 标记在 HTML 中用作内联标记。
  • span 标签本身无法提供视觉更改。
  • 它适用于, , , , , 等等。
  • 此标记无法创建换行符，但它为用户提供了将内容与其他元素分开的机会。因此，可以仅使用所选文本进行更改，而不是使用整个代码进行更改。
  • 它只需要所需的宽度，而不是占用容器中的整个可用宽度。span 标签的最佳示例是属性和图像。它对显示 span 标记使用情况的某些文本使用容器。
  • 它不需要编码中的某些特定属性;在一些常见的CSS和类的帮助下，我们可以定义一个span标签。
  • 我们可以突出显示一些特定的文本，对文本应用背景颜色，并使用HTML的span标签向文本添加背景图像。
  • 也可以使用 span 标记更改文本的字体。它将有助于负责更改字体大小，颜色，背景颜色，字体样式等。

例：

Span tag in HTML .demo {color: blue;font-size: 200%;position: relative;top: 5px;}
OPride make us artificial and Humility make us real.
True fact about life

输出：

  • Span标签没有任何特定的属性;与其他标签一样，它也支持全局属性和事件属性。

span标记在 HTML 中的属性

下面是一些用于应用样式的属性。具体如下：

  • CSS font-style：它用于将样式应用于给定文本。文本应为正常、斜体、首字母、继承等。
  • CSS font-family：它用于将给定列表中的不同字体类型应用于特定文本。
  • CSS font-size：将字体大小设置为文本会很有帮助。
  • CSS font-weight：此属性用于设置粗体或粗字体。
  • CSS text-transform：它将使文本大写。
  • CSS text-decoration：此属性用于以文本修饰行、文本修饰颜色等形式修饰文本。
  • CSS color：用于为文本内容和文本修饰着色的 span 标记的此属性。
  • CSS background-color：这是设置元素的背景色的有用属性。
  • CSS text-shadow：此属性允许用户向文本添加阴影。
  • CSS text-align-last：这将有助于对齐文本。
  • CSS word-spacing：span 标记中的此属性用于管理单词之间的间距。
  • CSS white-space：此属性帮助我们处理指定元素内的空格。
  • CSS line-height：它在 HTML 代码中提供行的高度。
  • CSS word-break：此属性有助于我们定义实际行应在何处断开。
  • CSS text-overflow：这是 span 标记最有用的属性，它有助于我们识别未显示的溢出内容，这些内容应向用户发出信号。

HTML中的span标记示例

下面给出了 html 中 span 标记的示例：

示例 #1

代码：

HTML Span Tag.imgdemo {padding-left:25px;background:url(./Content/data/2.jpg) no-repeat top left;display: inline-block;height: 150px;width: 150px;}
Span tag with text color
Do those things which makes your soul happy 
 Span tag with background color
Everybody have natural beauty. Try look at your picture when you are a baby. Your eyes, eyebrows, lips, body. When you are smiling, crying, staring, etc. That it, you got it.
 Span tag with background image

Image as background

输出：

示例 #2

代码：

HTML Span Tag
 Span tag Examples
Good, Better, Best Never let it rest. "Till your good is better and your better is best" 
Everyday you have a choice -STAY THE SAME OR CHANGE
Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them.""Opportunities don't happen, you create them"

输出：

示例 #3

代码：

.spandemo {background:url(./Content/data/3.jpg) no-repeat top left;display: inline-block;padding-top: 20px;width: 1800px;height: 500px;}
 Span tag for image
 
 Nature always wears
 Color of SPIRIT. 
 
Heaven is under our feet 
as well as over our heads 
 Deep in their roots,
all flowers Keep the light 
 My soul steers me
 into nature's silence

输出：

结论

从上述所有信息中，我们了解到HTML中的标记用于为内联元素提供样式。可以对此样式属性进行分组，并以内联方式指定它们。Span标签主要用于在内联CSS的帮助下在我们的网页上排列结构部分和适当的布局部分。