说到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, textareaMDN 参考链接：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%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
留言