首页 » 编程语言 » html » 正文

html元素span标签的使用方法及作用

html元素 <span>标签是一个没有任何语义的行内元素,不对<span>设置任何样式,则不会有任何视觉效果。有关该标签的使用方法及作用详解如下:

<span>标签的定义

<span>标签属于行内元素,无任何特殊语义。

<span>标签主要用于定义文本样式,通过单独设置<span>标签的CSS样式来操作。

<span>标签是定义文本样式的,如果不设置任何css样式,那么 <span>标签包含的文本就不会有任何视觉显示效果。

浏览器支持情况

<span>标签已被所有主流浏览器支持 。

<span>标签的用法

1、<span>标签默认用法

<span>标签不设置任何CSS样式时,被包含的文本是没有任何视觉显示效果的,如下面代码所示:

欢迎光临<span>刘代码</span>博客!

2、设置<span>标签CSS样式

<span>标签主要定义文本样式,所以,我们可以通过对<span>标签设置不同的CSS样式,获得丰富多样的文本显示效果,比如加粗、颜色、字体大小等样式效果,这也正是<span>标签的主要作用。

设置文本颜色

下面以设置文本为红色字体为例,演示代码如下:

欢迎光临<span style="color:red">刘代码</span>博客!

以上代码在IE浏览器中显示如下:

2020-02-09_224154.png

设置字体大小及加粗

我们用font-size样式属性设置字体大小为24px,用font-weight:bold设置文本加粗显示,演示代码如下:

欢迎光临<span style="font-size:24px;font-weight:bold;">刘代码</span>博客!

以上代码在火狐浏览器中显示如下:

2020-02-09_230645.png

注意:font-weight:bold表示的是字体加粗,它在不同的浏览器中显示的加粗效果是不同!

3、设置<span>标签的宽度和高度

<span>标签属于行内元素,需要将其转换成内联块级元素,才可以设置宽度和高度。

<span>标签默认设置宽高是无效

<span>标签属于行内元素,默认宽度是span标签包裹的文本长度的宽度,也就是说span标签包裹的文本长度是多长,那么,span标签的宽度就有多长!

我们不能直接设置<span>标签的宽度和高度,因为行内元素设置宽高是无效,必须转换成块级元素或行内块级元素才可以设置。

<span>标签转换成块级元素可设置宽高

span属于行内元素,无法直接设置宽高,但可以将其转换内联块级元素后,就可以对其设置宽度和高度。

转换方法就是:需要将display设置为inline-block,为了大家能更直观的看清楚,我们还设置了span标签的背景颜色为红色,演示代码如下:

欢迎光临<span style="display:inline-block;width:200px;background-color:red;">刘代码</span>博客!

以上代码在浏览器中的现显示效果如下:

2020-02-10_015722.png

由上图可知以下几点:

1、被span标签包裹的“刘代码”的宽度明显变宽了,即我们设置的200px,也就是红色背景所显示的宽度;

2、被span标签包裹的“刘代码”默认对齐方式是左边对齐;

我们可以通过text-align设置文本对齐方式,比如,居中对齐方式text-align:center,代码如下:

欢迎光临<span style="display: inline-block; width: 200px; background-color: red; text-align: center;">刘代码</span>博客!

以上代码在ie浏览器中显示效果如下:

2020-02-10_020444.png

text-align的对齐方式除了居中(center)之外,可以设置左对齐(left),右对齐(right)。

当我们把span标签转换成内联块级元素inline-block后,也可以设置span标签的高度,演示代码如下:

欢迎光临<span style="display:inline-block;width:200px;height:30px;background-color:red;">刘代码</span>博客!

以上代码在浏览器中显示效果如下:
2020-02-10_015042.png

4、多个<span>标签并列

<span>标签属于行内元素,可将一个行中的文本划分为几个并列的<span>区块,并且始终保持在同一行上显示。

演示代码如下:

欢迎您<span>光临</span><span>刘代码</span>博客!

以上代码在IE浏览器中的显示效果如下:

2020-02-09_221614.png

由上图可知,被<span>标签定义的两个词组“光临”和“刘代码”,在浏览器中显示是没有任何样式效果的,由于<span>标签是行内元素,所以,始终保持在同一行中显示!



欢迎您发表评论或留言