HTML5应用经验分享--

研发经验分享

HTML5 应用分享

Covics Business Solution Ltd. ®

1

Covics Copyright 2012 ©

HTML5简介是目前被广泛应用的HTML 4.01的后续版本，未来将成为 HTML、XHTML 以及 HTML DOM 的新标准。 目前HTML5 仍处于完善之中，但大部分现代浏览器已开始对 HTML5的支持。 特点： 1. 强化网页展现效果方面的能力。 2. 增加本地缓存、位置等应用功能。 新特性 1. 增加header, nav, footer等新标 签、属性 2. email, url等新的表单对象 3. 支持离线存储 4. Canvas绘图对象Covics Business Solution Ltd. ®2

5. 位置服务 6. 多媒体回放 7. 文档编辑 8. 拖拽控制

Covics Copyright 2012 ©

为什么使用HTML5 使用HTML5的好处 1. 2. 3. 4. 文档结构清晰，更容易理解 更好的用户交互能力，提供良好的用户体验 专为移动设备提供的特性 规范不断丰富，是未来移动互联应用的标准

支持HTML5的浏览器

Covics Business Solution Ltd. ®

3

Covics Copyright 2012 ©

一些以HTML5实现的应用

微门户

图表

在线图片编辑

Game

地图Covics Business Solution Ltd. ®4

Covics Copyright 2012 ©

HTML5新特性<meta>标签 viewport: 定义viewport宽度和缩放设置 示例： <meta name="viewport" content="width=device-width; initialscale=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” />

Covics Business Solution Ltd. ®

5

Covics Copyright 2012 ©

HTML5新特性<header>、<nav>、<footer>标签 结合css实现固定工具栏 Html代码： <header> <p class="header"><p id="title"></p><p class="fh"><img src="content/images/fh2.png"></p></p> </header> Css代码： .header .fh{width:100px; height:34px; position:absolute; left:0; top:0; text-align:left; padding-top:4px;}

Covics Business Solution Ltd. ®

6

Covics Copyright 2012 ©

HTML5新特性Web Storage API存储数据 读取数据 删除数据项 删除所有数据 Window.localStorage.setItem(key,value) Window.localStorage.getItem(key) Window.localStorage.removeItem(key) Window.localStorage.clear()

本地存储中每个域的存储大小默认是5M,比起Cookie的 4K要大的多。

数据没有经过加密，不用于存储敏感信息。 存在XSS攻击漏洞，严格过滤输入输出信息。

Covics Business Solution Ltd. ®

7

Covics Copyright 2012 ©

HTML5新特性在线状态监测 navigator.online 表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值 也随之变化。 online/offline 在线状态切换事件。在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body、 document 和 window 的顺序冒

泡。因此，开发者可以通过 监听它们的 online/offline 事件来获悉网络状态。

Covics Business Solution Ltd. ®

8

Covics Copyright 2012 ©

比较成熟的HTML5框架

Sencha Touch 2http://www.77cn.com.cn/products/touch/

Jquery Mobilehttp://www.77cn.com.cn/

1. 提供集成的UI组件 2. 不依赖其它库 3. 更重视界面组件的丰富性

1. 轻量级，依赖Jquery 2. 更强调操作性 3. 支持更多的设备

Covics Business Solution Ltd. ®

9

Covics Copyright 2012 ©