HTML目录

【基础】

• HTML 基础语法（HTML简介，HTML文档声明）
• HTML 元素（整体结构，块级元素，内联元素，结构元素，交互元素，元素嵌套规则）
• HTML 属性
• HTML 常用标签（a，img）
• HTML 表格
• HTML iframe 使用postMessage方法进行跨文档消息传递
• HTML 表单(form元素介绍，input元素的常用type类型，input元素的常用属性)
• HTML meta标签&base标签
• HTML 条件注释规范

【重难】

• attribute和property的区别
• 深入理解HTML表格
• table单元格中文字过长如何进行省略

CSS目录

【CSS2 基础】

• CSS文件引入
• CSS 选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
• 层叠和结构
• 长度单位em,rem
• CSS 样式关键字(initial,inherit,unset,revert,all)
• 伪类和伪元素
• *CSS 盒模型
• *CSS 视觉格式化
• line-height && vertical-align
• border
• CSS 外边距 margin
• CSS margin负值
• outline
• overflow
• css滚动条
• display
• visibility
• css浮动
• css清除浮动
• 颜色color
• 背景background
• 透明度opacity
• 光标cursor

【定位】

• position 定位之距离偏移
• position 定位之层级z-index
• 绝对定位
• 绝对定位的应用
• 相对定位和固定定位

【字体和文本】

• font字体
• iconfont字体应用实战
• 文本样式
• css文本方向
• 空白符和换行
• 文本溢出和文本阴影

【布局】

• grid栅格布局
• Media查询
• flex布局
• 移动优先的响应式布局
• 水平垂直居中
• 两端对齐布局
• 单列定宽，单列自适应
• 两列自适应布局
• 三列布局
• 三栏式布局
• 等分布局
• 等高布局
• 全屏布局
• sticky-footer布局

【CSS预处理语言】

• less
• sass && scss

【动画】

• 过渡transition
• 变形transform(2d)
• 变形transform(3d)
• 线性渐变linear-gradient
• 径向渐变
• 动画animation
• animate.css库使用

【规范】

• css 规范（reset , 命名）

• StyleLint

  【其它】

• css兼容总结
• haslayout总结
• css滤镜
• 剪裁clip
• clip-path
• 元素显示隐藏的思路
• css变量variable

【重点难点】

• BFC（格式化上下文）深入理解
• font-size为0消除inline&&inline-block元素间隙
• css中数学表达式calc
• height设置100%失效 && 分栏高度自适应布局
• css-modules

JavaScript目录

【ES5】
【基本概念】

• JavaScript 基础(语法、关键字和保留字、变量)
• JavaScript 基础(表达式)
• JavaScript 基础(动态脚本)
• JavaScript 基础(严格模式)
• JavaScript 运算符(语法概述)
• JavaScript 运算符(算术运算符)
• JavaScript 运算符(关系运算符)
• JavaScript 运算符(逻辑运算符)
• JavaScript 运算符(位运算符)
• JavaScript 运算符(条件、逗号、赋值、()和void运算符)
• JavaScript 语句(表达式语句、块语句、空语句和声明语句)
• JavaScript 语句(条件语句、循环语句和跳转语句)
• JavaScript 语句(eval和with)
• JavaScript 规范(javascript编码标准)
• JavaScript 规范(关于javascript代码优化的8点建议)
• JavaScript 规范(JS代码检查工具ESLint)

【变量、作用域和内存问题】

• JavaScript 基本类型和引用类型
• JavaScript 执行环境、作用域、内存管理及垃圾回收机制

【数据类型】

• 基本包装类型
• null和undefined
• (void 0) 与 undefined
• Boolean布尔类型
• Number数字类型
• Math对象
• String字符串类型
• String字符串类型的属性和方法

【数组】

• Array基础
• 数组方法总结
• 数组检测方式
• 判断两个数组是否相等的方法

【Date】

• 日期和时间基础知识
• Date日期对象
• 日历实现
• moment.js库的应用

【RegExp】

• 正则表达式基础
• RegExp类型
• javaScript模版引擎原理解析

【类型转换】

• toString() && valueOf()
• 数据类型转换
• JavaScript 有效的类型判断

