HTML5学习路线图

基础篇

适用/适合人群：适合零基础小白

目标：熟练掌握HTML和CSS搭建静态页面。

●技术点小节：

1.行业认知和学习环境配置    2.前端发展历史    3.浏览器发展历史    4.编辑器安装（sublime Text）    5.浏览器安装（chrome）    6.Photoshop工具安装

●XHTML+CSS2.0

1.XHTML语法规范    2.常用标签分类    3.W3C规范    4.了解SEO及运用    5.CSS基本语法和选择器    6.CSS样式基础库    7.盒模型布局    8.浮动和定位

●HTML5+CSS3

1.HTML5新标签    2.CSS3选择器和属性    3.CSS3过渡和动画    4.CSS3动画库animate.css    5.响应式布局    6.CSS3 弹性布局    7.移动适配基础库

●常用浏览器兼容

1.浏览器内核    2.IE6/7/8适配兼容    3.怪异盒模型    4.常见浏览器兼容问题

●综合实战-静态篇

1.京东/淘宝首页实战    2.360浏览器宣传实战    3.响应式网站：意英网    4.CSS预处理器-Less    5.Bootstrap    6.github使用

交互篇

适用/适合人群：拥有一定的HTML，CSS等前端页面搭建基础

目标：熟练搭建主流网站

●JavaScript基础

1.表达式和数据类型    2.分支和循环结构    3.数组和函数    4.js内置对象    5.闭包和作用域    6.call，apply和bind

●DOM和BOM

1.DOM节点操作    2.动态脚本    3.动态样式    4.选择器API

●动画特效

1.各种运动模式    2.运动框架    3.无间断大图滚动    4.tween.js和swiper.js

●事件交互

1.键鼠事件    2.滚动事件封装    3.事件阻止和冒泡

●数据交互

1.正则表达式    2.JONS    3.Ajax    4.数据模拟工具（Mock.js）    5.cookie

●Jquery和zepto

1.选择器    2.事件操作和动画    3.常用插件的使用    4.自定义插件

●综合实战-动态篇

1.京东/淘宝首页实战    2.360浏览器宣传页实战    3.移动端：锅打灰太狼    4.响应式网站：意英网    5.微信端：创想家圣典

进阶篇

适用/适合人群：具有一定的HTML，CSS基础，JavaScript基础扎实。

目标：具有系统化的编程设计思维

●JS面向对象的程序设计

1.面向对象思想    2.原型模式    3.再谈call和apply，bind    4.再谈闭包和作用域

●JS设计模式

1.设计原则    2.单例设计模式    3.代理设计模式    4.工厂设计模式

●Canvas

1.图形绘制    2.图片绘制    3.图标和视频绘制    4.交互与动画

●高级特性

1.HTML5新增API    2.高阶函数    3.ES6

●Canvas游戏引擎设计

1.框架设计    2.接口设计    3.方法封装    4.引擎实战

●综合实战-移动页面篇

1.H5游戏：贪吃蛇    2.H5游戏：打飞机

全栈篇

适用/适合人群：具有一定的HTML，CSS和JavaScript基础。
目标：掌握PHP，Mysql，安全攻防等技术，前后端融会贯通。

●PHP+Mysql

1.PHP基础语法    2.Mysql    3.PHP和HTML混编

●接口设计

1.HTTP    2.Restful接口设计

●ThinkPHP

1.基础API    2.架构和路由    3.数据库交互

●安全攻防

1.网络爬虫设计与实现    2.web安全基础    3.XSS漏洞利用与防御    4.CSRF漏洞利用与防御    5.HTML5新特性安全

●综合实战

1.前后端：书城展示页    2.前后端：书城管理页

高级篇

适用/适合人群：具有一定的HTML，CSS和JavaScript基础。
目标：掌握主流框架的解决方案。

●开发工具使用

1.常用打包工具（webpack，grunt，Gulp）    2.质量控制    3.模板引擎    4.babel    5.单元测试    6.项目脚手架运用

●架构模式

1.MVC    2.MVVM

●主流框架

1.Vue.js    2.Angular.js    3.React.js

●移动端开发

1.Hybrid App开发    2.微信小程序和公众号    3.React Native    4.Cordove，lonic

●框架开发

1.框架思想    2.封装框架    3.组件化编程思想

●综合实战

1.移动端：数钱，睿士，美丽中国，小样来挑战    2.APP：游轮旅游APP    3.Vue：饿了吗    4.pc：精英吧    5.小程序：豆瓣电影

实战篇

适用/适合人群：具有扎实的HTML，CSS和JavaScript技术能力，深入的编程思想，熟练的框架使用。
目标：熟练掌握企业项目开发流程，提高团队写作能力。

●项目分析

1.阅读文档    2.熟悉项目架构源码    3.项目架构分析    4.业务逻辑分析

●开发流程

1.代码管理工具    2.UML图例    3.进度评估    4.编程规范

●实战开发

1.任务迭代    2.项目重构    3.Code Reiew

●项目考核

1.每日审查    2.项目会议    3.项目测试    4.提交上线