截图
简介
这是html5元素ppt，包括了什么是HTML5，HTML5新特性和那些效果，HTML5浏览器支持情况，HTML5移动开发框架介绍，HTML5目前存在的应用局限等内容，欢迎点击下载。
html5元素ppt是由红软PPT免费下载网推荐的一款课件PPT类型的PowerPoint.
<HTML5>介绍
目录
什么是HTML5？
HTML5时间表
HTML5的八大新特性
语义
语义化的标签
增强的表单控件
离线存储
Web 存储 (Web Storage)
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期。
sessionStorage - 用于存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束后数据也随之销毁。
以前，这些都是由 Cookie 完成的。但是 Cookie 有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页速度而且效率不高。
Web SQL DataBase
对于存储少量的数据，Web Storage能够很好的完成任务，但是对大量的结构化数据进行处理时，它就力所不及了，而这正是DB的应用所在。
DB严格遵循W3C的同源策略，每个源都拥有独立的存储空间，每个存储空间内又可以创建多个数据库，每个数据库可以包含多个表，每个表都是一个json对象列表，可以存储多个json对象，比如{"name": "sonic"， "age": 27}。
核心方法：
1. openDatabase(""，""，""，""，function(t){})//创建数据库，数据库名，版本号，描述，大小(b)，匿名函数(可省略)
2. transaction(function(tx){})//执行查询，匿名函数，tx，事物类型，负责实际的查询。
3. executeSql(""，[]，function(tx，result){}，function(tx，error){})//真正执行查询，sql语句，参数，成功函数(事物参数，结果集)，失败函数(事物参数，结果集)
Demo
var db = openDatabase(' DBName '，'1.0'，'test database'，5*1024*1024); //5MB
If(db) {
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT，msg TEXT，time INTEGER)'，[]);
})
db.transaction(function(tx){
tx.executeSql('SELECT * FROM MsgData'，[]，function(tx，result){
for(var i=0; i < result.rows.length; i++){
showData(result.rows.item(i));
}
});
})
db.transaction(function(tx){
tx.executeSql('INSERT INTO MsgData VALUES(?，?，?)'， [name，msg，time]， function(tx，result) {
}，function(tx，error){
result.innerHTML= error.source + ':' + error.message;
})
})
db.transaction(function(tx){
tx.executeSql('DROP TABLE MsgData'，[]);
})
}
Application Cache
使用Application Cache，你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用的。这时候你的网站工作起来就像是线上一样，并且他们不会感觉到和真正在线使用有任何差异。
那么，哪一部分文件是浏览器要保存的呢？这一切都定义在缓存清单文件中。
设备通用
拖拽与拖放 (Drag & Drop) 与 文件处理 (File API)
过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag & Drop 拖拽事件，再结合FileAPI 中的 FileReader，一切变得so easy~
连接
桌面通知 (Notifications)
通过桌面通知系统，网站可以在用户桌面弹出一条通知，无论用户是否浏览当前网页，甚至最小化了浏览器，通知均可到达用户桌面。
多媒体
音频和视频 (Audio + Video)
Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。
三维、图形与特效
Canvas 画布元素
传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好的“静态”的图像。而Canvas，则是用Javascript的一种绘图手段。
可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。
SVG 矢量图形
SVG（Scalable Vector Graphics）：可缩放矢量图形，使用 XML 来描述二维图形和绘图程序的语言。
可以在浏览器中构造 矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画等。
CSS3
CSS选择器 (CSS Selector)
颜色 (Color)
分栏 (Columns)
边框 (Border)与文本 (Text)
渐变 (Gradients)
变形 (Transforms)
浏览器支持情况
移动开发框架
Mobile Web框架比较
1、jQTouch
jQTouch 是一个 jQuery 的插件，主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、Android 等手机。
演示：http://jqtjs.com/preview/demos/main/#home
2、 jQuery Mobile
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile跟jQTouch相比很相似，但是更加标准，更有适应性，对用户接口和style的支持范围更加宽广了。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。
演示： http://jquerymobile.com/
3、Sencha Touch
这是个与Ext JS框架完全不同的产物，可以快速的开发出运行于移动终端的应用程序。使用Sencha与jQTouch/jQuery相比，虽然app很明显地不那么轻量级，但是其性能和可靠性方面明显提高了，不过其初始化加载时间略慢。全面兼容 Android 和 Apple iOS 设备。它拥有大量的用户接口组件，直接的iPad支持，拥有JSON和HTML5线下存储技术使得存储和数据绑定更加方便。
资料：http://www.cnblogs.com/mlzs/
http://www.sencha.com/products/touch/
http://docs.sencha.com/touch/2.2.1/
开发工具：Sencha Architect
4、 PhoneGap
PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian，WP7，Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。
PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点，因为虽然基本代码是一样的，但是你仍然需要为每个平台分别编译应用程序。
HTML5 PhoneGap
PhoneGap 功能特点
1、兼容性。
2、标准化。PhoneGap用W3C标准，特别标准，Web App直接一字不改就能运行。尤其是和JQ Mobile结合在一起使用，实在是威力无穷啊！
当然目前PhoneGap缺陷还是蛮多的，比如运行速度慢，UI反应延时——这是个致命伤。不过嘛，这种问题是会随着技术的进步而消失的。它的优势是无以伦比的：开发成本低——笔者个人估计，至多是Native App的五分之一吧。当然，Native App永远会有一席之地，比如高端游戏。
PhoneGap作为HTML5的一个跨平台框架，发展前景很大。
HTML5目前的局限
各浏览器支持程度不同。如目前支持较好的有 FIREFOX
，Chrome，IE8
国内存在高比例旧款浏览器
兼容性不同，如视频格式
开发工具不健全
规范未正式发布
浏览器效率未到达理想
THANK YOU
展开
