學習過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標簽里面了，這樣子在開發中我們對網站元素的控制就達不到我們想要的效果了。事實上第二段代碼才是我們想要的：
《轉載需標明出處》