这是html5ppt模板，包括了HTML5简介，HTML5的canvas元素，HTML5的audio元素，HTML5的vedio元素，HTML5的vedio元素，HTML5的Web存储，HTML5的input类型，HTML5的表单属性以及总结等内容。
PPT预览
PPT内容
目录
HTML5简介
HTML5的canvas元素
HTML5的audio元素
HTML5的vedio元素
HTML5的vedio元素
HTML5的Web存储
HTML5的input类型
HTML5的表单属性
总结
什么是HTML5
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML5 是 W3C 与 WHATWG 合作的结果。
WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序
在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5的规则
为 HTML5 建立的一些规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
HTML5的新特性
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
浏览器对HTML5的支持
最新版本的
Chrome、Firefox、Safari
Internet Explorer 9(不支持Windows XP)
Internet Explorer 10预览版（只支持win7及以上版本）
搜狗双核浏览器、遨游双核浏览器
支持HTML5是一个趋势
浏览器分类简介
按内核分类：
Trident：又称为MSHTML，代表Internet Explorer
其他：Maxthon遨游、世界之窗、腾讯TT、Netcapter、Avant等等，但Trident只能应用于Windows平台，且是不开源的
Gecko：代表作品Mozilla Firefox Netscape6至9
能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行
WebKit：代表作品Safari、Chrome
Presto：代表作品Opera
HTML 5 Canvas
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
Canvas示例
Canvas绘制图形
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</body>
</html>
常用画图方法
Canvas使用图像
var img=new Image();
img.src=”myImage.jpg”;
drawImage(img,x,y);//img是image或者canvas对象，x和 y是其在目标canvas里的起始坐标
drawImage(img,x,y,width,height);// width 和 height 分别是图像在 canvas 中显示大小
HTML5 Audio
Web 上的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
HTML5 Audio
Audio元素支持三种格式：ogg Vorbis、mp3、wav
control 属性供添加播放、暂停和音量控件
<audio src="/i/song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
HTML5 Audio
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
HTML5 Audio
HTML5 Vedio
Web 上的视频
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
HTML5 Vedio
HTML5 中显示视频：
<video src="movie.ogg" controls="controls"> </video>
control 属性供添加播放、暂停和音量控件
HTML5 Vedio
HTML5 Web存储
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
HTML5 INPUT类型
HTML5 拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证。
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
HTML5 INPUT类型
email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值：
<input type="email" name="user_email" />
range 类型用于应该包含一定范围内数字值的输入域，range 类型显示为滑动条。
<input type="range" name="points" min="1" max="10" />
HTML5 INPUT类型
number 类型用于应该包含数值的输入域，还能够设定对所接受的数字的限定：
<input type="number" name="points" min="1" max="10" />
HTML5 表单属性
autocomplete属性：规定 form 或 input 域应该拥有自动完成功能。
autocomplete =“on”/“off”
autofocus 属性：规定在页面加载时，域自动地获得焦点，适用于所有 <input> 标签的类型。
autofocus=“autofocus”
HTML5 表单属性
novalidate 属性:规定在提交表单时不应该验证 form 或 input 域。
novalidate=“true”
placeholder 属性：提供一种默认值，会在输入域为空时显示出现，会在输入域获得焦点时消失。
placeholder=“默认值"
HTML5 表单属性
required 属性：规定必须在提交之前填写输入域（不能为空）。
required=“required”
相关文章
精彩导读
热门资讯
关注我们
