移動端最實用的HTML5+CSS3開發(fā)教程【大神筆記】

本教程堪稱最實用的移動端最實用的HTML5+CSS3開發(fā)教程，比極客學(xué)院的Html5從入門到精通學(xué)習(xí)知識體系視頻來說，下面分享的的確是實實在在的webAPP開發(fā)干貨。

分別從舉例說明H5拖拽效果、H5上傳案例源碼共享、H5緩沖處理技術(shù)和H5所有事件的用法等。

h5

 

 

第一部分：HTML5新標(biāo)簽和新功能說明

HTML5 提供了很多新的功能，主要有：

新的 HTML 元素，例如 section, nav, header, footer, article 等 用于繪畫的 Canvas 元素 用于多媒體播放的 video 和 audio 元素 用于定位的 Geolocation API 本地存儲以及離線應(yīng)用 Web Workers、Web WebSocket API

移動前端開發(fā)可分為：

  1. 手機(jī)網(wǎng)頁開發(fā)。這部分跟web前端開發(fā)差別不大，使用的技術(shù)都是html+css+js。區(qū)別為手機(jī)瀏覽器是webkit的天下，pc端是IE的天下。

  2. app前端開發(fā)。使用的技術(shù)也是html+css+js，但它需要基于PhoneGap，React Native等開發(fā)平臺調(diào)用手機(jī)核心功能接口（包括地理定位，加速器，聯(lián)系人，聲音和振動等）模擬native app，這部分跟web前端開發(fā)完全不同。最終代碼發(fā)布要分別編譯成各系統(tǒng)平臺的app。

 

 

drag and (拖拽)

拖拽元素事件 : 事件對象為被拖拽元素

dragstart :  拖拽前觸發(fā)  drag :拖拽前、拖拽結(jié)束之間，連續(xù)觸發(fā) dragend  : 拖拽結(jié)束觸發(fā)

目標(biāo)元素事件 : 事件對象為目標(biāo)元素

dragenter :  進(jìn)入目標(biāo)元素觸發(fā)，相當(dāng)于mouseover dragover : 進(jìn)入目標(biāo)、離開目標(biāo)之間，連續(xù)觸發(fā) dragleave :  離開目標(biāo)元素觸發(fā)，相當(dāng)于mouseout   :  在目標(biāo)元素上釋放鼠標(biāo)觸發(fā)

事件的執(zhí)行順序 ：不觸發(fā)的時候

dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend

事件的執(zhí)行順序 ：觸發(fā)的時候(dragover的時候阻止默認(rèn)事件)

dragstart  >  drag >  dragenter >  dragover >   > dragend

解決火狐下的問題

火狐瀏覽器下必須設(shè)置dataTransfer對象的setData方法才可以拖拽除圖片外的其他標(biāo)簽。

dataTransfer屬性和方法

    屬性              描述     Effect      設(shè)置或獲取拖曳操作的類型和要顯示的光標(biāo)類型。     effectAllowed    設(shè)置光標(biāo)樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)     setDragImage    三個參數(shù)：指定的元素，坐標(biāo)X，坐標(biāo)Y     files           獲取外部拖拽的文件，返回一個filesList列表。filesList下有個type屬性，返回文件的類型     方法            描述     clearData   通過 dataTransfer 或 clipboardData 對象從剪貼板刪除一種或多種數(shù)據(jù)格式。     setData() : 設(shè)置數(shù)據(jù) key和value(必須是字符串)     getData() : 獲取數(shù)據(jù)，根據(jù)key值，獲取對應(yīng)的value

