一、<div></div>和<span></span>
1.<div></div>標(biāo)簽
<div></div>標(biāo)簽可定義文檔中的分區(qū)或節(jié)（division/section），從而把文檔分割為獨立的、不同的部分。<div></div>標(biāo)簽可以作為一種嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)，這其中包含一種HTML標(biāo)記和表現(xiàn)樣式相分離的思想。在實際工作中，我們通常為<div></div>標(biāo)簽指定 id 或 class 屬性，使該標(biāo)簽會變得更加有效。<div></div> 是一個塊級元素,這意味著它的內(nèi)容自動地開始一個新行。并且實際上換行是 <div> 固有的唯一格式表現(xiàn)。
下面這段 HTML 模擬了新聞網(wǎng)站的結(jié)構(gòu)。其中的每對<div></div>標(biāo)簽 把每條新聞的標(biāo)題和摘要組合在一起，也就是說，<div></div> 為文檔添加了額外的結(jié)構(gòu)。同時，由于這些 <div></div> 屬于同一類元素，所以可以使用 class="news" 屬性對這些<div></div>標(biāo)簽進(jìn)行標(biāo)識，這么做不僅為 <div></div> 添加了合適的語義，而且便于進(jìn)一步使用樣式對 <div></div> 進(jìn)行格式化。
<div class="news">
<h2>
News headline 1</h2>
<p>
some text. some text. some text...</p>
...
</div>
<div class="news">
<h2>
News headline 2</h2>
<p>
some text. some text. some text...</p>
...
</div>
2.<span></span>標(biāo)簽
<span> 標(biāo)簽被用來組合文檔中的行內(nèi)元素（inline elements）。
<span style="color: Red">注意：</span>
二、塊級元素和行內(nèi)元素
塊級元素（block element)和行內(nèi)元素/內(nèi)聯(lián)元素(inline element)是css中的概念，像<div></div>和<h1></h1>等元素常常被稱為塊級元素。這是因為這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，<span></span> 和 <strong></strong> 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在一行中，即“行內(nèi)框”。
塊級元素和行內(nèi)元素的概念并不是固定不變的，而是相對的。我們可以使用元素的 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 <a> 元素）表現(xiàn)得像塊級元素一樣；還可以通過把 display 設(shè)置為 inline 讓生成的元素成為行內(nèi)元素；甚至，我們可以把display屬性設(shè)置為 none ,使元素根本沒有框，這種情況，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。
<div id="dv1" style="display: block">
我是一個塊級元素。
</div>
<div id="dv2" style="display: inline">
我是一個行內(nèi)元素。
</div>
<div id="div3" style="display: none">
我是不可見的
</div>
三、<div></div>和<span></span>的比較
1.相同點：<div></div>標(biāo)簽和<span></span>標(biāo)簽都是用來劃分區(qū)間但是沒有實際語義的標(biāo)簽；兩者都是主要用于應(yīng)用樣式表。
2.不同點：<div></div>標(biāo)簽屬于塊級元素，瀏覽器在它的前后會自動添加一個換行標(biāo)簽</br>；<span></span>標(biāo)簽屬于內(nèi)聯(lián)元素，它的前后不會自動添加換行標(biāo)簽。
如果在網(wǎng)頁布局中要將某兩個內(nèi)容顯示在同一行內(nèi)，最簡單的方法就是將它們用<span></span>標(biāo)簽包裝起來。比如，一個頁面有相鄰的兩個元素，一個是<div></div>，另一個是<span></span>。要想將它們顯示在同一行，可以將這個<div></div>改為<span></span>。當(dāng)然，也可以通過css將<div></div>等標(biāo)簽的display屬性設(shè)置為 inline 來實現(xiàn)。
