说到HTML分类，其实HTML分类标准有很多种。本文介绍按默认样式分类。

块级元素 block

顾名思义，所谓的块级元素就是占据一块区域，占据整行，有自己的宽高等尺寸。

块级元素的特点：

• 块级元素会独占一行;
• 高度，行高，外边距和内边距都可以单独设置;
• 宽度默认是容器的100%;
• 可以容纳内联元素和其他的块级元素。

块级元素列表：

 <address>//定义地址 
 <article> //文章内容
 <aside> //伴随内容
 <caption>//定义表格标题 
 <dd>    //定义列表中定义条目 
 <div>     //定义文档中的分区或节 
 <dl>    //定义列表 
 <dt>     //定义列表中的项目
 <figcaption> //图文信息组标题
 <fieldset> //定义一个框架集 
 <form> //创建 HTML 表单
 <figure> //图文信息组
 <h1>    //定义最大的标题
 <h2>    // 定义副标题
 <h3>     //定义标题
 <h4>     //定义标题
 <h5>     //定义标题
 <h6>     //定义最小的标题
 <hr>     //创建一条水平线
 <legend>    //元素为 fieldset 元素定义标题
 <li>     //标签定义列表项目
 <noframes>    //为那些不支持框架的浏览器显示文本，于 frameset 元素内部
 <noscript>    //定义在脚本未被执行时的替代内容
 <ol>     //定义有序列表
 <ul>    //定义无序列表
 <p>     //标签定义段落
 <pre>     //定义预格式化的文本
 <table>     //标签定义 HTML 表格
 <tbody>     //标签表格主体（正文）
 <td>    //表格中的标准单元格
 <tfoot>     //定义表格的页脚（脚注或表注）
 <th>    //定义表头单元格
 <thead>    //标签定义表格的表头
 <tr>     //定义表格中的行
 <output> //表单输出
 <audio> //音频播放
 <footer> //区段尾或页尾 <blockquote> //块引用
 <canvas> //绘制图形
 <section> //一个页面区段
 <header> //区段头或页头
 <hgroup> //标题组
 <video> //视频

MDN 参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements

行内元素 inline

inline有时也被称为内联元素，这种元素不一定有规则形状，也不会独占一行，会与其他元素和谐的挤在一起，没有自己的宽高，仅仅依靠自己的字体大小或者是图像大小来支撑结构，不能设置宽高对齐等属性。

行内元素的特点：

• 和相邻的行内元素在一行上；
• 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效；
• 默认的宽度就是它本身的宽度；
• 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）。

注意事项：

• 只有文字才能组成段落，因此类似<p>,<h1>~<h6>,<dt>等里面不能放块级元素，因为它们都是文字块级标签，里面不能再存放其他的块级标签；
• 链接里面不能再存放链接。

行内元素列表：

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

MDN 参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elements

行内块级元素 inline-block

这种元素也被称为内联块级元素，和inline元素一样与其他元素堆在一行内，和谐共处，对外表现看起来像一个inline元素，对内表现为block，可以设置宽高等尺寸。也可以在一行中放置多个行内块级元素.

行内块级元素的特点：

• 和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙；
• 默认的宽度就是本身内容的宽度；
• 高度，行高，内边距和外边距都可以设置。

注意事项：
在行内块级元素中有几个特殊的标签，<img/>,<input/>,<td/>,可以设置它们的宽度高度以及对齐属性.

元素类型转换display

• display：block;定义元素为块级元素;
• display : inline;定义元素为行内元素;
• display：inline-block;定义元素为行内块级元素。

总结

不管块级元素还是行内元素，区别主要是三个方面:

• 排列方式：块级元素会独占一行，而内联元素和内联块元素则会在一行内显示；
• 宽高边距设置：块级元素和内联块级元素可以设置 width、height属性，而内联元素设置无效；
• 默认宽度：块级元素的 width 默认为100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。