要回家了有点按捺不住心里的躁动，来点简单轻松的话题。
这是个有趣的问题，应该有不少人搜过，我也搜过。出现这个问题主要还是滥用块级元素，或者是不会使用一些小技巧。举个例子，有时候我们想实现如下表单效果：
但有时候写着写着会变成下面的样子：
按我从以前遇到过情况来说，出现上面的情况的原因，可能有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常用标签分类
分类：内联元素、块状元素、内联块状元素a、内联元素：span,a,b,strong,i,em,br,input,textarea，
特性：display属性为inline，多个元素一起时从左到右在一行显示，它的宽、高是由本身内容的大小决定的（文字、图片等），不可以直接控制宽度、高度等其它相关css属性，但是可以设置内外边距的左右值。只能容纳文本或其它行内元素，不能嵌套块级元素。
b、块状元素：div,h1-h6,menu,ul,li,dl,talbe,p,hr,from,
特性：display属性为block,独占一行，每个元素都会从新的一行开始显示，从上到下布局，可设宽度、高度等其它相关css属性，在不设置宽度时，它的宽度是父级内容的宽度，在不设高度时，它的高度是内容本身的高度。
c、内联块状元素
特性：display属性为inline-block,综合了前两种特性却又各有取舍。不自动换行，默认排列方式为从左到右。
应用场景：
内联元素，用于不指定元素宽高，宽高由内容指定；
块状元素，用于指定元素宽高，标签占满一行；
内联块状元素：用于指定元素宽高，不占满一行。
更多前端基础知道可以关注小饼干～，进入饼干主页查看
1、块状元素：
块级元素是指本身属性为display:block的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。
布局上：独占一行，可以容纳内联元素和其他块元素
样式上：设置width、height有效，可以设置盒子模型的相关css属性，
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度
2、 行内元素：
内联元素是指本身属性为display:inline的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的应用。
布局上：和其他元素从左到右在一行排列，只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）
样式上：不能直接控制width、height，只能使用盒模型部分属性，如padding、line_height、margin-left、margin-right。
内联元素的宽高是由本身内容的大小决定（文字、图标等）
3、 行内块状元素：尽可能少的占用横向空间，和其他元素都在一行上；可以设置width、height、margin、padding等盒模型相关属性。
*常用：img、input、td。
display:block；(将元素变为块级元素)
display:inline； (将元素变为行级元素)
display：inline-block；（将元素变为行级块元素）
a. 块元素特立独行；内联元素随波逐流。
b.块元素通常用作网页的主要构建模块，而内联元素常用来标记小段内容（修饰文本）
c.设计一个页面时，一般从较大的块开始 ，然后完善页面的时候再加入内联元素。
d. 对标签能够清晰的分类，掌握标签的特性，在选择标签时避免犹豫不决，提高布局效率。
HTML5新结构标签
HTML5-新的属性语法
HTML5图形
HTML5音视频标签
对本地离线存储的更好的支持
新的表单控件，比如 calendar、date、time、email、url、search
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签 ： IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
