HTML元素类型总结

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等	跟其他行内级元素在同一行显示 不可以随意设置宽高 高度由内容决定

总结：

• 块级元素都是非替换元素；
• 没有元素即是块级元素又是替换元素；
• 行内级元素分为两类：替换元素和非替换元素；