HTML中為何P標簽內不可包含DIV標簽？
2016-06-14
一句話：有些塊元素不可以包含另一些塊元素，DTD中規定了塊級元素是不能放在P里的。
P標簽內包含塊元素時，它會先結束自己，比如：
<p>
<div>
測試p包含div
</div>
</p>
那么瀏覽器會解釋成：
<p></p>
<div>測試p包含div</div>
<p></p>
會多解釋出一個p
起因：在做項目時發現原本在DW中無誤的代碼到了MyEclipse6.0里面卻提示N多錯誤，甚是詫異。于是究其原因，發現塊級元素P內是不能嵌套DIV的。
深究：我們先來認識in-line內聯元素和block-line塊元素，因為HTML里幾乎所有元素都屬于內聯元素或者塊元素中的一種。
in-line這個詞有很多種解釋：內嵌、內聯、行內、線級等，但是，它們都是表示相同的意思，在這里我們選擇習慣的叫法--內聯。
先看下面的例子你就能明白兩者的差別：
<p>測試一下塊元素span與<span>內聯元素</span>的差別</p>
<p>測試一下<div>塊元素div</div>與內聯元素的差別</p>
效果如下圖：
在上面的例子中，<div>會自己產生一個新的行，而<span>并沒有換行,這是在沒有CSS渲染的情況下才這樣，同樣，我們也可以通過CSS把div定義成內聯元素，把span定義成塊元素，但是，我們卻不能在HTML里任意轉化它們，塊元素可以包含內聯元素或某些塊元素（上面的例子其實是錯誤的使用--->我把<div>放在<p>里面了) ，但內聯元素卻不能包含塊元素，它只能包含其他的內聯元素，再看看這個：
<h2>HMLT中為何<a href="http://www.466668888.com/ " >P標簽不可以</a>包含div標簽呢？</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稱它們為replaced元素，我也找不到適合翻譯的詞，它們在屬于in-line的情況下同樣具有block-line的一些特性，在"display:inline-block的應用"中所說的inline-block其實就是讓其他元素也模擬成replaced元素，你暫時也不用過多了解，等到后面再學習它。
- 上一篇：網頁制作中p標簽中實現左右浮動
- 下一篇：一個貌似小白的HTML代碼問題
