
上QQ阅读APP看书,第一时间看更新
3.4 范围标签<span>
3.4.1 基本语法
范围标签<span>用于标识行内的某个范围,以实现行内某个部分的特殊设置以区分其他内容。其格式为:

例如,显示会员注册的栏目标题时,特意将文字设置为突出放大显示,以吸引浏览者的注意,如图3-26所示。代码如下:


图3-26 范围标签<span>
其中,<span>…</span>标签限定某个范围,style="font-size:24px;color:#363434;"用于为范围添加突出显示的样式。
3.4.2 Span与Div的区别
Span与Div的区别在于,span仅仅是个行级元素,不会换行,而Div是一个块级元素,它包围的元素会自动换行。块级元素相当于内联元素在前后各加了一个<br/>标签。用“容器”这一词更容易理解它们的区别,块级元素<div>相当于一个大容器,而内联元素<span>相当一个小容器,大容器当然可以盛放小容器。读者可以想象以下情景,如果要在大容器中装一些清水,也想在水里面装一些墨水,可以把小容器中装入墨水然后放入大容器里的清水里面。
另外,Span本身没有任何属性,没有结构上的意义,当其他元素都不合适的时候可以换上它,同时Div可以包含Span,反之则不行。
【演练3-13】演示Span标签与Div标签的区别,本例页面3-13.html的显示效果如图3-27所示。

图3-27 页面的显示效果
代码如下:
