p標籤裡不能用div
今天遇到的不常見的問題，網上查了下才知道原因。
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> p{background: red;height: 20px;} div{background: yellow;} </style> <body> <p>sample<div>inline</div></p> </body> </html>
執行圖：
涉及到塊級元素和內聯元素的巢狀問題。
1.塊級元素（block）與內聯元素（inline）的區別：
簡單地說，塊級元素用來搭建網站架構、佈局、承載內容，負責整體的大的方面。塊級元素總是會另起一行開始，其高度、行高和邊距都是可控的。內聯元素負責區域性和細節，在同一行顯示，其高度、行高和邊距不可控。
通過display：block;或者display:inline兩者可以相互轉化。
至於可變元素是可以根據上下文語境決定是塊級元素還是內聯元素，好吧，它最靈活了=。=
2.分類明細:(照搬來的）
塊元素(block element) HTML標籤分類明細
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 互動表單 （只能用來容納其它塊元素）
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 選單列表
* noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容
* noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文字
* table - 表格
* ul - 非排序列表
內聯元素(inline element) 一般都是基於語義級(semantic)的基本元素，只能容納文字或者其它內聯元素。
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字型
* br - 換行
* cite - 引用
* code - 計算機程式碼(在引用原始碼的時候需要)
* dfn - 定義欄位
* em - 強調
* font - 字型設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文字
* label - 表格標籤
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機程式碼
* select - 專案選擇
* small - 小字型文字
* span - 常用內聯容器，定義文字內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文字輸入框
* tt - 電傳文字
* u - 下劃線
* var - 定義變數
可變元素是基於以上兩者隨環境而變化的，它的基本概念就是根據上下文關係確定該元素是塊元素還是內聯元素。一旦確定了它的類別，它就遵循塊元素或者內聯元素的規則限制。
* applet - java applet
* button - 按鈕
* del - 刪除文字
* iframe - inline frame
* ins - 插入的文字
* map - 圖片區塊(map)
* object - object物件
* script - 客戶端指令碼
3.塊級元素和內聯元素的巢狀規則：
- 最基本：內聯不能巢狀塊級，塊級可以巢狀內聯元素
<div><h1></h1><p></p></div> 正確（塊級並列）
<a href="#"><span></span></a> 正確（內聯巢狀內聯）
<span><div></div></span> 錯誤（內聯巢狀塊級）
-
有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：h1、h2、h3、h4、h5、h6、p、dt。所以說p裡面不能巢狀div，就是我犯的錯誤。
<p><ol><li></li></ol></p> —— 錯
<p><div></div></p> —— 錯
- 特殊的<li>裡面可以巢狀div（<li>可以但<p>不行）
- 塊級元素與塊級元素並列、內聯元素與內聯元素並列
<div><h2></h2><p></p></div> 正確
<div><a href="#"></a><span></span></div> 正確
<div><h2></h2><span></span></div> 錯誤（塊級和內聯並列了）
再跳出來看，p標籤內嵌div的結果是p標籤被div切成兩個標籤了~估計腦補的過程是這樣的：
<p>sample</p><div>inline</div><p></P>