这才是自学前端的正确姿势！（本人亲身经历，9个月拿到拼多多、美团、京东校招offer）

￡神魔★判官ぃ 2022-09-05 11:26 102阅读 0赞

## 前言 ##

本人自2020年2月开始自学前端，本科是数学专业的，在此之前只接触过C语言，因此对于前端可谓是零基础，由于网上的学习路径鱼龙混杂，因此在中间自己也踩了一些坑。经过九个月的学习，最终在今年秋招斩获三个大厂的offer，给自己的前端学习之路画上一个不错的节点，希望能够将自己的学习经历分享出来，帮助大家。

## 阶段一 ##

在学习前端之前呢，你需要一个编辑器，在网上你可以看到很多编辑器用来编写前端，甚至 Windows 系统默认的文本文档也可以作为前端代码的编辑器。俗话说，没有金刚钻怎么揽瓷器活，所以一个好的编辑器很重要，我再这里推荐给大家的编辑器是 VSCode。

### 一、HTML+CSS ###

前端的入门门槛是极低的，主要体现在 HTML 和 CSS 部分，运行环境就是浏览器，不像如 Java 需要配置开发/运行环境。

HTML 和 CSS 不是编程语言，HTML 是结构标签，CSS 是结构标签的样式配置。

**HTML**

属性  
事件  
标签  
字符集

**CSS**

CSS基础教程  
CSS样式  
CSS框模型  
CSS定位  
CSS选择器  
CSS高级

以上内容的学习用时 10 天左右，再花 2 天的时间项目实践，这部分总花费时间在 12 天左右。

### 二、HTML5+CSS3 ###

HTML5 作为 HTML 的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。

HTML5 可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为 HTML5 技术的主要优点之一。

CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。

CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

**HTML5**

HTML5视频  
HTML5音频  
HTML5拖放  
HTML5画布  
HTML5 SVG  
HTML5地理定位  
HTML5 Web存储  
HTML5 应用缓存  
HTML5表单

**CSS3**

CSS3边框  
CSS3背景  
CSS3文本效果  
CSS3字体  
CSS3 2D转换  
CSS3 3D 转换  
CSS3 过渡  
CSS3 动画  
CSS3 多列

以上内容用时 8 天左右，这部分内容是在 HTML+CSS 做的升级改进，只需要了解他们的一些特性即可，再结合这些特性做一些小项目加深学习。

### 三、Javascript ###

JavaScript 是至关重要的部分，是 web 开发者必学的三种语言之一，这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言，不论是概念还是设计。

认识JavaScript  
基本语法  
变量  
数据类型  
函数  
运算符  
流程控制  
DOM对象  
BOM对象

以上内容的学习用时 一个月 左右，这里推荐几本 Javascript 的书籍，如下：

*  《JavaScript 高级程序设计（第3版）》，俗称红宝书。前七章讲的是语言特性，是重点学习的部分，必须需要反复阅读，直至完全理解为止。DOM、事件流、表单、JSON、Ajax 与最后几章也需要重点学习，这是一些常用的 Web API。至于本书的其余部分大致读一下就可以，不做重点要求。
 *  《JavaScript 语言精粹》，俗称蝴蝶书。很薄的一本书总页数就 147 页，花一天时间就能看完，快的话半天就能看完。这本书虽然很薄，但是承载的内容却非常的丰厚和深入。JavaScript是一门有很多坑的语言，所以这本书”取其精华，去其糟粕“就是精粹了。
 *  《你不知道的 JS》非常精彩的一本书，将 JavaScript 的细节一网打尽。

## 阶段二 ##

这部分内容是对 JavaScript 的补充学习。

### 一、Jquery ###

基础语法  
选择器  
DOM操作  
事件  
动画  
常用工具  
Ajax  
Jquery插件编写

### 二、其他 ###

JavaScript 进阶  
DOM+BOM综合演练  
网页特效  
ES6 进阶  
bootstrap  
animate.css学习  
以上内容的学习用时 9 天左右

## 阶段三 ##

这部分是框架和前后端交互技术的学习。

### 一、VUE ###

Vue基础  
Vuex  
Vue-router  
axios

### 二、React ###

认识React  
React元素渲染  
JSX  
组件  
State  
Props  
事件处理  
条件渲染  
列表  
组件API  
组件声明周期

### 三、Node ###

**1.基础console（控制台）**  
crypto（加密）  
debugger（调试器）  
fs（文件系统）  
http（网络）  
os（操作系统）  
path（路径）

