要回家了有点按捺不住心里的躁动，来点简单轻松的话题。
这是个有趣的问题，应该有不少人搜过，我也搜过。出现这个问题主要还是滥用块级元素，或者是不会使用一些小技巧。举个例子，有时候我们想实现如下表单效果：
但有时候写着写着会变成下面的样子：
按我从以前遇到过情况来说，出现上面的情况的原因，可能有2个：
第一，就是可能在某个地方<label>被设置块级元素包住了
解决方法： 在外部样式使用 display: inline-block
第二，就是<label>的样式使用了 display: block
所以如果以后在写表单的时候，出现这个问题，可以从上面2个方向去查找原因，以及找出相应的解决方法。
（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。使用 <!Doctype>会让文档中的所有盒子模型以w3c标准盒子模型呈现。
（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式： 标准模式 和 怪异模式 。在 标准模式 下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在 怪异模式 下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。
Reference1 - h5新增标签
Reference2 - HTML元素分类
Reference3 - html标签分类及常用元素
Reference4 - HTML5常用标签分类
HTML中的标签元素一般分为三大类，它们分别是：块级元素、行内元素、行内块级元素。下面总结一下这几类元素的特点及应用。
01 块级元素
特点：
① 独占一行、从上到下排列
② 可直接控制宽度、高度及盒子模型的CSS属性（width 、height、padding 等属性值）
③ 在不单独设置宽度的情况下，块级元素的宽度（width属性）继承父元素
④ 在不单独设置高度的情况下，块级元素的高度（height属性）靠自己的基因（它本身内容的高度）
块级元素从我的理解来说，就是一个大框框，用来框住其它元素不要乱跑乱窜的，只能在一定范围内活动。所以，它通常会用来进来大的结构搭建。
常用的块级元素：
02 行内元素
特点：
① 元素与元素之间会自动排列成一行，遇到空间不够自动换行
② 默认高度和宽度（width、height）属性与它们的内容有关，无内容那么它本身也就是虚无。
③ 行内元素不支持padding、margin的上下调动（它们就是紧挨着不离不弃、除非用外部手部强制拆散它们）
行内元素一般用来修饰点缀内容而用，语义化比较强，用来加强代码的可读性。
常用的行内元素：
03 行内块元素
特点：
从这个名字就可以看出来，它是一个结合体，块级元素和行内元素的结合体。它具备二者共有的一些特点，使用非常频繁。
① 元素具有块级元素的属性（width、height等属性），可以对其直接控制
② 虽然有宽和高，但是他并不会霸道地独占一行，它具有行内元素的“亲情属性”，会自动排列挨在一起。
③ 行内块元素支持padding、margin的上下调动
欢迎大佬提点指正
