![HTML+CSS+JavaScript网页制作(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/883/33892883/b_33892883.jpg)
上QQ阅读APP看书,第一时间看更新
3.4 范围标签<span>
3.4.1 基本语法
范围标签<span>用于标识行内的某个范围,以实现行内某个部分的特殊设置以区分其他内容。其格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/57_02.jpg?sign=1739424784-nxqO2nA0eItiY8uXzSC8WPu3k93BYZaU-0-ece71c5b0b9d30cc8bdc4f9339825679)
例如,显示会员注册的栏目标题时,特意将文字设置为突出放大显示,以吸引浏览者的注意,如图3-26所示。代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/57_04.jpg?sign=1739424784-64sEpio1aNRgvAQRysLF4qbDUslLAT7N-0-c277ca003fb317ce16beb7c663cb8a8d)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/57_03.jpg?sign=1739424784-JrNhHeHp3n5ShRgiYoJZqJvMBZVk8YVW-0-13f190f3733fffe59a3d42086cffaba6)
图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所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/58_01.jpg?sign=1739424784-0geuxaPcpSmVVtYRPKOJ4woyTj3MTFbG-0-e3939f9a11c9c115b405bd5acc4535b4)
图3-27 页面的显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/58_02.jpg?sign=1739424784-PJXvVk2zLZHD2L7Togh9xHxeKxqTC14L-0-a59e03603ce7c45aece0138af5e08f8a)