http://www.w3schools.com/html/html5_intro.asp
HTML5的瀏覽器支持：
可通過為自定義標(biāo)簽設(shè)置樣式置逻，并通過JS的document.creatElement(" ");來創(chuàng)建這樣子的元素呛牲。（為什么創(chuàng)建了元素之后就可以直接應(yīng)用在標(biāo)簽上了）
IE8以前都不支持為未知標(biāo)簽寫樣式，可用the shiv：
以上兼容代碼需要放置在<head>中嚼贡，因為瀏覽器需要再編譯之前知道這些標(biāo)簽熏纯。
新的input 類型：
<aside>
<aside>標(biāo)簽定義article以外的內(nèi)容，aside的內(nèi)容應(yīng)該與article的內(nèi)容相關(guān)粤策。<aside> 的內(nèi)容可用作文章的側(cè)欄樟澜。
根據(jù)W3C的定義，一個語義化Web是叮盘，數(shù)據(jù)可以在不同應(yīng)用秩贰，不同企業(yè)和團(tuán)體中共享和復(fù)用。
HTML4轉(zhuǎn)成HTML5：
1柔吼、修改文檔類型Doctype
<!DOCTYPE html>
2毒费、修改編碼方式
<meta charset="utf-8">
3、添加the shiv
4愈魏、為語義化標(biāo)簽添加CSS
5觅玻、修改<header>和<footer>
6想际、修改成<nav>
7、修改成<section>
8溪厘、修改成<article>
<article><section>和<div>之間的區(qū)別：
在HTML5標(biāo)準(zhǔn)里這幾個標(biāo)簽間的區(qū)別有點模糊胡本。
<element>定義為一塊相關(guān)元素；<article>定義為一個完全的畸悬，獨立的相關(guān)元素的塊打瘪；<div>被定義為一塊子元素。
Style Guide
1傻昙、使用小寫標(biāo)簽名
2闺骚、關(guān)閉所有標(biāo)簽
3、關(guān)閉空的HTML標(biāo)簽
4妆档、使用小寫屬性名
5僻爽、用引號包住屬性值
6、為img添加alt屬性和設(shè)置寬高（瀏覽器在圖片加載進(jìn)來之前會為圖片預(yù)留空間贾惦，從而減少頁面的閃爍）胸梆。
7、等號兩邊最好不要留空格
8须板、盡量一行代碼不要寫太長
9碰镜、不要隨意的添加空行，出于閱讀方便习瑰，在分開一長段邏輯代碼塊的時候可以使用空行绪颖；縮進(jìn)時使用2個空格來代替tab。
10甜奄、在HTML5標(biāo)準(zhǔn)中柠横，<html>（是文檔的根）,<body>標(biāo)簽都是可以省略的，但不建議课兄。省略可能對導(dǎo)致DOM和XML軟件崩潰牍氛，并且在IE9以下，省略<body>會報錯烟阐。
11搬俊、建議定義語言類型<html lang="en-US"> ，定義語言對于無障礙應(yīng)用（accessibility applications）和搜索引擎來說十分重要蜒茄。
12唉擂、<head>標(biāo)簽也是可以省略的，瀏覽器通常都會默認(rèn)把<body>標(biāo)簽前得元素添加到一個默認(rèn)的<head>標(biāo)簽中扩淀。通過省略<head>標(biāo)簽可以降低HTML的復(fù)雜性楔敌。
13、在逗號或引號后加空格是一種普遍的書寫方式驻谆。
14卵凑、<script>和<link>中的type都可省略
15庆聘、最好使用小寫的文件名
16、.htm和.html的區(qū)別：
實質(zhì)上并沒有差異勺卢，只是文化上的差異：.htm 更像早期后綴名限制擴(kuò)展名在3個字符的DOS系統(tǒng)伙判；.html就像沒有限制的Unix操作系統(tǒng)。
Canvas
<canvas>元素只是圖像的一個容器黑忱，需要使用腳本語言來畫圖宴抚。canvas有好幾種方法來畫路徑，盒子甫煞，圓菇曲，文本和添加圖片。
canvas 在HTML頁面時一個矩形區(qū)域抚吠，默認(rèn)是沒有邊框和內(nèi)容的常潮。
定義方式：
<canvas id="myCanvas" width="200" height="100"></canvas>
（記得要為canvas添加id屬性，寬和高）
SVG（Scalable Vector Graphics可擴(kuò)展矢量圖形）
是W3C推薦的楷力，用來為web定義圖像的喊式。
<svg>標(biāo)簽是用來放svg圖像的容器。
（on the fly：無需退出當(dāng)前流程來做某件事）
SVG和Canvas的區(qū)別：
SVG是XML里用來描述2D圖像的語言萧朝；
Canvas實時用JS畫2D圖像岔留。
SVG是基于XML的，這說明了每一個元素在SVG的DOM里都是可見的检柬，并可以為元素綁定JS事件献联。在SVG里，每個畫出來的形狀都是被當(dāng)做一個對象的厕吉，若一個SVG對象的屬性被修改了酱固，那么瀏覽器會自動渲染這個圖形。
Canvas是被一個像素一個像素的渲染的头朱，在Canvas里，當(dāng)圖形被畫好了龄减，瀏覽器就會把它忘記项钮。如果要修改圖形的位置，整個場景包括那些可能被這個圖形覆蓋的對象都要被重畫希停。
Canvas SVG
Resolution dependent（依賴分辨率）
No support for event handlers（不支持事件處理）
Poor text rendering capabilities（文本渲染能力差）
You can save the resulting image as .png or .jpg（可以把產(chǎn)出圖形保存為.png或.jpg）
Well suited for graphic-intensive games(適合圖像密集型游戲)
Resolution independent
Support for event handlers
Best suited for applications with large rendering areas (Google Maps)（適合擁有大型渲染區(qū)域的應(yīng)用）
Slow rendering if complex (anything that uses the DOM a lot will be slow)
Not suited for game applications
Multimedia
多媒體有很多不同的格式烁巫，可以是你能聽到或看到的所有的東西。
第一代瀏覽器只支持文本并一種顏色里只有一種字體宠能。之后的瀏覽器開始支持多色和多種字體甚至支持圖片亚隙。對于聲音震桶，動畫和視頻的支持啊鸭，不同瀏覽器有不同的做法。支持不一樣類型和格式，并且一些格式需要額外的幫助插件才能工作逢净。
只有MP4，WebM和Ogg視頻才被最新的HTML5標(biāo)準(zhǔn)支持讲衫。
只有MP3肥印，WAV和Ogg音頻才被最新的HTML5標(biāo)準(zhǔn)支持。
在HTML5之前入愧，沒有標(biāo)準(zhǔn)用于在網(wǎng)頁上展示視頻鄙漏，視頻只能在像flash這樣子的插件中播放。
<source>標(biāo)簽可以鏈接到不同的視頻文件棺蛛，瀏覽器會使用第一個識別的格式怔蚌。
Autoplay屬性（在像iPad和iPhone這樣的移動設(shè)備上不支持）
<track>定義字幕
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
<object>標(biāo)簽定義了一個嵌入在HTML文檔中的對象，用來在網(wǎng)頁嵌入像Java applets旁赊，pdf reader媚创，flash players這樣子的插件。
<embed>標(biāo)簽同樣定義了一個嵌入在HTML文檔中的對象彤恶。
<embed width="400" height="50" src="bookmark.swf">
需要注意的是<emded>標(biāo)簽沒有結(jié)束符號钞钙，他不能包括可替換的文本。
HTML5 位置定位
getCurrentPosition()方法是用來獲取用戶的位置的声离。
使用位置定位：
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
</script>
錯誤處理：getCurrentPosition()方法的第二個參數(shù)是用來處理錯誤的芒炼。
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
/還不太明白/
在地圖上展示結(jié)果：
要在地圖上展示結(jié)果需要使用一個向谷歌地圖的地圖服務(wù)。
靜態(tài)圖片：
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
動態(tài)：
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map_script
HTML5拖放
在HTML5中术徊，所有元素都可以被拖動本刽。
使用例子:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
步驟：
1、把元素設(shè)置為可拖動
<img draggable="true">
2赠涮、拖什么
ondragstart
指定當(dāng)元素被拖動時會發(fā)生什么子寓。dataTransfer.setData()方法設(shè)定數(shù)據(jù)類型和拖動數(shù)據(jù)的值。
3笋除、放在哪里
ondragover 事件指定被拖動數(shù)據(jù)可以放在哪里斜友。默認(rèn)情況下，元素是不可以被放在其他元素里垃它。必須阻止默認(rèn)的元素事件才可以允許放鲜屏，這個是通過在ondragover事件調(diào)用event.preventDefault()方法來實現(xiàn)的。
4国拇、放 ondrop
當(dāng)拖動的元素被放開洛史，會觸發(fā)drop事件。
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
1酱吝、調(diào)用preventDefault()阻止瀏覽器對data的默認(rèn)處理（默認(rèn)是在放的時候當(dāng)做鏈接打開）
2也殖、使用dataTransfer.getData() 方法來獲取拖動的data，這個方法會返回在setData()方法中設(shè)置了相同類型的data务热。
3忆嗜、拖動的data是被拖元素的id
4己儒、把拖動的元素加在放的元素上。
HTML5本地存儲
HTML本地存儲比cookie更好霎褐。
本地存儲是什么：有了本地存儲址愿，web應(yīng)用可以在用戶瀏覽器本地存儲數(shù)據(jù)。
在HTML5之前冻璃，應(yīng)用數(shù)據(jù)必須存儲在每一個服務(wù)器請求的cookie里响谓。本地存儲更安全和在不受網(wǎng)頁表現(xiàn)的影響下本地存儲大量的數(shù)據(jù)。不像cookies省艳，存儲上限為5MB而且信息永遠(yuǎn)不會轉(zhuǎn)換到服務(wù)器娘纷。本地存儲是per origin(per domain and protocol)。全部頁面來自同一個起點跋炕，可以存取一樣的數(shù)據(jù)赖晶。
HTML本地存儲對象：
HTML本地存儲提供兩個對象用來在客戶端存儲數(shù)據(jù)：
window.localStorage--存儲沒有終止時間的數(shù)據(jù)
window.sessionStorage--在一段時間內(nèi)存儲數(shù)據(jù)（當(dāng)瀏覽器標(biāo)簽頁關(guān)閉的時候數(shù)據(jù)就會丟失）
localStorage 對象：
當(dāng)瀏覽器關(guān)閉的時候，數(shù)據(jù)不會被刪除而且在下一天辐烂，下一周甚至是下一年都還存在遏插。
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
也可以采用點取值法：
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
//從本地存儲項目中移除lastname的語法是：
localStorage.removeItem("lastname");
Note：鍵值對通常都是被當(dāng)做字符串來存儲的，記得在需要的時候要轉(zhuǎn)換成其它格式纠修。
sessionStorage對象：
sessionStorage對象除了只在一個階段存儲數(shù)據(jù)之外胳嘲，其它和localStorage對象是一樣的。
HTML5應(yīng)用緩存
有了應(yīng)用緩存就可以通過創(chuàng)建一個緩存清單文件來很簡單的制作一個web應(yīng)用的離線版本扣草。
應(yīng)用緩存是什么：
HTML5對于應(yīng)用緩存的介紹指的是了牛，一個web應(yīng)用可以被緩存，可以在離線情況下使用辰妙。
應(yīng)用緩存為應(yīng)用帶來的3個優(yōu)點：
1鹰祸、離線瀏覽--用戶可以在離線情況下使用這個應(yīng)用
2、速度--緩存資源加載更快
3密浑、減少服務(wù)器加載--瀏覽器只會從服務(wù)器下載更新了和改變了的資源
例子：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
HTML5 Web Workers
web worker是一個在后臺運行不影響頁面展示效果的JS蛙婴。
Web Worker是什么
當(dāng)HTML頁面執(zhí)行到腳本的時候，頁面就會不可響應(yīng)知道腳本被執(zhí)行完畢肴掷。
web worker是一個在后臺運行的敬锐，獨立于其他腳本的，不影響頁面展示效果的JS呆瞻。你可以繼續(xù)做其它你想做的事情，例如：點擊径玖，選擇等等痴脾，而web worker就在后臺運行。
創(chuàng)建一個Web Worker 文件
首先創(chuàng)建一個外部JS文件
demo_workers.js
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
其中上面最重要的部分是postMessage()方法梳星，用來向HTML頁面展示信息赞赖。
通常web worker是不會用在這么簡單的腳本上滚朵，一般會更多用在CPU緊張的任務(wù)上
創(chuàng)建一個Web Worker對象
現(xiàn)在我們有了web worker文件了，我們需要在一個HTML頁面上調(diào)用它前域。
下面的代碼首先檢查web worker是否已經(jīng)存在了辕近，如果不存在的話，他將會創(chuàng)建一個新的web worker對象并運行"demo_workers.js"的代碼匿垄。
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
之后我們就可以從web worker發(fā)收信息了移宅。
給web worker增加一個"onmessage"事件監(jiān)聽。
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
當(dāng)web worker發(fā)送一條信息時椿疗，監(jiān)聽器里的代碼就會運行漏峰，web worker的數(shù)據(jù)會存儲在event.data里。
終止web worker
當(dāng)一個web worker對象被創(chuàng)建之后届榄，它將會持續(xù)監(jiān)聽信息（即使在外部腳本已經(jīng)執(zhí)行完畢）直到它被終止浅乔。
重用web worker
如果你將web worker變量設(shè)為undefined，在它被終止之后铝条，你可以重用這個代碼靖苇。
Web Worker和DOM
因為web worker都在外部文件中，他們沒有權(quán)限處理下面的js對象
- window對象
- document對象
- parent對象
HTML5 Server-Sent Events
Server-Sent Events--單向信息
一個服務(wù)器推送時間是一個網(wǎng)頁自動從服務(wù)器獲得更新班缰。
這個在之前也是可能的贤壁，但是網(wǎng)頁會問是否存在任何更新。有了Server-Sent Events鲁捏，更新會自動進(jìn)行芯砸。
例子：Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.
接受Server-Sent Event聲明
EventSource 對象是用來接收Server-Sent Event聲明的。
var source = new EventSource("demo_sse.php");//創(chuàng)建一個新的EventSource對象给梅，聲明頁面發(fā)送更新的URL
source.onmessage = function(event) {//每當(dāng)接收到一個更新時假丧，onmessage事件會觸發(fā)
document.getElementById("result").innerHTML += event.data + "<br>";
};
服務(wù)器端代碼例子
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
The EventSource Object
| 事件 | 描述 |
|---|---|
| onopen | 當(dāng)與服務(wù)器的連接被打開時 |
| onmessage | 當(dāng)信息被接收時 |
| onerror | 當(dāng)錯誤發(fā)生時 |
