溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

如何在html5中使用新特性

發(fā)布時(shí)間：2021-05-12 16:35:58 來(lái)源：億速云 閱讀：155 作者：Leah 欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)如何在html5中使用新特性，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

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

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

例如<footer></footer>

（二）增強(qiáng)型表單 表單2.0

一、

     1）新的input type    h5和h6對(duì)比！  

                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

二、h6中 新增的表單元素 -- datalist 建議列表

<datalist id="lunchList">
    <option>京醬肉絲</option>
    <option>鍋包肉</option>
    <option>魚(yú)香肉絲</option>
    <option>青椒肉絲</option>
    <option>地三鮮</option>
</datalist>

請(qǐng)輸入您需要的午餐：<input type="text" name="lunch" list="lunchList"/>

四、h6中 新增的表單元素 -- progress 進(jìn)度條

    有兩種形式：  

                bootstrap里面有progress插件樣式

<form>
    網(wǎng)絡(luò)連接中<progress></progress>
    <br/>
    <!-- 0-1之間 -->
    下載進(jìn)度 <progress id="p3" value="0"></progress>
    <input type="number" value="1">
</form>
<script type="text/javascript">
    /*settimeout和setInterval區(qū)別在于settimeout執(zhí)行一次，setInterval每隔一段時(shí)間執(zhí)行一次*/
    var t=setInterval(function(){
       var v = p3.value;
       v += 0.1;
       p3.value = v;
       if(v>=1){
        clearInterval(t);
        alert("下載完成");
         }
    },500); 
</script>

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

<body>
    機(jī)油含量：<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:度量衡/刻度尺/，用于標(biāo)示一個(gè)所處的范圍：不可接受（紅色）/可以接受（黃色）/非常優(yōu)秀（綠色）

    <meter min="可取的最小值" max="可取的最大值" low="合理的下限值" high="合理的上限值" optimum="最佳值" value="當(dāng)前值" ></meter>

 3) 表單元素的新屬性

    一、H4中表單元素的屬性：<input>  

                id/class/title/type/value/name/style/readonly/disabled/checked/                 

H5中表單元素的新屬性    

1）placeholder：占位字符 作為提示不可提交                

<input value=“tom” placeholder=“請(qǐng)輸入用戶(hù)名”/>     

2）autofocus：自動(dòng)獲取輸入焦點(diǎn) (不用點(diǎn)一下就可以輸入只第一個(gè)input設(shè)置的才有效)                 

 <input autofocus>     

3） multiple : 允許輸入框中出現(xiàn)多個(gè)輸入值用逗號(hào)分隔 a@dn.com，b@dn.com                 

 <input type="email" name="emails" multiple>     

4)form :用于把輸入域放置到FORM外部                

<form id="f5"></from>                 

<input form="f5">  

=================輸入驗(yàn)證相關(guān)的新屬性==================================     

例子查看input驗(yàn)證相關(guān)的屬性/yz.html                 

5)required :必填項(xiàng)，內(nèi)容不能為空               

  6）maxlength：指定字符串的最大長(zhǎng)度                

7）minlength：指定字符串的最小長(zhǎng)度              

   8）max：指定數(shù)字的最大值               

  9）min：指定數(shù)字的最小值               

  10）pattern：指定輸入必須符合的正則表達(dá)式  

上述驗(yàn)證屬性會(huì)影響表單元素對(duì)應(yīng)的js對(duì)象的validity屬性，validity屬性是驗(yàn)證的屬性。

