html5新特性與用法大全瞭解一下

時間 2019-11-20

標籤 html5 html 特性用法大全瞭解一下欄目 HTML5 简体版

原文原文鏈接

有好多小夥伴私聊我問我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、

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

2、h5中新增的表單元素 -- datalist 建議列表

       <datalist id="lunchList">
 		<option>京醬肉絲</option>
 		<option>鍋包肉</option>
 		<option>魚香肉絲</option>
 		<option>青椒肉絲</option>
 		<option>地三鮮</option>
 	</datalist>
 	請輸入您須要的午飯：<input type="text" name="lunch" list="lunchList"/>

4、h5中新增的表單元素 -- progress 進度條
有兩種形式：
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>

5、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) 表單元素的新屬性
  1、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 : 容許輸入框中出現多個輸入值用逗號分隔 a@dn.com，b@dn.com
              <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
當暫停就顯示廣告，播放就隱藏廣告

三、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);
}

二、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;

難點：座標系座標軸、單詞比較多

三、繪圖變形

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繪圖

先來了解一下什麼是位圖和矢量圖。簡單瞭解一下就能夠。

位圖：由一個又一個像素點組成，每一個點各有本身的顏色，色彩細膩。
矢量圖：由一個又一個線條組成，每一個線條能夠指定顏色，方向，能夠無限縮放，但顏色細節不夠豐富

1、SVG繪圖使用標籤進行繪圖，能夠直接綁定事件監聽

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
   <rect width="100" height="100"></rect>
</svg>

2、如何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);

3、svg建立橢圓

<svg width="300" height="200" id="c6">
  <ellipse rx="100" ry="40" cx="100" cy="100" fill="#faa" stroke="#a00"></ellipse>
</svg>

4、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"不出來多方形（也就是說你建立的直線設置這些屬性頭尾有區別！本身試一下就知道了！細節很重要！）

5、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>

6、地理定位（之後不用客戶端，咱們也能夠本身定位咯！）

Geolocation：地理定位，使用JS獲取當前瀏覽器所在的地理座標（經度，維度，海拔，速度）
數據，用於實現LBS應用（Location Based Service），如餓了麼，高德導航...
手機瀏覽器如何得到定位信息：
1）首選手機中的GPS芯片與衛星通訊，定位精度在米
2）次選手機基站進行定位獲取，定位精度在千米（違法的）
PC瀏覽器如何得到定位信息：
1）經過IP地址進行反向解析，定位精度取決於IP地址庫的大小

HTML5中提供了一個新的對象，用於獲取當前瀏覽器的定位信息：

window.navigator.geolocation{
  getCurrentPosition:fn, //得到當前定位信息
  watchPosition:fn, //監視定位數據的改變
  clearWatch ：fn // 取消監視
}

二、擴展：在網頁中如何嵌入百度地圖
1）註冊百度開發者帳號 map.baidu.com ---> lbsyun.baidu.com
2）建立一個網站；登陸百度地圖，爲網站申請一個地圖的AccessKey
3）在本身的網頁中嵌入百度地圖提供的API，嵌入百度地圖

這裏很少講這個如何嵌入了！（要記住用百度地圖必須註冊帳號，而後引用人家的庫就對了！）

7、拖放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){

　　//通信結束時的處理

}