HTML5介绍PPT

1、介绍目录一 、什么是HTML5二、HTML5新特性和那些效果三 、HTML5浏览器支持情况四、HTML5移动开发框架介绍五、 HTML5目前存在的应用局限什么是HTML5？HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少对Flash、Silverlight、JavaFX等外部插件的依赖，并且提供更多能有效增强网络应用的API。资料介绍：1、c2、/2004年 提出构想2008年 发布第一份草案2012年 推广阶段2020年 最终测试2022年 正式发布HTML5时间表HTML5的八

2、大新特性语义离线存储设备通用连接多媒体三维、图形与特效性能与集成CSS3语义语义化的标签HTML5引入了新的HTML元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面中各部分间的关系，我们也可以搜索到更快，更准确的信息。http:/ 数字字段滑动组件类型匹配除了这些，还有搜索进度条25%And so on正则匹配必填字段选项列表 增强的表单控件离线存储Web存储(WebStorage)HTML5提供了两种在客户端存储数据的新方法：l localStorage-用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期。l sessionSto

3、rage-用于存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束后数据也随之销毁。以前，这些都是由Cookie完成的。但是Cookie有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页速度而且效率不高。localStorage.length;localStorage.key(index);localStorage.setItem(foo, bar); localStorage.getItem(foo);localStorage.removeItem(foo);localStorage.clear();WebSQLDataBase对于存储

4、少量的数据，WebStorage能够很好的完成任务，但是对大量的结构化数据进行处理时，它就力所不及了，而这正是DB的应用所在。DB严格遵循W3C的同源策略，每个源都拥有独立的存储空间，每个存储空间内又可以创建多个数据库，每个数据库可以包含多个表，每个表都是一个json对象列表，可以存储多个json对象，比如name:sonic,age:27。核心方法：1.openDatabase(,function(t)/创建数据库，数据库名，版本号，描述，大小(b),匿名函数(可省略)2.transaction(function(tx)/执行查询，匿名函数，tx，事物类型，负责实际的查询。3.execute

5、Sql(,function(tx,result),function(tx,error)/真正执行查询，sql语句，参数，成功函数(事物参数，结果集)，失败函数(事物参数，结果集)Demo var db = openDatabase( DBName ,1.0,test database,5*1024*1024); /5MBIf(db) db.transaction(function(tx) tx.executeSql(CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER),); )db.transaction(fun

6、ction(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.sour

7、ce + : + error.message; ) )db.transaction(function(tx) tx.executeSql(DROP TABLE MsgData,); ) ApplicationCache使用ApplicationCache，你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用的。这时候你的网站工作起来就像是线上一样，并且他们不会感觉到和真正在线使用有任何差异。那么，哪一部分文件是浏览器要保存的呢？这一切都定义在缓存清单文件中。CACHE MANIFEST# version 1.0.0#缓存 定义了哪些资源是浏览器可以缓存的CACHE:/html5/src/

8、logic.js/html5/src/style.css/html5/src/background.png#网络 定义了哪些资源是需要用户在线才能使用的NETWORK:*设备通用拖拽与拖放(Drag&Drop)与文件处理(FileAPI)过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag&Drop拖拽事件，再结合FileAPI中的FileRead

9、er，一切变得soeasy连接桌面通知(Notifications)通过桌面通知系统，网站可以在用户桌面弹出一条通知，无论用户是否浏览当前网页，甚至最小化了浏览器，通知均可到达用户桌面。if (window.webkitNotifications.checkPermission() = 0) var title = 最新消息, text = 做好文明单位志愿者网络注册登记工作的通知！ ; window.webkitNotifications.createNotification( images/picc.ico , title, text).show(); 多媒体音频和视频(Audio+Vid

10、eo)Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。三维、图形与特效Canvas画布元素传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好的“静态”的图像。而Canvas，则是用Javascript的一种绘图手段。可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。 var ctx = document.getElementById(canvas).getContext(2d); ctx.fillRect(20, 25, 150, 100); ctx.beginPath(); ctx.arc(22

11、0, 110, 100, Math.PI * 1/2, Math.PI * 3/2); ctx.lineWidth = 15; ctx.lineCap = round; ctx.strokeStyle = rgba(255, 127, 0, 0.5); ctx.stroke();SVG矢量图形SVG（Scalable Vector Graphics）：可缩放矢量图形，使用XML来描述二维图形和绘图程序的语言。可以在浏览器中构造矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画等。简单的图形元素复合图表CSS3CSS选择器(CSSSelector)属性选择器Eatt=val匹

12、配属性att的值以val开头的元素Eatt$=val匹配属性att的值以val结尾的元素Eatt*=val匹配属性att的值包含val字符串的元素结构性伪类E:nth-child(n)匹配父元素的第n个子元素，第一个编号为1E:nth-child(odd)匹配父元素的奇数个子元素E:nth-child(even)匹配父元素的偶数个子元素反选伪类E:not(s)匹配不符合当前选择器的任何元素同级元素选择器EF匹配任何在E元素之后的同级F元素完整的CSS3选择器：/TR/css3-selectors/#selectors颜色(Color)透明度：opacity: 0

13、.1;opacity: 0.5;opacity: 0.9;RGBA色彩模式：color: rgba(255, 0, 0, 0.75);PS: RGBA是在RGB的基础上多了控制alpha透明度的参数。HSL色彩模式：color: hsl(0, 100%, 50%);PS: HSL色彩模式是工业界的一种颜色标准，HSL分别代表色调，饱和度，亮度三个通道。分栏(Columns)column-count: 3;column-rule: 1px solid #bbb;column-gap: 2em;边框(Border)与文本(Text)圆角边框：border-radius: 20px 20px 20p

14、x 20px;盒阴影：box-shadow: 2px 2px 2px rgba(0,0,0,.5);文本阴影：text-shadow: 0 0 20px #5e5cc9;渐变(Gradients)线性渐变：background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);径向渐变：background: radial-gradient(red, yellow, rgb(30, 144, 255); 变形(Transforms)transform: skew(30deg, -10deg)

15、 浏览器支持情况http:/ OPERA 12SAFARI 6CHROME移动开发框架MobileWeb框架比较1、jQTouchjQTouch是一个jQuery的插件，主要用于手机上的Webkit浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript库。支持包括iPhone、Android等手机。演示：http:/ jQuery Mobile jQueryMobile是jQuery在手机上和平板设备上的版本。jQueryMobile跟jQTouch相比很相似，但是更加标准，更有适应性，对用户接口和style的支持范围更加宽广了。jQueryMobile不仅会

16、给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。演示：http:/ Touch 这是个与Ext JS框架完全不同的产物，可以快速的开发出运行于移动终端的应用程序。使用Sencha与jQTouch/jQuery相比，虽然app很明显地不那么轻量级，但是其性能和可靠性方面明显提高了，不过其初始化加载时间略慢。全面兼容 Android 和 Apple iOS 设备。它拥有大量的用户接口组件，直接的iPad支持，拥有JSON和HTML5线下存储技术使得存储和数据绑定更加方便。资料：http:/ http:/ http:/ Architec

17、t 4、 PhoneGap PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhoneSDK，Android的AndroidSDK等，也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点，因为虽然基本代码是一样的，但是你仍然需要为每个平台分别编译应用程序。HTML5 PhoneGap PhoneGap 功能特点功能特点 1、兼容性。 2、标准化。PhoneGap用W3C标准，特别标准，Web App直接一字不改就能运行。尤其是和JQ Mobile结合在一起使用，实在是威力无穷啊！当然目前Phone