有好多小夥伴私聊我問我html5新特性和用法，下面我要跟大家具體介紹一下html5都新加了哪些新特性，下面我要跟大家總結一下。
1)新的語意標籤footer header 等等2）增強型表單表單2.0 3）音訊和視訊4）canvas 繪圖5） SVG繪圖6）地理定位7） 拖放API 8）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/>
有兩種形式：
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 <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的方法：
玩（）：播放影片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>
屬性方法和影片一樣，只不過沒有海報屬性***判斷複選框是否√選
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=60,50 100,300 150,100 fill=600306 /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) { //通訊結束時的處理}總結以上所述是小編給大家介紹的html5新特性與用法大全，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！