只有加阻止默認(rèn)事件才可以觸發(fā)

 oDiv.ondragover = function(ev){  //只有加阻止默認(rèn)事件才可以觸發(fā)         ev.preventDefault();     };

  drag and 的瀏覽器支持情況：
圖片描述

 

HTML5實現(xiàn)拖拽上傳預(yù)覽圖片：

<head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>無標(biāo)題文檔</title>     <style type="text/css">         #div1{             margin: 0 auto;             width:200px;             height:200px;             background:#ccc;             color: white;}         #div1 p{             position: relative;             top: 90px;             left: 50px;         }         li{ width:200px; height:200px; margin:5px; float:left; list-style:none;}         li img{ width:500px;height: auto}     </style>     <script type="text/javascript">         window.onload = function(){             var oUl = document.getElementById('ul1');             var oDiv = document.getElementById('div1');             oDiv.ondragenter = function(){                 this.innerHTML = '可以釋放';             };             oDiv.ondragover = function(ev){                 ev.preventDefault();             };             oDiv.ondragleave = function(){                 this.innerHTML = '請拖拽到此區(qū)域';             };             oDiv.on = function(ev){                 ev.preventDefault();                 var fs = ev.dataTransfer.files;                 for(var i=0;i<fs.length;i++){                     var fr = new FileReader();                     if( fs[i].type.indexOf('image')!=-1 ){                         fr.readAsDataURL( fs[i] );                         fr.onload = function(){                             var oLi = document.createElement('li');                             var oImg = document.createElement('img');                             oImg.src = this.result;                             oLi.appendChild( oImg );                             oUl.appendChild( oLi );                         };                     }                     else{                         alert('親,請拖拽圖片格式');                     }                 }             };         };     </script> </head> <body> <div id="div1"><p>請拖拽到此區(qū)域</p></div> <ul id="ul1"></ul> </body>

FileReader(讀取文件信息)

屬性名描述
error在讀取文件時發(fā)生的錯誤. 只讀.
readyState表明FileReader對象的當(dāng)前狀態(tài).
result讀取到的文件內(nèi)容。這個屬性只在讀取操作完成之后才有效

 

方法名描述
abort中止該讀取操作.在返回時,readyState屬性的值為DONE.
readAsArrayBuffer將File對象F讀取為一個 ArrayBuffer 對象。
readAsBinaryString將File對象F讀取為一個二進(jìn)制字符串。
readAsDataURL將File對象F讀取為編碼過的數(shù)據(jù)URL。
readAsText(File f, [encoding])讀取 File對象F并賦予一個字符串。

創(chuàng)建一個FileReader對象：

var reader = new FileReader();

Web Worker和緩存

Web Worker的基本原理就是在當(dāng)前js的主線程中，使用Worker類加載一個js文件來開辟一個新的線程，起到互不阻塞執(zhí)行的效果，并且提供主線程和新線程之間數(shù)據(jù)交換的接口：postMessage，onmessage。

主機(jī) worker 和 worker 腳本可以通過 postMessage 發(fā)送消息并使用 onmessage 事件偵聽響應(yīng)。消息的內(nèi)容作為事件的數(shù)據(jù)屬性進(jìn)行發(fā)送。

var worker = new Worker('worker.js'); worker.onmessage = function(e) {   alert(e.data); };

worker主線程:

1.通過 worker = new Worker( url ) 加載一個JS文件來創(chuàng)建一個worker，同時返回一個worker實例。 2.通過worker.postMessage( data ) 方法來向worker發(fā)送數(shù)據(jù)。 3.綁定worker.onmessage方法來接收worker發(fā)送過來的數(shù)據(jù)。 4.可以使用 worker.terminate() 來終止一個worker的執(zhí)行。

worker新線程：

1.通過postMessage( data ) 方法來向主線程發(fā)送數(shù)據(jù)。 2.綁定onmessage方法來接收主線程發(fā)送過來的數(shù)據(jù)。

例子：計數(shù)功能

首先創(chuàng)建一個index.html文件

<!doctype html> <html> <head>     <meta charset="UTF-8">     <title>Document</title>     <script type="text/javascript" src="index.js"></script> </head> <body> <div id="numDiv">0</div> <button type="button" id="start">start</button> <button type="button" id="stop">stop</button> </body> </html>

其次，創(chuàng)建一個count.js文件：

var countNum = 0; function count(){     postMessage(countNum);     countNum++;     setTimeout(count,1000); } count();

再創(chuàng)建一個index.js文件

var numDiv; var work = null; window.onload = function () {     numDiv = document.getElementById('numDiv');     document.getElementById('start').onclick = startWorker;     document.getElementById('stop').onclick = function () {         if(work){             work.terminate();//停止，釋放掉資源             work = null;//work重新初始化         }     }; }; function startWorker(){     if(work){         return;     }     work = new Worker('count.js');     work.onmessage = function (e) {         numDiv.innerHTML = e.data;     }; }

圖片描述

Web SQL

三個核心方法：

1、openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫對象。 2、transaction：這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾。 3、executeSql：這個方法用于執(zhí)行真實的SQL查詢。

瀏覽器的本地數(shù)據(jù)庫占用資源少，處理速度快。
openDatabase方法打開一個已經(jīng)存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在，它還可以創(chuàng)建數(shù)據(jù)庫，創(chuàng)建并打開數(shù)據(jù)庫的語法如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

參數(shù)為：數(shù)據(jù)庫名（mydb）、版本號（1.0）、描述（Test DB）和數(shù)據(jù)庫大?。?code>2*1024*1024）以及創(chuàng)建回調(diào)函數(shù)

WebSockets

TCP是因特網(wǎng)的基礎(chǔ)傳輸協(xié)議，而WebSocket是Web應(yīng)用程序的傳輸協(xié)議，它提供了雙向的，按序到達(dá)的數(shù)據(jù)流。WebSocket連接的是URL，而非因特網(wǎng)上的主機(jī)和端口。

 // 創(chuàng)建一個Socket實例 var socket = new WebSocket('ws://localhost:8080'); // 打開Socket socket.onopen = function(ev) {     // 發(fā)送一個初始化消息     socket.send('hello HTML5');     // 監(jiān)聽消息     socket.onmessage = function(ev) {         console.log('Client received a message',ev);     };     // 監(jiān)聽Socket的關(guān)閉     socket.onclose = function(ev) {         console.log('Client notified socket has closed',ev);     };     // 關(guān)閉Socket....     socket.close() };

同http協(xié)議使用http://開頭一樣，WebSocket協(xié)議的URL使用ws://開頭，而安全的WebSocket協(xié)議使用wss://開頭。

HTTP協(xié)議通常承載于TCP協(xié)議之上，有時也承載于TLS或SSL協(xié)議層之上，這個時候，就成了我們常說的HTTPS。
圖片描述
默認(rèn)HTTP的端口號為80，HTTPS的端口號為443。

getUserMedia API

navigator.getUserMedia可以提示用戶需要權(quán)限去使用像攝像頭或麥克風(fēng)之類的媒體設(shè)備.
下面是一個獲取用戶攝像頭并提供拍照功能的例子：

<body> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas> <script type="text/javascript">     // 添加事件監(jiān)聽器     window.addEventListener("DOMContentLoaded", function() {         // 獲取元素，創(chuàng)建設(shè)置等等         var canvas = document.getElementById("canvas"),                 context = canvas.getContext("2d"),                 video = document.getElementById("video"),                 videoObj = { "video": true },                 errBack = function(error) {                     console.log("Video capture error: ", error.code);                 };         // 添加video 監(jiān)聽器         if(navigator.getUserMedia) { // 標(biāo)準(zhǔn)             navigator.getUserMedia(videoObj, function(stream) {                 video.src = stream;                 video.play();             }, errBack);         } else if(navigator.webkitGetUserMedia) { // WebKit 前綴             navigator.webkitGetUserMedia(videoObj, function(stream){                 video.src = window.webkitURL.createObjectURL(stream);                 video.play();             }, errBack);         }         else if(navigator.mozGetUserMedia) { // Firefox 前綴             navigator.mozGetUserMedia(videoObj, function(stream){                 video.src = window.URL.createObjectURL(stream);                 video.play();             }, errBack);         }         document.getElementById("snap").addEventListener("click", function() {             context.drawImage(video, 0, 0, 640, 480);         });     }, false); </script> </body>

下面是瀏覽器兼容性的寫法：

<script type = 'text/javascript'>     navigator.getMedia = ( navigator.getUserMedia ||         navigator.webkitGetUserMedia ||         navigator.mozGetUserMedia ||         navigator.msGetUserMedia); </script>

瀏覽器對象

圖片描述

audio和video

下圖是audio和video的屬性及其瀏覽器的兼容性：
圖片描述

Fullscreen API

進(jìn)入全屏模式

// 找到正確的方法   function launchFullScreen(element) {     if(element.requestFullScreen) {       element.requestFullScreen();     } else if(element.mozRequestFullScreen) {       element.mozRequestFullScreen();     } else if(element.webkitRequestFullScreen) {       element.webkitRequestFullScreen();     }   }   // 啟動全屏模式   launchFullScreen(document.documentElement); // 整個頁面   launchFullScreen(document.getElementById("videoElement")); // 單獨元素

退出全屏模式

function cancelFullscreen() {     if(document.cancelFullScreen) {       document.cancelFullScreen();     } else if(document.mozCancelFullScreen) {       document.mozCancelFullScreen();     } else if(document.webkitCancelFullScreen) {       document.webkitCancelFullScreen();     }   }   // 取消全屏   cancelFullscreen();

全屏屬性和事件

document.fullScreenElement：當(dāng)前全屏顯示的元素。 document.fullScreenEnabled：判斷瀏覽器是否支持全屏。 fullscreenchange事件：全屏狀態(tài)改變事件。

History API

HTML5 更新了兩個API，無刷新更新地址 history.pushState方法和history.replaceState 方法

Geolocation API

Geolocation API 是通過window.navigator.geolocation 獲得對地理定位的訪問的。該對象有如下三個方法：

getCurrentPosition() watchPosition() clearWatch()

圖片描述

表單元素

HTML5 新增了很多表單元素讓開發(fā)者構(gòu)建更優(yōu)秀的 Web 應(yīng)用程序。以下是HTML5新增的表單元素

datalist datetime output keygen  date  month  week time color number  range  email  url

圖片描述

 

 

html5移動端優(yōu)化

PC端的優(yōu)化對于移動端同樣適用，Android同時支持4個并發(fā)請求，iOS 5后可支持6個，所以，應(yīng)盡量減少http請求數(shù)

移動端優(yōu)化

1. PC優(yōu)化手段在Mobile側(cè)同樣適用 2. 在Mobile側(cè)我們提出三秒種渲染完成首屏指標(biāo) 3. 基于第二點，首屏加載3秒完成或使用Loading 4. 基于聯(lián)通3G網(wǎng)絡(luò)平均338KB/s(2.71Mb/s)，所以首屏資源不應(yīng)超過1014KB 5. Mobile側(cè)因手機(jī)配置原因，除加載外渲染速度也是優(yōu)化重點 6. 基于第五點，要合理處理代碼減少渲染損耗 7. 基于第二、第五點，所有影響首屏加載和渲染的代碼應(yīng)在處理邏輯中后置 8. 加載完成后用戶交互使用時也需注意性能

 

詳細(xì)的閱讀《WebAPP移動前端性能優(yōu)化規(guī)范和設(shè)計指導(dǎo)》

 

 

 

不濫用Float

Float在渲染時計算量比較大，盡量減少使用

不濫用Web字體

Web字體需要下載，解析，重繪當(dāng)前頁面，盡量減少使用

不聲明過多的Font-size

過多的Font-size引發(fā)CSS樹的效率

減少重繪和回流

a) 避免不必要的Dom操作 b) 盡量改變Class而不是Style，使用classList代替className c) 避免使用document.write d) 減少drawImage

