前端之Html元素的分類


一、html元素可分為三大類:塊元素、內聯元素、可變元素

 

1.塊元素:

 

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

 

塊狀元素特點:

 

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

 

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

 

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

 

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

 

2.內聯元素(行內元素):

 

常見內聯元素:a,strong,b,i,em,span,label,img,input

 

內聯元素特點:

 

  (a)內聯元素在一行逐個進行顯示;

 

  (b)內聯元素沒有自己的形狀,不能定義寬度和高度,它的寬高由內容來決定;

 

  (c)內聯元素設置與高度相關的一些屬性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height),顯示無效或顯示不准確;

 

  (d)內聯元素設置左右填充和外間距是可以的。

 

內聯塊狀元素:img,input,textarea

 

內聯塊狀元素特點:

 

  (a)即具有內聯元素特點,也具有塊狀元素特點

 

  (b)即可以定義容器的寬,高,marginpadding等,還可以和其他內聯元素在一行顯示

 

3.可變元素

 

二、元素類型轉換

 

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

 

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

 

  inline:將元素轉換為內聯元素(大部分內聯元素的默認display屬性值)

 

  inline-block:將元素轉換為內聯塊狀元素(img,input等元素的默認display屬性值)

 

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

 

  none:元素隱藏不可見

 

注:當元素設置了float屬性后,就相當於設置了display:block;可以給元素定義寬,高了

 

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

 

1.置換元素

 

瀏覽器根據元素的標簽和屬性,來決定元素的具體顯示內容

 

img標簽,src屬性決定了在網頁呈現不同的圖片

 

input標簽,type屬性決定了在網頁中呈現什么類型的input控件

 

2.非置換元素

 

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

 

標簽之間書寫什么樣的內容,瀏覽器就顯示什么內容

 

如:<h1>hello world</h1


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM