今天就跟大家聊聊有關(guān)如何在html5中使用新特性,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)徐水免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了超過千家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
1)新的語義標(biāo)簽 footer header 等等 2)增強(qiáng)型表單 表單2.0 3)音頻和視頻 4)canvas 繪圖 5) SVG繪圖 6)地理定位 7) 拖放API 8)web worker 用來執(zhí)行耗時任務(wù) 9)web Storage 在瀏覽器端存儲大量數(shù)據(jù) 10)web Socket 一種持續(xù)性的連接(非http協(xié)議)
(一)新型的語義標(biāo)簽就不說了,
例如<footer></footer>
(二)增強(qiáng)型表單 表單2.0
一、
1)新的input type h5和h6對比!
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>魚香肉絲</option> <option>青椒肉絲</option> <option>地三鮮</option> </datalist>
請輸入您需要的午餐:<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每隔一段時間執(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)示一個所處的范圍:不可接受(紅色)/可以接受(黃色)/非常優(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=“請輸入用戶名”/>
2)autofocus:自動獲取輸入焦點(diǎn) (不用點(diǎn)一下就可以輸入只第一個input設(shè)置的才有效)
<input autofocus>
3) multiple : 允許輸入框中出現(xiàn)多個輸入值用逗號分隔 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:指定字符串的最大長度
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 動畫 => 定時器+Canvas
視頻和音頻播放 => VIDEO/AUDIO
flash 客戶端存儲 => WebStorage
2.H5新特性 ——視頻播放器 (是個行內(nèi)塊元素??梢越o寬高)
H5提供了一個新的標(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> 它本身是一個300*150的行內(nèi)塊元素 備注:寫多行source是為了兼容各個瀏覽器。因?yàn)闉g覽器對視頻格式支持不統(tǒng)一,有些瀏覽器例如有些瀏覽器支持mp4格式,那么它就播放第一個mp4格式的視頻,如果它不支持就檢查是不是支持下面的ogg視頻,如果支持就播放,不支持的話繼續(xù)向下,下面沒有source了,那么就顯示“您的瀏覽器不支持VIDEO播放!”。
VIDEO標(biāo)簽/對象常用的成員:
成員屬性:
<video id="v2" src="" autoplay controls loop muted poster="2.jpg" preload="auto"></video>
autoplay:false, 是否自動播放 默認(rèn)false controls:false,是否顯示播放控件,默認(rèn)為false loop:false ,是否循環(huán)播放,默認(rèn)為false muted:false,是否靜音播放,默認(rèn)為false poster:'',在播放第一幀之前顯示的海報,可以是圖片。默認(rèn)為空沒有 preload:視頻預(yù)加載策略,可取值: auto:預(yù)加載視頻的元數(shù)據(jù)以及緩沖一定時長,絕對不可以在手機(jī)端使用 (尺寸/時長。第一幀內(nèi)容,緩沖時長)(預(yù)加載浪費(fèi)流量) metadata:僅預(yù)加載視頻的元數(shù)據(jù)(尺寸/時長,第一幀內(nèi)容,)沒有緩沖時長,適合手機(jī) none:不預(yù)加載任何數(shù)據(jù)
----------------------------------------------------------------- id v2的屬性 用法例如:
v2.playbackRate=3;
currentTime:當(dāng)前播放的時長 duration:總時長 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)視頻開始播放時觸發(fā)的事件 onpause:當(dāng)視頻暫停時觸發(fā)的事件 練習(xí):不使用video自帶的controls,自定義播放/暫停按鈕 鼠標(biāo)移出視頻區(qū)域隱藏按鈕;鼠標(biāo)移入顯示按鈕 例如:視頻音頻、canvas/video.html 當(dāng)暫停就顯示廣告,播放就隱藏廣告
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>
屬性方法和視頻一樣,只不過沒有海報屬性 ***判斷復(fù)選框是否√選
cb.onchange=function(){ this.checked true為選上,false為沒選 }
(四)、canvas
每個畫布上有且只有一個“畫筆”對象 ———稱為“繪圖上下文”對象——使用該對象進(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 width="500" height="400">您的瀏覽器不支持canvas</canvas>
canvas標(biāo)簽在瀏覽器默認(rèn)是300*150的inline-block。畫布的寬高只能使用HTML/JS屬性來賦值,不能使用css樣式賦值! 每個畫布上有且只有一個“畫筆”對象 ———稱為“繪圖上下文”對象——使用該對象進(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); //填充一個矩形 x ,y坐標(biāo) w,h 寬高 ctx.strokeRect(x,y,w,h); //描邊一個矩形 ctx.clearRect(x,y,w,h) 清除一個矩形范圍內(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中的“鋼筆工具”,由多個坐標(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) //將整個畫布的原點(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();// 取出存盤時保存的原始狀態(tài)
(五)SVG繪圖
先來了解一下什么是位圖和矢量圖。簡單了解一下就可以。
位圖:由一個又一個像素點(diǎn)組成,每個點(diǎn)各有自己的顏色,色彩細(xì)膩。 矢量圖:由一個又一個線條組成,每個線條可以指定顏色,方向,可以無限縮放,但顏色細(xì)節(jié)不夠豐富
一、SVG繪圖 使用標(biāo)簽進(jìn)行繪圖,可以直接綁定事件監(jiān)聽
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="100"></rect> </svg>
二、如何js創(chuàng)建一個svg標(biāo)簽!
//var r1 = document.createElement('rect'); 創(chuàng)建不了這個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 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"有多出來的方形 ,stroke-linecap="round"多出來圓形的區(qū)域,stroke-linecap="butt"不出來多方形 (也就是說你創(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> //出來的是三角形 <polyline points="50,50 100,300 150,100" fill="transparent" stroke="#000"></polyline> //出來的是折線 </svg>
六、地理定位 (以后不用客戶端,我們也可以自己定位咯?。?/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)通過IP地址進(jìn)行反向解析,定位精度取決于IP地址庫的大小
HTML5中提供了一個新的對象,用于獲取當(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)建一個網(wǎng)站;登錄百度地圖,為網(wǎng)站申請一個地圖的AccessKey 3)在自己的網(wǎng)頁中嵌入百度地圖提供的API,嵌入百度地圖
這里不多講這個如何嵌入了?。ㄒ涀∮冒俣鹊貓D必須注冊賬號,然后引用人家的庫就對了!)
七、拖放API
前面有講過拖放:小伙伴們自己往前找一下以前的博客。
八 存儲
存儲主要就是cookie和session(前面一找一大堆的寫法我講一下區(qū)別吧還有注意事項(xiàng)) :要記住session是關(guān)了瀏覽器就消失的,cookie是關(guān)了瀏覽器也不消失的!注意注意:cookie存儲時候必須加時間、不加時間的話關(guān)閉瀏覽器之后同樣消失!這瀏覽器存儲利用起來解決了很多功能問題比如記住密碼等功能??!
九 web Socket
這個東西說不說呢。。。。。還是稍微簡單的講一下吧,全靠領(lǐng)悟啊~~
web socket 是一個可以在服務(wù)器與客戶端之間建立一個非http的雙向連接!
這個連接是實(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){ //開始通訊時的處理 } webSocket.onclose =function(event){ //通訊結(jié)束時的處理 }
看完上述內(nèi)容,你們對如何在html5中使用新特性有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
當(dāng)前題目:如何在html5中使用新特性
轉(zhuǎn)載注明:http://muchs.cn/article12/ghijdc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、外貿(mào)建站、企業(yè)建站、虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)