课程简介

本课程主要讲解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案例-第四屏制作(下)

实战项目

携程网案例

携程网是一个专业的旅游平台。从项目部局分析可知，该项目应用flex技术进行整个页面的布局；完成项目的过程中，进行整体知识点的梳理和应用讲解，让学员在实践中深刻理解知识点的应用。

学完收获

1.了解H5的新增标签

2.熟练运用CSS3的新属性

3.能够做出各种酷炫的动画效果

4.通过插件实面页面的开发应用