HTML5培训ppt课件

1、HTML5根底培训目录一 什么是HTML5二 HTML5新特性和那些效果三 HTML5目前存在的运用局限四 开放讨论：HTML5合顺运用于我们哪些工程？一 什么是HTML51 HTML历史今天1991年1994年1997年1995年2021年2 什么是HTML5官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它添加了新的标签和属性，强化了网页的规范、语义化、图像表达才干和交互效果。广义概念：HTML5代表阅读器端技术的一个开展阶段。在这个阶段，阅读器呈现技术得到了一个飞跃开展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS

2、API，SVG，WebGL3D等后面我们描画的HTML5就是基于广义来讲述二 HTML5新特性和运用HTML5新特性顺序待调整媒体支持：Video和Audio画布元素-Canvas以及WebGL视频加速加强的表单Form更炫的平面动画-CSS3页面渲染及 CSS3 3D矢量支持-SVGHTML5的图形机制比较-SVG vs Canvas离线运用原生的拖拽其他HTML5特性.媒体支持Video/Audio/webRTC当前运用场景视频点播直播-优酷HTML5版本视频聊天- Google html5视频聊天功能Audio Video & WebRTC 标签定义视频，比如电影片段或其他视频流。 标签

3、定义声音，比如音乐或其他音频流。WebRTCWeb Real-Time Communication 是运用在视频会议、实时广播、多方谈判、点对点运用程序等等的新的协议与 API用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进展点对点传输等等演示：10.51.50/html5/video/Video播放视频10.51.50:82/html5/audio - js创建声音Audio播放声音画布元素-Canvas以及WebGL视频加速运用场景流程图-我司某运营产品构建3D虚拟拓扑图-某3D网管Canvas APIcanvas ，HTML5

4、最等待元素之一，可以经过脚本可以恣意创建图形，编辑图形，导入图片，导出图片。其中分2D与3D：2D context API：根本线条、途径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。3D context APIWebGL： WebGl 定义了一套API, 可以允许在网页中运用类似于Open GL，实践上是一套基于OpenGL ES 2.0的3d图形API。这些API是经过HTML 5的canvas标签来运用的。演示：构造一个简单的Canvas 3D物体Canvas根本作图API之画板10.51.50/html5/Canvas Painter/10.51.50/html5/w

5、ebgl/cube.html加强的表单Form运用场景配置页面-添加配置的流畅性和容错性注册-添加注册的流畅性和无妨碍阅读10.51.50/html5/form2.0/demo1.html新的Form元素HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代码更为易用、简约和高效。这些新的东西包括：1 新元素：、Number、Range，color picker等2 新属性：placeholder、pattern、required、autofocus 、multiple等特性3 新款式：新的伪类款式，比如:focus,:required,:valid等4 新的输入方式-语音输入： x-

6、webkit-speech可以让标签接受语音并转化为数字演示：新特性选集10.51.50/html5/form2.0/all.html更丰富的款式支持- CSS3运用场景通讯录管理-图片墙首页portalCSS3新特性选择器RGBA和透明度多栏规划：弹性规划程度规划、垂直规划多背景图Word Wrap文字阴影font-face属性盒阴影：阴影，文本阴影盒模型：，多背景，圆角(边框半径)，边框图片2D：旋转，缩放，倾斜，请参考：CSS根底变换3D：透视，transform 3D，等等媒体查询语音演示10.51.50/html5/css3Explorer.htmlCSS3 Explorer.htm

7、l演示：CSS3 2D10.51.50/html5/bigbigwolf.html灰太狼 华为Logo10.51.50/html5/huaweilogo演示：CSS3 3D Google 3D box10.51.50/html5/Morphing power cuber/10.51.50/html5/google 3d box旋转的立方体SVG 矢量图形运用场景矢量地图-某产品构建多样的矢量图形-SmartUE图表工程10.51.50SVGchinaMap.svg10.51.50/SmartUEV2SVGSVGScalable Vector Graphics：可缩放矢量图形，运用 XML 来描

8、画二维图形和绘图程序的言语。可以在阅读器中构造 矩形、圆形、椭圆、线条、多边形、折线、途径、滤镜效果、渐变效果，和动画等演示：简单的图形元素10.51.50/SVG/rect2.svg复合图表10.51.50/SmartUEV2/UI/api/complexChart.htmlHTML5的图形机制比较:SVG VS Canvas一样点均是HTML5规范的一部分均能实现图形和动画均可以经过脚本编程控制显示不同点SVGCanvasDOM是！非！最大的区别！Everything is pixel是否矢量矢量，放大不失真像素操作，放大失真图形内存模式保留模式即发即弃。直接向它的位图呈现它的图形，然后对

9、所绘制的形状没有任何认知，只会得到最终的位图。基本图形种类丰富（线，圆，矩形，多边形，路径等）除了矩形，只有路径原生动画支持支持不支持。需要js去模拟，即刷屏3D不支持支持交互支持Dom事件只能用js根据坐标进行编程可访问性好。Xml结构易于分析差。程序无法感知内容，除非图像识别或专门做canvas内容映射最终实现的代码特征Svg标签+css，少量依赖js基本上是完全依赖js小结互有所长，均适用不同运用场景：SVG更适宜规那么图形的绘制和动画，更好管理。典型场景：图表，流程图等高保真度矢量文档。Canvas更适宜不规那么或涉及像素级的变化场景，更高效。典型场景：图片编辑和图形数据分析，位图动画

10、，2D游戏，3D虚拟空间等像素操作。离线运用运用场景频道缓存，海报缓存，减低效力器负载，提升用户开机体验-IPTV Webkit 机顶盒离线保管桌面和通讯录数据，定时和效力器同步-UC web版离线运用：让网络运用变为桌面运用离线存储使得他的web运用可以在用户离线的情况下进展访问。离线存储的两个特性：1 离线资源缓存2 本地数据存储 local storage离线存储技术技术显然至少有三个益处：1 最直接的益处就是用户可以离线访问他的web运用2 由于文件被缓存在本地使得web页面加载速度提升许多3 离线运用只加载被修正正的资源，因此大大降低了用户恳求对效力器呵斥的负载压力演示10.51.5

11、0:82/SmartUEV2/ (运用chrome15+观看)如何离线存储资源如何运用local storage 存储数据10.51.50/html5/localstorage/localStorage.html拖拽运用场景拖放文件实现上传和预览拖拽操作页面上的UI组件和数据Drag&Drop简介HTML5为元素新增了用于拖拽的属性draggable，这个属性决议了元素能否能被拖拽，或只能选择元素的文本。同时HTML5运用dataTransfer接口用来支持拖拽数据存储。三个重要特性：draggable属性：就是标签元素要设置draggable=true，否那么不会有效果，例如：列表1Data

12、Transfer对象：退拽对象用来传送的媒介，运用普通为Event.dataTransfer。Drag事件：ondragstart、ondragenter、ondragover、ondrop、ondragend演示如何实现本地文件拖拽至网页网页内拖拽事件演示10.51.50/html5/dragdrop/list.htm10.51.50/html5/dragdrop/imageview.html其他HTML5特性font-face使网页自在引入新的字体http10.51.50/html5/font/fontFace.html页面预渲染及可见性 rel=“prerender，提升页面翻开速度。更多观看：html5china/CSS3/20211226_725.htmlwebworkers：不影响用户主要义务的情况下，阅读器运转多个后台运转程序WebSockets：Web和效力器全双工通讯，收发信息不再有延迟Geolocation：允许Web运用感知位置，显示他地理位置附近的内容三 HTML5目前