<span>與<div>標籤

 HTML只是賦予內容的手段，大部分HTML標籤都有其意義（如<p>標籤創建段落，<h1>標籤創建標題等），然而<span>標籤和<div>標籤沒有實際上的意義，但實際上，與CSS結合起來後，應用範圍就非常廣泛了。

 它們被用來組合成一大塊的HTML代碼並賦予一定的信息，大部分的用類屬性class和標記屬性id與元素聯繫起來。

1、<span>標籤和<div>標籤的相同之處

 <span>標籤和<div>標籤非常類似，是HTML中組合用的標籤，可以作爲插入CSS這類風格的容器，或插入class.id等語法內容的容器。

<div id="client-boyera" class="client">
    <p><span class="client-title">client information:</span></p>
    <table class="client-data">
        <tr>
            <th>last name:</th>
            <td>boyera</td>
        </tr>
        <tr>
            <th>first name:</th>
            <td>stephane</td>
        </tr>
        <tr>
            <th>tel:</th>
            <td>0431-123456</td>
        </tr>
    </table>
</div>

2、<span>標籤和<div>標籤的區別

 div（division）是一個塊級元素，可以包含段落、標題、表格，乃至諸如章節、摘要和備註等。而span是行內元素，span的前後是不會換行的，它沒有結構的意義，純粹是應用樣式，當其他行內元素都不合適時，可以使用span。

 從功能角度來說，<div>一般用來做佈局，而<span>標籤用來做文字的效果，尤其是標題和鏈接的效果，所以我們經常會看見諸如<h1 class=”…”><span>…</span></h1>之類的代碼。

 不過，塊級元素和行內元素也不是一成不變的，只要給塊元素定義display：inline，塊元素便成爲內嵌元素；同樣，給內嵌元素定義display：block後，內嵌元素便成爲塊元素。block和inline的區別主要有內容模型（Content model）、格式(formatting)和Directionality（如何處理兩種語言混合在一起的Unicode碼）。

 例如：<div>…</div>是塊，<span>…</span>是行，塊裏可以含行，即div裏可以有span行。
 </div>顯示時（分塊結束處），系統自動換行，而</span>不換行。

 例如，當使用<div>標籤時，代碼如下。

<p>aaaaaaaa<div>bbbbbbb</div><div>ccccccc</div></p>

運行結果：

aaaaaaaa

bbbbbbb
ccccccc

 當使用<span>標籤時，代碼如下。

<p>aaaaaaaa<span>bbbbbbb</span><span>ccccccc</span></p>

運行結果：

aaaaaaaabbbbbbbccccccc