Viewport可以加速頁面的渲染，請使用以下代碼

< meta name=”viewport” content=”width=device-width, initial-scale=1″>

動畫優(yōu)化

a) 盡量使用CSS3動畫 b) 合理使用requestAnimationFrame動畫代替setTimeout c) 適當(dāng)使用Canvas動畫 5個元素以內(nèi)使用css動畫，5個以上使用Canvas動畫（iOS8可使用webGL）

GPU加速

CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發(fā)GPU渲染，請合理使用 PS：過渡使用會引發(fā)手機(jī)過耗電增加

資料參考：
如何做到一秒渲染一個移動頁面
HTML5與CSS3語法提供瀏覽器兼容性測試及使用建議：http://html5please.com/

 

 

meta相關(guān)總結(jié)

值得你閱讀：Html Meta標(biāo)簽的組成和移動web開發(fā)5種常用法

HTML5頁面窗口自動調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略將頁面中的數(shù)字識別為電話號碼

<meta name="format-detection" content="telephone=no" />

忽略Android平臺中對郵箱地址的識別

<meta name="format-detection" content="email=no" />

當(dāng)網(wǎng)站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari

    <meta name="apple-mobile-web-app-capable" content="yes" />     <!-- ios7.0版本以后，safari上已看不到效果 -->

將網(wǎng)站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態(tài)條的樣式

<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可選default、black、black-translucent -->

 

移動端touch事件(區(qū)分webkit 和 winphone)

當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件

以下支持webkit：

touchstart——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指 touchmove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動 touchend——當(dāng)手指離開屏幕時觸發(fā) touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用

以下支持windows phone 8：

MSPointerDown——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指 MSPointerMove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動 MSPointerUp——當(dāng)手指離開屏幕時觸發(fā)

手機(jī)拍照和上傳圖片

<input type="file">的accept 屬性

<!-- 選擇照片 --> <input type=file accept="image/*"> <!-- 選擇視頻 --> <input type=file accept="video/*">

使用總結(jié)：

ios 有拍照、錄像、選取本地圖片功能 部分android只有選取本地圖片功能 winphone不支持 input控件默認(rèn)外觀丑陋

以上就是前端大神們總結(jié)的一些關(guān)于移動端Html5開發(fā)的筆記和干貨。值得大家收藏和學(xué)習(xí)。


每天更新，
全站高品質(zhì)素材免費(fèi)下載！