关于 Html5 那点事
•Download as KEY, PDF•
12 likes•943 views
The document discusses HTML5 and its features. It describes how HTML5 introduces new semantic elements that are clearer and more semantic than traditional HTML tags, and shows an example HTML5 document structure. It also discusses some of HTML5's new features like audio, video, canvas, forms, and APIs for local storage, geolocation and web SQL databases. Finally, it provides examples of using some of these new features in HTML5.
Report
Share
关于 Html5 那点事
- 1. HTML
- 2. HTML sofish @ Alipay WD Team sofish @ twitter
- 3. HTML sofish @ Alipay WD Team sofish @ twitter
- 4. HTML 5 sofish @ Alipay WD Team sofish @ twitter
- 5. INTRO HTML5
- 6. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 7. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 8. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 9. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 10. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 11. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 12. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 13. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 14. HTML5 : Clear && Semantic <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Alipay WD - HTML5 Document</title> </head> <body> <header> ... </header> <section> <article data-sth="alipay"> ... </article> </section> <aside> ... </aside> <footer> ... </footer> </body> </html>
- 15. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ...
- 16. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
- 17. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
- 18. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
- 19. HTML5 : BEautiful && practical <audio /> <canvas /> <device /> <form /> LocalStorage GeoLocation Web SQL Database etc. ... CEO
- 20. CSS3 HTML5
- 21. CSS3 HTML5
- 22. CSS3 HTML5
- 23. CSS3 HTML5
- 24. Morden Web Browsers 100% <Form />: Opera Rocks IE - All: Drag and Drop IE8: LocalStorage / SessionStorage / PostMsg / Hash Change (event)
- 25. Javascript <audio /> in MP3 format var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); : http://diveintohtml5.org/everything.html
- 26. ?
- 27. ?
- 28. ?
- 29. HTML5
- 30. HTML5
- 31. HTML5
- 33. HTML5 HTML5 <input /> &&
- 34. HTML5 HTML5 <input /> && <canvas />
- 35. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
- 36. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
- 37. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
- 38. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
- 39. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
- 40. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
- 41. && <video width="320" height="240" preload="none" poster="alipay.png"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
- 42. ?
- 43. ? Web Art
- 44. ? Web Art Utility
- 45. ? Web Art Utility Powerful ID
- 46. ? Web Art Utility Powerful ID window.getElementsByClassName = getElementsByClassName || function(c) { var reg = cache.get(c) || cache.set(c, new RegExp("(?:^|s+)" + c + "(?:s+|$)")); var elements = document.getElementsByTagName('*'); var results = []; for (var i = 0; i < elements.length; i++) { if (elements[i].className.match(reg)) { results.push(elements[i]);} } return results; };
- 48. ?
- 49. ?
- 50. sofish @ Alipay WD Team sofish @ twitter http://happinesz.cn 读 HTML5 议 术 http://www.happinesz.cn/archives/1389/ 发组 ? http://www.happinesz.cn/archives/1292/