课程简介
HTML5代表了Web发展的方向,是开发者的未来,是新一代Web技术的标准。它在最大程度上完成了富Web应用的本地化,消除浏览器对插件的依赖;优秀的错误处理系统,使页面捕获错误更加灵活与高效;对本地离线存储的更好支持,使开发Web离线应用程序更加方便与快捷;众多新增的页面标记,将给用户的视角与交互带来焕然一新的体验。
本课程以HTML5基础为主线,先从新增特征讲起,然后,通过实例与理论相结合的方式,并结合最新最前沿的框架,深入浅出地介绍了关于HTML5在Web开发中方方面面的功能和性能优化的技巧。
目标收益
学习HTML5全部的新功能。
学会如何在Web页面开发中运用HTML5标签开发页面。
掌握在页面中使用HTML5新增的API进行功能开发。
了解通过HTML5中的Canvas基本使用功能。
理解HTML5中本地数据存储的方法与技巧。
掌握最新前沿前端框架的基础知识和开发技巧。
了解node和mocha框架的构建和应用。
培训对象
1. 正在从事传统PC端Web页面的技术开发人员
2. 希望从事移动端WebApp应用开发的技术人员
3. 对前端技术感兴趣,希望从事这方面工作的人员
4. 拥有前端的基础,希望进一步提升技能的开发人员
课程大纲
1. Html5概念与特征 |
1.1 Html5的标准和优势 1.2 移动设备的支持上更突出 1.3 常见的HTML5新标签与属性 1.4 新增的表单元素功能解析 |
2. 响应式设计功能与实战 |
2.1 响应式设计优势和功能 2.2 响应样式的兼容性与优劣比较 2.3 响应样式实现的方案 2.4 HTML 5页中实现响应效果 |
3. CSS 3动画与3D特效 |
3.1 文本阴影与圆角边框 3.2 图片遮罩效果 3.3 图片遮罩形成探照灯 3.4 2d基本效果 3.5 3d动画基本效果 3.6 制作过渡动画效果 3.7 过滤动画效果的各种状态 3.8 制作3d翻页效果 |
4. SASS 功能与应用 |
4.1 什么是SASS 4.2 安装和使用 4.3 基本用法定义变量、语句 4.4 代码复用完成继承功能 4.5 高级用法实现循环、条件、函数 |
5. 本地存储和数据持久方案 |
5.1 Localstorage与SessionStorage 5.2 存储形式和API调用 5.3 使用方式和跟踪用户行为 5.4 持久快速响应数据方案 5.5 数据离线API功能实现 |
6. 地理定位与重力感应 |
6.1 地理定位功能与API 6.2 找出地图中的商家信息 6.3 重力感应功能与API 6.4 实现摇一摇和切屏换图效果 |
7. canvas画布案例实战 |
7.1 画布功能和API 7.2 案例——亮视点找不同 7.3 案例——涂抹水漆效果 7.4 案例——图片合成功能 |
8. 前端代码性能优化方案 |
8.1 页面面临问题分析 8.2 找到性能解决方案 8.3 页面加载结构解析 8.4 Sprites图片技术 8.5 压缩与合并文件 8.6 代码模块化分级 8.7 接口请求性能优化 |
9. node基础与核心模块 |
9.1 环璄构建和REPL解析器 9.2 异步调用 9.3 回调函数 9.4 模块系统 |
10. socket通讯和聊天室 |
10.1 Socket.IO的功能与使用 10.2 node环璄下架构构建服务端接口 10.3 开发前端聊天室页面 10.4 使用socket与服务器实现通讯 |
11. Angular 8 框架应用开发 |
11.1 Angular的简介 11.2 组件开发流程 11.3 与服务端交互 11.4 注意事项与技巧 11.5 案例——电影信息管理网站 |
12. React 框架开发应用 |
12.1 环境搭建方法 12.2 开发语言介绍 12.3 组件API使用 12.4 与服务端异步交互 12.5 案例——餐厅点评信息管理 |
13. Vue框架基础应用 |
13.1 脚手架开发项目 13.2 组件传值方法 13.3 路由与指令 13.4 与服务端交互技巧 13.5 开发注意事项 13.6 案例——小米商城购物网站 |
14. 应用打包与发布 |
14.1 webpack 框架介绍 14.2 单页应用打包 14.3 配置文件的编写 14.4 热更新和动态导入 |
15. 正确理解单元测试 |
15.1 mocha基础知识 15.2 使用语法 15.3 异步测试 15.4 浏览器测试 |
1. Html5概念与特征 1.1 Html5的标准和优势 1.2 移动设备的支持上更突出 1.3 常见的HTML5新标签与属性 1.4 新增的表单元素功能解析 |
2. 响应式设计功能与实战 2.1 响应式设计优势和功能 2.2 响应样式的兼容性与优劣比较 2.3 响应样式实现的方案 2.4 HTML 5页中实现响应效果 |
3. CSS 3动画与3D特效 3.1 文本阴影与圆角边框 3.2 图片遮罩效果 3.3 图片遮罩形成探照灯 3.4 2d基本效果 3.5 3d动画基本效果 3.6 制作过渡动画效果 3.7 过滤动画效果的各种状态 3.8 制作3d翻页效果 |
4. SASS 功能与应用 4.1 什么是SASS 4.2 安装和使用 4.3 基本用法定义变量、语句 4.4 代码复用完成继承功能 4.5 高级用法实现循环、条件、函数 |
5. 本地存储和数据持久方案 5.1 Localstorage与SessionStorage 5.2 存储形式和API调用 5.3 使用方式和跟踪用户行为 5.4 持久快速响应数据方案 5.5 数据离线API功能实现 |
6. 地理定位与重力感应 6.1 地理定位功能与API 6.2 找出地图中的商家信息 6.3 重力感应功能与API 6.4 实现摇一摇和切屏换图效果 |
7. canvas画布案例实战 7.1 画布功能和API 7.2 案例——亮视点找不同 7.3 案例——涂抹水漆效果 7.4 案例——图片合成功能 |
8. 前端代码性能优化方案 8.1 页面面临问题分析 8.2 找到性能解决方案 8.3 页面加载结构解析 8.4 Sprites图片技术 8.5 压缩与合并文件 8.6 代码模块化分级 8.7 接口请求性能优化 |
9. node基础与核心模块 9.1 环璄构建和REPL解析器 9.2 异步调用 9.3 回调函数 9.4 模块系统 |
10. socket通讯和聊天室 10.1 Socket.IO的功能与使用 10.2 node环璄下架构构建服务端接口 10.3 开发前端聊天室页面 10.4 使用socket与服务器实现通讯 |
11. Angular 8 框架应用开发 11.1 Angular的简介 11.2 组件开发流程 11.3 与服务端交互 11.4 注意事项与技巧 11.5 案例——电影信息管理网站 |
12. React 框架开发应用 12.1 环境搭建方法 12.2 开发语言介绍 12.3 组件API使用 12.4 与服务端异步交互 12.5 案例——餐厅点评信息管理 |
13. Vue框架基础应用 13.1 脚手架开发项目 13.2 组件传值方法 13.3 路由与指令 13.4 与服务端交互技巧 13.5 开发注意事项 13.6 案例——小米商城购物网站 |
14. 应用打包与发布 14.1 webpack 框架介绍 14.2 单页应用打包 14.3 配置文件的编写 14.4 热更新和动态导入 |
15. 正确理解单元测试 15.1 mocha基础知识 15.2 使用语法 15.3 异步测试 15.4 浏览器测试 |