【面向对象】

• Object类型基础知识
• 对象的属性操作
• 对象的属性描述
• 彻底理解prototype、proto和constructor的三角关系
• 构造函数和原型对象
• 创建对象的几种方式
• 对象继承的几种方式
• 面向对象的6个概念
• 对象的深复制浅复制

【函数表达式】

• 函数概述
• 函数参数
• 函数的属性和方法
• JavaScript 函数递归
• JavaScript IIEF 模仿块级作用域
• 深入学习 JavaScript 闭包
• 函数式编程
• 高阶函数
• 函数柯里化
• 函数节流和函数防抖
• 惰性函数

【事件】

• JavaScript 事件机制深入学习
• JavaScript 事件类型汇总
• 复制黏贴
• 浏览器事件循环EventLoop
• node 事件循环 EventLoop

【BOM】

• window对象
• location对象
• navigator对象
• screen对象
• history对象

【客户端检测】

• 能力检测
• 怪癖检测
• 浏览器检测

【DOM】

• 节点类型
• 获取节点
• 元素选择器
• DOM样式操作
• DOM遍历
• DOM中的范围

【元素尺寸】

• offset
• client
• scroll
• 回到顶部
• 元素视图的三个方法

【表单脚本】

• 表单的基础知识
• 文本框脚本
• 选择框脚本

【脚本化CSS】

• JavaScript 动态操作CSS

【HTML5新特性】

• 跨文档消息传递
• drag对象进行拖拽
• 视频播放器audio
• 音频播放器video
• 历史状态管理
• Web Worker

【错误处理与调试】

• 错误处理try-catch
• 前端错误调试的几种常用方法

【数据传递与格式】

• JSON语法
• XHR对象
• CORS
• 图片Ping
• JSONP
• iframe跨域
• Fetch
• axios
• 前端上传文件的理解

【存储】

• Cookie
• sessionStorage && localStorage

【模块化】

• amd && cmd && CommonJs && ES6模块化
• jquery插件是如何支持cmd,amd,commonJs

【高级技巧】

• call，apply，bind 方法详解
• setTimeout和setInterval
• 防篡改对象
• 滚动优化https://www.cnblogs.com/xiaohuochai/p/9188619.html
• 简易版jQuery——mQuery
• 实现富文本编辑器

【拖拽】

• 原生拖放
• 模拟拖拽
• 磁性吸附
• 碰撞检测
• 拖拽改变元素大小
• 模拟滚动条

【动画】

• JavaScript 运动系列总结
• 帧动画requestAnimationFrame
• velocity.js
• tween.js
• 拖放实现
• 模拟滚动条

【性能&规范】

• JavaScript 最佳实践
• JavaScript 代码优化建议
• ESLint

【重点难点】

• this
• 作用域

【ES5 其它】

• js浮点运算不精确的解决方案
• 如何实现中英文切换
• JavaScript 判断数组和对象是否为空的方法

【Babel】

• Babel 入门学习

【ES6基础】

• let 和 const 命令
• 变量的解构赋值
• 字符串的扩展
• 正则的扩展
• 数值的扩展
• 函数的扩展
• 数组的扩展
• 对象的扩展
• Symbol
• Set 和 Map 数据结构
• Promise
• promise源码实现
• Iterator 和 for...of 循环
• Generator 函数的语法
• async
• Class 语法
• Module 语法

【ES6难点】

• ES6 新增数组方法的实战用法

Node目录

【相关学习】

• semver规范（语义化版本）
• npm入门教程
• npm scripts 脚本基础指南
• mac中如何升级node,npm
• npm publish 发布

【基础】

• (1) 初识Node.js
• (2) 开发环境和调试工具
• (3) commonJs 规范
• (4) node 概念(global、process进程、调试)
• (5) node基础模块 path
• node基础模块 Buffer
• node基础模块 event
• node基础模块 fs
• node项目初始化
• node搭建静态资源服务器
• node单元测试 mocha
• node UI 测试

【http】

• Restful架构的理解
• node中的http请求
• node 处理get请求
• node 处理post请求
• node 搭建开发环境
• node 开发路由搭建

【数据库】

• node 操作mysql

