web前端进阶教程目录_web前端开发进阶教程

一、学习准备

1. WEB前端是什么
2. 初步了解浏览器
3. 在浏览器输入网址到看到页面经历了哪些过程？
4. 新手理解HTML、CSS、javascript之间的关系

二、网页布局基础

HTML

1. HTML是什么,超文本是什么意思
2. HTML语法与文档结构
3. HTML文档头部head的结构与meta标签
4. HTML文档的标签分类
5. HTML表单标签及用法详解
6. 严格的xhtml
7. HTML5有什么新特性
8. 前端要掌握的字符集知识-让网页告别乱码

CSS

1. CSS入门与选择器
2. CSS属性详解1
3. CSS盒模型与定位
4. CSS盒模型与定位相关属性
5. CSS3的新特性
6. 使用CSS3制作网页动态效果入门
7. CSS颜色体系
8. CSS浏览器兼容与cssHack
9. CSS reset和常用样式
10. 前端优化-css优化CSS样式的书写顺序及原理

页面布局（Layout）

1. 前端页面布局方式的演变
2. 前端静态网页布局经验谈
3. 响应式布局与媒体查询原理
4. 一步步学习Flex弹性布局
5. 一步步学习grid网格布局
6. 移动端页面布局经验谈

相关知识

1. 前端SEO优化
2. 前端优化-网页图片优化
3. 提高前端开发效率—前端代码编辑器
4. 提高前端开发效率—使用Emmet提高前端开发效率
5. 提高前端开发效率—CSS预编译语言Sass、Less和Stylus
6. 提高前端开发效率—使用浏览器开发者工具

三、Javascript

1. Javascript简介

ECMAScript语法

1. ECMAScript基础语法
2. Javascript变量的声明、赋值、变量提升和作用域
3. Javascript数据类型
4. 用JS内存空间理解基本类型和引用类型的区别
5. Javascript运算符
6. javascript数据类型转换
7. Javascript语句
8. Javascript流程控制语句
9. Javascript中的对象入门
10. Javascript函数入门
11. Javascript执行顺序和执行环境
12. Javascript构造函数
13. JavaScript面向对象-创建对象
14. Javascript面向对象-对象属性详解
15. JavaScript面向对象-继承机制
16. JavaScript Object对象
17. JavaScript Number对象
18. JavaScript Boolean对象
19. JavaScript 字符串（String） 对象
20. JavaScript RegExp 对象
21. JavaScript 正则表达式语法
22. javascript中数组Array对象
23. JavaScript Date对象
24. JavaScript Math对象
25. JavaScript的JSON对象
26. JavaScriptJS运行机制-进程和线程
27. JavaScript运行机制-事件循环与任务队列
28. JavaScript的Error对象

JavaScript浏览器宿主对象

1. 前端要理解的widow对象
2. JavaScript 调试助手 -Console 对象

文档对象模型（DOM）

1. Javascript中的DOM(一) DOM树和节点
2. Javascript中的DOM(二) DOM 对象类型
3. Javascript中的DOM(三) 事件与Event对象

浏览器对象模型（BOM）

1. 浏览器对象模型BOM

JavaScript实现web通讯

1. AJAX和XHR实现浏览器与服务器的异步通信
2. 前端要了解的HTTP知识
3. 常用的HTTP请求方法
4. 前端实现WebSocket即时通讯

客户端存储API

1. 浏览器端的几种存储技术
2. 前端理解cookie
3. localStorage和sessionStorage
4. 离线缓存 application cache
5. 前端优化-缓存的利用

文件操作API

1. Javascript操作文件（一）-文件上传
2. Javascript操作文件（二）-读取与解析文件

ES6新特性

1. ES6新特性概览
2. ES6 声明与表达式
3. ES6 String的扩展
4. ES6 数组的扩展
5. ES6-for…of循环和遍历器
6. ES6新增的Set、WeakSet 、Map、WeakMap数据结构
7. ES6-对象的扩展
8. ES6-函数的扩展
9. ES6-生成器函数（generator function)入门
10. ES6-终于有了Class
11. ES6-Promise对象获取异步操作的消息
12. ES6-用Proxy和Reflect操作对象
13. ES6-Module 模块化

TypeScript语法基础

TypeScript是Javascript的超集，扩展了Javascript的语法，添加了可选的静态类型和面向对象编程。
通常 TS 中，声明变量的同时注解类型

1. TypeScript起步
2. TypeScript 的数据类型
3. TypeScript 接口(interface)
4. TypeScript 高级类型
5. TypeScript中的函数
6. TypeScript中的类
7. TypeScript新增的操作符
8. typescript 泛型

JSX语法基础

四、前端框架

Vue

Vue基础

1. 简单理解MVC、MVP、MVVM框架
2. MVVM 模式与Vue
3. Vue实例与组件入门
4. Vue模板语法
5. Vue组件（一）-常用选项methods、computed、filters、watch、props
6. Vue组件（二）-生命周期函数
7. Vue组件（三）-内置组件component、transition、 transition-group、keep-alive、slot
8. Vue组件（四）-组件之间的通信
9. Vue组件（五）- 组件的继承mixins、extends、provide、inject
10. Vue状态管理插件-Vuex入门
11. Vue中使用Axios实现Ajax异步通信入门
12. SPA中前端路由实现原理与Vue-Router前端路由模式
13. Vue中使用Vue-Router管理路由
14. Vue中router-link组件的属性
15. Vue中管理路由-vue-router路由配置
16. Vue异步组件和vue-router路由懒加载
17. Vue中管理路由-vue-router路由守卫
18. vue-router的addRoutes方法实现权限控制
19. Vue简介和知识体系

Vue进阶

1. windows系统搭建VUE环境(安装vue-cli)
2. 浅谈前端工程化（一）Nodejs和NPM
3. 浅谈前端工程化（二）Gulp和Webpack构建项目
4. 浅谈前端工程化（三）Webpack4构建项目入门
5. Vue项目（Vue cli3）中的配置文件
6. Vue项目开发规范
7. Vue项目中常用到的依赖包
8. Vue跨域问题解决方案
9. Webstorm2018中配置Vue开发环境详解
10. 前端单元测试和e2e测试
11. 在Vue 中使用 JSX 语法

angular

1. Angular CLI 构建项目及命令

五、js库

1. 前端常用的js库
2. Jquery 简化JavaScript 编程的js库
3. 用JavaScript 工具库Lodash处理数据
4. Bootstrap 响应式布局的HTML、CSS 和 JS 框架
5. qs-url参数转化 (parse和stringify)的轻量级js库k
6. MockJs用法详解
7. moment 日期处理类库
8. echarts 可视化图表库
9. validator.js 前端验证工具
10. animate.css CSS动画库

六、前端高级教程

1. 前端要懂的数据结构
2. 版本管理工具SVN
3. 版本管理工具 git
4. 前端优化
5. 前端安全