初学前端，学习路线图必不可少，更有【95页】初级前端模块笔记！

雨点打透心脏的1/2处 2022-11-06 15:57 142阅读 0赞

### 前言 ###

在初学前端的时候，我们总会遇到一些问题，我们可以在网上看到很多关于前端的这些问题：

> 你们都是怎么学web前端的？  
> 零基础，怎么自学好前端？  
> 前端需要学多久，都学哪些知识？  
> 想成为一名合格的前端工程师，需要掌握哪些技能？  
> …

![dd00bd8580e8233ec786a10e6c6ee578.png][]

下面是给初学前端的小伙伴分享的**学习路线**。

### 学习路线 ###

> ##### 第一阶段：网页制作 #####

**HTML**：常用标签，锚点，列表标签，表单标签，表格标签，标签分类，标签语义化，注释，字符实体

**CSS**：CSS介绍，全局样式，行内样式，内联样式，选择器，字体样式值，文本样式值，颜色样式值，盒模型，控制台使用，清除默认样式，盒模型居中，外部距塌陷，标准文档流，块元素，行内元素，行内块元素，多种伪类元素，浮动，定位

> ##### 第二阶段：JavaScript动态交互 #####

**JavaScript初阶**：变量与运算符，逻辑控制，Math类，函数，Object类，定时器，Array类，String类，Date类

**JavaScript进阶**：JavaScript DOM基础，this，事件，事件流，JavaScriptBOM基础，call&apply&bind，自定义属性，面向对象编程

**ES6/7/8/9**：ECMAScript6简介，let和const，ES6+的作用域，对象的扩展，函数的扩展，字符串的扩展，Symbol，Set&Map，Promise对象，async&awiat，箭头函数，模板字符串，rest参数，Class，Module模块

**JavaScript高阶**：闭包，立即执行函数，惰性函数，插件开发，多人协作，深复制与浅复制，数组扁平化，递归，正则表达式全解，函数防抖，函数节流

> ##### 第三阶段：移动端开发技术实战 #####

**HTML5**：HTML5简介，HTML5新语法，HTML5新语义化标签，HTML5新表单元素属性，HTML5新手机端新事件处理，HTML5新增多媒体实战，本地存储，Canvas，HTML5地理组件GeoLocation

**CSS3**：CSS3新增属性，圆角制作企业级方案，CSS3背景属性，过渡动画 transition，变化属性 transform，特效轮播图实战，企业级flex布局实战，grid布局实战

**Bootstrap**：响应式，媒体查询，栅格系统，栅格参数，组合模式，列偏移/列排序/自动列，列对齐/列嵌套，文本与颜色，按钮，导航，图文混排，模态框，轮播图

**移动端开发**：移动端简介，移动端视口约束，移动端flex移动端实践，rem，vw，flexible企业级实战

> ##### 第四阶段：前后端分离技术及常用库类 #####

**Ajax**：AJAX简介，AJAX作用，封装AJAX，创建XMLhttpRquest对象，同步和异步，AJAX分页

**jQuery**：jQuery介绍，jQuery链式语法，jQuery选择器，jQuery核心，jQuery工具，jQuery事件，jQuery事件对象，jQuery特效，jQuery回调函数，jQuery文档处理，jQuery筛选，jQuery属性，jQueryCSS

**Echarts**：Echarts概述，Echarts使用，坐标系，雷达图/饼状图/折线图

> ##### 第五阶段：企业级高级WEB架构开发 #####

**Webpack**：Webpack的安装和使用，项目模块打包，静态打包模块器，Webpack入口，Webpack输出，Webpack插件，webpack模块

**Vue**：Vue使用，Vue响应式，Vue双向数据绑定，Vue相关指令，vue-resource，axios，template选项，Vue生命周期，Vue组件，自定义指令，过滤器，computed属性，Vue-cli 2.x和3.x 脚手架配置，Vue-router，Vuex，Element UI

**微信小程序**：uni-app，mpvue，微信小程序注册，APPID申请，生命周期，小程序调试，微信小程序框架组件，微信小程序布局框架，微信小程序条件渲染和列表渲染，媒体组件audio，视图容器，网络api，相机api，地图api

![04cbcc50547ab3d7eeeb7dab8f6440bc.png][]

--------------------

### 【95页】初级前端模块笔记 ###

> 主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等**。需要可以 [点击此处][Link 1] 领取**完整版【95页】初级前端模块笔记和前端学习路线图**。

#### html/css ####

