HTML5是WEB应用将发展到一个水平必要的技术.
下面是WEB发展的时间轴:
1991 - HTML
1994 - HTML2
1996 - CSS1 + JAVASCRIPT
1997 - HTML4
1998 - CSS2
2000 - XHTML1
2002 - Tableless Web Design
2005 - Ajax
2009 - HTML5
下面我用一个公式来说明HTML5:
HTML5 ~= HTML + CSS +JAVASCRIPT(APIs)
JAVASCRIPT APIs ??
1.新的选择器
var el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
var els = document.getElementsByClassName('section');
els[0].focus();
2.通过CSS的语法来查找元素
var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");
3.网络存储(Web Storage)
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
window.localStorage['value'] = area.value;
window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];
用途示例：保存邮件时，草稿在客户端，可以避免有时候崩溃导致内容丢失重写.
4.Web SQL数据库
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
5.应用程序缓存API
<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);
6.Web Workers
main.js :
var worker = new Worker(‘extra_work.js');
worker.onmessage = function (event) { alert(event.data); };
extra_work.js :
// do some work; when done post message.
postMessage(some_data);
7.Web Sockets
var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }
8. Notifications
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}
9.Drag and drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
10.Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
map.setCenter(new GLatLng(lat, lng), 13);
map.addOverlay(new GMarker(new GLatLng(lat, lng)));
});
}
HTML ??
1.新的语义标签
<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
Navigation...
</ul>
</nav>
<section>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
2.新的链接关系
<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...
<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>
...
3.微数据 Microdata
<div itemscope itemtype="http://example.org/band"> <p>My name is <span itemprop='name'>Neil</span>.</p> <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p> <p>I am <span itemprop='nationality'>British</span>.</p> </div>
4.ARIA attributes
<ul id="tree1"
role="tree"
tabindex="0"
aria-labelledby="label_1"
>
<li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
<li role="group">
<ul>
<li role="treeitem" tabindex="-1">Oranges</li>
<li role="treeitem" tabindex="-1">Pineapples</li>
...
</ul>
</li>
</ul>
5.New form field types
<input type='range' min='0' max='50' value='0'>
<input autofocus type='search'>
<input type='text' placeholder='Search inside'>
6.Audio + Video
<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;
<video src='movie.mp4' autoplay controls ></video>
document.getElementById("video").play();
7.Canvas
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>
8.Canvas 3D (WebGL)
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
...
</script>
9.SVG in HTML5
<html>
<svg>
<circle id="myCircle" class="important" cx="50%" cy="50%" r="100"
fill="url(#myGradient)"
onmousedown="alert('hello');"/>
</svg>
</html>
CSS??
1.CSS Selectors
2.New font support
3.Text wrapping
4.Columns
5.Text stroke
6.Opacity
7.Hue/saturation/luminance color model
8.Rounded corners
9.Gradients
10.Shadows
11.Instant Web 2.0 (just add sliders)
12.Background enhancements
13.Transitions
14.Transforms
15.Animations
HTML5 = 下一代WEB应用的技术
以上是HTML5概述大部分特性，所以我学习HTML5的旅程从这里开始了！！