先申明本人代碼水平為零起點，剛開始學習前端，所以就是小白。不過大神也是小白變身的么，所以要專心碼代碼，潛心鉆研，haha~

今天練習了段代碼，發(fā)現效果和自己想象的不一樣：

? ? ?想了一下估計是<p>和<div>嵌套的問題，但是兩個不都是塊級元素，難道不能嵌套么，而且最后的結果居然是多出來一段<p>的效果，感覺HTML包容心好強，代碼碼錯了也能顯示出來。所以就在網上找了點資料，涉及到塊級元素和內聯元素的嵌套問題。

1.塊級元素（block）與內聯元素（inline）的區(qū)別：

? ? ?簡單地說，塊級元素用來搭建網站架構、布局、承載內容，負責整體的大的方面。塊級元素總是會另起一行開始，其高度、行高和邊距都是可控的。內聯元素負責局部和細節(jié)，在同一行顯示，其高度、行高和邊距不可控。

? ? ?通過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的瀏覽器顯示此區(qū)塊內容
??? * 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 - 常用內聯容器，定義文本內區(qū)塊
??? * strike - 中劃線
??? * strong - 粗體強調
??? * sub - 下標
??? * sup - 上標
??? * textarea - 多行文本輸入框
??? * tt - 電傳文本
??? * u - 下劃線
??? * var - 定義變量?

? 可變元素是基于以上兩者隨環(huán)境而變化的，它的基本概念就是根據上下文關系確定該元素是塊元素還是內聯元素。一旦確定了它的類別，它就遵循塊元素或者內聯元素的規(guī)則限制。
?? ?* applet - java applet　　
??? * button - 按鈕　　
??? * del - 刪除文本　　
??? * iframe - inline frame　　
??? * ins - 插入的文本　　
??? * map - 圖片區(qū)塊(map)　　
??? * object - object對象　　
??? * script - 客戶端腳本

3.塊級元素和內聯元素的嵌套規(guī)則：

• 最基本：內聯不能嵌套塊級，塊級可以嵌套內聯元素

? ? ? ? ? <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>

轉載于:https://www.cnblogs.com/lovelvxia/p/5726316.html

總結

以上是生活随笔為你收集整理的p标签里面不能嵌套div的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。