html语言中span,html元素span标签的使用方法及作用

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

标签的定义

标签属于行内元素，无任何特殊语义。

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

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

浏览器支持情况

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

标签的用法

1、标签默认用法

标签不设置任何CSS样式时，被包含的文本是没有任何视觉显示效果的，如下面代码所示：欢迎光临刘代码博客！

2、设置标签CSS样式

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

➊设置文本颜色

下面以设置文本为红色字体为例，演示代码如下：欢迎光临刘代码博客！

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

➋设置字体大小及加粗

我们用font-size样式属性设置字体大小为24px，用font-weight:bold设置文本加粗显示，演示代码如下：欢迎光临刘代码博客！

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

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

3、设置标签的宽度和高度

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

➊标签默认设置宽高是无效

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

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

➋标签转换成块级元素可设置宽高

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

转换方法就是：需要将display设置为inline-block，为了大家能更直观的看清楚，我们还设置了span标签的背景颜色为红色，演示代码如下：欢迎光临刘代码博客！

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

由上图可知以下几点：

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

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

我们可以通过text-align设置文本对齐方式，比如，居中对齐方式text-align:center，代码如下：欢迎光临刘代码博客！

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

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

当我们把span标签转换成内联块级元素inline-block后，也可以设置span标签的高度，演示代码如下：欢迎光临刘代码博客！

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

4、多个标签并列

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

演示代码如下：欢迎您光临刘代码博客！

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

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

html语言中span,html元素span标签的使用方法及作用相关推荐

html语言中tr,html元素tr标签的使用方法及作用
html元素tr标签的使用方法及作用详解如下: 标签的定义标签是"table row "的缩写,是定义HTML表格中的每一行:标签是成对出现的,以为开始,以为结束:标签包含一个或多 ...
html代码 col,html元素col标签的使用方法及作用
html元素col标签的使用方法及作用详解如下: 标签的定义标签的"col"是"column"英文单词的缩写,中文有"列"的意思:标签是给表 ...
html中复合标签的作用,html元素colgroup标签的使用方法及作用
html元素colgroup标签的使用方法及作用详解如下: 标签定义标签用于对html表格中的列进行组合,以便对其进行格式化:标签可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式:标签只 ...
html中代码td是什么,html元素td标签的使用方法及作用
html元素td标签的使用方法及作用详解如下: 标签的定义标签是"table data cell"的缩写,是定义HTML表格中的标准单元格的: HTML 表格有两种单元格类型: 表 ...
html语言中i i,html元素 i 标签的使用方法及作用
html元素标签是英文单词"italic"的缩写,中文有"斜体"的意思,主要是用来定义斜体文本效果的,有关该标签的使用方法及作用详解如下: 标签的定义标签告诉 ...
html的字母u代表什么意思,html元素 u 标签的使用方法及作用
html元素标签表示的英文意思是"underlined text style",其中文意思是带下划线的文本风格.有关标签的使用方法及作用详解如下: 标签的定义在html4中,标签 ...
html5新增标签有dfn吗,html元素dfn标签的使用方法及作用
html元素标签是一个短语标签,dfn是英文"Definition"的缩写,有"定义"的意思.该标签的使用方法及作用详解如下: 标签的定义标签是一个短语标签, ...
html p代码的效果,html元素 p 标签的使用方法及作用
html元素标签是英文" paragraph"的缩写,是用来定义一个段落文本内容的,有关该标签的使用方法及作用详解如下: 标签的定义标签是用来定义一段段落文本内容的: 标签定义 ...
html的em标签不用斜体,HTML元素em标签的使用方法及作用
html元素标签是具有强调文本的作用,在浏览器中往往以斜体的方式显示.有关标签的使用方法及作用详解如下: 标签的定义标签是英文单词"Emphasis"的缩写,有"强 ...
html斜体代码em,html元素em标签的使用方法及作用详解
html元素标签是英文单词"emphasize"的缩写,具有"强调"的意思,该标签是定义一个被强调的重要文本,有关该标签的使用方法及作用详解如下: 标签的定义 ...

html语言中span,html元素span标签的使用方法及作用

html语言中span,html元素span标签的使用方法及作用相关推荐

最新文章

热门文章