2020/7/27,5基础培训,目录,一 什么是5 二 5新特性和那些效果 三 5目前存在的应用局限 四 开放讨论：5适合应用于我们哪些项目？,2,一 什么是5,3,1 历史,4,今天,1991年,1994年,1997年,1995年,2009年,2 什么是5,官方概念：5草案的前身名为 1.0，是4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。 广义概念：5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：5，3，3， ，（3D）等 后面我们描述的5就是基于广义来讲述,5,二 5新特性和应用,6,5新特性（顺序待调整）,媒体支持：和 画布元素以及视频加速 增强的表单 更炫的平面动画3页面渲染及 3 3D 矢量支持 5的图形机制比较 离线应用 原生的拖拽 其他5特性.,7,媒体支持,8,当前应用场景,9,视频点播直播-优酷5版本,视频聊天- 5视频聊天功能,&, 标签定义视频，比如电影片段或其他视频流。 标签定义声音，比如音乐或其他音频流。 （ ） 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 （用 启动用户计算机的摄影机，用 进行点对点传输等等）,10,演示：,11,播放视频,创建声音l5 - 创建声音,播放声音,画布元素以及视频加速,12,应用场景,流程图-我司某运营产品,构建3D虚拟拓扑图-某3D网管,，5最期待元素之一，可以通过脚本可以任意创建图形，编辑图形，导入图片，导出图片。其中分2D与3D： 2D ：基本线条、路径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。 3D （）： 定义了一套, 能够允许在网页中使用类似于 ，实际上是一套基于 2.0的3d图形。这些是通过 5的标签来使用的。,14,演示：,15,构造一个简单的 3D物体,基本作图之画板,增强的表单,16,应用场景,17,配置页面-增加配置的流畅性和容错性,注册-增加注册的流畅性和无障碍浏览,新的元素,5的表单定义了十几个新的元素和特性，这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括： 1 新元素：、， 等 2 新属性：、 、等特性 3 新样式：新的伪类样式，比如等 4 新的输入方式-语音输入： 可以让标签接受语音并转化为数字,18,演示：新特性全集,19,更丰富的样式支持- 3,20,应用场景,21,通讯录管理-图片墙,首页,3新特性,选择器 和透明度 多栏布局：弹性布局（水平布局、垂直布局） 多背景图 文字阴影 属性 盒阴影：阴影，文本阴影 盒模型：，多背景，圆角(边框半径)，边框图片 2D：旋转，缩放，倾斜，请参考：基础变换 3D：透视， 3D，等等 媒体查询 语音,演示,23,3,演示：3 2D,24,灰太狼,华为,演示：3 3D,3D,3d,旋转的立方体,矢量图形,26,应用场景,27,矢量地图-某产品,构建多样的矢量图形图表项目,（ ）：可缩放矢量图形，使用 来描述二维图形和绘图程序的语言。可以在浏览器中构造 矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画等,28,演示：,29,简单的图形元素,复合图表,5的图形机制比较:,30,相同点,均是5规范的一部分 均能实现图形和动画 均可以通过脚本编程控制显示,31,不同点,32,小结,互有所长，均适用不同应用场景： 更适合规则图形的绘制和动画，更好管理。 典型场景：图表，流程图等高保真度矢量文档。 更适合不规则或涉及像素级的变化场景，更高效。 典型场景：图片编辑和图形数据分析，位图动画，2D游戏，3D虚拟空间等像素操作。,33,离线应用,34,应用场景,35,频道缓存，海报缓存，减低服务器负载，提升用户开机体验 机顶盒,离线保存桌面和通讯录数据，定时和服务器同步 版,离线应用：让网络应用变为桌面应用,离线存储使得你的应用可以在用户离线的状况下进行访问。离线存储的两个特性： 1 离线资源缓存 2 本地数据存储 离线存储技术技术显然至少有三个好处： 1 最直接的好处就是用户可以离线访问你的应用 2 因为文件被缓存在本地使得页面加载速度提升许多 3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服务器造成的负载压力,36,演示,37,(使用15+观看),如何离线存储资源,如何使用 存储数据,拖拽,38,应用场景,39,拖放文件实现上传和预览,拖拽操作页面上的组件和数据,简介,5为元素新增了用于拖拽的属性，这个属性决定了元素是否能被拖拽，或只能选择元素的文本。同时5使用接口用来支持拖拽数据存储。三个重要特性： 属性：就是标签元素要设置，否则不会有效果，例如：列表1 对象：退拽对象用来传递的媒介，使用一般为。 事件：、,40,演示,41,如何实现本地文件拖拽至网页,网页内拖拽事件演示,其他5特性,42,使网页自由引入新的字体 页面预渲染及可见性 “”，提升页面打开速度 。,43,更多观看：,：不影响用户主要任务的情况下，浏览器运行多个后台运行程序,：和服务器全双工通信，收发信息不再有延迟,：允许应用感知位置，显示你地理位置附近的内容,三 5目前存在的应用局限,44,5目前的局限,各浏览器支持程度不同。如目前支持较好的有 ， 国内存在高比例旧款浏览器 兼容性不同，如视频格式 开发工具不健全 规范未正式发布 浏览器效率未到达理想,45,三 开放讨论,5适合于哪些项目？,46,其他一些例子,放大镜：,47,