这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。
大家好，我是鱼皮，肝了几天终于完成了这份保姆级前端学习路线。
+ =
先放一张图：
是不是有点儿长，感觉要被劝退了？不过不用担心，为了帮助大家更轻松地了解前端知识体系，我对这份路线撒了点 糖 ~
建议大家观看 B 站视频讲解，会清晰很多~
地址：https://www.bilibili.com/video/BV1nh411e7oG/
在我的公众号【程序员鱼皮】后台回复 “前端路线” 领取路线图 + 在线网站
以下是文档版：
路线特点
- 一份全面的前端知识点大梳理和汇总
- 分阶段学习，每个阶段给出学习目标
- 使用符号对知识点的重要程度做了区分，按需学习
- 知识点附有描述和资源链接
- 提供一份清晰的个人顺序学习路线方法
- 提供大量优质学习资源
符号表
可根据知识点前的符号按需选学，并获取知识点描述和学习资源。
⭐️ 必学（追求速成）
✅ 建议学（重要知识）
❗ 面试重点
❌ 一般没必要学习
描述
资源
目标
大纲
- 前言 – 学编程需要的特质
- 前端学习七阶段
- 前端入门
- 巩固基础
- 前端工程化
- 前端优化
- 前端生态
- 前端求职
- 前端未来
- 我的前端学习路线
- 尾声 – 持续学习
前言 – 学编程需要的特质
相信自己有能力，那么你就真的会有！
- 兴趣
- 坚持
- 付出
- 心态
一、前端入门
描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。
资源
- freeCodecamp 在线编程：https://learn.freecodecamp.one/
- 阿里云前端实战学习：https://edu.aliyun.com/roadmap/frontend
- W3Cschool 编程入门实战：https://www.w3cschool.cn/codecamp/
- pink老师前端入门教程：https://www.bilibili.com/video/BV14J4114768
目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。
⭐️ 开发工具
- 描述：工欲善其事，必先利其器。
浏览器
- ⭐️ Chrome
- ✅ Edge
- ✅ Firefox
- ❌ Opera
- Safari
编辑器
- ⭐️ VSCode
- ✅ WebStorm
- Atom
- ⭐️ Sublime Text
- HBuilder X
- 记事本
- 在线 IDE
文档笔记
- ✅ Markdown 语法
- ✅ Typora
- 在线笔记
- 语雀
- 腾讯文档
- 石墨文档
- 印象笔记
- Mdnice
⭐️ HTML
描述：用于定义一个网页结构的基本技术。
资源：https://developer.mozilla.org/zh-CN/docs/Learn/HTML
⭐️ 基本语法
⭐️ 标签
- 分区 div
- 标题 h1 ~ h6
- 段落 p
- 图像 img
- 列表 ul / ol
- 超链接 a
- 表单 form
- 表格 table
- 框架 iframe
⭐️ 属性
✅ HTML5 特性
- 语义化标签
- 浏览器支持
- 多媒体标签
- Canvas 画布
- ❌ 内联 SVG
- 本地存储
- localStorage
- sessionStorage
- ❌ Web SQL
- Web Workers
- 应用缓存（Cache Manifest）
- 无障碍
⭐️ CSS
描述：层叠样式表，用于设计风格和布局。
资源：https://developer.mozilla.org/zh-CN/docs/Learn/CSS
⭐️ 基本语法
⭐️ 引入方式
- 行内样式
- 内部样式表
- 外部样式表
⭐️ 选择器
- 通用选择器
- 标签选择器
- id 选择器
- class 选择器
- 属性选择器
- 派生选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 组合选择器
- 伪选择器
- 选择器优先级
⭐️ 属性
- 单位
- px
- em
- rem
- vw
- vh
- 背景
- 文本
- 字体
- 列表
- 表格
- 单位
⭐️ 文档流
- 标准流
- 浮动流
- 定位流
⭐️ 内联元素 / 块状元素
⭐️ 盒子模型
- content
- padding
- border
- margin
⭐️ 浮动
- 设置浮动 float
- 清除浮动 clear
⭐️ 定位
- static
- absolute
- fixed
- relative
- sticky
⭐️ 层叠规则
❗ BFC 和 IFC 机制
CSS3
- ⭐️ 响应式布局
- 媒体查询
- Flex 布局
- Grid 布局
- 瀑布流
- 动画
- 过渡
- 渐变
- 背景
- 边框
- 圆角
- 字体
- 2D / 3D 转换
- ⭐️ 响应式布局
⭐️ JavaScript
描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。
资源：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
⭐️ 基本语法
⭐️ 数据类型
- 值类型
- 字符串 String
- 数组 Number
- 布尔 Boolean
- 空值 Null
- 未定义 Undefined
- Symbol
- 引用类型
- 对象 Object
- 数组 Array
- 函数 Function
- 值类型
✅ 数据类型转换
✅ 函数
- ⭐️ 概念
- ⭐️ 自定义函数
- 调用方式
- ⭐️ 全局调用
- 构造函数调用
- ⭐️ 函数方法调用
- apply
- call
- ✅❗ 闭包
✅ 对象
- 概念
- this
- 原型链和继承
- 常用对象
- 数字 Number
- 字符串 String 对象
- 日期 Date 对象
- 数组 Array
- 布尔 Boolean
- 算数 Math
- 自定义对象
✅❗ 作用域（作用域链）
✅ BOM API
⭐️ DOM API
⭐️ JSON
⭐️ Ajax
✅ JavaScript 执行机制
✅ ES6+ 特性
描述：新引入的 JavaScript 语法特性。
资源：ES6 入门教程 https://es6.ruanyifeng.com/
let 和 const
变量解构赋值
对象扩展和新增方法
Symbol
Set 和 Map 数据结构
⭐️❗ Promise & async / await 异步编程
Generator 函数异步编程
二、巩固基础
描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。
资源
- 《JavaScript 高级程序设计》：https://www.code-nav.cn/rd/” />
您好，我是鱼皮，98 年生，有野心的天蝎座，20 届本科毕业加入 腾讯，从事全栈应用开发，同时也是 腾讯云开发高级布道师 。
我热爱学习和分享编程技术，在公众号、抖音、B 站、知乎、GitHub 等多个平台创作（都叫 “程序员鱼皮”），全网累计收获近 20w 粉丝的关注。
我熟悉多种编程语言和技术栈，包括但不限于 Java 后端、前端、小程序开发，在校期间就带工作室建设了几十个校园网站，以 专业第一 的成绩拿过国家奖学金、挑战杯学术竞赛国奖、上海市优秀毕业生，出版过区块链教材，也曾有过字节跳动、腾讯等三家公司的实习经历，甚至还有段创业经历，并成功积分落户上海。
此外，我独立开发了【编程导航】全栈项目（ https://www.code-nav.cn ），已经帮助上万名小伙伴找到优质编程学习资源！
感谢大家的关注~
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
- 《JavaScript 高级程序设计》：https://www.code-nav.cn/rd/” />
