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

有好多小伙伴私聊我問我html5新特性 和用法，下面我給大家具體介紹一下html5都新加了哪些新特性，下面我給大家總結(jié)一下。

1)新的語義標(biāo)簽 footer header 等等
2）增強(qiáng)型表單 表單2.0
3）音頻和視頻
4）canvas 繪圖
5） SVG繪圖
6）地理定位
7） 拖放API
8）web worker 用來執(zhí)行耗時(shí)任務(wù)
9）web Storage 在瀏覽器端存儲大量數(shù)據(jù)
10）web Socket   一種持續(xù)性的連接（非http協(xié)議）

（一）新型的語義標(biāo)簽就不說了，

例如

（二）增強(qiáng)型表單 表單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 進(jìn)度條
    有兩種形式：
                bootstrap里面有progress插件樣式

	網(wǎng)絡(luò)連接中
	

	
	下載進(jìn)度 
	

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

	機(jī)油含量：
	PM值：

meter:度量衡/刻度尺/，用于標(biāo)示一個(gè)所處的范圍：不可接受（紅色）/可以接受（黃色）/非常優(yōu)秀（綠色）

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

                
=================輸入驗(yàn)證相關(guān)的新屬性==================================
    例子查看input驗(yàn)證相關(guān)的屬性/yz.html
                5)required :必填項(xiàng)，內(nèi)容不能為空
                6）maxlength：指定字符串的最大長度
                7）minlength：指定字符串的最小長度
                8）max：指定數(shù)字的最大值
                9）min：指定數(shù)字的最小值
                10）pattern：指定輸入必須符合的正則表達(dá)式
上述驗(yàn)證屬性會影響表單元素對應(yīng)的js對象的validity屬性，validity屬性是驗(yàn)證的屬性。

