前端学习路线：从小白到大神的一步之遥

基础学习顺序

HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。
对于小白来学习Web前端开发的话，门槛还是很低的，主要体现在HTML和CSS上，前者只是结构标签，定义网页的内容，后者是样式配置，规定网页的布局，入门是非常简单的，然后稍微有些难度的将是JavaScript，对网页行为进行编程。
看到这里对一些Web前端开发依然感兴趣的小伙伴可能会觉得一头雾水的话，那简单通俗的来讲：HTML 是一种标记语言，是网页的骨架；CSS 就是网页的美容师，用来给 HTML 添加样式（如字体、颜色、大小等）；而JavaScript就是让HTML和css编写的内容动起来。

用一套图展现

HTML 诞生一个初步形象

CSS 经过一些修饰 显得更美观

JavaScript 赋予其生命 让它可以按照自己的思想动起来

注：图片来源于网络，仅供参考，如有侵权可联系删除。

详细学习内容

（一）、HTML
（二）、css

（三）、HTML5
1、浏览器与浏览器内核
2、语法及使用
3、常用标签
4、语义化
5、表单元素
6、HTML
7、新增标签

（四）、CSS3基础
1、CSS基本语法规范
2、常用的选择器用法与技巧
3、复合选择器使用
4、数值与单位
5、文字文本样式
6、CSS3新增选择器

（五）、 CSS3进阶
1、CSS盒子模型
2、CSS背景技巧
3、圆角/阴影/过渡
4、定位和浮动
5、伪类和伪元素
6、chrome调试工具
7、CSS高级技巧（精灵图、CSS三角、图标字体等）
8、CSS常见布局技巧大全
9、网页开发规范以及流程
10、CSS企业级网页开发
11、网页开发常见问题以及解决方案
12、CSS常见兼容性问题以及解决方案
13、CSS3新增属性

（六）、JavaScript*

基础扩展

Photoshop

学习前端的同时我们需要扩展一些自己的只是储备，要学会一些简单的PS功能，来满足自己日常工作中的需求，例如：

1：如何打开图片
文件——打开
将图片直接拖入到ps中

2：取色
在ps的左侧工具栏里前景色图标，单机调出拾色器面板，将鼠标放置在你想要知道颜色的位置即可

3：测量
在ps的左侧工具栏里找到矩形选框工具，用鼠标将你想要知道尺寸的位置框出来，w代表宽，h代表高，如果不存在可以去窗口里找到信息面板（f8），如果你的值不少整数，说明你的单位不对，可以在信息面板上找到加号位置点击小三角将单位更改成像素，或者在标尺上右击
如果你的ps里没有标尺 按ctrl+r可以显示或隐藏标尺
测量时选择多了：在ps的上面工具面板里找到地三项在选区中减去
图片打开的越大，选择的越精准，按住alt键滑动鼠标滚轮，向上放大，向下缩小
如何去掉选区 ctrl+d

4：抓手工具可以随意拖动图片
快捷键h 或者按住空格键

5：切图

• 方法一： （只能一个个截图，新建一个图片，不会破坏原图）
  用选框工具将你想要切的图片框出来，ctrl+c复制——ctrl+n新建——enter——ctrl+v粘贴——ctrl+shift+alt+s存储为web所用格式
• 方法二：（只能一个个裁切，在原图基础上裁切，会破坏原图）
  用裁切工具将你想要裁切出来的图片框出来——双击确定即可——ctrl+shift+alt+s存储为web所用格式
  如何还原——用历史记录面板（窗口——历史记录）
• 方法三：（批量截图）
  在裁切工具上右击选择切片工具——将你想要裁切的图片一个个框出来——ctrl+shift+alt+s存储为web所用格式——选择所有用户切片——存储

6：如何更改图片大小
用选框工具选中——ctrl+t——在对角线位置缩放

node.js

如果有精力可以多了解，扩展自己的知识层面

框架

vue

Vue官网：https://cn.vuejs.org/

React

React官网：https://react.docschina.org/

参考资料

书籍：
《ECMAScript 6入门 》
《JavaScript高级程序设计》(第4版)
《Vue.js实战》 梁灏
《React开发实战》