（2018干货系列二）最新HTML5学习路线整合

怎么学HTML5

HTML5是万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，一方面提高了用户体验，另外一方面HTML5技术跨平台，适配多终端，改变了传统开发者需针对不一样操做系统进行研发的局面。

面对不一样层次的人群，学习可分为如下几个大类。话很少说，直接上干货！

HTML5初级开发工程师

• HTML5课程介绍

  • 互联网发展趋势
  • H5语言的优点
  • 简单易学人人都能编程
  • H5就业和薪资状况
  • H5常见的项目与产品
  • H5的将来与方向

   

• HTML基础

  • HTML简介与历史版本
  • 经常使用开发软件
  • 常见标签与属性
  • 表格与表单
  • 标签规范与标签语义化
  • 实战：网页结构布局

   

• CSS基础

  • css简介与基本语法
  • 常见的各类样式属性
  • CSS选择器与标签类型
  • 理解盒子模型与CSS重置
  • 浮动与定位
  • 利用photoshop工具测量样式
  • HTML+CSS开发网页
  • 实战：高仿电商首页效果

   

• CSS3基础

  • css3常见样式
  • css3选择器
  • 变形与动画
  • 3D效果与关键帧
  • 弹性盒模型

   

• 移动端布局

  • 移动端基本概念
  • viewport窗口设置
  • 移动端布局方案
  • rem、vh、vw等单位
  • 响应式布局
  • bootstrap框架

   

• JavaScript基础

  • JS简介
  • JS变量
  • 数据类型与类型转换
  • 运算符与优先级
  • 流程控制-if..else
  • 流程控制-switch...case
  • 流程控制-while、do..while、for循环
  • break、continue语法
  • 函数定义与调用
  • 全局变量与局部变量
  • 函数传参与返回值
  • 函数做用域与变量做用域
  • DOM的基本操做
  • 定时器使用
  • this指向与修改指向
  • 数组、字符串等方法操做
  • 时间对象与正则对象
  • 掌握常见BOM操做
  • 常见事件与事件细节
  • JSON与AJAX
  • JSONP跨域操做
  • 前端cookie的使用
  • 实战：JS配合HTML与CSS完成电商项目

   

• jquery框架

  • jquery框架介绍及优点介绍
  • jquery核心思想
  • jquery常见方法
  • jquery动画操做
  • jqueryAJAX操做
  • jquery工具方法
  • 利用jquery快速开发网页

   

• PHP基础

  • PHP简介与基本语法
  • mysql数据库及sql语法
  • apache服务器与集成开发工具
  • PHP连接数据库
  • PHP与AJAX交互
  • 实战：留言板、登陆、注册等

   

• H5基础项目

  • 项目简介
  • 项目功能演示
  • 项目划分及框架
  • 编写HTML页面结构
  • 设置CSS样式
  • 添加JS交互
  • 可选框架：bootstrap、jquery、PHP等
  • 项目调试及兼容
  • 项目验收

   

HTML5中高级开发工程师

• 面向对象基础

  • 面向对象概述
  • 对象和构造函数（类）之间的关系
  • 对象的属性和方法
  • 原型与原型链
  • 包装对象与内部实现
  • 对象中实现继承方式
  • 设计模式及实际运用

• JavaScript高级

  • JS算法与排序算法
  • promise异步处理
  • 运动与tween算法
  • 闭包与模块化
  • JS组件开发
  • 打造小型jquery框架
  • JS性能优化
  • ES6新增功能

• 前端工程化

  • gulp基本使用
  • less、sass、babel等预编译框架
  • 理解模块概念，AMD与CMD规范
  • 前端模块框架seaJS、requireJS
  • webpack基本使用

• 多人协做

  • svn基本用法与可视化工具
  • 多人开发流程
  • git基本用法
  • 命令行操做
  • 分区及分支等概念
  • 远程github操做
  • 实战：多人协做开发项目

• HTML5新功能

  • canvas绘图
  • svg绘图
  • 音频与视频
  • 本地存储与离线存储
  • 地理信息
  • web Worker
  • web Socket

• NodeJS基础

  • node与npm概念及使用
  • node模块方式
  • node经常使用内置模块
  • node爬虫与文件自动化处理
  • node搭建服务器与简单路由
  • mongodb非关系数据库
  • mongodb安装与db操做
  • mongodb增删改查
  • mongodb与node结合开发
  • mongoose数据建模
  • mongoose与node结合开发
  • express框架
  • 中间件与ejs模板引擎
  • Robomongo与postman工具
  • express+mongoose搭建后端框架
  • 设计Restful API
  • 实战：先后端分离式开发

• 微信端开发

  • 移动端交互与移动端事件
  • 微信场景与swiper框架
  • 微信公众号介绍
  • 网页受权与JSSDK
  • 微信web开发者工具使用
  • 微信小程序开发
  • 实战：公众号与小程序项目同步开发

HTML5大神级开发工程师

• VueJS框架

  • Vue框架简介
  • 渐进式与响应式
  • 模板语法与计算属性
  • 指令与数据处理器
  • 生命周期
  • 组件与组件通讯
  • Vuex状态管理
  • Vue动画与路由
  • 单文件组件与脚手架
  • 基于Vue的组件框架
  • 实战：Vue与Node全栈开发

• ReactJS框架

  • React框架简介
  • JSX语法
  • 组件与组件通讯
  • 属性与状态设置
  • 虚拟DOM
  • 生命周期
  • redux架构
  • react-redux使用
  • react-router使用
  • Mem脚手架使用
  • 实战：React与Node全栈开发

• AngularJS框架

  • Angular框架简介
  • TypeScript基础与进阶
  • 开发环境配置
  • 架构、模块与组件
  • 模板、元数据与数据显示
  • 服务于指令
  • 依赖注入
  • 路由
  • 实战：Angular与Node全栈开发

• Hybrid App开发

  • App介绍与分类
  • Android/ios与H5通讯
  • Cordova/Phonegap框架
  • HTML5+基于HB工具
  • React Native

• 前端架构

  • 单元测试与编写测试用例
  • 自动化测试方案
  • 前端安全与HTTP协议
  • 项目上线与一键部署
  • 数据统计与SEO优化
  • 搭建组件库与按需载入
  • 浏览器渲染与浏览器引擎
  • 深刻理解后端开发模式