HTML5应用经验分享--.pptVIP

Covics Business Solution Ltd. ? * * Covics Copyright 2012 ? 研发经验分享 HTML5 应用分享 HTML5简介 是目前被广泛应用的HTML 4.01的后续版本，未来将成为 HTML、XHTML?以及 HTML DOM 的新标准。 目前HTML5 仍处于完善之中，但大部分现代浏览器已开始对HTML5的支持。 特点： 强化网页展现效果方面的能力。 增加本地缓存、位置等应用功能。 1. 增加header, nav, footer等新标签、属性 2. email, url等新的表单对象 3. 支持离线存储 4. Canvas绘图对象 新特性 5. 位置服务 6. 多媒体回放 7. 文档编辑 8. 拖拽控制 为什么使用HTML5 文档结构清晰，更容易理解 更好的用户交互能力，提供良好的用户体验 专为移动设备提供的特性 规范不断丰富，是未来移动互联应用的标准 支持HTML5的浏览器 使用HTML5的好处 一些以HTML5实现的应用 在线图片编辑 Game 图表 地图 微门户 HTML5新特性 meta标签 viewport: 定义viewport宽度和缩放设置 示例： meta name=viewport content=width=device-width; initial-scale=1.0;user-scalable=no;/ apple-mobile-web-app-capable：全屏显示（隐藏地址栏和菜单栏） 示例： meta name=”apple-mobile-web-app-capable” content=”yes” / format-detection：去除电话号码链接 示例： meta name=”format-detection” content=”telephone=no” / HTML5新特性 header、nav、footer标签 Html代码： header div class=headerp id=title/pdiv class=fhimg src=content/images/fh2.png/div/div /header Css代码： .header .fh{width:100px; height:34px; position:absolute; left:0; top:0; text-align:left; padding-top:4px;} 结合css实现固定工具栏 HTML5新特性 Web Storage API 存储数据 Window.localStorage.setItem(key,value) 读取数据 Window.localStorage.getItem(key) 删除数据项 Window.localStorage.removeItem(key) 删除所有数据 Window.localStorage.clear() 本地存储中每个域的存储大小默认是5M，比起Cookie的4K要大的多。 数据没有经过加密，不用于存储敏感信息。 存在XSS攻击漏洞，严格过滤输入输出信息。 HTML5新特性 在线状态监测 navigator.online online/offline 表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。 在线状态切换事件。在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。 比较成熟的HTML5框架 Sencha Touch 2 /products/touch/ Jquery Mobile / 提供集成的UI组件 不依赖其它库 更重视界面组件的丰富性 轻量级，依赖Jquery 更强调操作性 支持更多的设备 Covics Business Solution Ltd. ? * * Covics Copyright 2012 ?