HTML5技术培训详解.ppt

* * * HTML5 技术介绍 制作人：刘臣 目 录 HTML5简介 流行浏览器介绍 HTML5介绍 HTML5新特性 Canvas（画布） Video（视频） 数据存储 其他 小结 学习资料 HTML5 简介 流行浏览器介绍 IE（Internet Explorer）——微软：最广泛的网页浏览器 Firefox——Mozilla：支持多种操作系统 Safari——苹果公司：内建于Mac OS,也是iPhone与iPad的指定浏览器 Opera——挪威Opera Software ASA公司 Chrome——Google：开放源代码浏览器 HTML5 简介 HTML5 简介 HTML5 简介 HTML5发展历程 HTML(Hyper Text Markup Language) 超文本标记语言（第一版）——在1993年6月发为互联网工程工作小组（IETF）工作草案发布（并非标准） HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1996年1月14日，W3C推荐标准 HTML 4.0——1997年12月18日，W3C推荐标 HTML 4.01（微小改进）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准 XHTML ——依次经历了XHTML1.0、XHTML2.0 HTML 5 ——处于草案阶段 HTML5简介 与HTML5标准创建相关的组织 CERN(European Organization for Nuclear Research) IETF(Internet Engineering Task Force) W3C(World Wide Web Consortium) WHATWG(Web Hypertext Application Technology Working Group)(Apple, Mozilla, Opera) HTML5简介 HTML5标准解决的主要问题 浏览器支持标准的统一 降低网页插件的重要性 ——现HTML不支持音频或视频，没有发现、抓取、显示和控制流媒体甚至动画的能力，所以需要网页插件（flash，silverlight等）来支持。HTML 5具备支持音频或视频能力。 HTML5新特性 HTML5新特性 新的标签：内容元素（eg：article、footer、header、nav、section）、表单控件（eg：calendar、date、time、email、url、search）等等 画布（Canvas） 视频（Video） 数据存储 HTML5新特性 HTML5新的内容元素 HTML5新特性 HTML5新的表单控件 HTML5新特性 画布（Canvas）简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5新特性 Canvas与Svg SVG，全称为Scalable Vector Graphics（可伸缩矢量图形）。它是W3C制定的、用矢量描述图形的XML应用标准。它有着许多的优点，比如可扩充性（scalable），动态的，交互性强。SVG支持无极放大，对SVG图片进行任意比例的放大都不会损害图片的显示 Canvas ，HTML5新标签 HTML5新特性 canvas实例 canvas id=myCanvas width=150 height=150 /canvas var canvas = document.getElementById(myCanvas); var ctx = canvas.getContext(2d); ctx.fillStyle = rgb(200,0,0); ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = rgba(0, 0, 200, 0.5); ctx.fillRect (30, 30, 55, 50); HTML5新特性 svg实例 !DOCTYPE html html body svg width=200 height=200 rect x=0 y=0 width=100 height=100 fill=blue stroke=red stroke-width=5px rx=8 ry=8 id=myRect class=chart / /svg /body /html var rect = document.