2019獨角獸企業(yè)重金招聘Python工程師標準>>>

一、html元素分類

html元素分為塊級元素和內聯(lián)元素。

block（塊）元素的特點：
①總是在新行上開始；
②高度，行高以及外邊距和內邊距都可控制；
③寬度缺省是它的容器的100%，除非設定一個寬度。
④它可以容納內聯(lián)元素和其他塊元素

inline（內聯(lián)）元素的特點：???

?①和其他元素都在一行上；

②高和外邊距不可改變；

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

④內聯(lián)元素只能容納文本或者其他內聯(lián)元素

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

塊級元素：?

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

三、內聯(lián)元素和塊元素的包含規(guī)則

1. 塊元素可以包含內聯(lián)元素或某些塊元素，但內聯(lián)元素卻不能包含塊元素，它只能包含其它的內聯(lián)元素：

<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. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是：

h1、h2、h3、h4、h5、h6、p、dt。

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

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

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

5、其他約定

<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 | 豬哥每日一貼

轉載于:https://my.oschina.net/u/874560/blog/98103

總結

以上是生活随笔為你收集整理的html元素分类以及嵌套规则的全部內容，希望文章能夠幫你解決所遇到的問題。

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