html元素分類以及嵌套規則

1、html元素分類

html元素分爲塊級元素和內聯元素。

block（塊）元素的特色：
①老是在新行上開始；
②高度，行高以及外邊距和內邊距均可控制；
③寬度缺省是它的容器的100%，除非設定一個寬度。
④它能夠容納內聯元素和其餘塊元素

inline（內聯）元素的特色：   

 ①和其餘元素都在一行上；

②高和外邊距不可改變；

③寬度就是它的文字或圖片的寬度，不可改變
 設置寬度width   無效。
 設置高度height  無效，能夠經過line-height來設置。
 設置margin 只有左右margin有效，上下無效。
 設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的，

④內聯元素只能容納文本或者其餘內聯元素

2、常見塊級元素和行內元素

塊級元素： 

◎ address – 地址
◎ blockquote – 塊引用
◎ center – 舉中對齊塊 （html5取消了該標籤）
◎ 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 – 非排序列表（無序列表）
◎ address – 地址

行內元素： 

◎ a – 錨點
◎ abbr – 縮寫
◎ acronym – 首字
◎ b – 粗體(不推薦)
◎ bdo – bidi override
◎ big – 大字體
◎ br – 換行
◎ cite – 引用
◎ code – 計算機代碼(在引用源碼的時候須要)
◎ dfn – 定義字段
◎ em – 強調
◎ font – 字體設定(不推薦) （html5取消了該標籤）
◎ i – 斜體
◎ img – 圖片
◎ input – 輸入框
◎ kbd – 定義鍵盤文本
◎ label – 表格標籤
◎ q – 短引用
◎ s – 中劃線(不推薦)
◎ samp – 定義範例計算機代碼
◎ select – 項目選擇
◎ small – 小字體文本
◎ span – 經常使用內聯容器，定義文本內區塊
◎ strike – 中劃線
◎ strong – 粗體強調
◎ sub – 下標
◎ sup – 上標
◎ textarea – 多行文本輸入框
◎ tt – 電傳文本
◎ u – 下劃線
◎ var – 定義變量

3、內聯元素和塊元素的包含規則

1. 塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素：

<div><h1></h1><p></p></div> —— 對
<a href=」#」><span></span></a> —— 對
<span><div></div></span> —— 錯

<a href=」#」><div></div></a>–錯

2. 塊級元素不能放在<p>裏面：

<p><ol><li></li></ol></p> —— 錯

<p><div></div></p> —— 錯

3. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：

h一、h二、h三、h四、h五、h六、p、dt。

4. 塊級元素與塊級元素並列、內嵌元素與內嵌元素並列：

<div><h2></h2><p></p></div> —— 對
<div><a href=」#」></a><span></span></div> —— 對

<div><h2></h2><span></span></div> —— 錯

五、其餘約定

<a>標籤不能包含其餘<a>標籤

<pre>標籤不能包含<img>,<object>,<big>,<samll>,<sub>和<sup>標籤

<button>標籤不能包含<input>,<select>,<textarea>,<label>,<button>,<form>,<fieldset>,<iframe>和<isindex>標籤

<label>標籤不能包含其餘<label>標籤

<form>標籤不能包含其餘<form>標籤

大體瞭解下便可。最後看一下大圖來加深下印象吧

html元素分類及嵌套

本文固定連接: http://www.qaforcode.net/archives/338 | 豬哥每日一貼