2.9 span元素
12 范围元素span
<div>标签主要用来定义网页上的区域，通常用于较大范围的设置，而<span>标签被用来组合文档中的行级元素。
2.9.1 基本语法
范围标签<span>用来定义文档中一行的一部分，是行级元素。行级元素没有固定的宽度，根据<span>标签的内容决定。<span>标签的内容主要是文本，其语法格式如下。
例如，显示企业品牌的广告宣传语，特意将广告宣传语一行中的文字设置为深红色，以吸引浏览者的注意，如图2-23所示。代码如下。
图2-23 范围标签<span>
其中，<span>…</span>标签限定页面中某个范围的局部信息，style="color:#e5314f;"用于为范围添加突出显示的样式（深红色）。
2.9.2 <span>与<div>标签的区别
<span>与<div>标签都可以用于在网页上产生区域范围，以定义不同的文字段落，且区域间彼此是独立的。不过，两者在使用上还是有一些差异。
1.区域内是否换行
<div>标签区域内的对象与区域外的上下文会自动换行，而<span>标签区域内的对象与区域外的对象不会自动换行。
2.标签相互包含
<div>与<span>标签可以同时在网页上使用，一般用<div>标签包含<span>标签；<span>标签最好不包含<div>标签，否则会造成<span>标签的区域不完整，形成断行的现象。
2.9.3 使用<div>和<span>标签布局网页内容
本节通过一个综合的案例讲解如何使用<div>和<span>标签布局网页内容，包括文本、水平线、列表、图像和链接等常见的网页元素。
【例2-20】使用<div>和<span>标签布局网页内容，通过为<div>标签添加style样式设置分区的宽度、高度及背景色区块的外观效果。本例在浏览器中的显示效果如图2-24所示。
图2-24 用<div>和<span>标签布局网页示例
【说明】①本例中设置了两个分区：内容分区和版权分区。
②内容分区中<div>标签的样式为style="width:720px;height:170px;background:#ddd"，表示分区的宽度为720px，高度为170px及背景色为浅灰色。
③版权分区中<div>标签的样式为style="width:718px;height:56px;border:1px solid #f96;text-align:center"，表示分区的宽度为718px，高度为56px及边框为1px橘红色实线。
④版权分区中的<span>标签的内容包括图像和文本两种行级元素。