span标签的作用 html 【span】作用

span标签中DIV CSS布局HTML时，不像div标签那样使用的多。由于span默认CSS样式属性没有特殊功能和样式。span和div用法相同，在html span标签基础教程已经介绍过其语法结构这里不再介绍。这里主要介绍span标签的作用体现在哪如何应用。

由于span标签默认没有什么CSS样式属性，也不会独占一行，而是随内容多少而自适应宽度高度。如果默认情况下使用span不给予设置CSS样式，默认span是没有作用的，这时使用与不使用一样效果。

那span标签在CSS DIV布局时候有什么作用？

1、span设置独立样式作用

在div css布局时候，在一段文字中不改变文字排版结构情况下，需要对一段文字中其中一些文字设置不同样式，这个时候对这些文字加span即可不改变破坏排版结构，同时可以对span设置需要的样式实现其html css布局需求。

span改变css字体大小作用应用实例代码：

 
 
 
 
测试内容改变字体大小测试内容 
 
 

2、span具有小局部布局作用

很多网页布局时候小局部布局除了使用其它标签来布局，对span标签选择使用也是不错选择。这里yuegekeji举一个小实例介绍span布局小布局使用。

比如文章标题列表中，左边为标题，右边为对应发表时间，形成左右结构的布局，这样小局部如果选择div布局就大材小用了。

1）、span作用实例代码

 
 
 
 
 
 
 
 
 
    
文章标题显示2016-09-11
 
    
欢迎访问yuegekeji网站2016-05-07
 
 
 
 

代码解释：

ul,li{ padding:0; margin:0;list-style:none; }

确定ul和li默认CSS样式，比如li前面间隔与无序圆点效果

ul{ width:400px; padding:10px;border:1px solid #000}

便于观察效果对ul设置宽度和边框，设置padding避免内容与Ul太紧贴。

ul li{ line-height:30px; height:30px; text-align:left}

设置Li高度，和内容垂直居中，设置内容靠左显示

ul li a{ float:left; width:300px; height:30px; overflow:hidden}

对li里的li a设置靠左浮动，设置宽度和高度，以及设置隐藏超出宽度高度的内容。避免内容溢出

ul li span{ float:right}

对span设置靠右浮动

这样实现了文章列表布局中，标题靠左，时间靠右。

2、关于html span标签的作用小结
在html网页布局中多标签选择布局，灵活运用各HTML标签属性来布局。span标签本身没有什么属性样式，利用这点可以布局小布局，只需要对span设置需要CSS样式即可实现使用span布局。span标签更多作用了解与掌握需要长期布局中实践中总结出。