火爆GitHub！零基础Web前端学习路线

痛定思痛。 2022-10-29 01:51 235阅读 0赞

之前和朋友聊天，她和我说到她们公司的两个实习生，都是同一水平招进来的，一个月却发生了很大变化，其中一个实习生进步飞快，另一个却进步缓慢，工作状态也日渐不佳，后来她分析出主要差距在于兴趣，有兴趣在学习工作时就是快乐的，当然进步也快。大家学前端也是一样，了解这个领域和培养学习兴趣尤为重要，这意味着你能在前端这条路走多远。

![25c7c222e8c625bd1ca9f014452edbbf.png][]

路要一步一步的走，饭要一口一口的吃，下面我来给大家整理下前端的学习路线。

## 初级阶段 ##

**1.Photoshop入门**

图像处理基础知识、图像处理基础知识、分辨率、图像的色彩模式、常用的图像文件格式。

**2.互联网基本原理**

互联网基本原理、服务器、浏览器、HTTP请求的概念。

**3.HTML**

编程工具介绍、HTML简介。HTML语义化标签、p标签和h系列标签。

**4.CSS基础和高级技巧CSS介绍，选择器。**

文字属性、颜色属性。

**5.静态网站制作项目**

搜索引擎优化的概念、页面常用SEO技巧、学会有格调的制作页面。

iconfont字体图标。一些常见的CSS高级技巧，比如负margin、压线技术、滑动门、列自撑技术。较复杂布局网站的学习，通栏banner、大背景等时下流行的网站制作方法。

## 中级阶段 ##

**6.JavaScript基础**

语句、执行顺序、词法结构、标识符、关键字、变量、常量、alert语句和console控制台。值和变量、数字、文本、布尔值、null和undefined。表达式和运算符、运算符概述。

**7.JavaScript DOM编程**

事件与事件处理概述、事件与事件名称、常用事件、事件处理程序的调用、DOM事件模型、事件流、 事件对象、注册与移除事件。文档对象的常用属性、方法与事件、输出数据。

**8.JQuery页面特效**

jQuery对象和DOM对象、jQ选择器、CSS操作、设置和获取HTML、文本和值。

**9.JavaScript进阶**

命名空间、对象扩展、数组化、主流框架引入的机制——domReady、无冲突处理。语言模块、字符串的扩展与修复、数组的扩展与修复、数值的扩展与修复、函数的扩展与修复、 日期的扩展与修复、浏览器嗅探与特征侦测 、判定浏览器、事件的支持侦测、样式的支持侦测。类工厂、JavaScript对类的支撑、各种类工厂的实现。

**10.HTML5和CSS3**

HTML5概述、HTML5新特性、HTML5组织、HTML5构成、HTML5页面的特征、HTML基础、HTML5全局属性、HTML5其他功能、HTML5元素分类。实战HTML5表单、新增的input输入类型。

**11.移动web和响应式页面**

视口、缩放 、分辨率、物理分辨率、设备像素比、dppx和dpi 、meta视口。百分比布局、流式布局、CSS3新的流式盒模型。

**12.JavaScript面向对象**

创建对象、属性的查询和设置、 删除属性、检测属性、枚举属性、属性getter和setter、属性的特性、对象的三个属性、序列化对象、对象方法。类和模块、类和原型、类和构造函数、类的扩充、类和类型、子类。原型、实例化和原型、 对象实例化、通过构造器判断对象、继承与原型链、构造函数和原型对象 、构造函数、原型对象 、\[\[Prototype\]\]属性 、在构造函数中使用原型对象 、改变原型对象、内建对象的原型对象。

**13.服务器知识和PHP入门**

后台语言和前台语言的区别。初识PHP、PHP语言的优势、PHP 5的新特性、PHP的发展趋势、PHP的应用领域。

**14.Ajax**

Ajax概述与Ajax初体验、Ajax技术介绍、XMLHttpRequest对象详解、动态加载和显示数据、XMLHttpRequest对象概述、方法、属性、发送请求、GET和POST请求、运行周期、使用JSON响应、Ajax实用包的封装。

15.Canvas和手机游戏