(三） video 視頻和音頻

    1.flash被H5取代體現(xiàn)在哪些方面？                

flash 繪圖（AS/FLEX） =>Canvas/SVG                 

flash 動(dòng)畫(huà) => 定時(shí)器+Canvas                 

視頻和音頻播放 => VIDEO/AUDIO                 

flash 客戶(hù)端存儲(chǔ) => WebStorage     

2.H5新特性 &mdash;&mdash;視頻播放器 （是個(gè)行內(nèi)塊元素。可以給寬高）                

H5提供了一個(gè)新的標(biāo)簽用于播放視頻：

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

VIDEO標(biāo)簽/對(duì)象常用的成員：  

成員屬性：

<video id="v2" src="" autoplay controls loop muted poster="2.jpg" preload="auto"></video>  

autoplay：false， 是否自動(dòng)播放 默認(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)為空沒(méi)有 preload：視頻預(yù)加載策略，可取值： auto：預(yù)加載視頻的元數(shù)據(jù)以及緩沖一定時(shí)長(zhǎng)，絕對(duì)不可以在手機(jī)端使用  （尺寸/時(shí)長(zhǎng)。第一幀內(nèi)容，緩沖時(shí)長(zhǎng)）（預(yù)加載浪費(fèi)流量） metadata：僅預(yù)加載視頻的元數(shù)據(jù)（尺寸/時(shí)長(zhǎng)，第一幀內(nèi)容，）沒(méi)有緩沖時(shí)長(zhǎng)，適合手機(jī) none：不預(yù)加載任何數(shù)據(jù)

----------------------------------------------------------------- id v2的屬性 用法例如：

v2.playbackRate=3;  

currentTime:當(dāng)前播放的時(shí)長(zhǎng) duration:總時(shí)長(zhǎng) 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)視頻開(kāi)始播放時(shí)觸發(fā)的事件 onpause：當(dāng)視頻暫停時(shí)觸發(fā)的事件  練習(xí)：不使用video自帶的controls，自定義播放/暫停按鈕  鼠標(biāo)移出視頻區(qū)域隱藏按鈕；鼠標(biāo)移入顯示按鈕 例如：視頻音頻、canvas/video.html 當(dāng)暫停就顯示廣告，播放就隱藏廣告

3、H5新特性 &mdash;&mdash;音頻播放器

<audio src=""></audio>
<audio src="">
<source src="res/birds.mp3"></source>
<source src="res/birds.ogg"></source>
<source src="res/birds.wav"></source>

 屬性方法和視頻一樣，只不過(guò)沒(méi)有海報(bào)屬性 ***判斷復(fù)選框是否&radic;選  

cb.onchange=function(){
 this.checked true為選上，false為沒(méi)選
}

（四）、canvas

每個(gè)畫(huà)布上有且只有一個(gè)“畫(huà)筆”對(duì)象 &mdash;&mdash;&mdash;稱(chēng)為“繪圖上下文”對(duì)象&mdash;&mdash;使用該對(duì)象進(jìn)行繪圖！  

var ctx = canvas.getContext('2d') //現(xiàn)在只有2d的 得到畫(huà)布上的畫(huà)布對(duì)象

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：畫(huà)布，H5實(shí)現(xiàn)2D繪圖技術(shù)  

<canvas width="500" height="400">您的瀏覽器不支持canvas</canvas>

 canvas標(biāo)簽在瀏覽器默認(rèn)是300*150的inline-block。畫(huà)布的寬高只能使用HTML/JS屬性來(lái)賦值，不能使用css樣式賦值！  每個(gè)畫(huà)布上有且只有一個(gè)“畫(huà)筆”對(duì)象 &mdash;&mdash;&mdash;稱(chēng)為“繪圖上下文”對(duì)象&mdash;&mdash;使用該對(duì)象進(jìn)行繪圖！ var ctx = canvas.getContext('2d') //現(xiàn)在只有2d的 得到畫(huà)布上的畫(huà)布對(duì)象  

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è)置測(cè)量文本,返回的對(duì)象是{width：x}

3）使用canvas繪制路徑

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

ctx.beginPath() //開(kāi)始一條新路徑
ctx.closePath() //閉合當(dāng)前路徑
ctx.moveTo(x,y) //移動(dòng)到指定點(diǎn)
ctx.lineTo(x,y) //從當(dāng)前點(diǎn)到指定點(diǎn)畫(huà)直線
ctx.arc(cx,cy,r,start,end) ； //繪制圓拱路徑 
//cx cy 是圓心坐標(biāo)xy r是半徑 ，start 開(kāi)始角度，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屬于客戶(hù)端技術(shù)，圖片在服務(wù)器中，所以瀏覽器必須先下載要繪制的圖片，  且等待圖片異步加載完成：