*  **html基本结构**
 *  **标签属性**
 *  **事件属性**
 *  **文本标签**
 *  **多媒体标签**
 *  **列表 / 表格 / 表单标签**
 *  **其他语义化标签**
 *  **网页结构**
 *  **模块划分**
 *  **CSS代码语法**
 *  **CSS 放置位置**
 *  **CSS的继承**
 *  **选择器的种类/优先级**
 *  **背景样式**
 *  **字体样式**
 *  **文本属性**
 *  **基本样式**
 *  **样式重置**
 *  **盒模型样式**
 *  **浮动float**
 *  **定位position**
 *  **浏览器默认样式**  
    ![3f69c409fe8b2bc6800dd4b90ead1e19.png][]

#### html5/css3 ####

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

#### JavaScript ####

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

#### 正则表达式 ####

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

#### js对象 ####

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

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

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

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

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

#### 函数 ####

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

#### BOM ####

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

#### DOM ####

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

#### 事件 ####

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

#### jQuery ####

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

#### AJAX ####

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

#### HTTP ####

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

#### 性能优化 ####

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

#### webpack ####

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

#### vue ####

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

#### 面试资料 ####

*  [前端面试，如果连前端基础都没有掌握，那还能面试成功吗？][Link 2]
 *  [【350页】前端校招面试题及解析大全][350]
 *  [118页Vue面试题总结，为面试提前做准备][118_Vue]
 *  [React面试题总结][React]
 *  [96道前端面试题+前端常用算法][96]

> PDF文档面试题资料和学习笔记的详解内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的小伙伴可以帮忙 点赞+评论666，私信【前端】即可前往免费领取！

[dd00bd8580e8233ec786a10e6c6ee578.png]: /images/20221023/8f421daa20ce40359f20927fb7372679.png
[04cbcc50547ab3d7eeeb7dab8f6440bc.png]: /images/20221023/8d2d9975f0ac42ad8741495706c3a2af.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=aEts2yhs
[3f69c409fe8b2bc6800dd4b90ead1e19.png]: /images/20221023/6dc48f7519b348ad9d03015f2d8b5790.png
[1431e512c2c67c2ccc6b4eb4b15d4104.png]: /images/20221023/dc5805f73d694f2eaf478bfff2b08e97.png
[9e0173fc555c04423373e93da624afce.png]: /images/20221023/5c9c385ea75945f3bef16d46c7339764.png
[691488e65f8ea6f5b86145fc9e4a9bd5.png]: /images/20221023/ddabba4fb0a3475aad347e118ac81370.png
[87a4041e44b5425d2bf871bd27fa5e43.png]: /images/20221023/7ed504a9dfbb42dc8e53140dfa42e6de.png
[851552f4b240b6ad2e879fb890411803.png]: /images/20221023/c6a7d6410b5846cf91dcb7c4f9994130.png
[61e46d441cbd4d5e05947ec893331ae4.png]: /images/20221023/ccd85bf6d80844ad81455637d0537fcc.png
[6ffcfdfc7bad0428c2ad6174f5038f07.png]: /images/20221023/d92f3aaa71244cc9bbf8cf49bb816c79.png
[8427754dff2e5de013f1868fd34eb7aa.png]: /images/20221023/5f004f3aa7ee4c009c57c1f53cb667ba.png
[93e947612d7681737ac09b867d6a6194.png]: /images/20221023/2a2300d5aa33493d994a35991c1dc65b.png
[069d91e2e2ba3b347e2a979e725f3547.png]: /images/20221023/aa632b4414fc44a3beb4bc6dbd0fcb88.png
[253c048b02dbd21aaadad56aae68d8cc.png]: /images/20221023/7d07558cdd5e48e1967ef1d8487249f6.png
[040f51533b9375c20a948c58bc307026.png]: /images/20221023/11f587a6c4614e1bbaa0fd7379bfe026.png
[Link 2]: https://blog.csdn.net/QXXXD/article/details/113928693?spm=1001.2014.3001.5501
[350]: https://blog.csdn.net/QIANDXX/article/details/113501345?spm=1001.2014.3001.5501
[118_Vue]: https://blog.csdn.net/QXXXD/article/details/112463826?spm=1001.2014.3001.5501
[React]: https://blog.csdn.net/QIANDXX/article/details/112773351?spm=1001.2014.3001.5501
[96]: https://blog.csdn.net/QXXXD/article/details/113113311?spm=1001.2014.3001.5501