(三） video 視頻和音頻

    1.flash被H5取代體現(xiàn)在哪些方面？
                flash 繪圖（AS/FLEX） =>Canvas/SVG
                flash 動畫 => 定時(shí)器+Canvas
                視頻和音頻播放 => VIDEO/AUDIO
                flash 客戶端存儲 => WebStorage
    2.H5新特性 ——視頻播放器 （是個(gè)行內(nèi)塊元素。可以給寬高）
                H5提供了一個(gè)新的標(biāo)簽用于播放視頻：

您的瀏覽器不支持VIDEO播放！

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

VIDEO標(biāo)簽/對象常用的成員：
成員屬性：
autoplay：false， 是否自動播放 默認(rèn)false
controls：false，是否顯示播放控件，默認(rèn)為false
loop：false ，是否循環(huán)播放，默認(rèn)為false
muted：false，是否靜音播放，默認(rèn)為false
poster：，在播放第一幀之前顯示的海報(bào)，可以是圖片。默認(rèn)為空沒有
preload：視頻預(yù)加載策略，可取值：
auto：預(yù)加載視頻的元數(shù)據(jù)以及緩沖一定時(shí)長，絕對不可以在手機(jī)端使用
（尺寸/時(shí)長。第一幀內(nèi)容，緩沖時(shí)長）（預(yù)加載浪費(fèi)流量）
metadata：僅預(yù)加載視頻的元數(shù)據(jù)（尺寸/時(shí)長，第一幀內(nèi)容，）沒有緩沖時(shí)長，適合手機(jī)
none：不預(yù)加載任何數(shù)據(jù)

-----------------------------------------------------------------
id v2的屬性 用法例如：v2.playbackRate=3;
currentTime:當(dāng)前播放的時(shí)長
duration:總時(shí)長
paused:true,當(dāng)前視頻是否處于暫停狀態(tài) true是暫停，false是播放
volume：1 默認(rèn)值是1，當(dāng)前音量
playbackRate：1 ，回放速率 大于1表快放，小于1表慢放

id v2的方法：
play（）：播放視頻
pause （）：暫停播放
成員事件：
onplay：當(dāng)視頻開始播放時(shí)觸發(fā)的事件
onpause：當(dāng)視頻暫停時(shí)觸發(fā)的事件
練習(xí)：不使用video自帶的controls，自定義播放/暫停按鈕
鼠標(biāo)移出視頻區(qū)域隱藏按鈕；鼠標(biāo)移入顯示按鈕 例如：視頻音頻、canvas/video.html
當(dāng)暫停就顯示廣告，播放就隱藏廣告

3、H5新特性 ——音頻播放器

屬性方法和視頻一樣，只不過沒有海報(bào)屬性
***判斷復(fù)選框是否√選
cb.onchange=function(){
this.checked true為選上，false為沒選
}

（四）、canvas

每個(gè)畫布上有且只有一個(gè)“畫筆”對象 ———稱為“繪圖上下文”對象——使用該對象進(jìn)行繪圖！
var ctx = canvas.getContext(2d) //現(xiàn)在只有2d的 得到畫布上的畫布對象

canvas繪圖 ---難點(diǎn) ！！！
1）SVG繪圖：矢量繪圖技術(shù)，2000年出現(xiàn)，后納入H5標(biāo)準(zhǔn)
2）Canvas繪圖：位圖繪圖技術(shù)，H5提出的繪圖技術(shù)
3）WebGL繪圖：3D繪圖技術(shù)，尚未納入H5標(biāo)準(zhǔn)

canvas繪圖技術(shù)
canvas：畫布，H5實(shí)現(xiàn)2D繪圖技術(shù)
您的瀏覽器不支持canvas
canvas標(biāo)簽在瀏覽器默認(rèn)是300*150的inline-block。畫布的寬高只能使用HTML/JS屬性來賦值，不能使用css樣式賦值！
每個(gè)畫布上有且只有一個(gè)“畫筆”對象 ———稱為“繪圖上下文”對象——使用該對象進(jìn)行繪圖！
var ctx = canvas.getContext(2d) //現(xiàn)在只有2d的 得到畫布上的畫布對象
1）使用canvas繪制矩形
繪制矩形

ctx.lineWidth = 1 描邊寬度
ctx.fillStyle=#000 填充樣式顏色
ctx.strokeStyle=#000 描邊樣式顏色
ctx.fillRect(x,y,w,h); //填充一個(gè)矩形 x ,y坐標(biāo) w，h 寬高
ctx.strokeRect(x,y,w,h); //描邊一個(gè)矩形
ctx.clearRect(x,y,w,h) 清除一個(gè)矩形范圍內(nèi)所有的繪圖

2）使用canvas繪制文本
一段文字的定位點(diǎn)在其文本基線的起點(diǎn)

ctx.textBaseline = alphabetic //文本基線 默認(rèn)值是第三根線
ctx.font="12px sans-serif" //字體大小和樣式
ctx.fillText(str,x,y) //填充
ctx.strokeText(str,x,y) //描邊一段文本
ctx.measureText(str)  //基于當(dāng)前文字大小字體設(shè)置測量文本,返回的對象是{width：x}

3）使用canvas繪制路徑
path:類似于ps中的“鋼筆工具”，由多個(gè)坐標(biāo)點(diǎn)組成的任意形狀，路徑不可見，可用于“描邊”、
“填充”，“裁剪”。

ctx.beginPath() //開始一條新路徑
ctx.closePath() //閉合當(dāng)前路徑
ctx.moveTo(x,y) //移動到指定點(diǎn)
ctx.lineTo(x,y) //從當(dāng)前點(diǎn)到指定點(diǎn)畫直線
ctx.arc(cx,cy,r,start,end) ； //繪制圓拱路徑 
//cx cy 是圓心坐標(biāo)xy r是半徑 ，start 開始角度，end結(jié)束角度

角度制：360 = 弧度制：2PI
180 = 1PI
例如

ctx.arc(100,200,30,0,2*Math.PI)
ctx.stroke(); //當(dāng)前路徑描邊
ctx.fill(); //當(dāng)前路徑填充
ctx.clip();// 使用當(dāng)前路徑進(jìn)行裁剪
//*********連接處的角***********
ctx.lineJoin=miter //線的連接處出現(xiàn)尖角
ctx.lineJoin=round //線的連接處出現(xiàn)圓角
ctx.lineJoin = bevel //線的連接處出現(xiàn)方角

4）使用canvas繪制圖像
canvas屬于客戶端技術(shù)，圖片在服務(wù)器中，所以瀏覽器必須先下載要繪制的圖片，
且等待圖片異步加載完成：

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); //設(shè)置寬高
}

監(jiān)聽鼠標(biāo)在畫布上方移動事件

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;

難點(diǎn)：坐標(biāo)系坐標(biāo)軸 、單詞比較多

3、繪圖變形

ctx.rotate(弧度) //旋轉(zhuǎn)繪圖上下文對象（即畫筆），軸點(diǎn)是畫布的原點(diǎn)
ctx.translate(x,y) //將整個(gè)畫布的原點(diǎn)平移到指定的點(diǎn)
ctx.sava(); //保存畫筆當(dāng)前的所有變形狀態(tài)值（游戲中從存盤）
ctx.restore(); //恢復(fù)畫筆變形狀態(tài)到最近的一次保存（游戲中讀取存盤）

ctx.save();//先保存原始狀態(tài)
var deg = 10*Math.PI/180; //要旋轉(zhuǎn)的角度 旋轉(zhuǎn)10度
ctx.rotate(deg); //旋轉(zhuǎn)
ctx.drawImage(img,0,0); //畫圖 ，畫筆是歪的 畫什么都是歪的
ctx.restore();// 取出存盤時(shí)保存的原始狀態(tài)

 （五）SVG繪圖

