2019年html5基础培训.pptVIP

2019-2-15 HTML5基础培训 目录 一 什么是HTML5 二 HTML5新特性和那些效果 三 HTML5目前存在的应用局限 四 开放讨论：HTML5适合应用于我们哪些项目？ Page 2 一 什么是HTML5 Page 3 1 HTML历史 Page 4 今天 1991年 1994年 1997年 1995年 2009年 2 什么是HTML5 官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等 后面我们描述的HTML5就是基于广义来讲述 Page 5 二 HTML5新特性和应用 Page 6 HTML5新特性（顺序待调整） 媒体支持：Video和Audio 画布元素-Canvas以及WebGL视频加速 增强的表单Form 更炫的平面动画-CSS3页面渲染及 CSS3 3D 矢量支持-SVG HTML5的图形机制比较-SVG vs Canvas 离线应用 原生的拖拽 其他HTML5特性.. Page 7 媒体支持Video/Audio/webRTC Page 8 当前应用场景 Page 9 视频点播直播-优酷HTML5版本 视频聊天- Google html5视频聊天功能 Audio Video WebRTC video 标签定义视频，比如电影片段或其他视频流。 audio 标签定义声音，比如音乐或其他音频流。 WebRTC（Web Real-Time Communication） 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 API（用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进行点对点传输等等） Page 10 演示： Page 11 0/html5/video/ Video播放视频 0:82/html5/audio - js创建声音 Audio播放声音 画布元素-Canvas以及WebGL视频加速 Page 12 应用场景 流程图-我司某运营产品 构建3D虚拟拓扑图-某3D网管 Canvas API canvas ，HTML5最期待元素之一，可以通过脚本可以任意创建图形，编辑图形，导入图片，导出图片。其中分2D与3D： 2D context API：基本线条、路径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。 3D context API（WebGL）： WebGl 定义了一套API, 能够允许在网页中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的3d图形API。这些API是通过HTML 5的canvas标签来使用的。 Page 14 演示： Page 15 构造一个简单的Canvas 3D物体 Canvas基本作图API之画板 0/html5/Canvas Painter/ 0/html5/webgl/cube.html 增强的表单Form Page 16 应用场景 Page 17 配置页面-增加配置的流畅性和容错性 注册-增加注册的流畅性和无障碍浏览 0/html5/form2.0/demo1.html 新的Form元素 HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括： 1 新元素：Email、Number、Range，color picker等 2 新属性：placeholder、pattern、required、autofocus 、multiple等特性 3 新样式：新的伪类样式，比如:focus,:required,:valid等 4 新的输入方式-语音输入： x-webkit-speech可以让标签接受语音并转化为数字 Page 18 演示：新特性全集 Page 19 0/html5/form2.0/all.html 更丰富的样式支持- CSS3 Page 20 应用场景 Page 21 通讯录管理-图片墙 首页portal CSS3新特性 选择器 RGBA和透明度 多栏布局：弹性布局（水平布局、垂直布局） 多背景图 Word Wrap 文字阴影 @font-face属性 盒阴影：阴影，文本阴影 盒模型：，多背景，圆角(边框半径)，边框图片 2D：旋转，缩放，倾斜，请参考：CSS基础变换 3D：透视，transform 3D，等等 媒体查询 语音 演示 Page 23 0/html5/cs