Canvas绘图、基本知识、理解canvas坐标系、获取canvas环境上下文、理解路径、路径操作API 、绘制线条 、绘制矩形 、绘制圆弧 、绘制贝塞尔曲线 、线条属性 、线条颜色 、填充 、绘图状态。

后面还会涉及到高级阶段，前端的学习过程，是一个由“难”逐渐“简单”，再由“简单”变“难”的过程。前半段是入门的过程，后半段是成为大牛的过程。总之学前端只有八个字：明确方向，兴趣主导。

# 最后 #

前端学习是一条漫长的道路，我们要学习的东西不仅仅只有表面的 技术，还要深入底层，弄明白下面的原理，只有这样，我们才能够提高自己的竞争力，在当今这个竞争激烈的世界里立足。

千里之行始于足下，愿你我共勉。

金三银四快到了，送给大家一个小福利，下面是我在工作之余整理的一些面试题，包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、react等等，共计657页PDF。

**HTML 篇**

*  图片中 title 和 alt 区别？
 *  Html5 有哪些新特性、移除了哪些元素
 *  浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢
 *  行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
 *  canvas在标签上设置宽高 和在style中设置宽高有什么区别
 *  浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

**CSS 篇**

*  CSS中link与@import的区别：
 *  position的absolute与fixed共同点与不同点：
 *  BFC 有什么用
 *  清除浮动的几种方式
 *  Css3 新增伪类 - 伪元素
 *  IE盒子模型 、W3C盒子模型
 *  display:inline-block 什么时候不会显示间隙？
 *  行内元素float:left后是否变为块级元素？

![02d97b7d1a8ae1d3b01bc61cd97624ee.png][]

**JavaScript篇**

*  js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
 *  js拖拽功能的实现
 *  异步加载js的方法
 *  js的防抖
 *  绕不过去的闭包
 *  说说你对作用域链的理解
 *  JavaScript原型，原型链 ? 有什么特点？
 *  请解释什么是事件委托/事件代理
 *  Javascript如何实现继承？

**Vue**

*  vue中 key 值的作用
 *  Vue 组件中 data 为什么必须是函数？
 *  vuex的State特性是？
 *  介绍一下Vue的响应式系统
 *  computed与watch的区别
 *  介绍一下Vue的生命周期
 *  为什么组件的data必须是一个函数
 *  组件之间是怎么通信的

![4c499713ccebb5cfc34b74d0f73aa0b2.png][]

**React**

*  介绍Redux，主要解决什么问题？数据流程是怎么样的？多个组件使用相同状态如何进行管理？
 *  React-Redux到react组件的连接过
 *  Redux中间件是什么东西，接受几个参数
 *  redux请求中间件如何处理并发
 *  如何配置React-Router
 *  路由的动态加载模块
 *  React生命周期及自己的理解，以及V16对生命周期的修改
 *  为什么使用虚拟dom？

**浏览器**

*  跨标签页通讯
 *  浏览器架构
 *  浏览器下事件循环(Event Loop)
 *  从输入 url 到展示的过程
 *  重绘与回流
 *  存储
 *  Web Worker
 *  V8垃圾回收机制
 *  内存泄露
 *  reflow(回流)和repaint(重绘)优化
 *  如何减少重绘和回流?
 *  一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
 *  localStorage 与 sessionStorage 与cookie的区别总结

![76722e51ef118d80817542d3d9458788.png][]

## **更多面试题及答案可以[【点击我】][Link 1]免费阅读下载哦~** ##

[25c7c222e8c625bd1ca9f014452edbbf.png]: /images/20221024/ef03ffb418114d03a4b4eb1e318e3b70.png
[02d97b7d1a8ae1d3b01bc61cd97624ee.png]: /images/20221024/a5b26db378f34f5daae9ae13d40cb3d2.png
[4c499713ccebb5cfc34b74d0f73aa0b2.png]: /images/20221024/c5e8b44b46864fa791e59fad35d6268d.png
[76722e51ef118d80817542d3d9458788.png]: /images/20221024/97a02800c3f640a2b114c7b4705fd1e5.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=ZEKfV3Ax