Web基礎之HTML5
+概述：HTML5是W3C 與 WHATWG 合作的結果。
+新特性：
1）canvas：用於繪畫；
2）video/audio：用於媒體播放；
3）web離線存儲；
4）新的特殊內容元素：article、footer、header、nav、section
5）新的表單控制項：calendar、date、time、email、url、search
+ <video src=「a.mp4」 controls=「controls」>
用於播放視頻，支持的視頻格式有：Ogg,MPEG4,WebM。但不是所有瀏覽器支持；
* 屬性：
-> autoplay=「autoplay」：視頻在就緒後馬上播放；
-> controls=「controls」:顯示控制項欄，功能包括：播放、暫停、定位、音量、全屏切換、字幕（如果要可用）、音軌（如果可用）
->width/height：播放器寬高
->loop=「loop」:視頻在結束後重新開始
->preload=「preload」：視頻在頁面載入時進行載入，並預備播放（若使用了autoplay，則無效）
->src=「」：要播放的url;
* Dom操作video的方法及事件
方法：play() pause() load() canPlayType
屬性：currentSrc currentTime videoWidth/videoHeight duration ended error paused muted seeking volume width/height
事件：play pause progress error timeupdate ended abort empty emptied waiting loadedmetadata
+ <audio src="song.ogg" controls="controls">
播放音頻：
* 屬性：同Video
+ Drag/drop
用於對元素的拖放，是HTML5的標準組成，任何元素都能拖放。
* 使用步驟：
1）設置元素為可拖放。如：<img draggable="true" />
2)拖動什麼。規定當元素拖動時的回調方法ondragstart和setData()。
<img id="drag1" src="img_logo.gif" draggable=「true" ondragstart=「drag(event)」/>
…
function drag(ev){ ev.dataTransfer.setData(「Text",ev.target.id); }
3）放到何處。在ondragover事件中規定放置何處。默認無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。通過調用 ondragover 事件的 event.preventDefault() 方法；
4）進行放置。ondrop，當放置被拖元素時，會發生drop事件。
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data)); }
canvas：畫布，使用JavaScript在網頁上繪製圖像；
1）創建：<canvas id="myCanvas" width_="200" height=「100"></canvas>
2）通過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>
【cxt下的方法API類似於java下的Canvas的方法API】
+ SVG(Scalable Vector Graphics)：可伸縮矢量圖形，在放大或改變尺寸的情況下其圖形質量不會有損失，用於定義用於網路的基於矢量的圖形，可用xml來定義。
1）與其他圖像如jpg/gif的優勢：
—> 可通過文本編輯器來創建和修改；
—> 可被搜索、索引、腳本化或壓縮；
—> 可伸縮的；
—> 可在任何的解析度下被高質量地列印；
—> 可在圖像質量不下降的情況下被放大；
<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"
stylex="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
【註：Canvas與SVG的區別】
Canvas：
—> 依賴解析度
—> 不支持事件處理器
—> 弱的文本渲染能力
—> 能夠以 .png 或 .jpg 格式保存結果圖像
—> 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG
—> 不依賴解析度
—> 支持事件處理器
—> 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
—> 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
—> 不適合遊戲應用
地理定位Geolocation:
Geolocation API 用於獲得用戶的地理位置。鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。
使用 ：getCurrentPosition() 方法來獲得用戶的位置。
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition); }
else{
x.innerHTML="Geolocation is not supported by this browser.";}
}
web存儲
兩種新方法：
1）localStorage：沒有時間限制的數據存儲
2）sessionStorage：針對一個session的數據存儲；當用戶關閉瀏覽器後，數據會被刪除。
【註：這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。】
<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>
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
Application Cache:應用程序緩存。
* 三個優勢：
->離線瀏覽；
->速度：已緩存資源載入更快；
->減小伺服器負載：瀏覽器將只從伺服器下載更新過或更改過的資源；
1）manifest：在html標籤中包含manifest標籤即可，<html manifest=「demo.appcache">
【注意：每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）；manifest 文件的建議的文件擴展名是：」.appcache」；manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 伺服器上進行配置。】
包含三個部分：
1）CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
2）NETWORK - 在此標題下列出的文件需要與伺服器的連接，且不會被緩存
3）FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
+ Web Worker：後臺任務。是運行在後臺的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。
1)創建：if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }
2）監聽：w.onmessage=function(event){document.getElementById(「result").innerHTML=event.data;};
3）終止：w.terminate();
【注意：由於web workder位於外部文件中，無法以訪問：window對象、document、parent對象】
+ server-sent event：伺服器發送事件，允許網頁獲得來自伺服器的更新。
* 單向消息傳遞。除了IE外都支持。
1）創建一個EventSource對象，然後規定發送更新的頁面的url;
2）每接收一次更新，就會發生onmessage事件
3）在onmessage事件中取出數據。
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "<br />";};
注意：伺服器端須將Content-Type設置為text/event-stream】
其他事件：
—> onopen：當與伺服器的連接被打開
—> onerror：當錯誤發生
+ Input元素新增類型：
—> email：用於應該包含 e-mail 地址的輸入域。
—> url：應該包含 URL 地址的輸入域。
—> number：用於應該包含數值的輸入域(包括max、min、step、value屬性)。
—> range：滑動條，包含一定範圍內數字值的輸入域。(包括max、min、step、value屬性)
—> Date pickers：多個可供選取日期和時間的新輸入類型：date(日/月/年)、month、week、time(時/分)、datetime(日/月/年/時/分)、datetime-local
—> search：用於搜索域
—> color:
+ Input/Form新增屬性：
—> autocomplete：規定form或input域應該擁有自動完成功能，適用元素<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color
<form action="demo_form.asp" method="get" autocomplete=「on">
<input type="email" name="email" autocomplete="off" />
—> autofocus：規定在頁面載入時，域自動獲得焦點。
<input type="text" name="user_name" autofocus="autofocus" />
—> form：規定輸入域所屬的是一個或個全表單
<input type="text" name="lname" form="user_form" />
—> form overrides(formaction,formenctype,formmethod,formtarget)：即重寫這些屬性。適用於<input>下的：submit和image,如:
<input type="submit" formaction="demo_admin.asp" value="sure" />
—> height/width:規定用於 image 類型的 input 標籤的圖像高度和寬度。
—> list：規定輸入域的 datalist。datalist 是輸入域的選項列表。
—> min/max/step：用於為包含數字或日期的 input 類型規定限定（約束），適用於<input>下的：data pickers、number、range
—> multiple：規定輸入域中可選擇多個值。適用於<input>下的：email和file
—> pattern(regexp)：規定用於驗證 input 域的模式（pattern）。適用於<input>下的：text, search, url, telephone, email 以及 password。
—> placeholder：提供一種提示（hint），描述輸入域所期待的值.
—> required：規定必須在提交之前填寫輸入域（不能為空）。
<input type="text" name="usr_name" required="required" />
—> novalidate：規定在提交表單時不應該驗證 form 或 input 域。適用於<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate=「true">
+ Form元素新增元素：
—> datalist：輸入框下帶一個選項列表，列表是通過 datalist 內的 option 元素創建的。
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
【注意：option 元素永遠都要設置 value 屬性。】
—> keygen：密鑰對生成器（key-pair generator）,是提供一種驗證用戶的可靠方法，當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（private key）存儲於客戶端，公鑰（public key）則被發送到伺服器。公鑰可用於之後驗證用戶的客戶端證書（client certificate）。但各瀏覽器支持度都不是很好。
—> output：用於不同類型的輸出，比如計算或腳本輸出。
推薦閱讀：
