HTML入门课程的教案.pptxVIP

HTML入门课程的教案第1页/共53页 一 什么是HTML5Page 2第2页/共53页 1 HTML历史Page 3第3页/共53页 2 什么是HTML5官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等减少互联网富应用对Flash、Silverlight、JavaFX等的依赖，并提供更多有效增强网络应用的API后面我们描述的HTML5就是基于广义来讲述Page 4第4页/共53页 3从事岗位设计师-需要熟悉交互设计和视觉设计，掌握Html5+CSS3+JS最佳；可从事产品设计、视觉设计和交互设计相关职位；程序员-需要熟悉Html5、CSS3、Javascript等Web前端开发技术，了解DOM、XML、JSON等相关技术，了解常见的JS开发框架。可从事前端工程师。求职途径:人才招聘网（chinahr,zhaopin,51job），微博，专业社区（威锋,机锋,CSDN,QQ群）薪水待遇5k-20k/m，猎头职位25-30K/mPage 5第5页/共53页 4 职业寿命第6页/共53页 二 HTML5新特性和应用Page 7第7页/共53页 HTML5新特性媒体支持：Video和Audio画布元素-Canvas以及WebGL视频加速增强的表单Form更炫的平面动画-CSS3页面渲染及 CSS3 3D矢量支持-SVGHTML5的图形机制比较-SVG vs Canvas本地数据库-离线应用-本地储存原生的拖拽后台异步化|双向信息传输|桌面提醒|地理位置定位其他HTML5特性..Page 8第8页/共53页 媒体支持Video/Audio/webRTCPage 9第9页/共53页 Audio Video WebRTCvideo 标签定义视频，比如电影片段或其他视频流。audio 标签定义声音，比如音乐或其他音频流。WebRTC（Web Real-Time Communication） 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 API（用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进行点对点传输等等）Page 10第10页/共53页 演示：一个轻量的，免费的，开源的视频播放器。当遇到不支持的视频时，它会强制使用Flash播放。Page 11第11页/共53页 演示：一个免费的HTML5音频、视频播放器，在所有的浏览器中提供统一的UI。Page 12audio src=Air Reviewvideo src=echo conference第12页/共53页 画布元素-Canvas以及WebGL视频加速Page 13第13页/共53页 Canvas APIcanvas ，HTML5最期待元素之一，可以通过脚本可以任意创建图形，编辑图形，导入图片，导出图片。其中分2D与3D：2D context API：基本线条、路径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。3D context API（WebGL）： WebGl 定义了一套API, 能够允许在网页中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的3d图形API。这些API是通过HTML 5的canvas标签来使用的。Page 14第14页/共53页 演示：第15页/共53页 演示：Html5策略型网页游戏《三国时代OL》Page 16第16页/共53页 三国时代OL ：采用了哪些HTML5canvas, application cache, localstorage, audio结合JS+CSS3+DIVcss3 animation, div transform第三方APIJQuery1.6, JQuery Mobile，JQuery tmpl跨平台iphone，android，Pad，PC浏览器自带，UC，QQ，fireforx，opera等Page 17第17页/共53页 WebGL Water第18页/共53页 增强的表单FormPage 19第19页/共53页 新的Form元素 HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括：1 新元素：Email、Number、Range，color picker等2 新属性：placeholder、pattern、required、a