HTML元素巢狀問題

元素巢狀

塊元素可以包含內聯元素或 某些塊元素，但內聯元素卻不能包含塊元素，只能包含其他的內聯元素。

P元素巢狀問題

<p>
  <div></div>
</p>

在P元素中巢狀div等塊級元素，在瀏覽器中解析如下：

可以看到在元素最後會多出一個空的 <p></p>。

透過查詢，發現原來 p元素內無法包裹 塊級元素。
因為我們使用的DTD中規定了 塊級元素是不能放在 <p>裡面的，再加上一些瀏覽器縱容這樣的寫法：

<p>這是一個段落的開始
<p>這是另一個段落的開始
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端專案實戰教學影片，PDF）

當一個 <p>標籤還沒結束時，遇到下一個塊元素就會把自己結束掉，其實瀏覽器是把它們處理成這樣：

<p>這是一個段落的開始</p>
<p>這是另一個段落的開始</p>

這也就解釋了，為何瀏覽器中最後會多出1個空的 <p></p>。

塊級元素巢狀問題

可以先把所有的塊元素再次劃分成幾個級別的，我們已經知道 <html>是在最外層， <html>下一級裡面只會有 <head>、<body>、<frameset>、<noframes>，而我們已經知道了可視的元素只會出現在 <body>裡，所以我們把 <body>劃在第一個級裡面。接著，把 不可以自由巢狀的元素劃在第三個級，其他的就歸進第二個級。所謂的不可自由巢狀的元素就是裡面只能放內聯元素的，它們包括有：標題標記的 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落標記的 <p>；分隔線 <hr>和一個特別的元素 <dt>(它只存在於列表元素 <dl>的子一級)。

三級元素就是指，只能巢狀內聯元素的塊級元素。 p也恰好是其中之一。

為什麼第二級的元素可以自由巢狀

我們可以把它們看成是一些容器（或者說是盒子），這些容器的大小可以自由變化，例如我們可以把 <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>。

內聯元素

其實在內聯元素中，還是可以再區分一下的，有幾個元素（ <img>、<input>等）比較特別，它們可以定義寬高。雖然在 IE瀏覽器裡，所有的元素都可以定義寬高，但這是 IE自己的標準，並非所有瀏覽器都支援， W3C稱它們為replaced元素，其實它們也就是我們常說的行內塊，雖然這些元素屬於inline，但是卻具有一定的block（可以設定寬高），我們也可以賦予任何元素css屬性display:inline-block。
本身具有inline-block的元素應該沒有！

web前端入門到實戰：HTML元素巢狀問題