下载文档原格式
WEB前端开发初学者必看的学习路线（附思维导图）
很多同学想学习WEB前端开发，虽然互联⽹有很多的教程、⽹站、书籍，可是却⼜不知从何开始如何选取。
看完⽹友⽆私分享的原标题为《写给同事的前端学习路线》这篇⽂章，相信你会有所收获。
前端开发⼊门学习有：HTML、CSS、JavaScript（简称JS）这三个部分。
所以在学习之前我们需要先明确三个概念：
1. HTML——内容层，它的作⽤是表⽰⼀个HTML标签在页⾯⾥是个什么⾓⾊。
2. CSS——样式层，它的作⽤是表⽰⼀块内容以什么样的样式（字体、⼤⼩、颜⾊、宽⾼等）显⽰。
3. JS——⾏为层，它的作⽤是当⽤户触发某些⾏为时，会给内容和样式带来什么样的改变。
⼀、HTML，CSS部分
⼆、JavaScript部分
三、web前端学习路线思维导图
web前端学习路线思维导图。
Web前端学习路线
HTML
HTML文档结构段落标签
文字标签图片标签超链接标签列表标签表格标签表单标签框架标签
HTML5新塔标签和属性
表单标签canvas标签媒体标签
CSS
CSS语法
CSS选择器ID选择器类选择器复合选择器CSS样式
背景文本字体
链接列表表格盒子模型
边框
外边距内边距CSS定位
相对定位
绝对定位浮动
CSS3新增属性CSS布局实战
JavaScript
基本语法变量数据类型函数运算符流程控制
JS对象
String对象Array对象Date对象Window对象Document对象
DOM搡作JS和CSS综合操作
jQuery
基础语法
选择器
基本选择器层次选择嚣
过滤选择嚣表单选择器DOM操作
查找节点创建节点插入节点删除节点复制节点
替换节点包裹节点属性操作样式操作遍历节点
事件
事件绑定合成事件
事件冒泡移除事件动国
show()、hide()fadeln()、fadeOut()slideUp()、slideDown()自定义动画animate()
动画回调函数
停止动画
表单、表格揉作常用jQuery插件
jQuery UI 综合实例
BootStrap
起步栅格系统
排版表格表单按钮图片
模态框、弹出框、警告框
标签页下拉菜单
按钮组、按钮式下拉菜单
导肮、导航条
分页标签、徽章
巨幕
BooStrap布局实例
响应式网站布局实践。
黑马软件学习计划思维导图一、学习目标1. 掌握Java或Python的基础语法和面向对象编程思想；2. 熟悉常用的数据结构和算法，并能够灵活运用；3. 学习后台开发框架的基础知识，如Spring、Spring Boot等；4. 熟悉常用的前端开发技术，包括HTML、CSS、JavaScript等；5. 了解常用的数据库操作技术，包括MySQL、MongoDB等；6. 掌握常用的项目管理工具和版本控制工具，如Git、Maven等；7. 学会使用常用的开发工具，如IntelliJ IDEA、Eclipse等；8. 能够独立完成一个小型的软件开发项目。
二、学习内容1. Java或Python基础- 语法和基本数据类型；- 流程控制语句；- 数组和集合；- 异常处理；- 文件操作；- 面向对象编程思想。
2. 数据结构和算法- 线性表；- 树和图；- 排序和查找算法；- 动态规划和贪心算法。
3. 后台开发框架- Spring框架；- Spring Boot框架；- MyBatis框架；- RESTful API设计。
4. 前端开发技术- HTML基础；- CSS样式布局；- JavaScript的基本语法；- AJAX和JSON；- Vue.js或React.js框架。
5. 数据库操作技术- MySQL数据库的增删改查；- MongoDB的基本操作；- 数据库设计和优化。
6. 项目管理工具和版本控制工具- Git的基本使用；- Maven的基本原理。
7. 开发工具- IntelliJ IDEA的基本使用；- Eclipse的基本使用。
8. 项目实战- 选取一个小型的软件开发项目，包括需求分析、技术选型、项目搭建、开发和测试、部署上线等阶段。
三、学习路径1. 阅读相关书籍和文档，掌握基础知识；2. 参加相关的在线课程或培训班，系统学习各项技术；3. 完成相关的练习和作业，巩固所学知识；4. 参与开源项目或小型项目开发，积累实战经验。
前端思维导图
42
npm模块安装机制
npm 是 Node 的模块管理器,功能极其强大;它是 Node 获得成功的重要原因之一;正因为有了npm,我们只要一行命令,就能安装别人写好的模块
参考 1参考 2
41
js检测数据类型
Javascript 有两种数据类型,分别是基本数据类型(6种)和引用数据类型
参考 1
40
SPA
靳肖健
单页面应用
39
sass
世界上最成熟、最稳定、最强大的专业级CSS扩展语言!
参考 1参考 2
38
使用键的集合对象
Map/Set/WeakMap/WeakSet 均为js标准内置对象;用于储存特别结构数据这些集合对象在存储数据时会使用到键,支持按照插入顺序来迭代元素
靳肖健
参考 1参考 2
37
前端优先遍历
JavaScript深度优先遍历和广度优先遍历
靳肖健
参考 1参考 2
靳肖健
36
NUXT
Nuxt.js 是一个基于 Vue.js 的通用应用框架;他预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置
参考 1参考 2
35
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
靳肖健
参考 1
34
严格模式
es5的严格模式是采用具有限制性JavaScript变体的一种方式
参考 1
33
模型与视图
设计模式是对在某种环境中反复出现的问题以及解决该问题的方案的描述;mv*设计模式被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化
用户界面的结构中
靳肖健
32
es6常用特性
es6标准于2015年6月正式发布了;它的目标,是使js可以用来编写复杂的大型应用程序,成为企业级开发语言
靳肖健
31
package
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息（比如名称、版本、许可证等元数据）
参考 1
30
代码设计模式
并不是所有设计模式都是适合 JavaScript 的,我们需要注意一些比较常见的设计模式,比如工厂模式/单例模式/发布-订阅模式
29
this
this完全取决于函数调用的地方,而不是它被声明的地方
靳肖健
28
闭包
当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行
27
高阶函数
高阶函数就是输入参数里有函数,或者输出是函数的函数
26
Node 异步
JavaScript 是单线程运行,异步操作特别重要;Node 的异步语法比浏览器更复杂
靳肖健
参考 1
25
flex
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性
参考 1
24
Web Worker
Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行
参考 1
23
http
超文本传输协议是应用层上的一种B/S模型的通信协议,它由请求和响应构成,且是无状态的
靳肖健
参考 1参考 2
22
Node
Node是JavaScript语言的服务器运行环境,首先JavaScript语言通过Node在服务器运行,其次Node提供大量工具库
靳肖健
参考 1
21
前端性能监控
性能很重要,开发迭代过程中难免会有所忽视,性能会伴随产品的迭代而有所衰减;我们需要一套性能监控系统持续监控/评估/预警页面性能状况/发现瓶颈,指导优化工作
的进行
靳肖健
参考 1
20
正则表达式
正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串/将匹配的子串替换或者从某个串中取出符合某个条
件的子串等
靳肖健
19
浏览器储存
浏览器存储常用的有cookie/localStorage/sessionStorage
靳肖健
18
数据结构
数据结构是计算机存储/组织数据的方式;数据结构是指相互之间存在一种或多种特定关系的数据元素的集合;通常情况下,精心选择的数据结构可以带来更高的运行或者
存储效率;数据结构往往同高效的检索算法和索引技术有关
靳肖健
17
堆排序
堆排序(Heapsort)是指利用堆这种数据结构一种排序算法
靳肖健
16
模块方案
网页越来越像桌面程序,需要一个团队分工协作/进度管理/单元测试等等;Javascript模块化编程,理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已
经写好的模块
15
typescript
TypeScript 是微软2012年推出的一种编程语言,属于 JavaScript 的超集,可以编译为 JavaScript 执行; 它的最大特点就是支持强类型
靳肖健
14
webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler);当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency
graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
靳肖健
13
选择排序
第一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,然后再从剩余的未排序元素中寻找到最小(大)元素,然后放到已排序的序列的末尾;以
此类推,直到全部待排序的数据元素的个数为零(不稳定)
12
插入排序
每步将一个待排序的记录,按其关键码值的大小插入前面已经排序的文件中适当位置上,直到全部插入完为止(稳定)
靳肖健
11
冒泡排序
它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果他们的顺序(如从大到小/首字母从A到Z)错误就把他们交换过来;走访元素的工作是重复地进行直到没有
相邻元素需要交换,也就是说该元素列已经排序完成(稳定)
10
js异步处理
在浏览器端,耗时很长的操作都应该异步执行
靳肖健
9
canvas
HTML5
靳肖健
8
Grid
网格布局(Grid)是最强大的 CSS 布局方案;Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局;Grid 布局则是将容器划分成"行"和"列",产生单
元格,然后指定"项目所在"的单元格,可以看作是二维布局
7
web 开发框架
koa2与express 提供的API大致相同,express是大而全,内置了大多数的中间件,更让人省心,koa2不绑定任何的框架,干净简洁,小而精,更容易实现定制化,扩展性
好.express是没有提供ctx来提供上下流服务,需要更多的手动处理,express本身是不支持洋葱模型的数据流入流出能力的,需要引入其他的插件.
6
JWT
JSON Web Token(JWT)是目前最流行的跨域认证解决方案
靳肖健
5
RESTful API
RESTful 是目前最流行的 API 设计规范,用于 Web 数据接口的设计
4
proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程;Proxy 实际上重载
(overload)了点运算符,即用自己的定义覆盖了语言的原始定义;Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”;
靳肖健
3
常见网络攻击
常见网络攻击:XSS攻击全称跨站脚本攻击是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.CSRF站请求伪造是
一种对网站的恶意利用.CSRF通过伪装成受信任用户的请求来利用受信任的网站.CSRF攻击往往不大流行(因此对其进行防范的资源也相当稀少)和难以防范,所以被认为比
XSS更具危险性
2
deno
Node 之父 Ryan Dahl 发布新的开源项目 deno,从官方介绍来看,可以认为它是下一代 Node,使用 Go 语言代替 C++ 重新编写跨平台底层内核驱动,上层仍然使用 V8
引擎,最终提供一个安全的 TypeScript 运行时
靳肖健
1
PWA
PWA(Progressive web apps)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序
靳肖健
