2.9 span元素

<div>標簽主要用來定義網頁上的區域，通常用于較大范圍的設置，而<span>標簽被用來組合文檔中的行級元素。

2.9.1 基本語法

范圍標簽<span>用來定義文檔中一行的一部分，是行級元素。行級元素沒有固定的寬度，根據<span>標簽的內容決定。<span>標簽的內容主要是文本，其語法格式如下。

例如，顯示企業品牌的廣告宣傳語，特意將廣告宣傳語一行中的文字設置為深紅色，以吸引瀏覽者的注意，如圖2-23所示。代碼如下。

其中，<span>…</span>標簽限定頁面中某個范圍的局部信息，style="color:#e5314f;"用于為范圍添加突出顯示的樣式（深紅色）。

2.9.2 <span>與<div>標簽的區別

<span>與<div>標簽都可以用于在網頁上產生區域范圍，以定義不同的文字段落，且區域間彼此是獨立的。不過，兩者在使用上還是有一些差異。

1.區域內是否換行

<div>標簽區域內的對象與區域外的上下文會自動換行，而<span>標簽區域內的對象與區域外的對象不會自動換行。

2.標簽相互包含

<div>與<span>標簽可以同時在網頁上使用，一般用<div>標簽包含<span>標簽；<span>標簽最好不包含<div>標簽，否則會造成<span>標簽的區域不完整，形成斷行的現象。

2.9.3 使用<div>和<span>標簽布局網頁內容

本節通過一個綜合的案例講解如何使用<div>和<span>標簽布局網頁內容，包括文本、水平線、列表、圖像和鏈接等常見的網頁元素。

【例2-20】使用<div>和<span>標簽布局網頁內容，通過為<div>標簽添加style樣式設置分區的寬度、高度及背景色區塊的外觀效果。本例在瀏覽器中的顯示效果如圖2-24所示。

【說明】①本例中設置了兩個分區：內容分區和版權分區。

②內容分區中<div>標簽的樣式為style="width:720px;height:170px;background:#ddd"，表示分區的寬度為720px，高度為170px及背景色為淺灰色。

③版權分區中<div>標簽的樣式為style="width:718px;height:56px;border:1px solid #f96;text-align:center"，表示分區的寬度為718px，高度為56px及邊框為1px橘紅色實線。

④版權分區中的<span>標簽的內容包括圖像和文本兩種行級元素。