课程简介
本课程主要讲解H5中添加的丰富多彩的标签、表单以及多媒体，带领学员进入绚丽多彩的H5世界；同时也会讲述CSS3的前世今生，CSS3是CSS2的“进化”版本，在CSS2基础上，讲解CSS3增强或新增的众多特性以及相比CSS2的优势，让学员深刻体会CSS3对于Web开发的效率和便捷性的促进作用。
适合人群
1. 适合有HTML和CSS基础的同学
2.掌握一定的JS基础知识的同学
课程亮点
1.案例驱动，知识点由浅入深进行学习
2.知识内容全面，覆盖面广，可在多业务场景下应用
主讲内容
第一章 HTML5新增元素介绍和使用
01-HTML5CSS3-阶段任务说明
02-HTML5-什么是HTML5
03-HTML5-语义化标签的使用
04-HTML5-语义化标签的兼容性处理
05-HTML5-表单新增的type属性
06-HTML5-表单新增的其它属性
07-HTML5-表单新增元素(datalist)
08-HTML5-表单新增元素(keygen+output)
09-HTML5-新增的表单事件
10-HTML5-进度条
11-HTML5-表单总结案例
12-HTML5-音频和视频
12-HTML5-音频和视频标签的使用
13-HTML5-获取DOM元素
14-HTML5-操作元素类样式
15-HTML5-自定义属性
第二章 HTML5新增API介绍和使用
01-HTML5-网络监听接口
02-HTML5-全屏接口的使用
03-HTML5-FileReader的使用
04-HTML5-拖拽接口使用(上)
05-HTML5-拖拽接口使用(中)
06-HTML5-拖拽接口使用(下)
07-HTML5-地理定位接口(上)
08-HTML5-地理定位接口(下)
09-HTML5-Web存储_localStorage
10-HTML5-Web存储_sessionStorage
11-HTML5-应用程序缓存
12-HTML5-自定义播放器(接口说明与界面说明)
13-HTML5-自定义播放器(播放与暂停)
14-HTML5-自定义播放器(播放过程业务逻辑处理)
15-HTML5-自定义播放器(跳播和播放结束业务处理)
第三章 CSS3新增属性介绍
01-HTML5-CSS3简介
02-HTML5-属性选择器
03-HTML5-兄弟伪类
04-HTML5-相对于父元素的结构伪类
05-HTML5-伪类样式target
06-HTML5-伪元素(before after)
07-HTML5-其它伪元素的使用
08-HTML5-颜色模式之RGB
09-HTML5-颜色模式之HSL
10-HTML5-HTML5中两种颜色设置的方式
11-HTML5-文件阴影
12-HTML5-盒模型
13-HTML5-边框圆角
14-HTML5-案例-andorid机器人
15-HTML5-边框阴影
第四章 CSS3新增background相关属性介绍和使用
01-HTML5-线性渐变
02-HTML5-径向渐变
03-HTML5-重复渐变
04-HTML5-background(上)
05-HTML5-background(中)
06-HTML5-background(backgroundSize案例)
07-HTML5-background(下)
08-HTML5-边框图片(上)
09-HTML5-边框图片(中)
10-HTML5-边框图片(案例)
第五章CSS3新增过渡和转换属性介绍和使用
01-HTML5-过渡
02-HTML5-过渡案例-手风琴菜单
03-HTML5-transform2D转换(translate)
04-HTML5-transform2D转换(scale)
05-HTML5-transform2D转换(rotate)
06-HTML5-transform2D转换(skew)
07-HTML5-transform-origin
08-HTML5-同时添加多个transform属性值
09-HTML5-实现任意元素居中
第六章CSS3 3D效果
01-HTML5-3d移动
02-HTML5-3d缩放
03-HTML5-3d旋转
第七章 CSS3动画效果和案例实现
01-HTML5-立方体(上)
02-HTML5-立方体(下)
03-HTML5-3d变换(景深透视)
04-HTML5-动画(创建动画)
05-HTML5-动画的属性设置
06-HMLT5-动画案例-无缝滚动
07-HTML5-时钟案例-结构分析
08-HTML5-时钟案例-钟表结构代码实现
09-HTML5-时钟案例-时钟案例动画添加
10-HTML5-web字体
11-HTML5-字体图标
第八章 CSS3 Flex
01-HTML5-多列布局
02-HTML5-传统布局方式的局限
03-HTML5-伸缩盒子的属性-justify-content
04-HTML5-伸缩盒子的属性-flex-flow
05-HTML5-伸缩盒子的属性-flex-grow
06-HTML5-伸缩盒子的属性-flex-shink
07-HTML5-伸缩盒子的属性-flex
08-HTML5-伸缩盒子的flex属性的应用案例
09-HTML5-伸缩盒子的align-items属性
10-HTML5-伸缩盒子案例-宽高自动适应
第九章 携程网案例
01-HTML5-今天任务说明
02-HTML5-携程网页面结构分析
03-HTML5-携程网页面结构代码实现
04-HTML5-携程网页面样式添加(上)
05-HTML5-携程网页面样式添加(下)
第十章 切割轮播图案例
01-HTML5-切割轮播图结构分析
02-HTML5-切割轮播图结构样式实现(上)
03-HTML5-切割轮播图结构样式实现(下)
04-HTML5-切割轮播图功能实现
第十一章360案例
01-HTML5-360案例-全屏插件的简单介绍
02-HTML5-360案例-过渡和动画效果执行的时机
03-HTML5-360案例-第一屏内容的添加
04-HTML5-360案例-第一屏过渡效果的添加
05-HTML5-360案例-第二屏制作
06-HTML5-360案例-第三屏制作
07-HTML5-360案例-第四屏制作(上)
08-HTML5-360案例-第四屏制作(下)
