HTML5总结.docVIP

HTML5总结 前些天看了IT最新动向，发现HTML5发展非常之快，所以这两天花了些时间学了一下，在网上查到的东西一般都很琐碎，我在这里稍微整理一下。 起步 首先，先了解一下HTML5的发展起步。 HTML5是W3C和WHATWG合作的结果。 注： W3C 指 World Wide Web Consortium，万维网联盟。 WHATWG 指 Web Hypertext Application Technology Working Group。网络超文本应用技术工作组 他们对HTML5建立了一些规则： 新特性应该基于HTML、CSS、DOM以及JavaScript 减少对外部插件的需求（比如Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5应该独立于设备 开发进程应该对公众透明 HTML5中一些有趣的新特性： 用于绘画的canvas元素 用于媒介回放的video和audio元素 对本地离线存储的更好的支持 新的特殊内容元素，比如article、footer、header、nav、section 新的表单控件，比如：calendar、date、time、email、url、search 最新版本的Safari、Chrome（谷歌浏览器）、Firefox以及Opera支持某些HTML5特性，IE9将支持某些特性。 Web视频 现如今，大多数的视频都是插件（比如Flash）来显示的，但是并非所有的浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法（不需要插件的哦！！！强大吧） 当前，video元素支持三种视频格式：Ogg、MPEG4、WebM 在HTML5中显示视频，您所需的只是这样写： video src=movie.ogg controls=controls 您的浏览器不支持该功能！ /video video 与 /video 之间插入的内容是供不支持 video 元素的浏览器显示的。 video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式： video width=320 height=240 controls=controls source src=movie.ogg type=video/ogg source src=movie.mp4 type=video/mp4 您的浏览器不支持该功能！ /video video标签的属性 Web音频 和视频一样，大多数音频都需要插件（比如Flash）才能播放，HTML5规定了一种通过audio元素来包含音频的标准方法。Audio元素能够播放声音文件或者音频流。 Audio元素支持三种音频格式：Ogg Vorbis、MP3、Wav 使用方法和video标签的方法一摸一样，超像的！ audion标签的属性 Canvas（在网页上绘制图形） HTML5的canvas元素使用Javascript在网页上绘制图形。 画布是一个矩形区域，您可以控制其每一像素 Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 向HTML5中添加canvas元素，方法如下： canvas id=myCanvas width=200 height=100/canvas 另外需要声明的是canvas元素本身没有绘图能力，所有的绘制工作必须在JavaScript内部完成。 现在绘制一个红色的矩形，如下： script type=text/javascript var c=document.getElementById(myCanvas); var cxt=c.getContext(2d); cxt.fillStyle=#FF0000; cxt.fillRect(0,0,150,75); /script 现在对这段代码进行解析： JavaScript使用id寻找canvas元素 var c=document.getElementById(myCanvas); 然后，创建context对象 var cxt=c.getContext(2d); getContext(2d) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 下面的两行代码绘制一个红色的矩形： cxt.fillStyle=#FF0000; cxt.fillRect(0,0,150,75); fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。 想看更多例子，请上W3School的HTML5课程！ 在客户端存储数据 HTML5的这个功能是让我感到最不可思议的，HTML5提供了两种在客户端存储数据的新方法 localStorage - 没有时间限制的数据存储 ses