Html5
Download as KEY, PDF5 likes1,597 views
The document summarizes the history and key features of HTML5. It discusses the evolution of HTML from 1991 to the present, including versions like HTML4.01. It also covers new HTML5 elements like <header>, <nav>, <section>, <article>, and <footer> that replace older <div> elements. Additionally, it provides overviews of new HTML5 APIs and features like geolocation, WebSockets, and Web Storage, as well as CSS3 properties like text-shadow, RGBa colors, gradients, and transitions.
![html5.js
<!--[if lte IE 8]>
<script src="html5.js" type="text/
javascript"></script>
<![endif]-->](https://image.slidesharecdn.com/html5-091020031223-phpapp01/85/Html5-52-320.jpg)
Html5
- 1. Takashi Kikuchi 2009.10.10 WCAN
- 2. • Web Directions East • ASCII • •
- 3. HTML5
- 4. HTML5
- 5. HTML5
- 7. HTML • 1991 Tim Berners Lee • 1993 HTML1.0 • 1995 HTML2.0 • 1997 HTML3.2 (W3C) • 1999 HTML4.01 (W3C)
- 8. XHTML • 2000 XHTML1.0 • 2001 XHTML1.1 • 2001 XHTML2.0 • 2009 XHTML2.0
- 9. Web XHTML+ SVG+ SMIL+XForm Brendan Eich, June 2004
- 10. XHTML2 ??
- 11. HTML5 • 2003 Opera CTO Håkom Lie Web Forms2 • 2004. 04 Web Applications 1.0 • 2004. 06 WHATWG Opera, Safari, Mozilla • 2007.03 W3C HTML5 WG • 2009.10 Last call
- 12. HTML5 Web Forms2 + Web Application1.0
- 13. ? Ian Hickson = “Hixie” ( Opera Google)
- 14. HTML5 • •
- 15. HTML5 HTML XML
- 16. HTML5 HTML XML
- 17. HTML5 XHTML <meta ..... content="text/html; charset=utf-8" /> HTML XML
- 18. HTML5 • <img src=logo.png alt=”” /> • <img src=‘logo.png’ alt=`` /> • <img src=”logo.png” alt=”” >
- 19. HTML5 • <a><li>HTML5 </a><li>
- 20. 93% invalid
- 21. HTML5 !!
- 22. HTML5 DOM
- 24. HTML5 IE5.0
- 25. HTML5 <div> Document <h1>DOM</h1> <ul> div <li>DOM </li> ul h1 </ul> </div> li
- 26. HTML5 overview Web Workers Geolocation API HTML5 Web Socket Web Database Web Storage
- 27. HTML5 overview Web Workers Geolocation API HTML5 Web Socket Web Database Web Storage
- 28. HTML5
- 29. Doctype, DTD, charset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> </body> </html>
- 30. Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
- 32. charset <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- 33. charset <meta charset=”utf-8" /> or <meta charset=”utf-8">
- 34. Doctype, DTD, charset <!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> </head> <body> </body> </html>
- 35. XHTML1.0 <div id=”header”> <div id=”navigation”> <div id=”main”> <div id=”aside”> <div id=”footer”>
- 36. HTML5 <header> <nav> <section id=”main”> <aside> <footer>
- 38. HTML5 <header> <nav> <section id=”main”> <aside> <footer>
- 39. <header> <header> <h1>allWeb </h1> <p>allWeb </p> </header>
- 40. <nav> <nav id=”global”> <h1> </h1> <ul> <li> </li> <li> </li> </ul> </nav>
- 41. <section> <section> <h1>HTML5 </h1> <p>HTML5 </p> </section>
- 42. <article> <article> <header> <h1>DOM </h1> </header> <p>DOM HTML5 </p> <footer> </footer> </article>
- 43. <aside> <aside> <section> <h1> </h1> </section> </aside>
- 44. <footer> <footer> <ul> <li> </li> <li> </li> </ul> </footer>
- 45. <small> <footer> <small> © Web Directions East LLC </small> </footer>
- 46. <img /> <img alt=”” src=”” />
- 47. validator.nu
- 48. HTML5
- 49. HTML5
- 52. html5.js <!--[if lte IE 8]> <script src="html5.js" type="text/ javascript"></script> <![endif]-->
- 53. CSS3
- 57. CSS3 Difference does not mean broken. “Walls Come Tumbling Down”-Andy Clarke
- 58. CSS3 HANDCRAFTED CSS Dan Cederholm
- 59. vender prefix • -webkit- • -atsc- • -moz- • -wap- • -ms- • -o- • -khtml- • mso-
- 60. text-shadow
- 62. text-shadow text-shadow: #bbb 2px 2px 2px;
- 64. RGBa
- 65. RGBa rgba(55, 146, 179, 0.8) rgba( , , , )
- 67. Gradient
- 68. Gradient background-image: -moz-linear-gradient( bottom, top, from(rgba(81, 70, 61,1)), color-stop(50%, rgb(107, 92, 79,.7)), to(rgba(81, 70, 61,.8)));
- 69. Gradient background-image: -moz-linear-gradient( bottom, top, from(rgba(81, 70, 61,1)), color-stop(50%, rgb(107, 92, 79,.7)), to(rgba(81, 70, 61,.8)));
- 70. Gradient background-image: -moz-linear-gradient( bottom, top, from(rgba(81, 70, 61,1)), color-stop(50%, rgb(107, 92, 79,.7)), to(rgba(81, 70, 61,.8)));
- 72. transition
- 73. webkit-transition • 0.4 • 0.2 •
- 77. template layout module body { display: "aaa" "bcd" } #head{ position: a } #nav{ position: b } #adv{ posiiton: c } #body { position: d }
- 79. Web Forms
- 80. webkit-transition • <input id=form-1 name=haha type=text autofocus required> • <input id=form-5 name=email type=email placeholder="email please"> • <input id=form-4 name=shoesize type=number min=18 max=25>
- 82. HTML5 & CSS3
- 83. Flickr • http://www.flickr.com/photos/theamarand/3622334673/
- 85. 11 11 13 Web “ Web ”
- 86. • Twitter @wdeast Andy Clarke