Slide 1

Slide 1 text

HTML5 HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &Effects, Multimedia, Performance &Integration, Semantics, and Offline &Storage © 亚信联创科技新浪微博：@亚联UED 分享人：单东林 [email protected] 上海创新业务部门培训第03期(仅供内部培训使用) UED分享 · 交流 http://cssrain.github.io

Slide 2

Slide 2 text

© 亚信联创科技 Contact 单东林 [email protected] 1，HTML的历史 2，HTML5是什么 3，HTML5的DOCTYPE 4，新的语义标签 5，表单新特性 6，原生视频和音频支持 7，Web Socket通信 8,跨域访问 9,离线Web应用 10,本地存储-Web Storage 11,多线程-Web Workers 12,地理位置-Geolocation 13,绘图-Canvas 1 大致内容

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

此处省略10000字

Do you remember ?

Slide 6

Slide 6 text

Hello,HTML5!

HTML5的DOCTYPE

Slide 7

Slide 7 text

My Article

新的语义标签

Slide 8

Slide 8 text

7 表单新特性 Input： Number，Range，Date， Color，Search，Tel，Email， Url，List Eg：新的控件类型 Required，min，max， multiple，pattern，low， high，optimum Eg：内置的表单验证 enctype="application/x-www- form+xml" Eg： XML提交类型 © 亚信联创科技 Contact 单东林 [email protected]

Slide 9

Slide 9 text

8 DEMO TIME！ © 亚信联创科技 Contact 单东林 [email protected]

Slide 10

Slide 10 text

9 原生视频和音频支持 © 亚信联创科技 Contact 单东林 [email protected] 

Slide 11

Slide 11 text

Contact 单东林 [email protected] © 亚信联创科技

Slide 12

Slide 12 text

11 Web Socket通信 © 亚信联创科技 Contact 单东林 [email protected] 使用Ajax轮询，浏览器定期发送HTTP请求使用长轮询使用流 Web Socket

Slide 13

Slide 13 text

12 跨域访问-传统方式 © 亚信联创科技 Contact 单东林 [email protected] X  Y Y  Y Y  X X  X

Slide 14

Slide 14 text

13 跨域访问-cross document messaging © 亚信联创科技 Contact 单东林 [email protected] X  Y Y  X var o = document.getElementsByTagName('iframe')[0]; o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

16 地理位置 Geolocation

Slide 18

Slide 18 text

Slide 19

Slide 19 text

18 绘图-Canvas © 亚信联创科技 Contact 单东林 [email protected] Eg: var canvas=document.getElementById('myCan vas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);