《HTML5培训(共50张).pptx》由会员分享,可在线阅读,更多相关《HTML5培训(共50张).pptx(50页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、HUAWEI TECHNOLOGIES CO., LTDHuawei Confidential Security Level: 2022-5-8HTML5基础培训HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 目录l一一 什么是什么是HTML5l二二 HTML5新特性和那些效果新特性和那些效果l三三 HTML5目前存在的应用局限目前存在的应用局限l四四 开放讨论:开放讨论:HTML5适合应用于我们哪些项目?适合应用于我们哪些项目?Page 2一 什么是HTML5Page 3HUAWEI TECHNOLOGIES CO., LTD.Huawei
2、Confidential 1 HTML历史Page 4今天1991年1994年1997年1995年2009年HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 2 什么是HTML5l官方概念:HTML5草案的前身名为Web Applications 1.0,是HTML4的更新加强版本。它增加了新的标签和属性,强化了网页的标准、语义化、图像表达能力和交互效果。l广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,这些技术包括:HTML5,DOM3,CSS3,JS API,SVG,WebGL(3D
3、)等后面我们描述的HTML5就是基于广义来讲述Page 5二 HTML5新特性和应用Page 6HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential HTML5新特性(顺序待调整)l媒体支持:Video和Audiol画布元素-Canvas以及WebGL视频加速l增强的表单Forml更炫的平面动画-CSS3页面渲染及 CSS3 3Dl矢量支持-SVGlHTML5的图形机制比较-SVG vs Canvasl离线应用l原生的拖拽l其他HTML5特性.Page 7媒体支持媒体支持VIDEO/AUDIO/WEBRTCPage 8HUAWEI TECHNOLOG
4、IES CO., LTD.Huawei Confidential 当前应用场景Page 9视频点播直播-优酷HTML5版本视频聊天- Google html5视频聊天功能HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Audio Video & WebRTCl 标签定义视频,比如电影片段或其他视频流。l 标签定义声音,比如音乐或其他音频流。lWebRTC(Web Real-Time Communication) 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 API(用 navigator.getUserMedia 启动用
5、户计算机的摄影机,用 PeerConnection 进行点对点传输等等)Page 10HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示:Page 11http:/10.138.51.50/html5/video/Video播放视频http:/10.138.51.50:82/html5/audio%20-%20js创建声音l5/audio - js创建声音Audio播放声音画布元素-CANVAS以及WEBGL视频加速Page 12HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景流程图-
6、我司某运营产品构建3D虚拟拓扑图-某3D网管HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential Canvas APIcanvas ,HTML5最期待元素之一,可以通过脚本可以任意创建图形,编辑图形,导入图片,导出图片。其中分2D与3D:l2D context API:基本线条、路径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。l3D context API(WebGL): WebGl 定义了一套API, 能够允许在网页中使用类似于Open GL,实际上是一套基于OpenGL ES 2.0的3d图形API。这些API是通过HTML
7、5的canvas标签来使用的。Page 14HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示:Page 15构造一个简单的Canvas 3D物体Canvas基本作图API之画板http:/10.138.51.50/html5/Canvas Painter/http:/10.138.51.50/html5/webgl/cube.html增强的表单增强的表单FORMPage 16HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景Page 17配置页面-增加配置的流畅性和容错性注册-增加注册
8、的流畅性和无障碍浏览http:/10.138.51.50/html5/form2.0/demo1.htmlHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 新的Form元素HTML5的表单定义了十几个新的元素和特性,这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括:1 新元素:新元素:Email、Number、Range,color picker等2 新属性:新属性:placeholder、pattern、required、autofocus 、multiple等特性3 新样式新样式:新的伪类样式,比如:focus,:required,
9、:valid等4 新的输入方式-语音输入: x-webkit-speech可以让标签接受语音并转化为数字Page 18HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示:新特性全集Page 19http:/10.138.51.50/html5/form2.0/all.htmlall.html更丰富的样式支持更丰富的样式支持- CSS3Page 20HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景Page 21通讯录管理-图片墙首页portalHUAWEI TECHNOLOGIES CO
10、., LTD.Huawei Confidential CSS3新特性l选择器lRGBA和透明度l多栏布局:弹性布局(水平布局、垂直布局)l多背景图lWord Wrapl文字阴影lfont-face属性l盒阴影:阴影,文本阴影l盒模型:,多背景,圆角(边框半径),边框图片l2D:旋转,缩放,倾斜,请参考:CSS基础变换l3D:透视,transform 3D,等等l媒体查询l语音HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示Page 23http:/10.138.51.50/html5/css3Explorer.htmlCSS3 Explor
11、er.htmlHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示:CSS3 2DPage 24http:/10.138.51.50/html5/bigbigwolf.html灰太狼 华为Logohttp:/10.138.51.50/html5/huaweilogoHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示:CSS3 3D Google 3D boxhttp:/10.138.51.50/html5/Morphing power cuber/http:/10.138.51.50/html
12、5/google 3d box旋转的立方体SVG 矢量图形矢量图形Page 26HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景Page 27矢量地图-某产品构建多样的矢量图形-SmartUE图表项目http:/10.138.51.50SVGchinaMap.svghttp:/10.138.51.50/SmartUEV2HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential SVGlSVG(Scalable Vector Graphics):可缩放矢量图形,使用:可缩放矢量图形,使用 XML 来
13、描来描述二维图形和绘图程序的语言。可以在浏览器中构造述二维图形和绘图程序的语言。可以在浏览器中构造 矩形、圆形、矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果,和动画椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果,和动画等等Page 28HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 演示:Page 29简单的图形元素http:/10.138.51.50/SVG/rect2.svg复合图表http:/10.138.51.50/SmartUEV2/UI/api/complexChart.htmlHTML5的图形机制比较:SVG
14、 VS CANVASPage 30HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 相同点l均是均是HTML5规范的一部分规范的一部分l均能实现图形和动画均能实现图形和动画l均可以通过脚本编程控制显示均可以通过脚本编程控制显示Page 31HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 不同点Page 32SVGCanvasDOM是!非!最大的区别!Everything is pixel是否矢量是否矢量矢量,放大不失真像素操作,放大失真图形内存模式图形内存模式保留模式即发即弃。直接向它的位图呈现它
15、的图形,然后对所绘制的形状没有任何认知,只会得到最终的位图。基本图形种类基本图形种类丰富(线,圆,矩形,多边形,路径等)除了矩形,只有路径原生动画支持原生动画支持支持不支持。需要js去模拟,即刷屏3D不支持支持交互交互支持Dom事件只能用js根据坐标进行编程可访问性可访问性好。Xml结构易于分析差。程序无法感知内容,除非图像识别或专门做canvas内容映射最终实现的代码特征最终实现的代码特征Svg标签+css,少量依赖js基本上是完全依赖jsHUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 小结互有所长,均适用不同应用场景:互有所长,均适用不同应
16、用场景:lSVG更适合规则图形的绘制和动画,更好管理。典型场景:图表,流程图等高保真度矢量文档。lCanvas更适合不规则或涉及像素级的变化场景,更高效。典型场景:图片编辑和图形数据分析,位图动画,2D游戏,3D虚拟空间等像素操作。Page 33离线应用离线应用Page 34HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景Page 35频道缓存,海报缓存,减低服务器负载,提升用户开机体验-IPTV Webkit 机顶盒离线保存桌面和通讯录数据,定时和服务器同步-UC web版HUAWEI TECHNOLOGIES CO., LTD.Hu
17、awei Confidential 离线应用:让网络应用变为桌面应用离线存储使得你的离线存储使得你的web应用可以在用户离线的状况下进行访问。离线应用可以在用户离线的状况下进行访问。离线存储的两个特性:存储的两个特性:l1 离线资源缓存l2 本地数据存储 local storage离线存储技术技术显然至少有三个好处:离线存储技术技术显然至少有三个好处:l1 最直接的好处就是用户可以离线访问你的web应用l2 因为文件被缓存在本地使得web页面加载速度提升许多l3 离线应用只加载被修改过的资源,因此大大降低了用户请求对服务器造成的负载压力Page 36HUAWEI TECHNOLOGIES CO
18、., LTD.Huawei Confidential 演示Page 37http:/10.138.51.50:82/SmartUEV2/ (使用chrome15+观看)如何离线存储资源如何使用local storage 存储数据http:/10.138.51.50/html5/localstorage/localStorage.html拖拽拖拽Page 38HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 应用场景Page 39拖放文件实现上传和预览拖拽操作页面上的UI组件和数据HUAWEI TECHNOLOGIES CO., LTD.Huawe
19、i Confidential Drag&Drop简介HTML5为元素新增了用于拖拽的属性draggable,这个属性决定了元素是否能被拖拽,或只能选择元素的文本。同时HTML5使用dataTransfer接口用来支持拖拽数据存储。三个重要特性:ldraggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:列表1lDataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。lDrag事件:ondragstart 、ondragenter、ondragover、ondrop 、ondragend Page 40HUAW
20、EI TECHNOLOGIES CO., LTD.Huawei Confidential 演示Page 41如何实现本地文件拖拽至网页网页内拖拽事件演示http:/10.138.51.50/html5/dragdrop/list.htmhttp:/10.138.51.50/html5/dragdrop/imageview.html其他其他HTML5特性特性Page 42HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential lfont-face使网页自由引入新的字体http:/10.138.51.50/html5/font/fontFace.htmll
21、页面预渲染及可见性 rel=“prerender”,提升页面打开速度l。Page 43web workers:不影响用户主要任务的情况下,浏览器运行多个后台运行程序Web Sockets:Web和服务器全双工通信,收发信息不再有延迟Geolocation:允许Web应用感知位置,显示你地理位置附近的内容三 HTML5目前存在的应用局限Page 44HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential HTML5目前的局限l各浏览器支持程度不同。如目前支持较好的有各浏览器支持程度不同。如目前支持较好的有 Opera,Chrome,Safaril国内存在高比例旧款浏览器国内存在高比例旧款浏览器l兼容性不同,如视频格式兼容性不同,如视频格式l开发工具不健全开发工具不健全l规范未正式发布规范未正式发布l浏览器效率未到达理想浏览器效率未到达理想Page 45三 开放讨论HTML5适合于哪些项目?适合于哪些项目?Page 46HUAWEI TECHNOLOGIES CO., LTD.Huawei Confidential 其他一些例子lhttp:/ 47Thank youThank youThank you演讲完毕,谢谢观看!
限制150内