摘要：有好多小伙伴私聊我問我新特性和用法，下面我給大家具體介紹一下都新加了哪些新特性，下面我給大家總結一下。簡單了解一下就可以。

有好多小伙伴私聊我問我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協議）

（一）新型的語義標簽就不說了，

例如

（二）增強型表單 表單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 建議列表

       
 	請輸入您需要的午餐：

四、h5中 新增的表單元素 -- progress 進度條
    有兩種形式：
                bootstrap里面有progress插件樣式

	網絡連接中
	

	
	下載進度 
	

五、h5中 新增的表單元素 -- meter

	機油含量：
	PM值：

meter:度量衡/刻度尺/，用于標示一個所處的范圍：不可接受（紅色）/可以接受（黃色）/非常優秀（綠色）

    
3) 表單元素的新屬性
    一、H4中表單元素的屬性：
                id/class/title/type/value/name/style/readonly/disabled/checked/
                H5中表單元素的新屬性
    1）placeholder：占位字符 作為提示不可提交
                
    2）autofocus：自動獲取輸入焦點 (不用點一下就可以輸入只第一個input設置的才有效)
                
    3） multiple : 允許輸入框中出現多個輸入值用逗號分隔 a@dn.com，b@dn.com
                
    4)form :用于把輸入域放置到FORM外部
                

                
=================輸入驗證相關的新屬性==================================
    例子查看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播放！

它本身是一個300*150的行內塊元素
備注：寫多行source是為了兼容各個瀏覽器。因為瀏覽器對視頻格式支持不統一，有些瀏覽器例如有些瀏覽器支持mp4格式，那么它就播放第一個mp4格式的視頻，如果它不支持就檢查是不是支持下面的ogg視頻，如果支持就播放，不支持的話繼續向下，下面沒有source了，那么就顯示“您的瀏覽器不支持VIDEO播放！”。

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新特性 ——音頻播放器

屬性方法和視頻一樣，只不過沒有海報屬性
***判斷復選框是否√選
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
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繪圖 使用標簽進行繪圖，可以直接綁定事件監聽

二、如何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創建直線

注：stroke-linecap="square"有多出來的方形 ，stroke-linecap="round"多出來圓形的區域，stroke-linecap="butt"不出來多方形   （也就是說你創建的直線設置這些屬性頭尾有區別！自己試一下就知道了！細節很重要?。?/span>

五、svg創建折線

六、地理定位  （以后不用客戶端，我們也可以自己定位咯?。?/span>

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，嵌入百度地圖

這里不多講這個如何嵌入了！（要記住用百度地圖必須注冊賬號，然后引用人家的庫就對了?。?/span>

七、拖放API  

前面有講過拖放：小伙伴們自己往前找一下以前的博客。

八 存儲 

存儲主要就是cookie和session（前面一找一大堆的寫法我講一下區別吧還有注意事項） ：要記住session是關了瀏覽器就消失的，cookie是關了瀏覽器也不消失的！注意注意：cookie存儲時候必須加時間、不加時間的話關閉瀏覽器之后同樣消失！這瀏覽器存儲利用起來解決了很多功能問題比如記住密碼等功能?。?/h4>

九 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){

　　//通訊結束時的處理

}

 

如有不足之處請大神指正！！歡迎技術交流。