什么是HTML5:HTML5 是下一代的HTML,將成為 HTML、XHTML 以及 HTML DOM 的新標准。
為 HTML5 建立的一些規則：
- 新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
- 減少對外部插件的需求（比如 Flash）
- 更優秀的錯誤處理
- 更多取代腳本的標記
- HTML5 應該獨立於設備
- 開發進程應對公眾透明
HTML5 中的一些有趣的新特性：
- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內容元素，比如 article、footer、header、nav、section
- 新的表單控件，比如 calendar、date、time、email、url、search
1.html5視頻和音頻
實例：
<!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src="/i/movie.ogg" type="video/ogg"> <source src="/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>
control 屬性供添加播放、暫停和音量控件。
<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的。
上面的例子第一個使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。
要確保適用於 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
同理，音頻實例：
<!DOCTYPE HTML> <html> <body> <audio controls="controls" autoplay="autoplay" loop="loop"> <source src="/i/song.ogg" type="audio/ogg"> <source src="/i/song.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>
2.HTML5拖放
拖放（Drag 和 drop）是 HTML5 標准的組成部分。
實例：
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> 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> <p>請把圖片拖放到矩形中：</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img id="drag1" src="/i/xxx.gif" draggable="true" ondragstart="drag(event)" /> </body> </html>
3.HTML 5 Canvas
canvas 元素用於在網頁上繪制圖形。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
實例：
創建 Canvas 元素
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
實例-線條：
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> </body> </html>
效果圖為：
實例-圓形：
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </body> </html>
效果圖：
實例 - 漸變：
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> </body> </html>
實例-圖像：
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="/i/eg_flower.png" cxt.drawImage(img,0,0); </script> </body> </html>
效果圖：
4.HTML5 內聯 SVG
什么是SVG？
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用於定義用於網絡的基於矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
- SVG 是萬維網聯盟的標准
SVG 的優勢
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
- SVG 圖像可通過文本編輯器來創建和修改
- SVG 圖像可被搜索、索引、腳本化或壓縮
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
實例：
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" /> </svg> </body> </html>
Canvas vs. SVG：
Canvas 和 SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
Canvas
Canvas 通過 JavaScript 來繪制 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
Canvas 與 SVG 的比較
下表列出了 canvas 與 SVG 之間的一些不同之處。
Canvas
- 依賴分辨率
- 不支持事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結果圖像
- 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
SVG
- 不依賴分辨率
- 支持事件處理器
- 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
- 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
- 不適合游戲應用
5.HTML5地理定位
實例：
<!DOCTYPE html> <html> <body> <p id="demo">點擊這個按鈕，獲得您的位置：</p> <button onclick="getLocation()">試一下</button> <div id="mapholder"></div> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } 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; } } </script> </body> </html>
例子解釋：
- 檢測是否支持地理定位
- 如果支持，則運行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。
- 如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象
- showPosition() 函數獲得並顯示經度和緯度
錯誤代碼：
- Permission denied - 用戶不允許地理定位
- Position unavailable - 無法獲取當前位置
- Timeout - 操作超時
watchPosition() - 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
<!DOCTYPE html> <html> <body> <p id="demo">點擊這個按鈕，獲得您的坐標：</p> <button onclick="getLocation()">試一下</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> </body> </html>
6.HTML 5 Web 存儲
在客戶端存儲數據
HTML5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
localStorage 方法
localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。
如何創建和訪問 localStorage：
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> localStorage.lastname="Smith"; document.write("Last name: " + localStorage.lastname); </script> </body> </html>
下面的例子對用戶訪問頁面的次數進行計數：
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits: " + localStorage.pagecount + " time(s)."); </script> <p>刷新頁面會看到計數器在增長。</p> <p>請關閉瀏覽器窗口，然后再試一次，計數器會繼續計數。</p> </body> </html>
sessionStorage 方法
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。
如何創建並訪問一個 sessionStorage：
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> </body> </html>
下面的例子對用戶在當前 session 中訪問頁面的次數進行計數：
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); </script> <p>刷新頁面會看到計數器在增長。</p> <p>請關閉瀏覽器窗口，然后再試一次，計數器已經重置了。</p> </body> </html>
7.HTML 5 應用程序緩存
使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。
什么是應用程序緩存（Application Cache）？
HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
- 離線瀏覽 - 用戶可在應用離線時使用它們
- 速度 - 已緩存資源加載得更快
- 減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
下面的例子展示了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）：
<!DOCTYPE html> <html manifest="/example/html5/demo_html.appcache"> <body> <script type="text/javascript" src="/example/html5/demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">獲得日期和事件</button></p> <p><img src="/i/xxx.gif" /></p> <p>請打開<a href="/example/html5/html5_html_manifest.html" target="_blank">這個頁面</a>，然后脫機瀏覽，重新加載頁面。頁面中的腳本和圖像依然可用。</p> </body> </html>
如需啟用應用程序緩存，請在文檔的 <html> 標簽中包含 manifest 屬性：
每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。
manifest 文件的建議的文件擴展名是：".appcache"。
請注意，manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
- CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
當 manifest 文件加載后，瀏覽器會從網站的根目錄下載這三個文件。然后，無論用戶何時與因特網斷開連接，這些資源依然是可用的。
NETWORK
下面的 NETWORK 小節規定文件 "login.asp" 永遠不會被緩存，且離線時是不可用的：
可以使用星號來指示所有其他資源/文件都需要因特網連接：
FALLBACK
下面的 FALLBACK 小節規定如果無法建立因特網連接，則用 "offline.html" 替代 /html5/ 目錄中的所有文件：
注釋：第一個 URI 是資源，第二個是替補。
更新緩存
一旦應用被緩存，它就會保持緩存直到發生下列情況：
- 用戶清空瀏覽器緩存
- manifest 文件被修改（參閱下面的提示）
- 由程序來更新應用緩存
實例 - 完整的 Manifest 文件
8.HTML 5 Web Workers
web worker 是運行在后台的 JavaScript，不會影響頁面的性能。什么是 Web Worker？當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。web worker 是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行。
<!DOCTYPE html> <html> <body> <p>計數: <output id="result"></output></p> <button onclick="startWorker()">開始 Worker</button> <button onclick="stopWorker()">停止 Worker</button> <br /><br /> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("/example/html5/demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html>
向 web worker 添加一個 "onmessage" 事件監聽器，當 web worker 傳遞消息時，會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。
demo_workers.js為計數腳本：
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
以上代碼中重要的部分是 postMessage() 方法 - 它用於向 HTML 頁面傳回一段消息。
9.HTML 5 服務器發送事件
HTML5 服務器發送事件（server-sent event）允許網頁獲得來自服務器的更新。
Server-Sent 事件 - 單向消息傳遞
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。
例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等
<!DOCTYPE html> <html> <body> <h1>獲得服務器更新</h1> <div id="result"></div> <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; } </script> </body> </html>
例子解釋：
- 創建一個新的 EventSource 對象，然后規定發送更新的頁面的 URL（本例中是 "demo_sse.php"）
- 每接收到一次更新，就會發生 onmessage 事件
- 當 onmessage 事件發生時，把已接收的數據推入 id 為 "result" 的元素中
服務器端代碼實例：
PHP 代碼 (demo_sse.php)：
<?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(); ?>
ASP 代碼 (VB) (demo_sse.asp):
<% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %>
代碼解釋：
- 把報頭 "Content-Type" 設置為 "text/event-stream"
- 規定不對頁面進行緩存
- 輸出發送日期（始終以 "data: " 開頭）
- 向網頁刷新輸出數據
在上面的例子中，我們使用 onmessage 事件來獲取消息。不過還可以使用其他事件：
