Web前端初学者都应该学习哪些技能?

1、 HTML和CSS

HTML和CSS是Web开发前端初学者必学技能基础的部分，其中HTML构成了网页的“骨架”，CSS为网页添加了颜色样式，是网页的“皮肤”。网页上所看到的文本、图片以及花花绿绿的样式都是通过HTML和CSS实现的，因此学习Web开发首先要学的就是HTML和CSS编码。HTML和CSS比较简单，学习起来只需几周就好。

只要掌握了HTML和CSS你就可以将设计图转换成静态页面了，但是远远不能满足如今网页变幻莫测的需求。

2. JavaScript

JavaScript给网页增加了很多的动作和功能。利用JavaScript可以给网页元素添加很多交互，例如按钮点击、网页游戏或百度地图中可以根据拖拽实时更新地图等功能。如果你觉得一个网页交互很舒服很友好，基本上都是采用了大量的JavaScript，例如Pinterest。另外，JavaScript承担了网站前后端数据交换的重要角色。

其次，抛开前端开发，JavaScript是世界上受欢迎的语言*一，所以单单是语言本身也是非常值得学习的。

3. jQuery

JavaScript的语法有很多冗长和反复使用的地方，因此jQuery就应运而生了。jQuery 是一个JavaScript库，它包含了众多的插件和扩展，简化了JavaScript的语法，使开发者可以使用已经封装好的元素，只在必要的时候、需要个性化定制的时候，使用原生的JS语法。但即便有了jQuery这样的工具，学好JS基础仍然很重要。

4. JavaScript 框架

JavaScript框架在开发过程中提供了一个已经构建好的JavaScript代码结构，常用的框架有：AngularJS，VueJS，ReactJS，BackboneJS，EmberJS等。不同的框架擅长不同的应用场景。这些框架大大提升了开发的效率，并且能够和一些JS库如jQuery配合使用尽量减少原生JS编码。会使用至少一种JavaScript框架已经成为前端学习者的必会技能*一。

5. 前端框架

这里说的前端框架主要是指CSS框架，如受欢迎的Bootstrap。由于各种项目中常常出现相同的元素，例如导航条、表单等，因此将这些常用的元素的不同样式定义在同一个框架中会有很大的价值。大部分的前端开发工作都会要求对这些框架熟悉并且了解他们的原理。

6. CSS预处理器

CSS预处理器是另外一种可以大大提升CSS编码速度的工具。CSS预处理器给CSS添加了额外的功能从而使CSS编码更具扩展性。CSS预处理器会在代码发布到网站上之前对编码进行预处理，并将源码处理成兼容性比较好且结构清晰的CSS代码。SASS和LESS是在前端工作职位要求中常被要求的两种CSS预处理器。

7. RESTful API

以前的网站都是前后端融合在一起，但随着现在客户端的多样化，Web开发多采用前后端分离，前端负责渲染和附带处理简单的商务逻辑。前端和后端通过API进行交互，RESTful API 应运而生。

REST 的全称是REpresentational State Transfer，其实是资源的表现状态转化(虽然也听不懂)。设计规范就是URL中只使用名词来指定资源，原则上不使用动词，而通过HTTP动词来实现资源的状态扭转，例如：GET 用来获取资源，POST 用来新建资源(也可以用于更新资源)，PUT 用来更新资源，DELETE 用来删除资源。

更多关于RESTful API 的教程可以参考RESTful API 设计指南。

RESTful API已经成为Web开发中常用的API设计规范，因此前端职位要求中一般会要求有过RESTful API 的相关经验。

8. 响应式布局和移动端设计

随着移动设备的普及，越来越多的人会在移动设备上浏览网页，甚至逐渐超过了在电脑上浏览的次数。所以毫无疑问的是，响应式布局和移动端设计技能对于前端工作人员来说也是非常重要的。响应式布局就是页面根据屏幕宽度的大小和设备的类型进行布局甚至内容上的调整。

例如，一个网页在电脑上浏览时，由于屏幕比较宽，因此可能会出现图标元素的多列并排，但是如果是手机等宽度较小的屏幕，则需要适当调整列数，从而使人们在移动端上也能正常舒适地浏览内容。这样的布局就是响应式布局。

移动端设计包含了响应式布局，但也包含了设计单独的移动端。在有些场合我们希望用户在移动端所看到的内容和电脑端所看到的可能会完全不同，例如国内支付宝的电脑端和移动端完全不一样。电脑端因为其屏幕大可以看见更详细的信息，但移动端因为屏幕版面的限制，要求展示*须简单清晰。关于如何学习设计移动端，可以参考这篇文章Secrets To Building Mobile Sites Users Love。

9. 跨浏览器开发

前端代码运行在浏览器中，目前主流的浏览器也有很多种，不同的渲染机制导致同样的代码在不同的浏览器下显示效果会不同。虽然现在的主流浏览器在网页的统一展示方面做得越来越好，但在能够完全一致地显示之前，学习如何兼容各种浏览器还是比较重要的一项技能。

学习跨浏览器开发可以参考这里

10. 测试和调试

在Web开发过程中不可避免bug的产生，熟练测试和调试是非常重要的。

单元测试是测试单独的源代码块的过程，单元测试框架提供了单元测试的具体方法和结构。

另外一种常见的测试类型是UI测试，主要用来检查网页在用户交互的时候是否能够正常反应。你可以写一些测试用例在网页上寻找某些特定的东西，例如测试当用户忘记填写一个网页的表单时，错误提示框是否正确地弹出。

调试简单来讲就是找出bug的原因，并且修复的过程。

11. Git和版本管理器

写代码的过程中，版本控制是非常重要的。常用的版本控制器有Git等。版本控制器可以跟踪代码修改记录，如果一不小心把代码改坏了还可以回滚到之前的版本。在团队合作过程中，版本控制更加重要。Git是目前常用的版本控制系统，因此熟练掌握Git对开发职位来说非常重要。

12. 解决问题的技能

抛开岗位要求明确标注的技能以外，另外一项非常重要的技能应该就是解决问题的技能了。思考如何能够更好地实现设计稿的效果，如何能够更好地和后端对接等。

假如你将前端页面写好了，在与后端开发人员对接的时候，前端的很大部分的功能全部失效了。此时一个好的前端会将此看做一个亟待解决的问题和调招而不是一场灾难。当然一个的前端会在刚开始的时候就考虑周全避免此类事情的发生