HTML5学习路线_华清远见教育科技集团

华清远见HTML5课程发展史——4次技术革新

V1.0版本
V1.1版本
V2.1版本
V3.0版本

在V1.0基础上加入了以下内容：
①第五阶段：移动互联网应用——去掉小众移动端框架；
②第六阶段：特效开发高级实战——添加jqMobile；
③第七阶段：企业级应用开发——增加Ionic、多线程；
④通过canvas和Cocos2d-js制作2D网页游戏；
⑤企业级应用项目开发为主完成门户网站、仿新浪、仿京东、淘宝、饿了么、滴滴打车等阶段项目；
在V1.1基础上加入了以下内容：
①第一阶段：Web页面制作基础——精简压缩课程时间；
②第三阶段：编程基础技术——去除了js相关操作；
③第四阶段：后端开发技术——移除PHPCMS二次开发、模板开发；增加可选内容如主流框架tinkPHP、CodeIgniter；移除小众移动端框架；
④第七阶段：企业级应用开发——加入Ionic、多线程相关内容；
⑤丰富项目实战案例，如腾讯视频、后台管理系统、移动互联网站等；
在V2.1基础上加入了以下内容：
①优化课程顺序——Web页面制作、编程基础技术、移动互联网应用、特效开发高级实战、后端开发技术、企业级应用开发；
②编程基础技术阶段——javascript增加文件操作，ECMAScript6新特性；
③移动互联网应用阶段——加入Zepto、Touch、swiper+animate、微信小程序；
④特效开发高级实战阶段——加入mui内容；
⑤企业级应用开发阶段——加入Angular4、Vue、React、highcharts等；
丰富项目，如360官网、UC浏览器、360安全卫士、游久紫钥官网、仿北京银行、仿太平洋、仿微信、京东移动端、微信小程序、华清官网、Vue项目、React项目、 Angular项目、图标项目等；
定制HTML5课程体系，共7个阶段：
第一阶段： Web页面制作基础；
第二阶段： UI网站设计；
第三阶段：编程基础技术；
第四阶段：后端开发技术；
第五阶段：移动互联网应用；
第六阶段：特效开发高级实战；
第七阶段：企业级应用开发；

华清HTML5课程大纲重磅登场，引入时下热门框架

阶段一
阶段二
阶段三
阶段四

01
Web页面制作
学习目标：掌握传统pc端网页布局和制作

1.认识web前端和html
· web前端开发介绍
· CSS标记 · 开发工具
· CSS元素 · 开发环境介绍
· CSS属性 · 认识CSS
· 如何深度理解CSS · CSS优点
· 如何优化布局

2.标签及语义
· 常见标签
· 类型选择符 · 标签的理解
·类型分类 · 标签的用途
· 类型样式初始化 · 标签的合理使用
· 仿百度首页 · 认识A链接
· 仿美团网

3.block，inline-block介绍和使用
· 什么是块元素
· 如何正确使用 · 什么内嵌元素
· 流水式布局 · 如何理解这两者的区别
· 瀑布式布局 · 他们各自哪些特点
· 仿淘宝主页 · 块和内嵌元素如何转换
· 仿京东首页

本阶段可掌握的核心技能

掌握HTML5新增的智能表单的使用；掌握优化的各种方式；掌握响应式页面布局技术;使用touch框架搭建移动端页面、宣传页面；掌握swiper+animate框架；掌握微网站的开发过程与微信小程序开发；掌握如何开发移动端web应用;了解移动应用的流行框架 zepto并掌握移动端的手势与触摸事件。

本阶段可开发的实训项目

高防大型网站的模板、门户网站主要模板（新浪）、商城全部模板（京东）
02
编程基础技术
学习目标：JS完成一些常见网页特效开发

1.基本运算符
· + 加
· - 减 · * 乘
· / 除 · % 求余
· ++ 累加 · -- 累减

2.面向对象的编程
· 基本概念
· 类 · 封装
·聚合 · 继承
· 多态 · 创建对象
· 工厂模式 · 元素、属性和方法
· 构造器函数

3.不同数据类型数据的操作方法
· typeof操作符
· Undefined类型 · Null类型
· Boolean类型 · Number类型
· String类型 · Object类型
· Array类型 · 栈方法
· 队列方法

本阶段可掌握的核心技能

掌握JS基本语法与流程控制相关操作；使用JS结合HTML实现代表性的JS特效制作；可以独立完成网页中常见特效的编写以及第三方特效插件的使用；掌握文件操作&canvas；了解ECMAScript6新特性;

本阶段可开发的实训项目

结合js实现动态页面京东、淘宝、腾讯视频
03
移动互联网应用
学习目标：掌握现在主流的页面制作技术，可以完成微网站的制作和
微信小程序开发，并可以做到多设备兼容

1.HTML5的应用
· HTML5桌面平台开发用到的标签
· 标签语义化及标签的默认属性特点 · 标签的常用用法
· 新增的智能表单的应用 · 音频和视频标签的应用
· 视频格式与浏览器的支持 · 使用 DOM 控制HTML5 video
· 音频格式及浏览器支持

