![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=1739061490-7M4fSd2zEZf47nUov9KnVCHGeQADw4z7-0-71469f69891841bd18d99051eebb7792)
例如,显示会员注册的栏目标题时,特意将文字设置为突出放大显示,以吸引浏览者的注意,如图3-26所示。代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/57_04.jpg?sign=1739061490-KNnQS4HN5upbvcD0WW31XXng8wvuhON8-0-15858e1cc636a531c66f1d68debe0af0)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/57_03.jpg?sign=1739061490-x9JuBCvqbM6DnFGPK6reOWOCnYWun5Mn-0-f7c2fc40db925c99a7cf5ff70a1e81e2)
图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=1739061490-hnkn1kvXrwwDMjgbAfyrFIOIiuckZdzB-0-388c323f148c4aabd86b3953bd183661)
图3-27 页面的显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/58_02.jpg?sign=1739061490-Sgt8sYw8w1BJp1aHSgPl53Ryd4Zg7ZDd-0-a57cb7a9f9bc18ceec48605919b4d1df)