html5新特性與用法大全瞭解一下例如canvas、svg、地理定位（移動、pc）、拖放API(僅pc端)、web Socket、儲存等等！
有好多小夥伴私聊我問我html5新特性 和用法，下面我給大傢俱體介紹一下html5都新加了哪些新特性
1)新的語義標籤 footer header 等等2）增強型表單 表單2.03）音訊和視訊4）canvas 繪圖5） SVG繪圖6）地理定位7） 拖放API8）web worker 用來執行耗時任務9）web Storage 在瀏覽器端儲存大量資料10）web Socket 一種持續性的連線（非http協議）
（一）新型的語義標籤就不說了，
例如<footer></footer>
（二）增強型表單 表單2.0
一、
1）新的input type h4和h5對比！ H4中input type ：text /password /radio /checkbox/ sybmit/ reset / file /hidden / image/ H5中的input type ：email/url/number/tel/search /range /color/month/week /date 2）新的表單元素 H4中表單元素 ：input/textarea/select，option/label H5中新增的表單元素：datalist /progress/meter/output
二、h5中 新增的表單元素 -- datalist 建議列表
<datalist id="lunchList"> <option>京醬肉絲</option> <option>鍋包肉</option> <option>魚香肉絲</option> <option>青椒肉絲</option> <option>地三鮮</option> </datalist> 請輸入您需要的午餐：<input type="text" name="lunch" list="lunchList"/>
四、h5中 新增的表單元素 -- progress 進度條 有兩種形式： 例子看 h5中新增的表單元素/progress .html bootstrap裡面有progress外掛樣式
<form>
網路連線中<progress></progress>
<br/>
<!-- 0-1之間 -->
下載進度 <progress id="p3" value="0"></progress>
<input type="number" value="1">
</form>
<script type="text/javascript">
/*settimeout和setInterval區別在於settimeout執行一次，setInterval每隔一段時間執行一次*/
var t=setInterval(function(){
var v = p3.value;
v += 0.1;
p3.value = v;
if(v>=1){
clearInterval(t);
alert("下載完成");
}
},500);
</script>
五、h5中 新增的表單元素 -- meter 例子看 h5中新增的表單元素/meter .html
<body> 機油含量：<meter id="m1" min="0" max="100" low="30" high="70" optimum="40" value="50"></meter> PM值：<meter id="m2" min="0" max="500" low="100" high="300" optimum="150" value="750"></meter> </body>
meter:度量衡/刻度尺/，用於標示一個所處的範圍：不可接受（紅色）/可以接受（黃色）/非常優秀（綠色） <meter min="可取的最小值" max="可取的最大值" low="合理的下限值" high="合理的上限值" optimum="最佳值" value="當前值" ></meter> 3) 表單元素的新屬性 一、H4中表單元素的屬性：<input> id/class/title/type/value/name/style/readonly/disabled/checked/ H5中表單元素的新屬性 1）placeholder：佔位字元 作為提示不可提交 <input value=“tom” placeholder=“請輸入使用者名稱”/> 2）autofocus：自動獲取輸入焦點 (不用點一下就可以輸入只第一個input設定的才有效) <input autofocus> 3） multiple : 允許輸入框中出現多個輸入值用逗號分隔 [email protected]，[email protected] <input type="email" name="emails" multiple> 4)form :用於把輸入域放置到FORM外部 <form id="f5"></from> <input form="f5"> =================輸入驗證相關的新屬性================================== 例子檢視input驗證相關的屬性/yz.html 5)required :必填項，內容不能為空 6）maxlength：指定字串的最大長度 7）minlength：指定字串的最小長度 8）max：指定數字的最大值 9）min：指定數字的最小值 10）pattern：指定輸入必須符合的正則表示式 上述驗證屬性會影響表單元素對應的js物件的validity屬性，validity屬性是驗證的屬性。
(三） video 視訊和音訊
1.flash被H5取代體現在哪些方面？ flash 繪圖（AS/FLEX） =>Canvas/SVG flash 動畫 => 定時器+Canvas 視訊和音訊播放 => VIDEO/AUDIO flash 客戶端儲存 => WebStorage 2.H5新特性 ——視訊播放器 （是個行內塊元素。可以給寬高） H5提供了一個新的標籤用於播放視訊： <video src=""></video> <video src=""> <source src="res/birds.mp4"></source> <source src="res/birds.ogg"></source> <source src="res/birds.webm"></source> 您的瀏覽器不支援VIDEO播放！ </video> 它本身是一個300*150的行內塊元素 備註：寫多行source是為了相容各個瀏覽器。因為瀏覽器對視訊格式支援不統一，有些瀏覽器例如有些瀏覽器支援mp4格式，那麼它就播放第一個mp4格式的視訊，如果它不支援就檢查是不是支援下面的ogg視訊，如果支援就播放，不支援的話繼續向下，下面沒有source了，那麼就顯示“您的瀏覽器不支援VIDEO播放！”。
VIDEO標籤/物件常用的成員： 成員屬性：<video id="v2" src="" autoplay controls loop muted poster="2.jpg" preload="auto"></video> autoplay：false， 是否自動播放 預設false controls：false，是否顯示播放控制元件，預設為false loop：false ，是否迴圈播放，預設為false muted：false，是否靜音播放，預設為false poster：''，在播放第一幀之前顯示的海報，可以是圖片。預設為空沒有 preload：視訊預載入策略，可取值： auto：預載入視訊的元資料以及緩衝一定時長，絕對不可以在手機端使用 （尺寸/時長。第一幀內容，緩衝時長）（預載入浪費流量） metadata：僅預載入視訊的元資料（尺寸/時長，第一幀內容，）沒有緩衝時長，適合手機 none：不預載入任何資料 ----------------------------------------------------------------- id v2的屬性 用法例如：v2.playbackRate=3; currentTime:當前播放的時長 duration:總時長 paused:true,當前視訊是否處於暫停狀態 true是暫停，false是播放 volume：1 預設值是1，當前音量 playbackRate：1 ，回放速率 大於1錶快放，小於1錶慢放 id v2的方法： play（）：播放視訊 pause （）：暫停播放 成員事件： onplay：當視訊開始播放時觸發的事件 onpause：當視訊暫停時觸發的事件 練習：不使用video自帶的controls，自定義播放/暫停按鈕 滑鼠移出視訊區域隱藏按鈕；滑鼠移入顯示按鈕 例如：視訊音訊、canvas/video.html 當暫停就顯示廣告，播放就隱藏廣告 3、H5新特性 ——音訊播放器 <audio src=""></audio> <audio src=""> <source src="res/birds.mp3"></source> <source src="res/birds.ogg"></source> <source src="res/birds.wav"></source> 您的瀏覽器不支援audio播放！ </audio> 屬性方法和視訊一樣，只不過沒有海報屬性 ***判斷複選框是否√選 cb.onchange=function(){ this.checked true為選上，false為沒選 }
（四）、canvas
每個畫布上有且只有一個“畫筆”物件 ———稱為“繪圖上下文”物件——使用該物件進行繪圖！ var ctx = canvas.getContext('2d') //現在只有2d的 得到畫布上的畫布物件
canvas繪圖 ---難點 ！！！ 1）SVG繪圖：向量繪圖技術，2000年出現，後納入H5標準 2）Canvas繪圖：點陣圖繪圖技術，H5提出的繪圖技術 3）WebGL繪圖：3D繪圖技術，尚未納入H5標準
canvas繪圖技術 canvas：畫布，H5實現2D繪圖技術 <canvas width="500" height="400">您的瀏覽器不支援canvas</canvas> canvas標籤在瀏覽器預設是300*150的inline-block。畫布的寬高只能使用HTML/JS屬性來賦值，不能使用css樣式賦值！ 每個畫布上有且只有一個“畫筆”物件 ———稱為“繪圖上下文”物件——使用該物件進行繪圖！ var ctx = canvas.getContext('2d') //現在只有2d的 得到畫布上的畫布物件 1）使用canvas繪製矩形 繪製矩形 ctx.lineWidth = 1 描邊寬度 ctx.fillStyle='#000' 填充樣式顏色 ctx.strokeStyle='#000' 描邊樣式顏色 ctx.fillRect(x,y,w,h); //填充一個矩形 x ,y座標 w，h 寬高 ctx.strokeRect(x,y,w,h); //描邊一個矩形 ctx.clearRect(x,y,w,h) 清除一個矩形範圍內所有的繪圖 2）使用canvas繪製文字 一段文字的定位點在其文字基線的起點 ctx.textBaseline = 'alphabetic' 文字基線 預設值是第三根線 ctx.font="12px sans-serif" 字型大小和樣式 ctx.fillText(str,x,y) 填充 ctx.strokeText(str,x,y) 描邊一段文字 ctx.measureText(str) 基於當前文字大小字型設定測量文字,返回的物件是{width：x} 3）使用canvas繪製路徑 path:類似於ps中的“鋼筆工具”，由多個座標點組成的任意形狀，路徑不可見，可用於“描邊”、 “填充”，“裁剪”。 ctx.beginPath() 開始一條新路徑 ctx.closePath() 閉合當前路徑 ctx.moveTo(x,y) 移動到指定點 ctx.lineTo(x,y) 從當前點到指定點畫直線 ctx.arc(cx,cy,r,start,end) ； 繪製圓拱路徑 cx cy 是圓心座標xy r是半徑 ，start 開始角度，end結束角度 角度制：360 = 弧度制：2PI 180 = 1PI 例如 ctx.arc(100,200,30,0,2*Math.PI) ctx.stroke(); //當前路徑描邊 ctx.fill(); //當前路徑填充 ctx.clip(); 使用當前路徑進行裁剪 *********連線處的角*********** ctx.lineJoin='miter' //線的連線處出現尖角 ctx.lineJoin='round' //線的連線處出現圓角 ctx.lineJoin = 'bevel' //線的連線處出現方角 4）使用canvas繪製圖像 canvas屬於客戶端技術，圖片在伺服器中，所以瀏覽器必須先下載要繪製的圖片， 且等待圖片非同步載入完成： var img = new Images(); img.src='x.png'; console.log(img.width); //0 非同步請求圖片 img.onload=function(){ console.log(img.width,img.height); //有值 圖片載入完成 //開始繪製圖片到畫布上 ctx.drawImage(img,x,y); //原始大小繪圖 ctx.drawImage(img,x,y,w,h); //設定寬高 } 監聽滑鼠在畫布上方移動事件 ctx.onmousemove = function(e){ x=e.offsetX; y=e.offsetY; console.log(x,y); } 2、canvas繪圖中漸變 線性漸變：linearGradient 徑向漸變：radialGradient 可以參考ps中漸變效果、 var g = ctx.createLinearGradient(x1,y1,x2,y2); g.addColorStop(0,'#f00'); g.addColorStop(0.5,'#ff0'); g.addColorStop(1,'#0f0'); ctx.strokeStyle=g; 難點：座標系座標軸 、單詞比較多 3、繪圖變形 ctx.rotate(弧度) 旋轉繪圖上下文物件（即畫筆），軸點是畫布的原點 ctx.translate(x,y) 將整個畫布的原點平移到指定的點 ctx.sava(); 儲存畫筆當前的所有變形狀態值（遊戲中從存檔） ctx.restore(); 恢復畫筆變形狀態到最近的一次儲存（遊戲中讀取存檔） ctx.save();//先儲存原始狀態 var deg = 10*Math.PI/180; //要旋轉的角度 旋轉10度 ctx.rotate(deg); //旋轉 ctx.drawImage(img,0,0); //畫圖 ，畫筆是歪的 畫什麼都是歪的 ctx.restore();// 取出存檔時儲存的原始狀態
（五）SVG繪圖
先來了解一下什麼是點陣圖和向量圖。簡單瞭解一下就可以。
點陣圖：由一個又一個畫素點組成，每個點各有自己的顏色，色彩細膩。 向量圖：由一個又一個線條組成，每個線條可以指定顏色，方向，可以無限縮放，但顏色細節不夠豐富
一、SVG繪圖 使用標籤進行繪圖，可以直接繫結事件監聽 <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="100"></rect> </svg>
二、如何js建立一個svg標籤！
//var r1 = document.createElement('rect'); 建立不了這個svg元素 因為有年限和名稱空間 （就是說這樣不行 要用下面的方法建立！！！！） var r1= document.createElementNS('http://www.w3.org/2000/svg','rect'); r1.setAttribute('width','50'); r1.setAttribute('height',300); s1.appendChild(r1);
三、svg建立橢圓 <svg width="300" height="200" id="c6"> <ellipse rx="100" ry="40" cx="100" cy="100" fill="#faa" stroke="#a00"></ellipse> </svg>
四、svg建立直線
<svg width="300" height="200" id="c6"> <line x1="0" y1="0" x2="100" y2="200" stroke="#000" stroke-width="50" stroke-linecap="square"></line> </svg>
注：stroke-linecap="square"有多出來的方形 ，stroke-linecap="round"多出來圓形的區域，stroke-linecap="butt"不出來多方形 （也就是說你建立的直線設定這些屬性頭尾有區別！自己試一下就知道了！細節很重要！）
五、svg建立折線
<svg width="300" height="200" id="c6"> <polyline points="50,50 100,300 150,100"></polyline> //出來的是三角形 <polyline points="50,50 100,300 150,100" fill="transparent" stroke="#000"></polyline> //出來的是折線 </svg>
六、地理定位 （以後不用客戶端，我們也可以自己定位咯！）
Geolocation：地理定位，使用JS獲取當前瀏覽器所在的地理座標（經度，維度，海拔，速度） 資料，用於實現LBS應用（Location Based Service），如餓了麼，高德導航... 手機瀏覽器如何獲得定位資訊： 1）首選手機中的GPS晶片與衛星通訊，定位精度在米 2）次選手機基站進行定位獲取，定位精度在公里 （違法的） PC瀏覽器如何獲得定位資訊： 1）通過IP地址進行反向解析，定位精度取決於IP地址庫的大小 HTML5中提供了一個新的物件，用於獲取當前瀏覽器的定位資訊： window.navigator.geolocation{ getCurrentPosition:fn, //獲得當前定位資訊 watchPosition:fn, //監視定位資料的改變 clearWatch ：fn // 取消監視 }
2、擴充套件：在網頁中如何嵌入百度地圖 1）註冊百度開發者賬號 map.baidu.com ---> lbsyun.baidu.com 2）建立一個網站；登入百度地圖，為網站申請一個地圖的AccessKey 3）在自己的網頁中嵌入百度地圖提供的API，嵌入百度地圖
這裡不多講這個如何嵌入了！（要記住用百度地圖必須註冊賬號，然後引用人家的庫就對了！）
七、拖放API
前面有講過拖放：小夥伴們自己往前找一下以前的部落格。
八 儲存
儲存主要就是cookie和session（前面一找一大堆的寫法我講一下區別吧還有注意事項） ：要記住session是關了瀏覽器就消失的，cookie是關了瀏覽器也不消失的！注意注意：cookie儲存時候必須加時間、不加時間的話關閉瀏覽器之後同樣消失！這瀏覽器儲存利用起來解決了很多功能問題比如記住密碼等功能！！
九 web Socket
這個東西說不說呢。。。。。還是稍微簡單的講一下吧，全靠領悟啊~~
web socket 是一個可以在伺服器與客戶端之間建立一個非http的雙向連線！
這個連線是實時的，也是永久的。
伺服器可以主動推送訊息。
伺服器不在需要輪詢客戶端的請求，伺服器與客戶端之間通訊無需重新建立連線。
也就是可持續性的 來回通訊。
如何建立呢？一段程式碼搞定
var webSocket = new WebSocket （“ws://localhost:8005/socket”）;
url 必須以“ws” 或者“wss” 文字作為開頭：因為不是http 是websocket嗎，人家自己的標識，加密傳送，記住就好了。
webSocket.send() 傳送文字資料，只可以傳送文字。（使用json物件把js物件轉換文字資料後進行傳送）
webSocket.close();關閉切斷通訊連線。
webSocket.onmessage= function(event){
var data=event.data;
} // 接收伺服器傳來的訊息
webSocket.onopen =function(event){
//開始通訊時的處理
}
webSocket.onclose =function(event){
//通訊結束時的處理
}
如有不足之處請大神指正！！歡迎技術交流。