先看下面的例子你就能明白兩者的差別：
<p>測試一下塊元素與<span>內聯元素</span>的差別</p>
<p>測試一下<div>塊元素</div>與內聯元素的差別</p>
在上面的例子中，<div>會自己產生一個新的行，而<span>並沒有換行,這是在沒有CSS渲染的情況下才這樣，同樣，我們也可以通過CSS把div定義成內聯元素，把span定義成塊元素，但是，我們卻不能在HTML裏任意轉化它們，塊元素可以包含內聯元素或某些塊元素（上面的例子其實是錯誤的使用--->我把<div>放在<p>裏面了) ，但內聯元素卻不能包含塊元素，它只能包含其他的內聯元素，再看看這個：
<h2>我喜歡在<a href="http://bbs.blueidea.com/ " >經典論壇</a>討論Web標準的原因。</h2>
其中<h2>是屬於塊元素，而<a>是屬於內聯元素，<h2>包含<a>是沒有錯誤的，同樣，<div>可以包含<p>，<p>包含<a>也是對的，但是如果是下面這樣的話，就是錯誤的，因爲內聯元素不應該包含塊元素：
<a href="#"> <h2>這樣是錯誤的用法！</h2></a>
還有一些情況就是一些塊元素不可以包含另一些塊元素。例如這樣：
<p>測試文字
<ul>
<li>現階段是不能這樣用的，要等到XHTML 2.0纔可以這樣用。</li>
</ul>
測試文字
</p>
而這樣又是可以的。
<ul>
<li><p>這樣是可以的</p></li>
</ul>
爲什麼呢？因爲我們使用的DTD中規定了塊級元素是不能放在<p>裏面的，再加上一些瀏覽器縱容這樣的寫法：
<p>這是一個段落的開始
<p>這是另一個段落的開始
當一個<p>籤還沒結束時，遇到下一個塊元素就會把自己結束掉，其實瀏覽器是把它們處理成這樣：
<p>這是一個段落的開始</p>
<p>這是另一個段落的開始</p>
所以剛纔那樣的寫法會變成這樣：
<p>測試文字</p>
<ul>
<li>現階段是不能這樣用的，要等到XHTML 2.0纔可以這樣用。</li>
</ul>
測試文字<p></p>
這也是跟剛纔說第一個例子中<p>裏面放<div>不合理是同一個道理。
那哪些塊元素裏面不能放哪些塊元素呢？
可以先把所有的塊元素再次劃分成幾個級別的，我們已經知道<html>是在最外層，<html>下一級裏面只會有<head>、<body>、<frameset>、<noframes>，而我們已經知道了可視的元素只會出現在<body>裏，所以我們把<body>劃在第一個級裏面，接着，把不可以自由嵌套的元素劃在第三個級，其他的就歸進第二個級。所謂的不可自由嵌套的元素就是裏面只能放內聯元素的，它們包括有：標題標記的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落標記的<p>；分隔線<hr>和一個特別的元素<dt>(它只存在於列表元素<dl>的子一級)。
爲什麼說第二級的元素可以自由嵌套呢？
我們可以把它們看成是一些容器（或者說是盒子）， 這些容器的大小可以自由變化，例如我們可以把<ul>嵌在<div>裏面，也可以把<div>嵌在<li>裏面。
在HTML裏有幾個元素是比較特別的：<ul>、<ol>、<dl>、<table>，它們的子一層必須是指定元素，<ul>、<ol>的子一級必須是<li>；<dl>的子一級必須是<dt>或者<dd>；<table>的子一層必須是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一層必須是<tr> （<tr>只存在於<thead>、<tfoot>、<tbody>中），之後纔是可放內容的<td>或者<th>。
很多人在W3C校驗無法通過也是這個原因-->錯誤的元素嵌套，然而把提示錯誤的標籤改成<div>或者<span>就可以通過，但是我們不能這樣盲目的爲了校驗而校驗，<div>也不是神，<div>代替不了語義化的標籤。
下面有一張關於(X)HTML Strict下嵌套規則的圖，可以參考：
在內聯元素中，還是可以再區分一下，有幾個元素（<img>、<input>等）比較特別，它們可以定義寬高。雖然在IE 瀏覽器裏，所有的元素都可以定義寬高，但這是IE自己的標準，並非所有瀏覽器都支持，W3C稱它們爲替換元素，它們在屬於inline的情況下同樣具有block的一些特性，在"display:inline-block的應用"中所說的inline-block其實就是讓其他元素也模擬成replaced元素，使之既可以以內聯元素顯示，又可以設置塊級元素的屬性。
轉載於Lz_Tiramisu
