您的位置:首页 > Web前端 > HTML

HTML元素类型总结

2021-12-22 09:54 1151 查看

HTML元素类型总结

1.块级、行内级元素

根据元素的显示(能不能在同一行显示)类型,HTML元素可以分为块级和行内级两大类。

(1)块级元素(block-level elements):

  • 特点:独占父元素一行;
  • 例如:div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、main、nav、section、hr等;

(2)行内级元素(inline-level elements):

  • 特点:多个行内级可以在父元素的同一行中显示;
  • 例如:a、img、span、strong、code、iframe、label、input、button、video、audio、canvas等

2.替换、非替换元素

根据元素的内容(是否浏览器会替换掉元素)类型,HTML元素又可以分为替换和非替换两大类。

(1)替换元素(replaced elements):

  • 特点:元素本身没有实际内容,浏览器根据元素的类型和属性,来决定元素的具体显示内容;
  • 例如:img、input、iframe、video、canvas、audio等;

(2)非替换元素(non-replaced elements):

  • 特点:和替换元素相反,元素本身是有实际内容的,浏览器会直接将其内容显示出来,而不需要元素类型和属性来判断到底显示什么内容;
  • 例如:div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、aside、footer、header、main、nav、section、hr、a、strong、span、code、label等;

3.元素分类总结

元素分类 具体元素 默认特征
块级元素 替换元素
非替换元素 div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、main、nav、section、hr等
  • 独占父元素一行
  • 可以随意设置宽高
  • 高度默认由内容决定
行内级元素 替换元素 img、input、iframe、video、canvas、audio等
  • 跟其他行内级元素在同一行显示
  • 可以随意设置宽高
非替换元素 a、strong、span、code、label等
  • 跟其他行内级元素在同一行显示
  • 不可以随意设置宽高
  • 高度由内容决定

总结

  • 块级元素都是非替换元素;
  • 没有元素即是块级元素又是替换元素;
  • 行内级元素分为两类:替换元素和非替换元素;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: