AI智能应用开发
AI大模型开发（Python）
AI鸿蒙开发
AI嵌入式+机器人开发
AI运维
AI测试
跨境电商运营
AI设计
AI视频创作与直播运营
微短剧拍摄剪辑
C/C++
狂野架构师
web前端开发培训之网页前端学习总结（一）
更新时间:2016年12月05日14时49分 来源:传智播客web前端开发培训学院 浏览次数:
前端工作了一段时间经验总结，献给做前端的同学，希望对大家有所帮助。
一、编辑器的选择
推荐webstorm，绝对的神器。不要用dw了，它最骄傲的所见即所得其实没什么用，因为根本就不准，代码提示也不人性话，不方便。Webstorm的方便之处（目前用到的），
1.可以分屏，左右同时编辑两个文件，比如左边编辑html，右边编辑它的css/js。
2.代码提示很人性话，分级结构也很清洗。
3.方便查找，如ctrl+点击类名，就可自动定位到该css样式。
4.支持自定义模版，这样快速开始完成一些经常用到的代码。
5.支持个性化主题，字体等。
6.强大的插件库，自己去选吧。
7 .ctrl+/,注释所选区域。
sublime编辑器，简单灵活轻量级，支持代码自动完成、代码高亮、快速生成，以及更多好用的插件，也可以配置scss。sublime编辑器配置
二、布局
提到布局最头疼就是浏览器兼容性，现在才发现其实很多兼容性其实是很容易避免的，只要做到你对自己的每一句代码都知道它的意义和作用，还有避免用一些有兼容性的样式属性就行了，很多情况都可以不用hack，一样能实现多浏览器兼容。
1. 不要用hack，一定有更好的解决办法。很多情况都是因为代码结构不够好才会出现兼容性问题。
2. 思考如何用最少的标签及属性实现页面。
3.理解结构，表现，行为分离的意义。
4. 布局前一定要先分析页面结构，磨刀不误砍柴工，分析怎么用更好的办法实现，理清思路后，再切图写代码。
5. 深刻理解类的概念，注重归类元素，多总结，保持代码风格（包括前后代码的空格位置、多少，以及命名风格）严格一致并且尽量简洁。
6. 多用组合，少用继承。
7. 命名空间：驼峰命名法用于区别不同单词，划线用于表明从属关系。
8. 低权重原则------避免滥用子选择器(即类似#test span这样的选择符)。
三、技巧
1. 写js效果时一定要注意先分析好效果的行为，尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上（即自然语言）2.再根据自然语言翻译成机器语言，用jquery写的代码一定要注意代码的可移植性、通用性。
2. 组织css，推荐使用base、common、page三层，base可以分为两大部分：css reset（覆盖掉浏览器提供的默认样式，可以参考：developer.yahoo.com/yui/）和通用原子类。（疑问：如果使用css reset后，那么之前的要求的标签语义化是否就没有意义了呢？因为所有语义化的标签默认样式都被reset了）,不用*{ margin:0; padding:0;}的原因是因为“*”表示所有标签，其中包含大量生僻标签和为向前兼容而留下来的淘汰标签。
3. 把多个按钮放在一张图定位时，最好两个按钮之间隔一个像素，要不然有些版本的chrome可能解析不准确。
4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮动，一定要清除浮动，深刻理解浮动的作用很重要。 在层里调整文字的垂直位置可以用1.lineheight2.padding。 注意模块化布局，增加代码的重用性，尽量只给最里层的内容层设高度，一般如果高度不确定的都设置成自适应，这样有助于内容拉伸，也便于修改模块的高度。 大框架，尽量简单的分，比如左右结构最好就设置成左右，没必要搞成左中右。 尽量不要在html代码里插入img，把他设置在结构里，然后用css插入图片。
5. jquery编程习惯可以参考：1.把所有用$（）选中的元素保存在前缀为$的js变量里2.每个函数结束都要用return false 结束掉函数。
6. 布局前，先构思好整个页面的结构，一个好的结构要便于维护，加载更快，布局时也更容易。布局时，稳扎稳打，一步步弄好后（既没有用hack，也没有兼容性问题了），再布局下一个板块。 布局一个带js效果的页面，要先把效果图上的页面效果，完整布局好后，再考虑加动作的事情。并且一定要分析好页面的结构，以最少的标签，以及标签要与所放内容对应来布局。
7. jquery代码一般要用$(document).ready(function(){}确保页面dom准备好了再进行js操作。 页面按钮点击时边框变红，点击完后边框变蓝可以用outline:none;解决。 有动画的层最好设置overflow：hidden以免层里面的内容在外层宽高改变时撑出层外。
8. 写js效果时一定要注意先分析好效果的行为，尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上（即自然语言）2.再根据自然语言翻译成机器语言，用jquery写的代码一定要注意代码的可移植性、通用性。
9. a标签的四种状态的排序问题，可以用love hate 原则，即l（link）ov（visited）e h（hover）a（active）te，顺序写错可能出现点击后hover样式失效。
10. 一般情况下，建议尽量使用class，少用id。
11. css编码风格：多行式和一行式。 多行式：可读性强，但使行数过多，编辑需要来回拖动滚动条，影响开发速度，增大css文件大小。 一行式：可读性稍差，有效减小css文件行数，有利于提高开发速度，同时减小css文件大小。 一行式逐渐成为主流。
12. css sprite：即把多个甚至所有的图标都放在一张图里，然后用背景定位来控制图标的显示。 使用难点：图片如何排列能够紧凑，同时保证不会影响扩展性。 优点：减少http请求数，减小服务器压力。 缺点：影响开发速度，大大降低了可维护性。 是否使用取决于网站流量，对于流量不大的网站来说，css sprite带来的好处并不明显，而付出的代价是巨大的，不划算。
13. 定义有：hover伪类的样式时，多定义一个它的hover类，这样有助于js调用生成current的效果，如定义btn{xxx}，btn：hover，btn_hover{xxx}。
14. 低权重原则避免滥用子选择器(即类似#test span这样的选择符)。 css的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。 规则：html标签的权重是1，class的权重是10，id的权重是100.如“div em”的权重是1+1=2，“strong.demo”的权重是10+1=11，“#test.red”的权重是100+10=110. 如果css选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式，与挂class名的先后顺序无关。 为了保证样式容易被覆盖，提供可维护性，css选择符需保证权重尽可能低。
15. 如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（例如mt10、mt20）。模块最好不要混用margintop和marginbottom，统一使用margintop或marginbottom。
16. 拆分模块技巧：1.模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块。2.模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。
17. 触发hasLayout一般情况用zoom：1就行了，但当用dhtml的时候，可能失效，这时用position：relative就行了。
18. 布局最基本的元素：块级元素（常见：div,p,form,ul,ol,li）和行内元素（span,strong,em）等。 块级元素：独占一行，默认情况下，其宽度自动填满父元素宽度（即使设置了宽带也会独占一行）。 行内元素：不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化（没有上下边距，只有左右边距）。 可以用display：inline/block，切换。
19. ie6、7不支持display：inline-block，但行内元素可以用此属性触发hasLayout（是ie浏览器为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特性），从而模拟出inline-block的效果，然后再用*vertical-align控制文字的垂直对齐。但这样做用hack，所以不推荐。
20. 排列地板砖一样的布局的元素时，尽量用给每个元素用相同的类来实现，如果最左边的元素间距和右边的有区别可以给所有元素套一个父层，然后设置其右边距为负就行了。
21. 如果一个类中有些部分会经常变化，我们可以将这个经常变化的部分抽离出来单独设成一个类，然后用组合来实现最终样式。
22. 可以用(function(){})(),这样的匿名函数来避免全局变量冲突。让js不产生冲突，需要避免全局变量的泛滥，合理使用命名空间以及为代码添加必要的注释。可以定义一个全局对象，然后用其属性来定义全局变量，同时结合命名空间（即类似，GLOBAL.A.xx,和GLOBAL.B.xx之类的）。
四、常见问题
1. ie只有a支持hover,并且注意a里要有href才行。
2. IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法加上display:inline
3. 如果存在文字在层居中的问题，水平方向可以用text-align代替，垂直方向可以用line-height来控制，如果只是控制上边距，就用padding-top。这样可以避免在ie6上的某些不必要的错误。
4. ajax传参数时，汉字一定要用encodeURIComponent（string），编码一下，要不然可能变成乱码中文在ie6里。
5. ie6下select元素会以窗口形式显示的，这是ie6的一个bug，所以当你设置一层为相对或绝对定位时，select仍然会浮在那个层之上。 解决方法，用一个和那个层同样大小的iframe放在test下面，select上面，用iframe遮住select。
最后推荐两本书吧，上面很多技巧都是来自于里面《css权威指南》、《如何编写高质量的代码》，有些是实际工作中自己的一些心得，前辈的指点。还有一句话：“你对所学东西理解深度，决定了你所站的高度。”
本文版权归传智播客web前端开发学院所有，欢迎转载，转载请注明作者出处，谢谢！
作者：传智播客web前端培训学院；
首发：http://www.itcast.cn/web/
一、编辑器的选择
推荐webstorm，绝对的神器。不要用dw了，它最骄傲的所见即所得其实没什么用，因为根本就不准，代码提示也不人性话，不方便。Webstorm的方便之处（目前用到的），
1.可以分屏，左右同时编辑两个文件，比如左边编辑html，右边编辑它的css/js。
2.代码提示很人性话，分级结构也很清洗。
3.方便查找，如ctrl+点击类名，就可自动定位到该css样式。
4.支持自定义模版，这样快速开始完成一些经常用到的代码。
5.支持个性化主题，字体等。
6.强大的插件库，自己去选吧。
7 .ctrl+/,注释所选区域。
sublime编辑器，简单灵活轻量级，支持代码自动完成、代码高亮、快速生成，以及更多好用的插件，也可以配置scss。sublime编辑器配置
二、布局
提到布局最头疼就是浏览器兼容性，现在才发现其实很多兼容性其实是很容易避免的，只要做到你对自己的每一句代码都知道它的意义和作用，还有避免用一些有兼容性的样式属性就行了，很多情况都可以不用hack，一样能实现多浏览器兼容。
1. 不要用hack，一定有更好的解决办法。很多情况都是因为代码结构不够好才会出现兼容性问题。
2. 思考如何用最少的标签及属性实现页面。
3.理解结构，表现，行为分离的意义。
4. 布局前一定要先分析页面结构，磨刀不误砍柴工，分析怎么用更好的办法实现，理清思路后，再切图写代码。
5. 深刻理解类的概念，注重归类元素，多总结，保持代码风格（包括前后代码的空格位置、多少，以及命名风格）严格一致并且尽量简洁。
6. 多用组合，少用继承。
7. 命名空间：驼峰命名法用于区别不同单词，划线用于表明从属关系。
8. 低权重原则------避免滥用子选择器(即类似#test span这样的选择符)。
三、技巧
1. 写js效果时一定要注意先分析好效果的行为，尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上（即自然语言）2.再根据自然语言翻译成机器语言，用jquery写的代码一定要注意代码的可移植性、通用性。
2. 组织css，推荐使用base、common、page三层，base可以分为两大部分：css reset（覆盖掉浏览器提供的默认样式，可以参考：developer.yahoo.com/yui/）和通用原子类。（疑问：如果使用css reset后，那么之前的要求的标签语义化是否就没有意义了呢？因为所有语义化的标签默认样式都被reset了）,不用*{ margin:0; padding:0;}的原因是因为“*”表示所有标签，其中包含大量生僻标签和为向前兼容而留下来的淘汰标签。
3. 把多个按钮放在一张图定位时，最好两个按钮之间隔一个像素，要不然有些版本的chrome可能解析不准确。
4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮动，一定要清除浮动，深刻理解浮动的作用很重要。 在层里调整文字的垂直位置可以用1.lineheight2.padding。 注意模块化布局，增加代码的重用性，尽量只给最里层的内容层设高度，一般如果高度不确定的都设置成自适应，这样有助于内容拉伸，也便于修改模块的高度。 大框架，尽量简单的分，比如左右结构最好就设置成左右，没必要搞成左中右。 尽量不要在html代码里插入img，把他设置在结构里，然后用css插入图片。
5. jquery编程习惯可以参考：1.把所有用$（）选中的元素保存在前缀为$的js变量里2.每个函数结束都要用return false 结束掉函数。
6. 布局前，先构思好整个页面的结构，一个好的结构要便于维护，加载更快，布局时也更容易。布局时，稳扎稳打，一步步弄好后（既没有用hack，也没有兼容性问题了），再布局下一个板块。 布局一个带js效果的页面，要先把效果图上的页面效果，完整布局好后，再考虑加动作的事情。并且一定要分析好页面的结构，以最少的标签，以及标签要与所放内容对应来布局。
7. jquery代码一般要用$(document).ready(function(){}确保页面dom准备好了再进行js操作。 页面按钮点击时边框变红，点击完后边框变蓝可以用outline:none;解决。 有动画的层最好设置overflow：hidden以免层里面的内容在外层宽高改变时撑出层外。
8. 写js效果时一定要注意先分析好效果的行为，尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上（即自然语言）2.再根据自然语言翻译成机器语言，用jquery写的代码一定要注意代码的可移植性、通用性。
9. a标签的四种状态的排序问题，可以用love hate 原则，即l（link）ov（visited）e h（hover）a（active）te，顺序写错可能出现点击后hover样式失效。
10. 一般情况下，建议尽量使用class，少用id。
11. css编码风格：多行式和一行式。 多行式：可读性强，但使行数过多，编辑需要来回拖动滚动条，影响开发速度，增大css文件大小。 一行式：可读性稍差，有效减小css文件行数，有利于提高开发速度，同时减小css文件大小。 一行式逐渐成为主流。
12. css sprite：即把多个甚至所有的图标都放在一张图里，然后用背景定位来控制图标的显示。 使用难点：图片如何排列能够紧凑，同时保证不会影响扩展性。 优点：减少http请求数，减小服务器压力。 缺点：影响开发速度，大大降低了可维护性。 是否使用取决于网站流量，对于流量不大的网站来说，css sprite带来的好处并不明显，而付出的代价是巨大的，不划算。
13. 定义有：hover伪类的样式时，多定义一个它的hover类，这样有助于js调用生成current的效果，如定义btn{xxx}，btn：hover，btn_hover{xxx}。
14. 低权重原则避免滥用子选择器(即类似#test span这样的选择符)。 css的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。 规则：html标签的权重是1，class的权重是10，id的权重是100.如“div em”的权重是1+1=2，“strong.demo”的权重是10+1=11，“#test.red”的权重是100+10=110. 如果css选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式，与挂class名的先后顺序无关。 为了保证样式容易被覆盖，提供可维护性，css选择符需保证权重尽可能低。
15. 如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（例如mt10、mt20）。模块最好不要混用margintop和marginbottom，统一使用margintop或marginbottom。
16. 拆分模块技巧：1.模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块。2.模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。
17. 触发hasLayout一般情况用zoom：1就行了，但当用dhtml的时候，可能失效，这时用position：relative就行了。
18. 布局最基本的元素：块级元素（常见：div,p,form,ul,ol,li）和行内元素（span,strong,em）等。 块级元素：独占一行，默认情况下，其宽度自动填满父元素宽度（即使设置了宽带也会独占一行）。 行内元素：不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化（没有上下边距，只有左右边距）。 可以用display：inline/block，切换。
19. ie6、7不支持display：inline-block，但行内元素可以用此属性触发hasLayout（是ie浏览器为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特性），从而模拟出inline-block的效果，然后再用*vertical-align控制文字的垂直对齐。但这样做用hack，所以不推荐。
20. 排列地板砖一样的布局的元素时，尽量用给每个元素用相同的类来实现，如果最左边的元素间距和右边的有区别可以给所有元素套一个父层，然后设置其右边距为负就行了。
21. 如果一个类中有些部分会经常变化，我们可以将这个经常变化的部分抽离出来单独设成一个类，然后用组合来实现最终样式。
22. 可以用(function(){})(),这样的匿名函数来避免全局变量冲突。让js不产生冲突，需要避免全局变量的泛滥，合理使用命名空间以及为代码添加必要的注释。可以定义一个全局对象，然后用其属性来定义全局变量，同时结合命名空间（即类似，GLOBAL.A.xx,和GLOBAL.B.xx之类的）。
四、常见问题
1. ie只有a支持hover,并且注意a里要有href才行。
2. IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法加上display:inline
3. 如果存在文字在层居中的问题，水平方向可以用text-align代替，垂直方向可以用line-height来控制，如果只是控制上边距，就用padding-top。这样可以避免在ie6上的某些不必要的错误。
4. ajax传参数时，汉字一定要用encodeURIComponent（string），编码一下，要不然可能变成乱码中文在ie6里。
5. ie6下select元素会以窗口形式显示的，这是ie6的一个bug，所以当你设置一层为相对或绝对定位时，select仍然会浮在那个层之上。 解决方法，用一个和那个层同样大小的iframe放在test下面，select上面，用iframe遮住select。
最后推荐两本书吧，上面很多技巧都是来自于里面《css权威指南》、《如何编写高质量的代码》，有些是实际工作中自己的一些心得，前辈的指点。还有一句话：“你对所学东西理解深度，决定了你所站的高度。”
本文版权归传智播客web前端开发学院所有，欢迎转载，转载请注明作者出处，谢谢！
作者：传智播客web前端培训学院；
首发：http://www.itcast.cn/web/
最新资讯
0
分享到：
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2026 All Rights Reserved 苏ICP备16007882号营业执照增值电信业务经营许可证出版物经营许可证
苏公网安备 32132202001156号