html基础教学ppt,HTML5基础培训ppt课件

PPT内容

这是HTML5基础培训ppt课件下载，主要介绍了什么是HTML5；HTML5新特性和那些效果；HTML5目前存在的应用局限；开放讨论：HTML5适合应用于我们哪些项目，欢迎点击下载。

HTML5基础培训 目录 一 什么是HTML5 二 HTML5新特性和那些效果 三 HTML5目前存在的应用局限 四 开放讨论：HTML5适合应用于我们哪些项目？ 一 什么是HTML5 1 HTML历史 2 什么是HTML5 官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL(3D)等 后面我们描述的HTML5就是基于广义来讲述 二 HTML5新特性和应用 HTML5新特性(顺序待调整) 媒体支持：Video和Audio 画布元素-Canvas以及WebGL视频加速 增强的表单Form 更炫的平面动画-CSS3页面渲染及 CSS3 3D 矢量支持-SVG HTML5的图形机制比较-SVG vs Canvas 离线应用 原生的拖拽 其他HTML5特性.. 媒体支持Video/Audio/webRTC 当前应用场景 Audio Video & WebRTC 标签定义视频，比如电影片段或其他视频流。 标签定义声音，比如音乐或其他音频流。 WebRTC(Web Real-Time Communication) 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 API(用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进行点对点传输等等) 演示： 画布元素-Canvas以及WebGL视频加速 应用场景 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标签来使用的。 演示： 增强的表单Form 应用场景 新的Form元素 HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括： 1 新元素：Email、Number、Range，color picker等 2 新属性：placeholder、pattern、required、autofocus 、multiple等特性 3 新样式：新的伪类样式，比如:focus,:required,:valid等 4 新的输入方式-语音输入： x-webkit-speech可以让标签接受语音并转化为数字 演示：新特性全集 更丰富的样式支持- CSS3 应用场景 CSS3新特性 选择器 RGBA和透明度 多栏布局：弹性布局(水平布局、垂直布局) 多背景图 Word Wrap 文字阴影 @font-face属性 盒阴影：阴影，文本阴影 盒模型：，多背景，圆角(边框半径)，边框图片 2D：旋转，缩放，倾斜，请参考：CSS基础变换 3D：透视，transform 3D，等等 媒体查询 语音 演示 演示：CSS3 2D 演示：CSS3 3D SVG 矢量图形 应用场景 SVG SVG(Scalable Vector Graphics)：可缩放矢量图形，使用 XML 来描述二维图形和绘图程序的语言。可以在浏览器中构造 矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画等 演示： HTML5的图形机制比较:SVG VS Canvas 相同点 均是HTML5规范的一部分 均能实现图形和动画 均可以通过脚本编程控制显示 不同点 小结 互有所长，均适用不同应用场景： SVG更适合规则图形的绘制和动画，更好管理。 典型场景：图表，流程图等高保真度矢量文档。 Canvas更适合不规则或涉及像素级的变化场景，更高效。 典型场景：图片编辑和图形数据分析，位图动画，2D游戏，3D虚拟空间等像素操作。 离线应用 应用场景 离线应用：让网络应用变为桌面应用 离线存储使得你的web应用可以在用户离线的状况下进行访问。离线存储的两个特性： 1 离线资源缓存 2 本地数据存储 local storage 离线存储技术技术显然至少有三个好处： 1 最直接的好处就是用户可以离线访问你的web应用 2 因为文件被缓存在本地使得web页面加载速度提升许多 3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服务器造成的负载压力 演示 拖拽 应用场景 Drag&Drop简介 HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽，或只能选择元素的文本。同时HTML5使用dataTransfer接口用来支持拖拽数据存储。三个重要特性： draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：

列表1

DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。 Drag事件：ondragstart 、ondragenter、ondragover、ondrop 、ondragend 演示 其他HTML5特性… @font-face使网页自由引入新的字体http://10.138.51.50/html5/font/fontFace.html 页面预渲染及可见性 rel=“prerender”，提升页面打开速度 。。。 三 HTML5目前存在的应用局限 HTML5目前的局限 各浏览器支持程度不同。如目前支持较好的有 Opera，Chrome，Safari 国内存在高比例旧款浏览器 兼容性不同，如视频格式 开发工具不健全 规范未正式发布 浏览器效率未到达理想 三 开放讨论 HTML5适合于哪些项目？ 其他一些例子 http://html5demos.com/ Canvas放大镜：http://neofreeman.freepgs.com/experiments/zoomr/puggy.html

相关PPT

UI设计基础培训课件(UI设计原则)ppt课件：这是UI设计基础培训课件(UI设计原则)ppt课件下载，主要介绍了什么是UI设计；UI设计师是如何去展开工作；UI设计师需要具备哪些能力；UI设计师如是何协助程序员们去实现页面开发的；APP设计中容易被忽略的细节，欢迎点击下载。

protel99se基础教程ppt课件：这是protel99se基础教程ppt课件下载，主要介绍了印刷电路板设计制作概述；Protel概 述；Protel 99 SE原理图设计快速入门；原理图的后处理；网络表文件的生成；印刷电路板(PCB)设计快速入门；如何提高印制电路板设计的可靠性；PCB设计工程注意事项，欢迎点击下载。

ISO27001信息安全培训基础知识ppt课件：这是ISO27001信息安全培训基础知识ppt课件下载，主要介绍了什么是信息；什么是信息安全；为什么实施信息安全管理 ；如何实施信息安全管理 ；信息安全管理体系(ISMS)概述；信息安全管理体系(ISMS)标准介绍；信息安全管理体系(ISMS)实施控制重点，欢迎点击下载。

《HTML5基础培训ppt课件》是由用户三秋远于2020-05-08上传，属于行业PPT。