**2. 高级**  
NPM介绍及使用  
MVC模式简介  
Express框架学习  
链接Mysql  
链接Redis  
项目实战

### 四、webpack ###

概念  
入口  
输出  
模式  
loader  
插件  
配置  
以上内容用时 两个月 左右

## 阶段四 ##

### 一、Mysql ###

**1.阶段一认**  
识mysql  
安装mysql  
创建数据库、数据表学习  
常用的SQL命令，完成增删查改

**2.阶段二**  
学习Mysql关联查询，子查询等  
学习Mysql常用函数  
学习Mysql分组、分页、排序等

**3. 阶段三**  
学习Mysql高级查询  
了解存储过程，自定义函数等  
了解Mysql配置文件

### 二、Redis ###

认识Redis  
学习redis的数据类型  
redis常用操作  
redis事务

以上内容用时 7 天左右

## 阶段五 ##

### 一、项目管理篇 ###

SVN使用  
GIT使用

### 二、扩展部分 ###

**小程序**

了解小程序开发流程  
视图容器  
基础内容  
表单组件  
导航  
媒体组件  
地图（map）  
画布（canvas）  
开放能力

**apicloud（移动app开发）**

认识apicloud  
开发工具讲解  
端API  
云API  
小程序模块使用

### 三、常用框架使用篇 ###

iview （vue框架）  
element ui （vue框架）  
REACT  
echarts (百度图标库)  
阿里巴巴开源图标  
使用Sass学习  
Swiper学习  
zoom.js 学习

## 总结 ##

从前端入门开始学起，刚刚接触时应该会比较难懂，一两天之后学习就会顺利了。前端入门学习是比较简单的，像CSS和HTML学习来比较容易，但建议不要一味的看书，最好结合着视频一起学习，会比较高效。

像后面的js、CSS3+HTML5等等这些，可能会比较难，理解起来也没有那么容易，最好能有前端大神在一旁指点迷津，在遇到不懂得问题时，及时解决，否则可能会成为潜藏的隐患，以后写代码时会出现bug。每天保持4个小时的左右的时间学习，最多三个月，就应该可以自己写页面了。

但自学时有一些问题要注意：

1.不要闭门造车，多和人交流经验，避免走入歧途；

2.学习时一定要给自己制定计划、每天总结学习内容；

3.最好找一个人监督自己学习，避免三天打鱼两天晒网；一定要把学到的内容落实到实践上面（这是最重要的）。

前端开发日新月异，只要我们把最基础的知识掌握好了，尤其是javascript编程语言。无论它出现多少的开发框架，我们都可以快速掌握并使用它。当然使用这些框架或工具来开发项目只是我们必备的岗位技能，我们进一步需要学习的是如何掌握工作技巧，并且每天都有所进步，不管是技术上面还是项目管理上面。只有不断学习不断进步，保持成长性的思维，才不会被岗位和社会所淘汰。

#### 为了帮助自学的朋友们检测自学程度，特别整理了《95页前端学习笔记》电子稿文件。 ####

> 主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

![44bc3d1e2743a7cf1e94e28026aedf8d.png][]

### html5/css3 ###

*  HTML5 的优势
 *  HTML5 废弃元素
 *  HTML5 新增元素
 *  HTML5 表单相关元素和属性
 *  CSS3 新增选择器
 *  CSS3 新增属性
 *  新增变形动画属性
 *  3D变形属性
 *  CSS3 的过渡属性
 *  CSS3 的动画属性
 *  CSS3 新增多列属性
 *  CSS3新增单位
 *  弹性盒模型
    
    ![7a8a870af930159ffdce72e029a2bb6f.png][]

### JavaScript ###

*  JavaScript基础
 *  JavaScript数据类型
 *  算术运算
 *  强制转换
 *  赋值运算
 *  关系运算
 *  逻辑运算
 *  三元运算
 *  分支循环
 *  switch
 *  while
 *  do-while
 *  for
 *  break和continue
 *  数组
 *  数组方法
 *  二维数组
 *  字符串
    
    ![7a0dc3a36b8f14531fc90f7e47fdee6d.png][]

### 正则表达式 ###

*  创建正则表达式
 *  元字符
 *  模式修饰符
 *  正则方法
 *  支持正则的 String方法
    
    ![8e1c7406a78bc6f3d1952444940bf6dc.png][]

### js对象 ###

*  定义对象
 *  对象的数据访问
 *  JSON
 *  内置对象
 *  Math 方法
 *  Date 方法
    
    ![37559142d2756ed2ff6140e264de7f02.png][]

### 面向对象是一种编程思想 ###

