span和div的不同之处在于span是内联的，用在一小块的内联HTML中，而div（想想division是什么意思）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码。
用span组织元素
span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。
让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：
<p>早睡早起
使人健康、富裕又聪颖。</p>
假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用<span>标签来标记上述每一点好处。然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。
<p>早睡早起
使人<span class="benefit">健康</span>、
<span class="benefit">富裕</span>
和<span class="benefit">聪颖</span>。</p>
相应的CSS代码如下：
span.benefit {
color:red;
}
当然，你也可以采用id来为span元素添加样式。不过正如我们在上一课所学的，如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。
用div组织元素
如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。
除去这点区别，div和span在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：
<div id="democrats">
<ul>
<li>富兰克林·D·罗斯福</li>
<li>哈利·S·杜鲁门</li>
<li>约翰·F·肯尼迪</li>
<li>林登·B·约翰逊</li>
<li>吉米·卡特</li>
<li>比尔·克林顿</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>德怀特·D·艾森豪威尔</li>
<li>理查德·尼克松</li>
<li>杰拉尔德·福特</li>
<li>罗纳德·里根</li>
<li>乔治·布什</li>
<li>乔治·W·布什</li>
</ul>
</div>
在这里，我们可以采用跟上例同样的方法来处理样式表：
#democrats {
background:blue;
}
#republicans {
background:red;
}
