详解 span元素和实际项目中的使用

    在开始前，我们先看如下的JSP代码

<ul class="lskdList" id="ul_1" name="ul">
	<li class="lskdTitle">
	  <a class="ctrl_02" name="projectBar" style="cursor:pointer;" onclick="toggleProjectBar(this);"></a>
	  <span id="projectName_1" name="projectName">${projectList[0].projectName}</span>
	  <span style="float: right;text-align: left;width: 80px;" name="deletePorjectSpan">
	  <a class="btn_h25_cwhite" onclick="delProject(this);" style="cursor:pointer;"><span>删除项目</span></a>
	  </span>
	</li>

可能是以前学HTML的时候没有认真看到位，对span标签产生了困惑，在查阅资料后，写下这篇总结。

先来看看W3C上是怎么解释的：<span> 标签被用来组合文档中的行内元素。具体来讲，就是有两个作用：提示和注释。

      提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。

      注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

来看一个例子：

<p class="tip">  <span>提示：</span>   这里是要显示的内容</p>

这个span元素嵌入在P元素里面，这就说明span元素可以作用于（修饰）P，Li，div，td等元素，当我们给span元素加以具体的修饰属性时，

p.tip span {
	font-weight:bold;
	color:#ff9955;
	}

上面的“提示”就会变颜色，此时就做到了提示的作用了。具体的做法是：使用“提示”使用 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。

在项目里面，span元素的应用非常多，特别是在“提示”的作用下，达到改变字体或者颜色的目的。由于span是嵌入在上级元素里面的，所以span本身的内容（在这里是“提示”两个字）也会显示在<P>标签里面。