HTML和CSS那些事

发展历史

htmlcss最简单的语言了,同时又是所有web应用无法绕开的坎。

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

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

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

开发中碰到的坑

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在浏览器中是如何解析出来的。

本文来自网络,不代表OR厂&GF厂手表官网立场,转载请注明出处:http://www.yunzhuangseo.com/17480.html

作者: yunzhuangseo

上一篇
下一篇
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部