【登录功能】

• node cookie
• node session
• node redis
• node nginx配置

【日志功能】

• node 文件操作
• node stream
• node 日志功能

【安全】

• sql注入
• xss攻击

【框架】

• express框架
• koa框架

【上线配置】

• PM2工具

【实战】

• node 爬虫实现
• 基于JWT标准的用户认证接口实现 https://www.cnblogs.com/xiaohuochai/p/8440335.html

网络协议目录

HTTP

【基础】

• HTTP入门学习
• 网络基础
• 数据传输
• 网站架构演化
• 连接管理
• 缓存

【组成】

• URL
• 报文起始行
• 报文首部

【结构】

• Web服务器
• 代理
• 网关、隧道和中继

【安全】

• Web攻击技术
• 客户端识别及Cookie
• 基本认证
• 摘要认证
• 安全HTTP

【编码】

• 实体和编码
• 字符集
• 内容协商

【内容发布】

• Web主机托管
• 重定向和负载均衡
• 日志记录

【重难】

• 从输入URL到页面加载的全过程https://www.cnblogs.com/xiaohuochai/p/9193083.html
• get方法和post方法的区别
• DNS预解析prefetch https://www.cnblogs.com/xiaohuochai/p/9185622.html

websocket

• websocket协议基础
• websocket聊天室项目实战

Nginx

• 使用nginx部署网站 https://www.cnblogs.com/xiaohuochai/p/9093819.html

移动端

• 移动端开发必须了解的知识
• 移动端高清屏适配方案
• 300ms以及点透事件产生的原因及处理方案
• rem布局详解
• JSBridge原理，js和native是如何通信的
• H5优化首页白屏时间过长
• Hybrid-App
• 移动端中的陀螺仪 https://www.cnblogs.com/xiaohuochai/p/8511935.html
• 移动web开发之touch事件 https://www.cnblogs.com/xiaohuochai/p/8293225.html
• 加载骨架屏幕

TypeScript

数据结构

• 数据结构之图 https://www.cnblogs.com/xiaohuochai/p/8185671.html
• 数据结构之树 https://www.cnblogs.com/xiaohuochai/p/8184989.html
• 数据结构之字典和散列表 https://www.cnblogs.com/xiaohuochai/p/8183020.html
• 数据结构之集合 https://www.cnblogs.com/xiaohuochai/p/8176248.html
• 数据结构之链表 https://www.cnblogs.com/xiaohuochai/p/8175716.html
• 数据结构之队列 https://www.cnblogs.com/xiaohuochai/p/8174854.html
• 数据结构之栈 https://www.cnblogs.com/xiaohuochai/p/8174742.html

设计模式

• 单例模式
• 观察者模式

算法

• 算法复杂度 https://www.cnblogs.com/xiaohuochai/p/8203717.html
• 算法模式 https://www.cnblogs.com/xiaohuochai/p/8203142.html
• 搜索算法 https://www.cnblogs.com/xiaohuochai/p/8203058.html
• 排序算法 https://www.cnblogs.com/xiaohuochai/p/8198275.html

代码管理工具

• git学习总结
• git分支管理策略
• github上如何进行PR(pullRequest)操作
• Git Commit Message
• Git Hook

浏览器

• 深入理解浏览器工作原理
• chrome devTools 使用教程
• 渲染机制
• 缓存机制
• 资源预加载preload和资源预读取prefetch简明学习https://www.cnblogs.com/xiaohuochai/p/9183874.html
• 使用chrome开发者工具中的performance面板解决性能瓶颈 https://www.cnblogs.com/xiaohuochai/p/9182710.html
• 使用chrome开发者工具中的network面板测量网站网络性能 https://www.cnblogs.com/xiaohuochai/p/9182165.html

Linux

• 常用bash命令
• Linux用户组、文件权限
• vim学习
• shell编程入门
• 操作系统理解：unix、linux、windows
• linux常用命令级管理

计算机基础

• base64原理及引用
• unicode编码
• 时间格式说明
• 虚拟主机
• 代理、网关、隧道

Web Components

• 可重用网络组件 Custom Elements
• 独立的网络组件 Shadow DOM

前端框架

【react】

