HTML元素的分类

关于HTML元素的分类可以说是前端里面一个比较重要的知识点了，面试中，我至少四次被问到了这部分的内容，这里做一下简单的总结。

第一种分类是分为块级元素和行内元素：

1. 块级元素
   常见的块级元素：<h1><h6> <p> <div> <ul> <ol> <li>
   特点：
   （1）块级元素会独占一行
   （2）宽度、行高、外边距和内边距都可以单独设置
   （3）宽度默认是容器的100%
   （4）可以容纳内联元素和其他的块级元素

2. 行内元素
   常见的行内元素：<a> <strong> <b> <em> <del> <span> <button> <img> <select>
   特点：
   （1）和相邻的行内元素在一行上
   （2）高度和宽度无效，只可以设置水平上的padding和margin，垂直方向上的无效
   （3）默认宽度就是起本身的宽度
   （4）行内元素只能容纳纯文本或者是其他行内元素（a除外）

3. 行内块级元素
   常见元素：<img/> <input/> <td/>
   特点：
   （1）和相邻行内元素（行内块）在同一行上，但是中间会有空白的间隙
   （2）默认宽度就是本身内容的宽度
   （3）宽度，行高，内边距与外边距都是可以设置的
   块转行内：display-inline；
   行内转块：display：block；
   块，行内元素转换为行内块：display：inline-block

第二种分类是分为替换元素和非替换元素：

1. 替换元素 <input> <img>
   根据元素内相关属性不同，浏览器会有不同的解析展现
   这些元素都是空元素，没有实际内容
2. 非替换元素 <div><span><p>
   直率的元素，直接将内容展现给浏览器
3. 行内替换元素
   可以设置元素的尺寸和上下内外边距
4. 行内非替换元素
   无法设置元素的尺寸和上下内外边距