发展历史

html和css最简单的语言了，同时又是所有web应用无法绕开的坎。

html（超文本标记语言），从1993年发展到现在的html5，html5的草案已经被w3c接受，在移动端大放异彩。

css（层叠样式语言），从1994年到现在的css3，功能之强大效果的，样式之多变，可以说只有你想不到的效果，没有实现不了的效果。

刚入行那会，几乎每天都在琢磨怎么兼容浏览器，js使用jquery还好点，样式兼容那真的是有点头疼，不过现在的前端轻松多了，几乎不用考虑兼容的问题了。html和css3发展确实挺快的了如今，也只有这样才能适应现在的互联网大时代的发展。

开发中碰到的坑

css hack，新生带的前端可能很少听过这个词了，更不用说会使用，但是在编程的过程中有些浏览器样式会出现微妙的偏差使用，这个时候使用浏览器的 hack 就迎刃而解了，记得有一次开发中台系统的项目，输入框和按钮在火狐浏览的情况下无法对齐，按钮高度会一个像素，在其他的浏览器下却是一切正常，这个时候我们不可能使用 js 来实现吧！那太low了。由于之前我使用过IE浏览器的骇客，我想火狐的是否也有，果然不出所料确实存在，当然像-o-，-webkit-,-moz-,这中也是添加css前缀也算是一种hack吧。

@-moz-document url-prefix() { .selector { property: value; } } 

上面就是firefox的hack，当然IE，Chrome也一样有，这算是一种思路吧！我们在做项目的时候碰到兼容问题的时候这是一种解决问题的思路。

html 标签嵌套出现的问题。像下面的代码：

<p><p>xxxxx</p></p>

看起来没有问题，但是浏览器解析的时候就会出现解析多一个p标签在下面，这是什么原因呢！这里涉及到了浏览器标签嵌套规则的问题，浏览器是怎么解析这些的我也不是很明白自己去研究吧！我之前就吃过很多这方面的亏，特别是html导出word的时候那真的是头疼的要命啊！不过很神奇如果这些标签是js动态生成的一点问题都没有。

标签嵌套问题是开发者最容易忽略的问题。

内联标签可以嵌套内联元素，不可以嵌套块状元素
<a><a></a></a>     　　　　  正确　　（内联嵌套内联）
<a><span></span></a>    　  正确　　（内联嵌套内联）
<span><div></div></span>    错误　　（内联嵌套块级）

块元素可以嵌套块元素（不是所有块级都可以嵌套块级），或者是内联元素
<div><div></div></div>  　  正确　     （块级嵌套块级）
<div><span></span></div>    正确　　  （块级嵌套内联）

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1~h6、p、dt。所以说p里面不能嵌套div，就是我犯的错误。
<p><ol><li></li></ol></p>     错误　　（特殊块级标签只能嵌套内联标签）
<p><div></div></p> 　　　      错误　　（特殊块级标签只能嵌套内联标签）

块元素中嵌套的元素，块元素和块元素并列一级，内联元素和内联元素并列一级
<div><h2></h2><p></p></div>　　　　　　　　   正确（块级和块级并列一级）
<div><a href="#"></a><span></span></div>　　正确（内联与内联并列一级）
<div><h2></h2><span></span></div>　　　　    错误（块级和内联并列一级了）　

希望这些能给各位一些解决问题的思路吧！看起来挺简单的但是也是比较容易忽略掉。下篇讲一下AR厂水鬼html和css在浏览器中是如何解析出来的。