Web前端学习—基础篇(18)_ul、ol、li、table、form、input都是什么标签，块级还是行级？——标签分类
4.8、标签分类
Html中标签众多，一般来说会根据标签的特性进行分类，比较块级标签、行级标签、行块级标签以及几个特殊标签。
4.8.1、块级标签 block level
特性
- 宽度默认撑满整个父元素
- 高度由内容撑开
- 独立成行——垂直布局
- 具有盒模型特征（默认可以设置宽、高、padding、border、margin）
常用块级标签
div、h1、h2、h3、h4、h5、h6、p、ul、ol、dl、dt、dd等
4.8.2、行级标签 inline level
特征
- 宽度默认由内容撑开
- 高度默认由内容撑开
- 横向显示——水平布局，一行放不下会自动换行
- 换行和空格会被解析
- 具有部分盒模型特征(默认width属性、height属性无效，垂直方向的margin、padding无效，垂直方向border不占位)
常用行级标签
span、b、strong、em、i、sup、sub、del、a等
4.8.3、行块级标签 inline block
特征
- 具有行级标记的特征：横向显示——水平布局，一行放不下会自动换行；换行和空格会被解析
- 具有块级标记的特征：可以设置宽度和高度，具有盒模型特征
常用标签
img
4.8.4、特殊标签
特殊标签主要是列表、表格、表单标签，它们与常规的标签略有区别。
(1)列表
列表标签中，ul、ol、dl、dt、dd为块级标签，查看网页检查元素可以发现：
display:block;
li标签则是：
display: list-item;
由于li标签特性与块级标签大致相同，所以在某些情况下也会认为它是块级标签。
(2)表格
表格中，表格标签：
display: table;
thead标签：
display: table-header-group;
tbody标签：
display: table-row-group;
tbody中，tr标签
display: table-row;
tbody中，td标签
display: table-cell;
tfoot标签：
display: table-footer-group;
(3)表单
表单中，form标签，检查页面元素可知：
display:block;
但是，input关于display属性并未提及，并未明确划分，但在实际使用中我们可知，它兼具行块级标签的部分特性，加上标签属性也可以转换，我们根据实际情况会用即可。
textarea标签：
display: inline-block;
button标签：
display: inline-block;
select标签：
display: inline-block;
option标签：
display: block;
4.8.5、框类型转换——display属性
- display: block; 转为块级标签
- display: inline; 转为行级标签
- display: inline-block; 转为行块级标签
- display: none; 隐藏元素，隐藏之后不占位
