Download as KEY, PPTX
![?
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;
};](https://image.slidesharecdn.com/html5-100730061442-phpapp01/85/Html5-46-320.jpg)
Uploaded bySofish Lin
关于 Html5 那点事
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.
![#3 HTML & CSS [know-how]](https://cdn.slidesharecdn.com/ss_thumbnails/html-know-how3-180511205559-thumbnail.jpg?width=640&height=640&fit=bounds)
![Web Standards: Fueling Innovation [Web Design World Boston '08]](https://cdn.slidesharecdn.com/ss_thumbnails/web-standards-fueling-innovation-1228796603037960-8-thumbnail.jpg?width=640&height=640&fit=bounds)
关于 Html5 那点事
- 1.
- 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.
- 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.
- 21.
- 22.
- 23.
- 24. Morden Web Browsers 100% <Form />: Opera Rocks IE - All: Drag and Drop IE8: LocalStorage / SessionStorage / PostMsg / Hash Change (event)
- 25. Javascript <audio /> inMP3 format var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); : http://diveintohtml5.org/everything.html
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 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.
- 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 @ AlipayWD Team sofish @ twitter http://happinesz.cn 读 HTML5 议 术 http://www.happinesz.cn/archives/1389/ 发组 ? http://www.happinesz.cn/archives/1292/