![1b8d4e5f5f3ca19ab98ff768832a920a.png](https://i-blog.csdnimg.cn/blog_migrate/a08aab3b93cf6dcff2525aff7153f107.png)
发展历史
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> 错误(块级和内联并列一级了)
希望这些能给各位一些解决问题的思路吧!看起来挺简单的但是也是比较容易忽略掉。下篇讲一下html和css 在浏览器中是如何解析出来的。