2.HTML5初级实战静态网页综合开发
· HTML5初级实战
· 静态网页综合开发 · 背景图合并技术
·图片处理技巧 · 框架的基本知识
· 嵌套合理化

3.CSS3应用
· CSS3的发展现状、CSS3中的新增选择器
· CSS3边框效果的讲解与应用 · CSS3阴影效果的讲解与应用
· CSS3透明度效果 · CSS3渐变效果、CSS3中对背景的相关操作
· CSS3中倒影效果的讲解与应用

本阶段可掌握的核心技能

掌握HTML5新增的智能表单的使用；掌握优化的各种方式；掌握响应式页面布局技术;使用touch框架搭建移动端页面、宣传页面；掌握swiper+animate框架；掌握微网站的开发过程与微信小程序开发；掌握如何开发移动端web应用;了解移动应用的流行框架 zepto并掌握移动端的手势与触摸事件

本阶段可开发的实训项目

饿了么，华侨城仿北京银行仿太平洋保险，仿微信，Swiper+animate项目，Zepto+touch项目，微信小程序
04
特效开发高级实战
通过实际项目开发，精通前端常用框架的实际应用
及问题解决，以及常见特效开发、前后台交互开发

1.AJAX详解
· AJAX的基本原理讲解
· XHR对象的基本知识 · JSON与XML的辨析
· AJAX框架的封装 · 同步加载与异步加载
· AJAX中的缓存问题 · 数据绑定和模板技术
· JSON和跨域技术

2.jQuery框架详解
· jQuery的基本语法
· jQuery中的常用选择器 · jQuery对于事件的处理
·jQuery中的动画知识与应用 · jQuery的文档操作
· jQuery对属性，CSS的修改和设置 · jQuery的核心与原理
· Jquery UI组件

3.Bootstrap
· Bootstrap 简介
· Bootstrap 配置 · Bootstrap响应式概念
· 使用Bootstrap布局页面和全局样式 · Bootstrap网格系统及工作原理
· Bootstrap各种常用组件 · Bootstrap常用插件应用

本阶段可掌握的核心技能

利用jQuery框架进行js特效开发；掌握Bootstrap的使用；了解AJAX的运行原理使用MUI库，完成Android和IOS的移动设置应用开发

本阶段可开发的实训项目

京东商城，腾讯视频PC端，MUI项目

PC/移动、Web前/后端，各大企业级真实案例全部get！

UC浏览器网站
vue项目实战
Angular+ionic项目
北京银行项目
Highchart项目
MUI框架项目

UC浏览器网站
整体目标
让学员简单的了解网页的布局和常用结构，常用样式处理等为学习后期基础打基础。
阶段目标
1.让学员对前端开发有一个基础的概念。
2.让学员简单掌握基础网页的开发流程。
3.简单掌握网页整体架构搭建。
学习效果
了解项目开发流程，了解开发工具使用，代码编写方式和语法基本规范。了解项
目常用结构布局与样式处理。
vue项目实战
整体目标
使用框架vue 搭建大型综合PC端项目，实现商品的添加，删除，购买，支付，登录注册等功能。
阶段目标
1.搭建VUE开发环境
2.掌握VUE语法结构及使用方法
3.熟练掌握vue组件的使用
4.掌握vue路由与数据请求
学习效果
熟练使用开发者工具，搭建使用VUE框架为基础的PC端项目。掌握VUE框架，组件等
Angular+ionic项目
整体目标
使用框架angular 搭建大型综合项目，实现商品的添加，删除，购买，支付，登录注册，购物车等功能。
阶段目标
1.介绍angular新特性，知识点与企业需求0对接
2.环境搭建和程序架构
3.使用angular组件开发项目架构
4.实现组件与组件之间的通信
学习效果
熟练使用开发者工具，搭建使用angular框架为基础的项目。掌握angular框架，组件，程序架构等。
北京银行项目
整体目标
了解简单的切图方式，了解移动端布局和编写方式。练习CSS3的新属性。吸引学员对H5的浓厚兴趣。
阶段目标
1.简单运用PS切图技术
2.了解移动端布局与编写方式
3.新属性效果并对新属性的简单运用
4.吸引学员对前端的浓厚兴趣
学习效果
掌握移动端布局与编写方式，CSS3新属性，了解简单的切图方式。
Highchart项目
整体目标
使用图表highchart框架搭建具有数据变化的时时数据更新功能的项目。
阶段目标
1.使用图表框架搭建企业需求项目
2.掌握图表框架的使用方法
3.数据列的使用
4.与后台数据的结合
学习效果
熟练掌握图表开发框架的使用，了解代码优化，培养学员兴趣。
MUI框架项目
整体目标
使用MUI框架搭建移动端原型项目。
阶段目标
1.掌握MUI开发技巧
2.学习代码时时更改时时调
3.使用真机测试，调试代码
4.打包生成手机端app
学习效果
使用移动框架快速搭建移动端界面，使界面媲美原生开发界面，大大节省了开发成本。掌握一次编写处处使用的能力。