Downloaded 51 times
![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.js
<!--[if lte IE 8]>
<script src="html5.js" type="text/
javascript"></script>
<![endif]-->](https://image.slidesharecdn.com/html5-091020031223-phpapp01/75/Html5-52-2048.jpg)
Uploaded bySatoshi Kikuchi
Html5
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.
![[PSU Web 2011] HTML5 Design](https://cdn.slidesharecdn.com/ss_thumbnails/html5-design-110613130006-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Html5
- 1. Takashi Kikuchi 2009.10.10 WCAN
- 2. • Web DirectionsEast • ASCII • •
- 3.
- 4.
- 5.
- 6.
- 7. HTML • 1991 TimBerners 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.
- 11. HTML5 • 2003 OperaCTO 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.
- 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.pngalt=”” /> • <img src=‘logo.png’ alt=`` /> • <img src=”logo.png” alt=”” >
- 19. HTML5 • <a><li>HTML5 </a><li>
- 20.
- 21. HTML5 !!
- 22. HTML5 DOM
- 23.
- 24.
- 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.
- 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 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
- 31.
- 32. charset <metahttp-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 DirectionsEast LLC </small> </footer>
- 46. <img /> <img alt=””src=”” />
- 47.
- 48.
- 49.
- 50.
- 52. html5.js <!--[iflte IE 8]> <script src="html5.js" type="text/ javascript"></script> <![endif]-->
- 53.
- 57. CSS3 Difference does notmean broken. “Walls Come Tumbling Down”-Andy Clarke
- 58. CSS3 HANDCRAFTED CSS DanCederholm
- 59. vender prefix • -webkit- • -atsc- • -moz- • -wap- • -ms- • -o- • -khtml- • mso-
- 60.
- 61.
- 62.
- 64.
- 65. RGBa rgba(55, 146, 179,0.8) rgba( , , , )
- 67.
- 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.
- 73. webkit-transition • 0.4 • 0.2 •
- 75.
- 76.
- 77. template layout module body{ display: "aaa" "bcd" } #head{ position: a } #nav{ position: b } #adv{ posiiton: c } #body { position: d }
- 79.
- 80. webkit-transition • <input id=form-1name=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.
- 83. Flickr • http://www.flickr.com/photos/theamarand/3622334673/
- 85. 11 11 13 Web “ Web ”
- 86. • Twitter @wdeast Andy Clarke