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等 |
|
|
总结：
- 块级元素都是非替换元素；
- 没有元素即是块级元素又是替换元素；
- 行内级元素分为两类：替换元素和非替换元素；