【HTML/CSS】HTML元素种类的划分

1 种类划分

1.1 块级元素

1. 特征：独占父元素的一行，可以设置宽高，高度默认由内容决定。
2. 常用标签：div、p、h1~h6、ul、ol、li、dl、dt、dd、table、form
3. 不常用标签：pre用来定义预格式化文本，pre内的文本会保留空格和换行符。blockquote用来定义引用文本。hr是水平分割线。
4. 语义化标签：article、aside、footer、header、main、nav、section，语义化标签增加了代码的可读性，有利于搜索引擎优化。

1.2 行内元素

特征：一行可以放置多个行内元素

1.2.1 替换元素

1. 特征：可以设置宽高
2. 标签：img、input、iframe、video、embed、canvas、audio

1.2.2 非替换元素

1. 特征：不可以设置宽高，宽高由内容决定
2. 标签：a、strong、span、code、label

2 种类比较

总体来说可以有两种划分方式：

1. 替换元素和非替换元素：替换元素就是根据元素内相关属性的不同，浏览器会有不同的解析展现。所有的块级元素都是非替换元素。
2. 行内元素和块级元素：行内元素可以一行显示多个，块级元素一行显示一个，块级元素可以设置宽、高、margin和padding，行内元素非替换元素不能设置，替换元素可以设置。

3 inline、inline-block和block的区别

• block是块级元素的样式，可以为元素设置宽高啊margin和padding，单独占满一行
• inline不可以控制宽高margin、padding，多个元素占满一行才会换行
• inline-block可以控制宽高margin、padding，多个元素占满一行才会换行，兼具了block和inline的特点，ie不支持