2.6 ＜span＞標(biāo)簽

＜div＞標(biāo)簽主要用來定義網(wǎng)頁(yè)上的區(qū)域，通常用于較大范圍的設(shè)置，而＜span＞標(biāo)簽則用來組合文檔中的行級(jí)元素。

2.6.1 基本語法

＜span＞標(biāo)簽用來定義文檔中一行的一部分，是行級(jí)元素。行級(jí)元素沒有固定的寬度，根據(jù)＜span＞元素的內(nèi)容決定。＜span＞元素的內(nèi)容主要是文本，其語法格式：

＜span＞內(nèi)容＜/span＞

例如，顯示鮮花的定價(jià)，特意將定價(jià)一行中的價(jià)格數(shù)字設(shè)置為橘黃色顯示，以吸引瀏覽者的注意，如圖2-23所示。代碼如下。

＜span style="color:#e27c0e;"＞定  價(jià)：¥266＜/span＞

其中，＜span＞…＜/span＞標(biāo)簽限定頁(yè)面中某個(gè)范圍的局部信息，style="color:#e27c0e;"用于為范圍添加突出顯示的樣式（橘黃色）。

2.6.2 span與div的區(qū)別

在網(wǎng)頁(yè)上使用＜span＞與＜div＞，都可以產(chǎn)生區(qū)域范圍，以定義不同的文字段落，且區(qū)域間彼此是獨(dú)立的。不過，兩者在使用上還是有一些差異。

1．區(qū)域內(nèi)是否換行

＜div＞標(biāo)簽區(qū)域內(nèi)的對(duì)象與區(qū)域外的上下文會(huì)自動(dòng)換行，而＜span＞標(biāo)簽區(qū)域內(nèi)的對(duì)象與區(qū)域外的對(duì)象不會(huì)自動(dòng)換行。

2．標(biāo)簽相互包含

＜div＞與＜span＞標(biāo)簽區(qū)域可以同時(shí)在網(wǎng)頁(yè)上使用，一般在使用上建議用＜div＞標(biāo)簽包含＜span＞標(biāo)簽；但＜span＞標(biāo)簽最好不包含div標(biāo)簽，否則會(huì)造成＜span＞標(biāo)簽的區(qū)域不完整，形成斷行的現(xiàn)象。

2.6.3 制作客照展示上傳文件步驟及版權(quán)信息

＜div＞標(biāo)簽用來定義文檔中的分區(qū)，頁(yè)面中局部信息的布局可以通過＜span＞標(biāo)簽組合文檔中的行級(jí)元素來實(shí)現(xiàn)。

【演練2-17】＜div＞標(biāo)簽與＜span＞標(biāo)簽的綜合應(yīng)用，制作客照展示上傳文件步驟及版權(quán)信息，本例頁(yè)面2-17.html的顯示效果如圖2-24所示。

代碼如下。

【說明】

1）本例中設(shè)置了兩個(gè)＜div＞分區(qū)：內(nèi)容分區(qū)和版權(quán)分區(qū)。

2）版權(quán)分區(qū)中的＜span＞標(biāo)簽中組織的內(nèi)容包括圖像、文本兩種行級(jí)元素。