解读HTML5

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

© 亚信联创科技 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 大致内容

© 亚信联创科技 Contact 单东林 [email protected] 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

© 亚信联创科技 Contact 单东林 [email protected] HTML5是什么 3 爱多媒体，爱终端访问，爱3D特效，爱实时连接爱图形化，爱离线存储，爱语义化，爱性能和集成我不是CSS，也不是JavaScript
我是HTML，我只增加了一些新的元素和特性而已

© 亚信联创科技 Contact 单东林 [email protected] 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 ?

© 亚信联创科技 Contact 单东林 [email protected] 5 <!DOCTYPE html> <html> <head>
<meta charset=“utf-8”> <title>HTML5 markup</title> </head> <body> <h1>Hello,HTML5!</h1> </body> </html> HTML5的DOCTYPE

© 亚信联创科技 Contact 单东林 [email protected] 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>

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 单东林 [email protected]

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

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

Contact 单东林 [email protected] © 亚信联创科技 <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

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

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

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/');

16 地理位置 Geolocation

18 绘图-Canvas © 亚信联创科技 Contact 单东林 [email protected] 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>

解读HTML5

解读HTML5

cssrain

More Decks by cssrain

Other Decks in Technology

Featured

Transcript

HTML5 HTML5 Powered with Connectivity / Realtime, Device Access, Graphics,

© 亚信联创科技 Contact 单东林 [email protected] 1，HTML的历史 2，HTML5是什么 3，HTML5的DOCTYPE 4，新的语义标签 5，表单新特性

© 亚信联创科技 Contact 单东林 [email protected] HTML的历史 2 Tim Berners-Lee IETF

© 亚信联创科技 Contact 单东林 [email protected] HTML5是什么 3 爱多媒体，爱终端访问，爱3D特效，爱实时连接爱图形化，爱离线存储，爱语义化，爱性能和集成我不是CSS，也不是JavaScript

© 亚信联创科技 Contact 单东林 [email protected] 4 <!DOCTYPE html PUBLIC "-//W3C//DTD

© 亚信联创科技 Contact 单东林 [email protected] 5 <!DOCTYPE html> <html> <head>

© 亚信联创科技 Contact 单东林 [email protected] 6 <html> <head> </head> <body>

7 表单新特性 Input： Number，Range，Date， Color，Search，Tel，Email， Url，List Eg： <input type="email“ />

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

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

Contact 单东林 [email protected] © 亚信联创科技 <object width="425" height="344"> <param name="movie“

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

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

13 跨域访问-cross document messaging © 亚信联创科技 Contact 单东林 [email protected] X

14 离线Web应用 © 亚信联创科技 Contact 单东林 [email protected] 离线存储 + Web

15 本地存储-Web Storage © 亚信联创科技 Contact 单东林 [email protected] 4KB 5MB

16 地理位置 Geolocation

17 多线程-Web Workers © 亚信联创科技 Contact 单东林 [email protected] 多进程 …….

18 绘图-Canvas © 亚信联创科技 Contact 单东林 [email protected] Eg: <canvas id="myCanvas"></canvas>

19 我又来了； © 亚信联创科技 Contact 单东林 [email protected]

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