前端学习笔记

1、负边距布局

2、标签名全部小写，属性加上引号，样式和行为不加载标签中，应单独放在样式文件和脚本文件中

3、span emline-height:150%;

4、表单域用fieldset标签包起来，并用legend标签说明表单的用途  （如注册，登录表单）

         4.1、每个input标签对应的文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置“for=someid”将说明文本与input相关联

5、表格标题要用caption，表头要用thead包围，主体用tbody包围，尾部要用tfoot包围，表头和一般单元格要区分开，表头用th，一般单元格用td

6、尽可能少用无语义标签的div和span，在语义不明显时，既可以用p也可以用div的地方，使用p标签，去掉样式后可读性更好。

7、DTD声明须规范

8、样式可以建成page,common,base三大类，base类为原子类，为最底层；

9、YUI雅虎前端框架，用之进行CSSreset

10、CSS 类命名时多个单词用下划线连接

11、CSS多用组合，少用继承

12、样式定义有相应的权重问题。HTML 标签的权重是1，class的权重是10，id的权重是100；当权重相同时，样式最终会取最后定义的那个（是指的选择符定义的先后顺序）。

13、CSS sprite  图片翻转技术

14、原生JS 只提供getElementById()方法

15、CSS hack ：

                   15.1  IE条件注释：

15.2 样式属性前缀法

“_”只在IE6下生效，“*”在IE6和IE7下生效

16、超链接后hover样式不出现问题： 将a:visited和a:hover顺序颠倒

17、hasLayout是IE专有属性，一般CSS解析出现BUG与hasLayout没有自动触发有关，可以设置自动触发，可以使用zoom:1来触发。

18、块级元素胡独占一行，行内元素为填满即可，并且行内元素设置width,height属性无效，块级对应display:block，行内元素对应display:inline，可以使用display进行切换

19、postion:relative 会保留自己在z-index:0层的占位,left,top,right,bottom是相对于自己在z-index：0层的位置。float在IE6下双倍边距是利用添加display

:inline来解决的

20、居中：

20.1、确定宽度的块级元素水平居中是通过设置margin-left:auto和margin-right:auto来实现的

           20.2、不确定宽度的块级元素的水平居中

                            （1）可以放在table中，table使用margin-left：auto…

                            （2）将块状元素的display改为 inline，然后使用text-align:center来实现居中。但是宽度高度无法调节。

                            （3）通过给父元素设置float，然后父元素设置Postion:relative和left:50%，子元素设置postion:relative和left:-50%来实现水平居中，relative有副作用

                   20.3、竖直居中：

                            （1）父元素高度不确定的文本、图片、块级元素的竖直居中：

                   通过给父容器设置相同的上下边距来实现

                            （2）父元素高度确定的单行文本的竖直居中

通过给父元素设置line-height来实现，line-height值和父元素的高度值相同

                            （3）父元素高度确定的多行文本、图片、块级元素的竖直居中

3.1、在父元素为td或th时，使用vertical-align属性可以生效，

Firefox和IE8下可以设置块状元素的display类型为table-cell，激活vertical-align属性，但是在IE6，7中不支持。可以直接使用table进行编写。

                                               3.2、使用hack技术区别对待firefox、IE8和IE6、7。在IE6、7下，

通过给父子两层元素分别设置top：50%和top：-50%来实现居中，需要设置postion:relative和postion:absolute。

21、布局：要保证main在sidebar之前加载，可以将main放在前面，可以设置float:right来控制，多用组合

22、设置负边距可以让相邻元素的位置产生重叠，谁浮在上面取决于HTML标签出现的先后，后出现的标签浮在先出现的标签之上。Flash和IE6下select元素会有z-index问题，窗口类型的会优先于非窗口模型的元素，从而显示在页面最顶端，Flash无论怎么设置都会付与其他元素之上，flash嵌入网页时，可以在wmode上设置窗口模式。同理，select元素在IE6下也是以窗口形式显示的。可以在外层加上一个iframe来遮住。

23、在IE6下，png图片的边缘会显示浅蓝色，网上有个函数可以解决这个问题。

24、防止全局变量泛滥，可以使用匿名函数将脚本包起来

25、

25.1、当不同的脚本的变量需要通信时，可以设置一个全局变量，在第一个函数中进行赋值，然后其他函数再调用；

 

 

 

25.2、当全局变量过多时，可以使用hash对象作为全局变量

当再次冲突时可以加上命名空间来解决

 

也可以使用函数来生成命名空间来调用

26、js函数需要提供统一入口

27、一般来说CSS放在页头，JS放在页尾

28、JS和CSS发布前，可以先进行压缩

29、JS也需要分层，可以分为base层、common层和page层

                   Base层：封装不同浏览器下js的差异，提供统一的入口；为其他层提供接口。

                   Common层：给page层提供组件

                   Page层：完成页面的功能需求

30、js事件冒泡

31、使用attachEvent和addEventListener进行监听

32、数组

33、getElementsByTagName是通过标签名作为挂钩阿莱获取DOM节点的，他的返回值是由DOM节点组成的数组。一般需要document.getElementsById来获取某个DOM节点，充当父容器，