allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData(,ev.target.id); } function drop(ev) { ev.preventDefault(); ); ev.target.appendChild(document.getElementById(data)); }

HTML5 Web存储

　　在讲HTML5 的Web存储之前，先来说说cookie劣势，主要有以下三点：

　　再来看看HTML5 Web存储的优势：

　　在HTML5中，Web存储有两种形式：localStorag、sessionStorage，如下：

localStorage 

     存储的数据没有时间限制；

<script type="text/javascript"> localStorage.lastname="Smith"; document.write("Last name: " + localStorage.lastname); </script>

sessionStorage

　　当用户关闭浏览器窗口后，数据会被删除 

<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>

Tips:
Cookie是不可或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

HTML5 Web Workers

　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能（JS多线程工作解决方案）。

　　Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

　　优势：异步执行复杂计算，不影响页面的展示

 　　如下为一个求和的代码示例：

<script> var w; function startWorker() { if (typeof (Worker) !== "undefined") { if (typeof (w) == "undefined") { w = new Worker("rs/demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script>

demo_workers.js文件，其中的postMessage() 方法 ，用于向 HTML 页面传回一段消息。

var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();

Tips:
1.不能跨域加载JS
2.worker内代码不能访问DOM

HTML 5 服务器发送事件

　　传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polling）更有效率。

　　HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新；

　　举个例子，如下，其中服务器端使用Java的Struts 2框架，会向浏览器发送服务器最新的时间数据：

服务端代码：

public class SSE extends ActionSupport { private InputStream sseStream; public InputStream getSseStream() { return sseStream; } public String handleSSE() { System.out.println("Inside handleSSE() "); String result = "data: "+new Date().toString() + "\n\n"; sseStream = new ByteArrayInputStream(result.getBytes() ); System.out.println("Exiting handleSSE() "); return SUCCESS; } }

text/event-streamsseStream

客户端代码：

OUTPUT VALUE (function(global, window, document) { ; function main() { window.addEventListener(, contentLoaded); } function contentLoaded() { ); ); stream.onmessage=function(event){ ; result.value = data; } } main(); })(this, window, window.document);

HTML 5 表单增强功能

新的 Input 类型

　　下图为各个input元素的效果图：

　　

HTML5 的新的表单元素

 

　　下图为datalist的示例：

　　

HTML5 的新的表单属性

–新的 form 属性：

•autocomplete

•Novalidate

–新的 input 属性：

•autocomplete

•autofocus

•form

•height 和 width

•list

•min, max 和 step

•multiple

•pattern (regexp)

•placeholder

•Required

•form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

 

　　下表为各个浏览器对表单属性的支持情况：

Input type

IE

Firefox

Opera

Chrome

Safari

autocomplete

8.0

3.5

9.5

3.0

4.0

autofocus

No

No

10.0

3.0

4.0

form

No

No

9.5

No

No

form overrides

No

No

10.5

No

No

height and width

8.0

3.5

9.5

3.0

4.0

list

No

No

9.5

No

No

min, max and step

No

No

9.5

3.0

No

multiple

No

3.5

No

3.0

4.0

novalidate

No

No

No

No

No

pattern

No

No

9.5

3.0

No

placeholder

No

No

No

3.0

3.0

required

No

No

9.5

3.0

No

 

HTML5语义化标记

　　HTML5 可以使用语义化的标签代替大量的无意义的div标签。这种语义化的特性不仅提升了网页的质量和语义，并且减少了以前用于CSS或JS调用的class和id属性。

　　

更多HTML 5标准

HTML5推荐标准（W3C官网推荐标准）

–

 

或者参考w3school

 

HTML5 完整的新标签

–

HTML 全局属性

–

全局事件属性

–

HTML5实例分析 飞翔的小鸟

基于Phaser（开源的HTML5 2D游戏开发框架），主要需要编写以下三个函数：

Preload函数（执行一次）：

加载资源（背景、图片等资源）

Create函数（执行一次）：

Update函数（每帧执行）：

判断是否飞出边界

判断是否碰到墙壁

　　效果图如下：

　　

柱状图表

主要步骤：

效果图：

　　

HTML5发展展望

　　当前各大浏览器对HTML5支持情况(满分是555分)，

　　一句话，无论是桌面还是手机浏览器，谷歌对HTML5的支持最全面。

　　

　　各大公司行动

–谷歌，宣布自动转换Flash广告为HTML5版本；chrome浏览器

–Youtube ，使用HTML 5的播放器；

–Amazon，宣布停用所有Flash广告；

–腾讯，微信朋友圈小游戏、贺卡或邀请函； QQ空间H5游戏…

–百度，直达号；

–阿里，UC浏览器，手机淘宝H5游戏…