HTML 中的 Span 标签

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

语法与示例

定义span标签的语法如下：

语法：

<span class=""> Contents </span>

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

示例：

<title>Span tag in HTML </title>
<style>
.demo {
color: blue;
font-size: 200%;
position: relative;
top: 5px;
}
</style>


<p><span class="demo">О</span>Pride make us artificial and Humility make us real.</p>
<p>True fact about life </p>

输出：

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

HTML 中 Span 标签的属性

以下是使用 应用样式的一些属性。如下：

• CSS font-style: 用于将样式应用于给定文本。文本应为普通、斜体、首字母、继承等
• CSS font-family：用于将给定列表中的不同字体类型应用于特定文本。
• CSS font-size：将字体大小设置为文本很有帮助。
• CSS font-weight：此属性用于设置字体为粗体或粗体。
• CSS 文本转换：它将使文本大写。
• CSS text-decoration：该属性用于以文本装饰线、文本装饰颜色等形式对文本进行装饰
• CSS 颜色：span 标签的此属性用于为文本内容和文本装饰着色。
• CSS背景颜色：这是一个有用的属性，用于设置元素的背景颜色。
• CSS text-shadow:此属性允许用户向文本添加阴影。
• CSS text-align-last：它将有助于文本对齐。
• CSS 字间距：span 标签中的此属性用于管理单词之间的间距。
• CSS空白：这个属性帮助我们处理指定元素内的空白。
• CSS line-height：它提供了 HTML 代码中的行高。
• CSS 断字：这个属性帮助我们定义实际的换行位置。
• CSS text-overflow：这是span标签最有用的属性，它帮助我们识别未显示的溢出内容，这些内容应该向用户发出信号。

HTML 中的 Span 标签示例

html中span标签的示例如下：

示例#1

代码：

<title>HTML Span Tag</title>

<style>
.imgdemo {
padding-left:25px;
background:url(./Content/data/2.jpg) no-repeat top left;
display: inline-block;
height: 150px;
width: 150px;
}
</style>

<!-- span tags with inline style/css  -->
<h2 id="Span-tag-with-text-color">Span tag with text color</h2>
<span style="color:brown;">
Do those things which makes your soul happy </span>
<br>
<h2 id="Span-tag-with-background-color"> Span tag with background color</h2>
<span style="background-color:lightblue;">
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>
<br>
<h2 id="Span-tag-with-background-image"> Span tag with background image</h2>
<br>
<span class="imgdemo" style="color: azure; font-size: 16px; font-display: block;">
Image as background</span>

输出：

示例#2

代码：

<!--Example 2-->



<title>HTML Span Tag</title>


<h2 id="Span-tag-Examples"> Span tag Examples</h2>
<p>Good, Better, Best Never let it rest.
<span style="color:crimson;"> "Till your good is better and your better is best" </span></p>
<p>Everyday you have a choice -<span style="font-family: cursive; font-weight: 200; font-   size: 18px;">
STAY THE SAME OR CHANGE    </span>
</p>
<p>Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them."<span style="background-color: aqua ; color:darkblue;">
"Opportunities don't happen, you create them" </span></p>

输出：

Example #3

Code:

<style>
.spandemo {
background:url(./Content/data/3.jpg) no-repeat top left;
display: inline-block;
padding-top: 20px;
width: 1800px;
height: 500px;
}
</style>

<h2 id="Span-tag-for-image"> Span tag for image</h2> <br>
<span class="spandemo" style="color: aliceblue; font-weight: bold;">
<p> Nature always wears<br> Color of SPIRIT. </p> <br>
Heaven is under our feet <br>as well as over our heads <br>
<p> Deep in their roots,<br>all flowers Keep the light </p>
<p> My soul steers me<br> into nature's silence</p>
</span>

Output:

Conclusion

From all the above information, we came to know that the tag in HTML is used to give styling to inline elements. One can group this styling attribute and specifies them inline. Span tag mainly used to arrange structural sections and proper layout sections on our webpage with the help of inline CSS.

以上是HTML 中的 Span 标签的详细内容。更多信息请关注PHP中文网其他相关文章！