*  定义对象
 *  原型和原型链
 *  原型链
 *  原型

### 常用的JavaScript设计模式 ###

*  单体模式
 *  工厂模式
 *  例模式
    
    ![f8a4bc9ed42dfcb28aa785e138938426.png][]

### 函数 ###

*  函数的定义
 *  局部变量和全局变量
 *  返回值
 *  匿名函数
 *  自运行函数
 *  闭包
    
    ![99315e3be29ca46fd38eded290b7c168.png][]

### BOM ###

*  BOM概述
 *  window方法
 *  frames \[ \] 框架集
 *  history 历史记录
 *  location 定位
 *  navigator 导航
 *  screen 屏幕
 *  document 文档
    
    ![aa1d68d8f905c563201a3aff97511a70.png][]

### DOM ###

*  DOM对象方法
 *  操作DOM间的关系
 *  DOM节点属性

### 事件 ###

*  事件分类
 *  事件对象
 *  事件流
 *  事件目标
 *  事件委派(delegate)
 *  事件监听
    
    ![0be9455cac4ea0466a4ac79d0bf8d888.png][]

### jQuery ###

*  jQuery 选择器
 *  属性选择器
 *  位置选择器
 *  后代选择器
 *  子代选择器
 *  选择器对象
 *  子元素
 *  DOM操作
 *  JQuery 事件
 *  容器适应
 *  标签样式操作
 *  滑动
 *  自定义动画
    
    ![2d5cf5f6c0a6a129beedeaa3a27cade4.png][]

### AJAX ###

*  工作原理
 *  XMLHttpRequest对象
 *  XML和HTML的区别
 *  get() 和post()

### HTTP ###

*  HTTP消息结构
 *  url请求过程
    
    ![97343c7b1efcf798dd86168bb10c1cc7.png][]

### 性能优化 ###

*  JavaScript代码优化
 *  提升文件加载速度

### webpack ###

*  webpack的特点
 *  webpack的缺点
 *  安装
 *  webpack基本应用
 *  配置文件入门
    
    ![cb3d3f0522291c6ec12d9db9e49fe409.png][]

### vue ###

*  MVC模式
 *  MVVM模式
 *  基础语法
 *  实例属性/方法
 *  生命周期
 *  计算属性
 *  数组的更新检查
 *  事件对象
 *  Vue组件
 *  路由使用
 *  路由导航
 *  嵌套路由
 *  命名视图
    
    ![ecbee5a3e0e3145360474a2d2a7a7d1a.png][]

#### 完整版PDF资料免费分享，只需你点赞支持，[【动动手指点击此处就可免费领取了】][Link 1]。 ####

[44bc3d1e2743a7cf1e94e28026aedf8d.png]: /images/20220829/4b0de968c2a14be780cac76aa2d20e74.png
[7a8a870af930159ffdce72e029a2bb6f.png]: /images/20220829/4e4e619c63f449ff945d5f30a18e969f.png
[7a0dc3a36b8f14531fc90f7e47fdee6d.png]: /images/20220829/a1f2c97fce0847e587dca4edaf1e31df.png
[8e1c7406a78bc6f3d1952444940bf6dc.png]: /images/20220829/80bd25dc0c224941aeac092fd13a5992.png
[37559142d2756ed2ff6140e264de7f02.png]: /images/20220829/2a9ef2ba809843abae89bb364aea4182.png
[f8a4bc9ed42dfcb28aa785e138938426.png]: /images/20220829/7aec1763215d4c2594cf18a8984444d3.png
[99315e3be29ca46fd38eded290b7c168.png]: /images/20220829/9bc65742708b4d25ada44463b1f95490.png
[aa1d68d8f905c563201a3aff97511a70.png]: /images/20220829/8ccee02d5e6b41b49d4873e01ec7a23a.png
[0be9455cac4ea0466a4ac79d0bf8d888.png]: /images/20220829/d1c4bf8d640d4eb2b6b4bd8e1d7d60a6.png
[2d5cf5f6c0a6a129beedeaa3a27cade4.png]: /images/20220829/6a0b6edb03ed4477b1864d82d5e16d4a.png
[97343c7b1efcf798dd86168bb10c1cc7.png]: /images/20220829/e555360b16c84f89a626239e1b5008c5.png
[cb3d3f0522291c6ec12d9db9e49fe409.png]: /images/20220829/d853becde03e44879f57a8995b688022.png
[ecbee5a3e0e3145360474a2d2a7a7d1a.png]: /images/20220829/2979a5acad1243dc8ebfde05d7c3dc0e.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=NgZqxZAa