var img = new Images();
img.src='x.png';
console.log(img.width); //0 異步請(qǐng)求圖片
img.onload=function(){
console.log(img.width,img.height); //有值 圖片加載完成
//開(kāi)始繪制圖片到畫(huà)布上
ctx.drawImage(img,x,y); //原始大小繪圖
ctx.drawImage(img,x,y,w,h); //設(shè)置寬高
}

 監(jiān)聽(tīng)鼠標(biāo)在畫(huà)布上方移動(dòng)事件

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)繪圖上下文對(duì)象（即畫(huà)筆），軸點(diǎn)是畫(huà)布的原點(diǎn)
ctx.translate(x,y) //將整個(gè)畫(huà)布的原點(diǎn)平移到指定的點(diǎn)
ctx.sava(); //保存畫(huà)筆當(dāng)前的所有變形狀態(tài)值（游戲中從存盤(pán)）
ctx.restore(); //恢復(fù)畫(huà)筆變形狀態(tài)到最近的一次保存（游戲中讀取存盤(pán)）
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); //畫(huà)圖 ，畫(huà)筆是歪的 畫(huà)什么都是歪的
ctx.restore();// 取出存盤(pán)時(shí)保存的原始狀態(tài)

（五）SVG繪圖

先來(lái)了解一下什么是位圖和矢量圖。簡(jiǎn)單了解一下就可以。

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

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

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

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

//var r1 = document.createElement('rect'); 創(chuàng)建不了這個(gè)svg元素 因?yàn)橛心晗藓兔臻g  （就是說(shuō)這樣不行 要用下面的方法創(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 width="300" height="200" id="c6">
  <ellipse rx="100" ry="40" cx="100" cy="100" fill="#faa" stroke="#a00"></ellipse>
</svg>

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

<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"有多出來(lái)的方形 ，stroke-linecap="round"多出來(lái)圓形的區(qū)域，stroke-linecap="butt"不出來(lái)多方形   （也就是說(shuō)你創(chuàng)建的直線設(shè)置這些屬性頭尾有區(qū)別！自己試一下就知道了！細(xì)節(jié)很重要?。?/p>

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

<svg width="300" height="200" id="c6">
  <polyline points="50,50 100,300 150,100"></polyline> //出來(lái)的是三角形
  <polyline points="50,50 100,300 150,100" fill="transparent" stroke="#000"></polyline> //出來(lái)的是折線
</svg>

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

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）通過(guò)IP地址進(jìn)行反向解析，定位精度取決于IP地址庫(kù)的大小

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

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

2、擴(kuò)展：在網(wǎng)頁(yè)中如何嵌入百度地圖

1）注冊(cè)百度開(kāi)發(fā)者賬號(hào) map.baidu.com ---> lbsyun.baidu.com  2）創(chuàng)建一個(gè)網(wǎng)站；登錄百度地圖，為網(wǎng)站申請(qǐng)一個(gè)地圖的AccessKey  3）在自己的網(wǎng)頁(yè)中嵌入百度地圖提供的API，嵌入百度地圖

這里不多講這個(gè)如何嵌入了?。ㄒ涀∮冒俣鹊貓D必須注冊(cè)賬號(hào)，然后引用人家的庫(kù)就對(duì)了！）

七、拖放API 

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

八 存儲(chǔ)

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

九 web Socket

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

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

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

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

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

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

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

var webSocket = new WebSocket （“ws://localhost:8005/socket”）;
//url 必須以“ws” 或者“wss” 文字作為開(kāi)頭：因?yàn)椴皇莌ttp  是websocket嗎，人家自己的標(biāo)識(shí)，加密傳送，記住就好了。
webSocket.send() //發(fā)送文本數(shù)據(jù)，只可以發(fā)送文本。（使用json對(duì)象把js對(duì)象轉(zhuǎn)換文本數(shù)據(jù)后進(jìn)行發(fā)送）
webSocket.close();//關(guān)閉切斷通訊連接。
webSocket.onmessage= function(event){
　　var data=event.data;
}  // 接收服務(wù)器傳來(lái)的消息
webSocket.onopen =function(event){
　　//開(kāi)始通訊時(shí)的處理
}
webSocket.onclose =function(event){
　　//通訊結(jié)束時(shí)的處理
}

看完上述內(nèi)容，你們對(duì)如何在html5中使用新特性有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手