献给前端er的各种小技巧

写在最前面：前端学习要想有质的飞跃，必须长期坚持学习和积淀。

一些小技巧：

1.Firefox 的查看页面源代码功能，可以一眼发现未闭合的标签、未转义的HTML字符，另一种办法，提交页面代码到 http://validator.w3.org/ 来验证HTML、CSS。因为未闭合的标签比如div会造成排版混乱，面试要求上也时常可以看见能够书写符合W3C标准的代码。

2.web标准中，一个页面只能有一个h1标签。

3. 不要滥用

，HTML5提供很多语义化的新标签，如：等语义化的结构标签，与等语义化的表示带标题的图片等。这些语义化的标签对于搜索引擎极为重要。

4.尽可能不要设置元素的id如#main{}来设置元素css样式，而是用class方式.main{}，另外应当绝对避免行内css样式，除非权重非常高。

5.尽量使用GIT与SVN，否则以后无休止的修改会让你崩溃。写代码时最好的习惯就是写注释！写注释！写注释！如果你提交给其他人使用也一定记得单元测试。同时要对分支合并以及打tags有很清晰的思路，这样能够帮助团队进行非常好的版本管理。

6.适当使用localStorage缓存HTML表单内容，防止浏览器崩溃、死机造成填丢。localStorage 只有对应的域名才可以读取；而且不是永久保存，在你操作表单时候，只是暂存入localStorage，在ajax确认表单提交成功后，要立即清除。

7.多列布局，不考虑低级浏览器可以使用CSS3的flex布局，可以做到比浮动更好控制，垂直、水平居中比起双飞翼可以很容易实现。

8.自学前端入门编辑器，建议用sublime或atom，社区也比较活跃。很多人从vim frontpage Dreamweaver 改变过来。

9.尽可能的把雅虎军规过一遍在自己能力范围内去实践。比如合并资源压缩资源等等。

10.尽可能使用iconfont，以及能用CSS绘制的尽量不要用图片。因为现在的浏览器屏幕都是retain。

11.装一个二维码生成当前网址的插件，尤其在测试微信内的页面时候，非常方便。

12.善用sublime插件，比如：emmet插件可以快速编码，提高开发速度。SublimeCodeIntel支持JavaScript,HTML,Node.js,,PHP等等语言的代码自动提；AutoFileName用于src引入文件地址提示，方便图片和文件插入。jshint/jslint代码错误提示。

一些其他建议：

- 尽量的脱离鼠标，使用键盘提高开发速度；

- 在可以多端同步的平台汇集自己的收藏，慢慢搭建知识索引库；

- 使用github ，坚持写博客，知识与心态都会有所改变。

更多技术好文，前端问题，面试技巧，请关注京程一灯（原一灯学堂）

微信搜索“一灯科技”或“jingchengyideng”,即可关注。