![零基础HTML+CSS+JavaScript学习笔记](https://wfqqreader-1252317822.image.myqcloud.com/cover/173/36710173/b_36710173.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
4.4 <span>标签
大部分HTML标签都有其意义(如<p>标签创建段落、<h1>标签创建标题等),然而<span>标签和<div>标签似乎没有任何内容上的意义,但它与CSS结合后,应用范围就非常广泛了。
4.4.1 <span>标签的介绍
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-076-01.jpg?sign=1739531017-xtE7EjxKt32pgUGAQrYs6Ub1JVFV7LKs-0-fe2be11d55f0bb1b608ccb3c12ad102f)
<span>标签和<div>标签非常类似,是HTML中组合用的标签,可以作为插入CSS的容器,或插入class、id等语法内容的容器。
<span>标签的语法格式如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-076-1.jpg?sign=1739531017-PPkE6N3iNKI3o8V5SpNwW9rSq02cBGNz-0-7e11bf72340dc23f1fd3d1db7a9cf874)
下面通过一个实例,使用<span>标签,实现一个“我爱你”多国语言版本的便签。首先通过<p>段落标签显示便签的内容,然后在<p>段落标签内部使用<span>标签,将需要单独分组的内容放入<span>标签中,进行样式控制。具体代码如下;
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-076-2.jpg?sign=1739531017-yG49C0d5Tz5Vif08XfmMBZbcXurOjhvl-0-dd233f336706445526503b680943080c)
本实例的运行效果如图4.9所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-077-1.jpg?sign=1739531017-ZsS3ev5HqvfVjH4wTochSbUHZ1qns12F-0-0f5eb885dccc628cd037224b6c0dea6e)
图4.9 使用<span>标签的界面效果
4.4.2 <span>标签的应用
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-077-02.jpg?sign=1739531017-D1J7CT61J8HbWHAdtqd0NmnMrcaz97Ni-0-1d219a4fae6217fa6fd227a865c49d1b)
<span>标签是行内标签,<span>标签的前后不会换行,它没有结构上的意义,是纯粹的应用样式,当其他行内元素都不合适时,可以使用<span>标签。
下面通过一个实例,使用<span>标签,实现一则公司的介绍短文。首先使用<table>表格标签,创建一个表格框架,然后使用<p>段落标签,显示公司介绍短文,最后通过<span>标签,将短文中的内容进行分组,强调的内容显示为红色或链接等。具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-077-2.jpg?sign=1739531017-MueJko3pQPVBeyToAxCimRr0iTK7F8kQ-0-23bd8d6e8bdf503da51430147aa46bff)
本实例的运行效果如图4.10所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-078-2.jpg?sign=1739531017-1zw7GDbrx2hA0al3IDY8IhbKnbvSuRZ3-0-98428f4e46135640522000aa5fc78d5f)
图4.10 段落换行标签的网页效果