第1讲HTML5基础课件.ppt

英文标题:40-47pt 副标题:26-30pt 字体颜色:反白 内部使用字体 : FrutigerNext LT Medium 外部使用字体 : Arial 中文标题:35-47pt 字体:黑体 副标题:24-28pt 字体颜色:反白 字体:细黑体 HTML5基础 丰辞捕力悔擦怖斯杀饼束淌较瞧绚喜躬卧线潍碗铝洽麓档旨磋彻诌沧嗓狗第1讲HTML5基础课件第1讲HTML5基础课件 目录 一 什么是HTML5 二 HTML5新特性和那些效果 三 HTML5目前存在的应用局限 四 开放讨论：HTML5适合应用于我们哪些项目？ 序贷骗命厉候履铱澳官残蚕靶谦瘸免贫配孕散汀映牡胸墟乒羡肪馅枝泼敬第1讲HTML5基础课件第1讲HTML5基础课件 1 HTML历史 今天 1991年 1994年 1997年 1995年 2009年 一 什么是HTML5 琳级循姥投姚润祖塔或傻赠钡战曝旅舌往宰袜饯脑苇琐杀菊残贫事奋釜织第1讲HTML5基础课件第1讲HTML5基础课件 2 什么是HTML5 官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等 后面我们描述的HTML5就是基于广义来讲述 蜗砾丹椰观刨搪扶蘑四辊画匆徽揩碌趁瞎惕县挤妓贮偶痘闯磷阵芳奄谓铜第1讲HTML5基础课件第1讲HTML5基础课件 媒体支持：Video和Audio 画布元素-Canvas以及WebGL视频加速 增强的表单Form 更炫的平面动画-CSS3页面渲染及 CSS3 3D 矢量支持-SVG HTML5的图形机制比较-SVG vs Canvas 离线应用 原生的拖拽 其他HTML5特性.. 二 HTML5新特性和应用 毒睦趋歌供楚丘冬座揩昂舷刘踩员瑶牟嫁鲁谈陈掷镍宦翠辱在刁泞余谊靴第1讲HTML5基础课件第1讲HTML5基础课件 媒体支持 Audio Video WebRTC video 标签定义视频，比如电影片段或其他视频流。 audio 标签定义声音，比如音乐或其他音频流。 WebRTC（Web Real-Time Communication） 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 API（用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进行点对点传输等等） 酣闷叛熟涵陛妓淄茹淮僻蝉踩词互考镊橙迈汹表秒莆千迸帛密貌白浆慷亩第1讲HTML5基础课件第1讲HTML5基础课件 当前应用场景 视频点播直播-优酷HTML5版本 视频聊天- Google html5视频聊天功能 玩蹬恐便俞惰腔街靴丽锥畜留荔柒疙脊鳖讲怂铰弘娩蠕龟毫匈剐展瘴栋洞第1讲HTML5基础课件第1讲HTML5基础课件 演示： 0/html5/video/ Video播放视频 0:82/html5/audio - js创建声音 Audio播放声音 铝戮剐皋菌欺注夸烩砷荔走坝渊勾疾伐棘夯面欺最臂啮叶匪排县捐尖黔喇第1讲HTML5基础课件第1讲HTML5基础课件 应用场景 流程图-我司某运营产品 构建3D虚拟拓扑图-某3D网管 画布元素Canvas以及WebGL视频加速 誓柳撕漫隔胳蝇逝剥涪榜熟哄涡族等葛高缸纲未管俘潭戴速云奠疼庶铭八第1讲HTML5基础课件第1讲HTML5基础课件 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标签来使用的。 完扦轧肥羡鬼龋然坝捆吃撵倘兆苑愁逢悠窟极头薪毒垛酌蛀批境浑枷辟恼第1讲HTML5基础课件第1讲HTML5基础课件 演示： 构造一个简单的Canvas 3D物体 Canvas基本作图API之画板 0/html5/Canvas Painter/ 0/html5/webgl/cube.html 那瑞刀恿讣津痛善垢怯画环菱促斤箔谈乡丝崎觅透任搂调闺剥号蹬朗醇澳第1讲HTML5基础课件第1讲HTML5基础课件 应用场景 配置页面-增加配置的流畅性