+概述：HTML5是W3C 與 WHATWG 合作的結(jié)果换可。
新特性：
1）canvas：用于繪畫(huà)呛梆；
2）video/audio：用于媒體播放；
3）web離線存儲(chǔ)褒搔；
4）新的特殊內(nèi)容元素：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=“l(fā)oop”:視頻在結(jié)束后重新開(kāi)始
->preload=“preload”：視頻在頁(yè)面加載時(shí)進(jìn)行加載萄传，并預(yù)備播放（若使用了autoplay甚颂，則無(wú)效）
->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
用于對(duì)元素的拖放，是HTML5的標(biāo)準(zhǔn)組成秀菱，任何元素都能拖放振诬。
- 使用步驟：
1）設(shè)置元素為可拖放。如：<img draggable="true" />
2)拖動(dòng)什么衍菱。規(guī)定當(dāng)元素拖動(dòng)時(shí)的回調(diào)方法ondragstart和setData()赶么。
…
function drag(ev){ ev.dataTransfer.setData(“Text",ev.target.id); }
3）放到何處。在ondragover事件中規(guī)定放置何處脊串。默認(rèn)無(wú)法將數(shù)據(jù)/元素放置到其他元素中辫呻。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式琼锋。通過(guò)調(diào)用 ondragover 事件的 event.preventDefault() 方法放闺；
4）進(jìn)行放置。ondrop缕坎，當(dāng)放置被拖元素時(shí)怖侦，會(huì)發(fā)生drop事件。
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data)); }
canvas：畫(huà)布谜叹，使用JavaScript在網(wǎng)頁(yè)上繪制圖像匾寝；
1）創(chuàng)建：<canvas id="myCanvas" width="200" height=“100"></canvas>
2）通過(guò)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類(lèi)似于java下的Canvas的方法API】
SVG(Scalable Vector Graphics)：可伸縮矢量圖形，在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失叉谜，用于定義用于網(wǎng)絡(luò)的基于矢量的圖形旗吁，可用xml來(lái)定義。
1）與其他圖像如jpg/gif的優(yōu)勢(shì)：
—> 可通過(guò)文本編輯器來(lái)創(chuàng)建和修改停局；
—> 可被搜索很钓、索引、腳本化或壓縮董栽；
—> 可伸縮的码倦；
—> 可在任何的分辨率下被高質(zhì)量地打印锭碳；
—> 可在圖像質(zhì)量不下降的情況下被放大袁稽；
<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:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
【注：Canvas與SVG的區(qū)別】
Canvas：
—> 依賴(lài)分辨率
—> 不支持事件處理器
—> 弱的文本渲染能力
—> 能夠以 .png 或 .jpg 格式保存結(jié)果圖像
—> 最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪
SVG
—> 不依賴(lài)分辨率
—> 支持事件處理器
—> 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
—> 復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用 DOM 的應(yīng)用都不快）
—> 不適合游戲應(yīng)用
地理定位Geolocation:
Geolocation API 用于獲得用戶(hù)的地理位置擒抛。鑒于該特性可能侵犯用戶(hù)的隱私推汽，除非用戶(hù)同意补疑，否則用戶(hù)位置信息是不可用的。
使用 ：getCurrentPosition() 方法來(lái)獲得用戶(hù)的位置歹撒。
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition); }
else{
x.innerHTML="Geolocation is not supported by this browser.";}
}
web存儲(chǔ)
兩種新方法：
1）localStorage：沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
2）sessionStorage：針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)莲组；當(dāng)用戶(hù)關(guān)閉瀏覽器后，數(shù)據(jù)會(huì)被刪除暖夭。
【注：這些都是由 cookie 完成的锹杈。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞迈着，這使得 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:應(yīng)用程序緩存裕菠。
- 三個(gè)優(yōu)勢(shì)：
->離線瀏覽咬清；
->速度：已緩存資源加載更快；
->減小服務(wù)器負(fù)載：瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源糕韧；
1）manifest：在html標(biāo)簽中包含manifest標(biāo)簽即可枫振，<html manifest=“demo.appcache">
【注意：每個(gè)指定了 manifest 的頁(yè)面在用戶(hù)對(duì)其訪問(wèn)時(shí)都會(huì)被緩存。如果未指定 manifest 屬性萤彩，則頁(yè)面不會(huì)被緩存（除非在 manifest 文件中直接指定了該頁(yè)面）粪滤；manifest 文件的建議的文件擴(kuò)展名是：”.appcache”；manifest 文件需要配置正確的 MIME-type雀扶，即 "text/cache-manifest"杖小。必須在 web 服務(wù)器上進(jìn)行配置∮弈梗】
包含三個(gè)部分：
1）CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
2）NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接予权，且不會(huì)被緩存
3）FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）
**Web Worker
**：后臺(tái)任務(wù)。是運(yùn)行在后臺(tái)的 JavaScript浪册，獨(dú)立于其他腳本扫腺，不會(huì)影響頁(yè)面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊村象、選取內(nèi)容等等笆环，而此時(shí) web worker 在后臺(tái)運(yùn)行。
1)創(chuàng)建：if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }
2）監(jiān)聽(tīng)：w.onmessage=function(event){document.getElementById(“result").innerHTML=event.data;};
3）終止：w.terminate();
【注意：由于web workder位于外部文件中厚者，無(wú)法以訪問(wèn)：window對(duì)象躁劣、document、parent對(duì)象】
server-sent event：服務(wù)器發(fā)送事件库菲，允許網(wǎng)頁(yè)獲得來(lái)自服務(wù)器的更新账忘。
- 單向消息傳遞。除了IE外都支持。
1）創(chuàng)建一個(gè)EventSource對(duì)象鳖擒，然后規(guī)定發(fā)送更新的頁(yè)面的url;
2）每接收一次更新溉浙，就會(huì)發(fā)生onmessage事件
3）在onmessage事件中取出數(shù)據(jù)。
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "<br />";};
注意：服務(wù)器端須將Content-Type設(shè)置為text/event-stream】
其他事件：
—> onopen：當(dāng)與服務(wù)器的連接被打開(kāi)
—> onerror：當(dāng)錯(cuò)誤發(fā)生
Input元素新增類(lèi)型：
—> email：用于應(yīng)該包含 e-mail 地址的輸入域蒋荚。
—> url：應(yīng)該包含 URL 地址的輸入域放航。
—> number：用于應(yīng)該包含數(shù)值的輸入域(包括max、min圆裕、step、value屬性)荆几。
—> range：滑動(dòng)條吓妆，包含一定范圍內(nèi)數(shù)字值的輸入域。(包括max吨铸、min行拢、step、value屬性)
—> Date pickers：多個(gè)可供選取日期和時(shí)間的新輸入類(lèi)型：date(日/月/年)诞吱、month舟奠、week、time(時(shí)/分)房维、datetime(日/月/年/時(shí)/分)沼瘫、datetime-local
—> search：用于搜索域
—> color:
Input/Form新增屬性：
—> autocomplete：規(guī)定form或input域應(yīng)該擁有自動(dòng)完成功能，適用元素<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：規(guī)定在頁(yè)面加載時(shí)咙俩，域自動(dòng)獲得焦點(diǎn)耿戚。
<input type="text" name="user_name" autofocus="autofocus" />
—> form：規(guī)定輸入域所屬的是一個(gè)或個(gè)全表單
<input type="text" name="lname" form="user_form" />
—>form overrides(formaction,formenctype,formmethod,formtarget)：即重寫(xiě)這些屬性。適用于<input>下的：submit和image,如:
<input type="submit" formaction="demo_admin.asp" value="sure" />
—> height/width:規(guī)定用于 image 類(lèi)型的 input 標(biāo)簽的圖像高度和寬度阿趁。
—>list：規(guī)定輸入域的 datalist膜蛔。datalist 是輸入域的選項(xiàng)列表。
—> min/max/step：用于為包含數(shù)字或日期的 input 類(lèi)型規(guī)定限定（約束）脖阵，適用于<input>下的：data pickers皂股、number、range
—>multiple：規(guī)定輸入域中可選擇多個(gè)值命黔。適用于<input>下的：email和file
—> pattern(regexp)：規(guī)定用于驗(yàn)證 input 域的模式（pattern）呜呐。適用于<input>下的：text, search, url, telephone, email 以及 password。
—> placeholder：提供一種提示（hint）纷铣，描述輸入域所期待的值.
—> required：規(guī)定必須在提交之前填寫(xiě)輸入域（不能為空）卵史。
<input type="text" name="usr_name" required="required" />
—> novalidate：規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。適用于<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate=“true">
Form元素新增元素：
—> datalist：輸入框下帶一個(gè)選項(xiàng)列表搜立，列表是通過(guò) datalist 內(nèi)的 option 元素創(chuàng)建的以躯。
<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 元素永遠(yuǎn)都要設(shè)置 value 屬性。】
—> keygen：密鑰對(duì)生成器（key-pair generator）,是提供一種驗(yàn)證用戶(hù)的可靠方法忧设，當(dāng)提交表單時(shí)刁标，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰址晕，一個(gè)公鑰膀懈。
私鑰（private key）存儲(chǔ)于客戶(hù)端，公鑰（public key）則被發(fā)送到服務(wù)器谨垃。公鑰可用于之后驗(yàn)證用戶(hù)的客戶(hù)端證書(shū)（client certificate）启搂。但各瀏覽器支持度都不是很好。
—> output：用于不同類(lèi)型的輸出刘陶，比如計(jì)算或腳本輸出胳赌。
博客地址：Web基礎(chǔ)之HTML5
