html元素span,[转载]HTML元素 - span标签 使用介绍

文一：

span标签< span>

在行内定义一个区域，也就是一行内可以被< span>

划分成好几个区域，从而实现某种特定效果。< span>

本身没有任何属性。

< span> 与<

div>

< span>

在CSS定义中属于一个行内元素，而< div>

是块级元素，我们可能通俗地理解为< div>

为大容器，大容器当然可以放一个小容器了,< span>

就是小容器。

例子：

< html> <

body>

< >

setspan(id)

{ if( id==1){ a.innerText=" 设置文字" } ;

if( id==2){ a.innerHTML=" < font color=red

size=7> 设置代码< /font> "

} ; }

< />

< span id=a> <

/span>

< a href=" /java:setspan" (1)>

设置span的文字< /a> <

/br>

< a href=" /java:setspan" (2)>

设置span的代码< /a> <

/br>

< /body> <

/html>

文二：

定义

指定内嵌文本容器。

Specifies an inline text container.

注释

SPAN 元素在样式表(CSS)的应用方面特别有用。

此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer

4.0 及以上版本的脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

The SPAN element is especially useful for applying cascading

style sheets (CSS) styles.

This element is available in HTML as of Internet Explorer 3.0,

and in as of Internet Explorer 4.0.

This element is an inline element.

This element requires a closing tag.

元素示例代码

下面的例子使用了 SPAN 元素创建了一个内嵌文本容器，将包含的文本颜色变成蓝色。

This example uses the SPAN element to create an inline text

container that changes the color of a word to blue.

< P> 本段包含了单独的< SPAN

STYLE=" color: blue" > 蓝色<

/SPAN> 单词。

文三：

span和div的用法，这两个HTML元素对于CSS是很重要的。span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。

用span组织元素

span

元素可以说是一种中性元素，它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。

让我们用一句本杰明·弗兰克林(Benjamin Franklin)的名言来举个例子：

< p>

早睡早起使人健康、富裕又聪颖。< /p>

假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用 <

span> 标签来标记上述每一点好处。然后，我们将这几个 span

设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。

< p> 早睡早起使人< span

class=" benefit" > 健康<

/span> 、< span class=" benefit"

> 富裕< /span>

和< span class=" benefit" >

聪颖< /span> 。<

/p>

相应的CSS代码如下：

span.benefit {

color:red;

}

也可以采用id来为 span 元素添加样式。如果采用id的话，必须为这三个 span元素各自分别指定一个唯一的id。

用div组织元素

如前面例子所示，span 的使用局限在一个块元素内，而 div 可以被用来组织一个或多个块元素。

除去这点区别，div 和 span 在组织元素方面相差无几。看一个例子。将历届美国总统按其所属的政营分别组织为两个列表：

< div id=" democrats" >

< ul>

< li> 富兰克林·D·罗斯福<

/li>

< li> 哈利·S·杜鲁门<

/li>

< li> 约翰·F·肯尼迪<

/li>

< li> 林登·B·约翰逊<

/li>

< li> 吉米·卡特<

/li>

< li> 比尔·克林顿<

/li>

< /ul>

< /div>

< div id=" republicans" >

< ul>

< li> 德怀特·D·艾森豪威尔<

/li>

< li> 理查德·尼克松<

/li>

< li> 杰拉尔德·福特<

/li>

< li> 罗纳德·里根<

/li>

< li> 乔治·布什<

/li>

< li> 乔治·W·布什<

/li>

< /ul>

< /div>

在这里，可以采用跟上例同样的方法来处理样式表：

#democrats {

background:blue;

}

#republicans {

background:red;

}

在上例中，仅仅将 div 和 span

使用在一些很简单的方面，譬如文本和背景色等。其实这两个元素都可用于作更加复杂的处理，比如。。。。