- 零基础HTML+CSS+JavaScript学习笔记
- 明日科技编著
- 444字
- 2025-02-26 15:27:47
4.4 <span>标签
大部分HTML标签都有其意义(如<p>标签创建段落、<h1>标签创建标题等),然而<span>标签和<div>标签似乎没有任何内容上的意义,但它与CSS结合后,应用范围就非常广泛了。
4.4.1 <span>标签的介绍

<span>标签和<div>标签非常类似,是HTML中组合用的标签,可以作为插入CSS的容器,或插入class、id等语法内容的容器。
<span>标签的语法格式如下:

下面通过一个实例,使用<span>标签,实现一个“我爱你”多国语言版本的便签。首先通过<p>段落标签显示便签的内容,然后在<p>段落标签内部使用<span>标签,将需要单独分组的内容放入<span>标签中,进行样式控制。具体代码如下;

本实例的运行效果如图4.9所示。

图4.9 使用<span>标签的界面效果
4.4.2 <span>标签的应用

<span>标签是行内标签,<span>标签的前后不会换行,它没有结构上的意义,是纯粹的应用样式,当其他行内元素都不合适时,可以使用<span>标签。
下面通过一个实例,使用<span>标签,实现一则公司的介绍短文。首先使用<table>表格标签,创建一个表格框架,然后使用<p>段落标签,显示公司介绍短文,最后通过<span>标签,将短文中的内容进行分组,强调的内容显示为红色或链接等。具体代码如下:

本实例的运行效果如图4.10所示。

图4.10 段落换行标签的网页效果