先來了解一下什么是位圖和矢量圖。簡單了解一下就可以。

位圖：由一個(gè)又一個(gè)像素點(diǎn)組成，每個(gè)點(diǎn)各有自己的顏色，色彩細(xì)膩。
矢量圖：由一個(gè)又一個(gè)線條組成，每個(gè)線條可以指定顏色，方向，可以無限縮放，但顏色細(xì)節(jié)不夠豐富

一、SVG繪圖 使用標(biāo)簽進(jìn)行繪圖，可以直接綁定事件監(jiān)聽

二、如何js創(chuàng)建一個(gè)svg標(biāo)簽！

//var r1 = document.createElement(rect); 創(chuàng)建不了這個(gè)svg元素 因?yàn)橛心晗藓兔臻g  （就是說這樣不行 要用下面的方法創(chuàng)建！！！！）
var r1= document.createElementNS(http://www.w3.org/2000/svg,rect);
r1.setAttribute(width,50);
r1.setAttribute(height,300);
s1.appendChild(r1);

三、svg創(chuàng)建橢圓

四、svg創(chuàng)建直線

注：stroke-linecap="square"有多出來的方形 ，stroke-linecap="round"多出來圓形的區(qū)域，stroke-linecap="butt"不出來多方形   （也就是說你創(chuàng)建的直線設(shè)置這些屬性頭尾有區(qū)別！自己試一下就知道了！細(xì)節(jié)很重要！）

五、svg創(chuàng)建折線

六、地理定位  （以后不用客戶端，我們也可以自己定位咯！）

Geolocation：地理定位，使用JS獲取當(dāng)前瀏覽器所在的地理坐標(biāo)（經(jīng)度，維度，海拔，速度）
數(shù)據(jù)，用于實(shí)現(xiàn)LBS應(yīng)用（Location Based Service），如餓了么，高德導(dǎo)航...
手機(jī)瀏覽器如何獲得定位信息：
1）首選手機(jī)中的GPS芯片與衛(wèi)星通信，定位精度在米
2）次選手機(jī)基站進(jìn)行定位獲取，定位精度在公里 （違法的）
PC瀏覽器如何獲得定位信息：
1）通過IP地址進(jìn)行反向解析，定位精度取決于IP地址庫的大小

HTML5中提供了一個(gè)新的對象，用于獲取當(dāng)前瀏覽器的定位信息：

window.navigator.geolocation{
  getCurrentPosition:fn, //獲得當(dāng)前定位信息
  watchPosition:fn, //監(jiān)視定位數(shù)據(jù)的改變
  clearWatch ：fn // 取消監(jiān)視
}

2、擴(kuò)展：在網(wǎng)頁中如何嵌入百度地圖
1）注冊百度開發(fā)者賬號 map.baidu.com ---> lbsyun.baidu.com
2）創(chuàng)建一個(gè)網(wǎng)站；登錄百度地圖，為網(wǎng)站申請一個(gè)地圖的AccessKey
3）在自己的網(wǎng)頁中嵌入百度地圖提供的API，嵌入百度地圖

這里不多講這個(gè)如何嵌入了！（要記住用百度地圖必須注冊賬號，然后引用人家的庫就對了！）

七、拖放API  

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

八 存儲 

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

九 web Socket 

這個(gè)東西說不說呢。。。。。還是稍微簡單的講一下吧，全靠領(lǐng)悟啊~~

web socket 是一個(gè)可以在服務(wù)器與客戶端之間建立一個(gè)非http的雙向連接！

這個(gè)連接是實(shí)時(shí)的，也是永久的。

服務(wù)器可以主動推送消息。

服務(wù)器不在需要輪詢客戶端的請求，服務(wù)器與客戶端之間通信無需重新建立連接。

也就是可持續(xù)性的 來回通訊。

如何創(chuàng)建呢？一段代碼搞定

var webSocket = new WebSocket （“ws://localhost:8005/socket”）;

//url 必須以“ws” 或者“wss” 文字作為開頭：因?yàn)椴皇莌ttp  是websocket嗎，人家自己的標(biāo)識，加密傳送，記住就好了。

webSocket.send() //發(fā)送文本數(shù)據(jù)，只可以發(fā)送文本。（使用json對象把js對象轉(zhuǎn)換文本數(shù)據(jù)后進(jìn)行發(fā)送）

webSocket.close();//關(guān)閉切斷通訊連接。

webSocket.onmessage= function(event){

　　var data=event.data;

}  // 接收服務(wù)器傳來的消息

webSocket.onopen =function(event){

　　//開始通訊時(shí)的處理

}

webSocket.onclose =function(event){

　　//通訊結(jié)束時(shí)的處理

}

 

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