<p></p>標簽為什麽不能包含塊級標簽?還有哪些特殊標簽？
阿新 • • 發佈：2017-11-08
rip ddr small 結果 html標簽 不支持 分隔線 query important
最近，在碼代碼的時候，就是下面的這段代碼，我犯了一個很不起眼，但犯了就致命的BUG。
<body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> var result= $("p").filter(function(index) { console.log($("ol", this).length== 0) return $("ol", this).length == 0; }); </script>
因為只要你犯了，估計檢查半天都找不出。我可是費了老勁，才發現是<p>和<ol>嵌套的問題。但是兩個不都是塊級元素，難道不能嵌套麽？而且最後的結果居然是自動補全了兩個</p>標簽。
它涉及到了塊級元素和內聯元素的嵌套問題。這是一個特別容易被我們遺忘的知識點！！！現在就來讓我給你們補一下課也給我自己加深一下印象~
1、塊級元素（block）、內聯元素（inline）和可變元素（inline-block）的定義和區別
2、各類具體包含明細
3、嵌套規則和某些特殊標簽
定義和區別
- display:block
- block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
- block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
- block元素可以設置margin和padding屬性。
- display:inline
- inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
- inline元素設置width,height屬性無效。
- inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
- 可以通過display:block來將它變成為塊元素之後，就可以用css其他樣式應用了。
- display:inline-block
- 簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。
- 元素展現inline元素的屬性，但是可以設置自己的寬和高了。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
- 區別
- 塊級元素一般用來搭建網站架構、布局、承載內容。
-
內聯元素一般用來在網站內容中的某些細節或者部位，用以“強調、區分樣式、上標、下標、錨點”等等。
-
它們可以互相轉換。display:inline|block
- 註意
- 一般我們會用display:block，display:inline或者display:inline-block來調整元素的布局級別，其實display的參數遠遠不止這三種，僅僅是比較常用而已。
- IE（低版本IE）本來是不支持inline-block的，所以在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。
各類具體包含明細
- 塊元素(block element) HTML標簽分類明細
- address - 地址
- blockquote - 塊引用
- center - 舉中對齊塊
- dir - 目錄列表
- div - 常用塊級容易，也是css layout的主要標簽
- dl - 定義列表
- fieldset - form控制組
- form - 交互表單 （只能用來容納其它塊元素）
- h1-h6 - 標題
- hr - 水平分隔線
- isindex - input prompt
- menu - 菜單列表
- noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
- noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
- ol - 排序表單
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 非排序列表
- 內聯元素(inline element) HTML標簽分類明細
- 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 - 定義變量
- 可變元素(inline-block element) HTML標簽分類明細
- applet - java applet
- button - 按鈕
- del - 刪除文本
- iframe - inline frame
- ins - 插入的文本
- map - 圖片區塊(map)
- object - object對象
- script - 客戶端腳本
嵌套規則和某些特殊標簽
1、塊狀元素可包含內聯元素或某些塊元素，但內聯元素不可包含塊元素，只能包含內聯元素。
- <div><h1></h1><p></p></div> 正確
- <a href="#"><span></span></a> 正確
- <span><div></div></span> 錯誤
2、塊級元素不能放在<p>裏面
- <p><ol><li></li></ol></p> 錯誤
- <p><div></div></p> 錯誤
3、有幾個特殊塊級元素只能包含內聯元素，不能包含塊級元素。這幾個特殊標簽是 h1~h6、p、dt
4、li 內可包含 div 標簽
- <li><div></div></li>
5、塊級元素與塊級元素並列、內聯元素與內聯元素並列
- <div><h2></h2><p></p></div> 正確
- <div><a href="#"></a><span></span></div> 正確
- <div><h2></h2><span></span></div> 錯誤
<p></p>標簽為什麽不能包含塊級標簽?還有哪些特殊標簽？