• react实战项目开发(1) 搭建react开发环境初始化项目（Create-react-app）
• react实战项目开发(2) react基础语法之JSX
• [react实战项目开发() react组件条件渲染、列表渲染等基础语法]
• [react实战项目开发() react组件状态与组件生命周期]
• [react实战项目开发() react组件之间的传值]
• [react实战项目开发() react事件处理]
• [react实战项目开发() react实战todolist小项目]
• [react实战项目开发() react表单]
• [react实战项目开发() react类型检查]
• [react实战项目开发() react通过Refs访问DOM]

【vue】

• vue 实战视频学习
• vue 基础
• vue 全家桶搭建开箱即用的脚手架
• vue 实战xxx
• vue 是如何实现双向绑定的
• vue 源码阅读学习
• vue 相关深入学习 vuex 之类的

【AngularJS】

• AngularJS基础

【Angular】

• Angular 项目初始化
• ng 常用命令
• Angular 模板语法
• Angular 生命周期
• Angular 组件交互
• Angular 样式
• Angular 指令
• Angular 管道
• Angular 事件处理
• NgModule
• Angular 依赖注入(DI)与服务 service 详解
• [进阶]依赖注入实战
• [进阶] angular 中组件的引用
• Angular HttpClient
• Angular 内容投影 ng-content
• Angular 操作 DOM 详解
• 表单
  • 模板驱动表单
  • wip:【表单】响应式表单
  • 自定义表单验证器
  • 【表单】自定义表单控件

• 重难点

  • @Input() or @Inject() 该如何选择
  • @Input()的 set or ngOnChanges()

  【rxjs】

  • rxjs 简介

【路由】

• UI-Router 基础
• UI-Router Features
• UI-Router State对象
• UI-Router params参数详解
• UI-Router 常用指令
• UI-Router 搭建一个简单的后台管理

【状态管理】

• Mobx
• redux https://www.cnblogs.com/xiaohuochai/p/8652683.html

【visual DOM】

• diff算法

【框架的重点难点】

• vue 和 react 的区别
• 实现一个简单的 mvvm 框架
• 服务端渲染方案SSR
• 编写简单版的UI组件库
• 网站PWA升级https://www.cnblogs.com/xiaohuochai/p/9173959.html

单元测试

• 单元测试原则以及在开发中的作用
• 常见测试框架以及工具使用
• TDD理论以及操作原则
• TDD与BDD比较
• TDD实践

前端构建

• gulp
• webpack
  • webpack基础
  • webpack实战
  • webpack Tree-shaking深入学习
  • 抽象语法树AST
  • 手写一个plugin
• rollup.js
• 实现一个打包工具

性能优化

• 前端性能优化的七大手段https://www.cnblogs.com/xiaohuochai/p/9178390.html
• 图片优化https://www.cnblogs.com/xiaohuochai/p/9183454.html

前端安全

• 跨域问题
• 跨站脚本攻击（XSS）
• 富文本编辑器如何解决XSS问题
• CSRF攻击
• oAuth2.0

前端监控

前端架构

• 如何进行技术方案选型

计算机图形

canvas

svg

• svg 基本形状及样式设置
• svg 文本
• svg 路径
• svg 辅助标签
• svg 视野
• svg 坐标系统及图形变换
• svg 渐变

3D

常用工具

• Homebrew
• yarn
• lerna

插件库

• chart.js 实战配置、插件编写

jquery

• jquery如何编写插件
• jquery幻灯片插件
• jquery Deferred 对象

源码阅读

underscore

• underscore源码-内部方法
• underscore源码-外部方法

ant-design 源码

• checkbox的实现

发布

• 使用jenkins进行前端项目自动部署

写的更优雅

zc

【作业】

• setTimeout和setInterval
• 幻灯片插件
• 用代码写个日记

【周报】

• zc-第一周-周报
• zc-第二周-周报
• zc-第三周-周报

【内容core】

• 1、前端的自我修养
• 2、前端框架
• 3、前端规范
• 4、图片知多少
• 5、浏览器基础

IDEA

• IDEA快捷键

实战

• 积累一个自己的类库
• 使用react或者vue实现一个简易版的组件库