Html5不只是个传说

1,223 views

Published on

HTML5正在快速的进入Web开发的

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,223
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5不只是个传说

  1. 1. HTML5 不只是个传说 钟志 百度前端研发 QQ:772637 新浪微博: http://t.sina.com.cn/zhongzhi 邮箱: [email_address]
  2. 2. 2022
  3. 3. HTML5 到 2022 年才会成为 推荐标准。 HTML5 规范主编 Ian Hickson http://blogs.techrepublic.com.com/programming-and-development/?p =718
  4. 4. 那时 哥 早已不在江湖…
  5. 5. 各浏览器厂商的态度
  6. 6. Apple likes HTML5 http://www.apple.com/html5/
  7. 7. Google likes HTML5 http://www.html5rocks.com/
  8. 8. Mozilla (Firefox) likes HTML5 https://developer.mozilla.org/en/HTML/HTML5
  9. 9. Opera likes HTML5 http://www.opera.com/docs/specs/presto25/html5/
  10. 10. Microsoft likes HTML5 http://ie.microsoft.com/testdrive/
  11. 11. 我真的只做个旁观者? 反思:
  12. 12. Canvas
  13. 13. DEMO
  14. 14. 学习 HTML5 ! 顿悟:
  15. 15. http://joshduck.com/periodic-table.html
  16. 16. http://joshduck.com/periodic-table.html
  17. 17. <!DOCTYPE html>
  18. 18. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/>
  19. 19. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=utf-8&quot;/>
  20. 20. <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>
  21. 21. 标签升级
  22. 24. 国内浏览器市场占有率 观看在线效果
  23. 25. 最 大 障碍
  24. 26. document.createElement 解决方案?
  25. 27. document.createElement('article'); document.createElement('nav'); document.createElement('section'); document.createElement('header'); document.createElement('footer'); ...
  26. 28. <!DOCTYPE html> <html> <head> <meta charset=&quot;utf-8&quot; /> <title>HTML 5 demo</title> <!--[if IE]> <script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
  27. 29. JavaScript APIs <ul><li>Canvas </li></ul><ul><li>Drag & Drop </li></ul><ul><li>History </li></ul><ul><li>Inline Editing </li></ul><ul><li>Messaging </li></ul><ul><li>Offline Apps </li></ul><ul><li>Video & Audio </li></ul><ul><li>Geolocation </li></ul><ul><li>Local Storage </li></ul><ul><li>Selectors </li></ul><ul><li>Server Events </li></ul><ul><li>Web Sockets </li></ul><ul><li>Workers </li></ul>
  28. 30. 在项目中使用 HTML5 实战:
  29. 31. canvas 在新浪微博中的应用 IE 浏览器使用 filter 滤镜或者 excanvas
  30. 32. HTML5 在 WebIM 中的应用 <ul><li>localStorage </li></ul><ul><li>postMessage </li></ul><ul><li>window.navigator.onLine </li></ul><ul><li>userData </li></ul><ul><li>window.opener </li></ul><ul><li>js onError </li></ul>IE 的处理方式
  31. 33. Form2.0 在 Mobile 开发中的应用
  32. 34. geolocation 在 Mobile 开发中的应用
  33. 35. 总结 今天我们回顾了 HTML5 新增的语义化标签、简单介绍了 HTML5 APIs 的一些应用以及在项目中对 HTML5 的实践
  34. 36. 相关资源 <ul><li>http://html5doctor.com/ </li></ul><ul><li>http://html5demos.com/ </li></ul><ul><li>http://ie.microsoft.com/testdrive/ </li></ul><ul><li>http://diveintohtml5.org/ </li></ul><ul><li>http://dev.w3.org/html5/html-author/ </li></ul><ul><li>http://joshduck.com/periodic-table.html </li></ul>
  35. 37. 谢谢大家 QQ:772637 新浪微博: http:// t.sina.com.cn/zhongzhi 邮箱: [email_address]

×