文一：

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

使用在一些很簡單的方面，譬如文本和背景色等。其實這兩個元素都可用于作更加復雜的處理，比如。。。。

總結

以上是生活随笔為你收集整理的html元素span,[转载]HTML元素 - span标签 使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。