HTML裡為什麼不能在<p>標籤中嵌套<div>標籤

學習過HTML語言的人都應該知道，在HTML裡，有分塊級元素和內聯元素；例如我們常用到的div，o，ul，dl，table，h1...h6等，這些都是塊級元素；而像a，b，i，em，img，span等就是內聯元素了。在開發過程中，我們避免不了各種元素的嵌套，但是有時候我們在不知不覺中就錯誤地嵌套元素了。為什麼說是不知不覺呢。因為就算我們錯誤地嵌套了，但是在瀏覽器中顯示的時候，其實是沒有區別的。咱們今天就具體地分析為什麼不能再<p>裡嵌套<div>。希望通過這個例子，大家可以自己去學習探索更多關於元素與元素之間的嵌套問題。

首先咱們先看兩段代碼：

第一段：

1 <p>
2         1hello 
3         <div></div>
4         world
5 </p>

第二段：

1 <p>
2         2hello
3     </p>
4     <div></div>
5     <p>
6         world
7     </p>

在運行之前，大家可以想象得出這兩段代碼在瀏覽器上顯示的結果嗎？咱們來看一下這兩段代碼在瀏覽器上顯示的結果吧：

沒錯，其實這兩段代碼在瀏覽器上顯示的效果是一樣的，就是因為這樣的結果，所以咱們在做開發的時候就很容易不知不覺就出現bug。讓我們用瀏覽器的開發者工具查看一下代碼吧：

看，事實上第一段代碼放在瀏覽器上時就會變成了這個樣子，world 被擠了出來，不在p標籤裡面了，這樣子在開發中我們對網站元素的控制就達不到我們想要的效果了。事實上第二段代碼才是我們想要的：