Contenu connexe
Plus de Satoshi Kikuchi (18)
Html5
- 7. HTML
• 1991 Tim Berners Lee
• 1993 HTML1.0
• 1995 HTML2.0
• 1997 HTML3.2 (W3C)
• 1999 HTML4.01 (W3C)
- 9. Web XHTML+ SVG+
SMIL+XForm
Brendan Eich, June 2004
- 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
- 13. ?
Ian Hickson = “Hixie”
( Opera Google)
- 17. HTML5
XHTML
<meta ..... content="text/html; charset=utf-8" />
HTML XML
- 25. HTML5
<div> Document
<h1>DOM</h1>
<ul> div
<li>DOM </li>
ul h1
</ul>
</div>
li
- 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" />
- 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>
- 52. html5.js
<!--[if lte IE 8]>
<script src="html5.js" type="text/
javascript"></script>
<![endif]-->
- 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)));
- 77. template layout module
body {
display: "aaa"
"bcd"
}
#head{ position: a }
#nav{ position: b }
#adv{ posiiton: c }
#body { position: d }
- 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>
- 83. Flickr
• http://www.flickr.com/photos/theamarand/3622334673/