解读HTML5

解读HTML5

Transcript

1. HTML5 HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &Effects, Multimedia, Performance &Integration, Semantics, and Offline &Storage © 亚信联创科技 新浪微博：@亚联UED 分享人：单东林 shandl@asiainfo-linkage.com 上海创新业务部门培训第03期(仅供内部培训使用) UED分享 · 交流 http://cssrain.github.io
2. © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com 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 大致内容
3. © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com HTML的历史 2 Tim Berners-Lee IETF W3C WHATWG 1991 HTML 1996 HTML 2 1997 HTML 3.2 1998 HTML 4 1999 HTML 4.01 2000 XHTML 1 2006 XHTML 2 2010 HTML 5
4. © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com HTML5是什么 3 爱多媒体，爱终端访问，爱3D特效，爱实时连接 爱图形化，爱离线存储，爱语义化，爱性能和集成 我不是CSS，也不是JavaScript 我是HTML，我只增加了一些新的元素和特性而已
5. © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div>此处省略10000字</div> </body> </html> Do you remember ?
6. © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com 5 <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>HTML5 markup</title> </head> <body> <h1>Hello,HTML5!</h1> </body> </html> HTML5的DOCTYPE
7. © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com 6 <html> <head> </head> <body> <div id="header"></div> <div id="nav"></div> <div id="content"> <h1>My Article</h1> </div> <div id="footer"> </div> </body> </html> 新的语义标签 <html> <head></head> <body> <header></header> <nav></nav> <section> <article></article> </section> <footer></footer> </body> </html>
8. 7 表单新特性 Input： Number，Range，Date， Color，Search，Tel，Email， Url，List Eg： <input type="email“ /> <input type="date“ /> <select data="http://domain/getcity"> </select> 新的控件类型 Required，min，max， multiple，pattern，low， high，optimum Eg： <input type="text" required > <input type="number" min=10 max=100 > 内置的表单验证 enctype="application/x-www- form+xml" Eg： <form action='/register' method="post“ enctype="application/x-www- form+xml" > XML提交类型 © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com
9. 8 DEMO TIME！ © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com
10. 9 原生视频和音频支持 © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com <Object> <Embed>  <Video> <Audio>
11. Contact 单东林 shandl@asiainfo-linkage.com © 亚信联创科技 <object width="425" height="344"> <param name="movie“ value="http://www.youtube.com/v/9sEI1AUFJKw"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/9sEI1AUFJKw" type="application/x- shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object> <video width=”320” height=”240” controls preload> <source src="Ballmer_Developers_Developers.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="Ballmer_Developers_Developers.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"> </video> <audio width=”320” height=”240” controls preload> <source src="Lili_Ivanova_Vetrove.mp3"> </audio> 10
12. 11 Web Socket通信 © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com 使用Ajax轮询，浏览器 定期发送HTTP请求 使用长轮询 使用流 Web Socket
13. 12 跨域访问-传统方式 © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com X  Y Y  Y Y  X X  X
14. 13 跨域访问-cross document messaging © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com X  Y Y  X var o = document.getElementsByTagName('iframe')[0]; o.contentWindow.postMessage('Hello world', 'http://b.example.org/');
15. 14 离线Web应用 © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com 离线存储 + Web SQL Database
16. 15 本地存储-Web Storage © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com 4KB 5MB 不安全 安全 难用 易用
17. 16 地理位置 Geolocation
18. 17 多线程-Web Workers © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com 多进程 ……. 假死 后台运行 神马都是浮云
19. 18 绘图-Canvas © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com Eg: <canvas id="myCanvas"></canvas> <script > var canvas=document.getElementById('myCan vas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
20. 19 我又来了； © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com
21. © 亚信联创科技 Contact 单东林 shandl@asiainfo-linkage.com Thanks & QA