一、html元素可分為三大類：塊元素、內(nèi)聯(lián)元素、可變元素

1.塊元素：

常見塊狀元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption

塊狀元素特點：

(a)以塊的形式顯示為一個矩形區(qū)域；

(b)塊狀元素獨占一行，自上而下排列；

(c)塊狀元素可以定義自己的寬度和高度，以及盒模型中的margin,padding,border；

(d)塊狀元素可以作為一個容器包含其他的塊狀元素或內(nèi)聯(lián)元素。

2.內(nèi)聯(lián)元素(行內(nèi)元素)：

常見內(nèi)聯(lián)元素：a,strong,b,i,em,span,label,img,input

內(nèi)聯(lián)元素特點：

(a)內(nèi)聯(lián)元素在一行逐個進行顯示；

(b)內(nèi)聯(lián)元素沒有自己的形狀，不能定義寬度和高度，它的寬高由內(nèi)容來決定；

(c)內(nèi)聯(lián)元素設(shè)置與高度相關(guān)的一些屬性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height)，顯示無效或顯示不準(zhǔn)確；

(d)內(nèi)聯(lián)元素設(shè)置左右填充和外間距是可以的。

內(nèi)聯(lián)塊狀元素：img,input,textarea

內(nèi)聯(lián)塊狀元素特點：

(a)即具有內(nèi)聯(lián)元素特點，也具有塊狀元素特點

(b)即可以定義容器的寬，高，margin，padding等，還可以和其他內(nèi)聯(lián)元素在一行顯示

3.可變元素

二、元素類型轉(zhuǎn)換

display:block|inline|inline-block|none|list-item;

block:將元素轉(zhuǎn)換為塊狀元素(大部分塊狀元素的默認(rèn)display屬性值)

inline:將元素轉(zhuǎn)換為內(nèi)聯(lián)元素(大部分內(nèi)聯(lián)元素的默認(rèn)display屬性值)

inline-block:將元素轉(zhuǎn)換為內(nèi)聯(lián)塊狀元素(img,input等元素的默認(rèn)display屬性值)

list-item:將元素轉(zhuǎn)換為列表類型(li的默認(rèn)display屬性值)

none:元素隱藏不可見

注：當(dāng)元素設(shè)置了float屬性后，就相當(dāng)于設(shè)置了display:block;可以給元素定義寬，高了

三、置換元素和非置換元素

1.置換元素

瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容

如img標(biāo)簽，src屬性決定了在網(wǎng)頁呈現(xiàn)不同的圖片

如input標(biāo)簽，type屬性決定了在網(wǎng)頁中呈現(xiàn)什么類型的input控件

2.非置換元素

除置換元素外其他的html元素都是非置換元素

標(biāo)簽之間書寫什么樣的內(nèi)容，瀏覽器就顯示什么內(nèi)容

如：

hello world

總結(jié)

以上是生活随笔為你收集整理的html 元素怎么分类的,前端之Html元素的分类的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。