html5移動端源碼
1. 觸屏uehtml手機版html5手機網站源碼後台怎麼進
1、手機網站一般又稱作WAP網站 , 而傳統網站又稱作Web網站，WAP網站可分為WAP1.X和WAP2.0網站。WAP1.X功能簡單、界面粗糙,而WAP2.0的手機網站功能和界面都與Web網站相接近。WAP2.0的手機網站可以在電腦上直接用瀏覽器訪問，而WAP1.X的網站，需要模擬器或者給瀏覽器安裝相應的插件方可。
2、3G網站是手機網站領域為迎合3G的推廣而創造的概念，3G網站就是手機WAP網站。3G網站採用wap2.0編寫，支持一些xhtml和CSS。
3、html5觸屏版主要針對高端智能手機，可以給用戶呈現華麗的網頁視覺效果。HTML5觸屏版採用最新的技術HTML5編寫，屬於智能機時代產物，因為智能手機的性能已經很強大了，可以直接載入html。
2. 使用html5開發移動端應用採用什麼框架
常用的移動APP開發框架:
框架：PhoneGap
PhoneGap是一個用基於HTML，CSS和javaScript的，創建移動跨平台移動應用程序的快速開發平台。
優點：
可跨平台。phonegap框架幫我們解決了差異性，javascript與平台系統的連接由phonegap框架完成。
提供硬體訪問控制。可調用加速計、攝像頭、羅盤、通訊錄、文檔、地理定位、媒體、網路、通知。
可利用成熟javascript框架。如：Ext js、jQuery。
缺點：
性能差。運行速度慢，UI反應延時。
不能完全跨平台。不同平台代碼需要微調。
內存消耗，調試難度大。
框架：Ionic
Ionic 是一個強大的 HTML5 應用程序開發框架，Ionic 主要關注外觀和體驗，以及應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。 Ionic 是一個輕量的手機 UI 庫，具有速度快，界面現代化、美觀等特點。
優點：
輕量級框架，運行速度快。
於 Angularjs，支持 Angularjs的特性， MVC ，代碼易維護。
通過 SASS 構建應用程序，接近原生。
缺點：
Ionic是一個前段框架。不能完全取代PhoneGap和JavaScript框架的作用。
需要結合插件使用。
框架：Hbuilder（國產）
HBuilder是DCloud（數字天堂）推出一款支持HTML5的Web開發IDE。「快，是HBuilder的最大優勢。
優點：
跨平台：同時支持iOS、Android、Symbian、Windows Phone。
開發工具：基於Eclipse的開發工具，集成UI控制項與應用管理。
代碼加密：基於密鑰的加密方式，無法破解，像混編一樣保護html代碼。
技術支持：技術支持及時響應，重視開發者建議和反饋。
缺點：
AppCan免費版因需要把源代碼上傳到廠商的伺服器上打包，對於企業開發來說源代碼泄露安全性上有一定風險。企業版雖然可以解決，但企業版穩定尚待觀察。
AppCan採用封裝的組件，依賴性比較高。不是開源代碼。
ppCan 不能很好的解決原生代碼的功能。
Wex5(國產)
WeX5應用快速開發框架（含完整的SDK API及全部源碼），一次開發、跨端運行。
優點：
高效精緻的UI組件體系，基於jquery和bootstrap技術，採用增強的RequireJS模塊化技術。
基於phonegap(cordova)框架，如相機、地圖、LBS定位、指南針、通訊錄、文件、語音、電池等。
可視化拖拽式集成開發環境IDE，全能力的調試支持和智能代碼提示。
缺點：
使用范圍有限：適用：一般app、電商app、客服app、會員app、微店微商等。
用戶量小，存在不穩定因素。
總結：
跨平台方面：大部分框架針對android和ios平台，需要做或多或少的代碼調整，不能達到完全跨平台。
性能方面：根據不完全統計，Ionic的性能會更好一點。
PhoneGap出現最早，國內框架都是基於Phonegap開發出來的。
注意：
各框架在實現過程中都會遇到不同程度的坑，請根據框架的側重點謹慎選擇應用的框架。如果要基於Html5開發App，還需要進一步根據需求驗證框架的可實施性、並進行不同框架的效果對比。
3. html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼怎麼寫
html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼如下：
[html]view plain
<!DOCTYPEhtml>
<html><head>
<title>HTML5codeReader</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
</head>
<styletype="text/css">
html,body{height:100%;width:100%;text-align:center;}
</style>
<scriptsrc="jquery-1.9.1.js"></script>
<script>
//這段代主要是獲取攝像頭的視頻流並顯示在Video簽中
varcanvas=null,context=null,video=null;
window.addEventListener("DOMContentLoaded",function()
{
try{
canvas=document.getElementById("canvas");
context=canvas.getContext("2d");
video=document.getElementById("video");
varvideoObj={"video":true,audio:false},
flag=true,
MediaErr=function(error)
{
flag=false;
if(error.PERMISSION_DENIED)
{
alert('用戶拒絕了瀏覽器請求媒體的許可權','提示');
}elseif(error.NOT_SUPPORTED_ERROR){
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器','提示');
}elseif(error.MANDATORY_UNSATISFIED_ERROR){
alert('指定的媒體類型未接收到媒體流','提示');
}else{
alert('系統未能獲取到攝像頭，請確保攝像頭已正確安裝。或嘗試刷新頁面，重試','提示');
}
};
//獲取媒體的兼容代碼，目前只支持（Firefox,Chrome,Opera）
if(navigator.getUserMedia)
{
//qq瀏覽器不支持
if(navigator.userAgent.indexOf('MQQBrowser')>-1){
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器','提示');
returnfalse;
}
navigator.getUserMedia(videoObj,function(stream){
video.src=stream;
video.play();
},MediaErr);
}
elseif(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia(videoObj,function(stream)
{
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.mozGetUserMedia)
{
navigator.mozGetUserMedia(videoObj,function(stream){
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.msGetUserMedia)
{
navigator.msGetUserMedia(videoObj,function(stream){
$(document).scrollTop($(window).height());
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}else{
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器');
returnfalse;
}
if(flag){
alert('為了獲得更准確的測試結果，請盡量將二維碼置於框中，然後進行拍攝、掃描。請確保瀏覽器有許可權使用攝像功能');
}
//這個是拍照按鈕的事件，
$("#snap").click(function(){startPat();}).show();
}catch(e){
printHtml("瀏覽器不支持HTML5CANVAS");
}
},false);
//列印內容到頁面
functionprintHtml(content){
$(window.document.body).append(content+"<br/>");
}
//開始拍照
functionstartPat(){
setTimeout(function(){//防止調用過快
if(context)
{
context.drawImage(video,0,0,320,320);
CatchCode();
}
},200);
}
//抓屏獲取圖像流，並上傳到伺服器
functionCatchCode(){
if(canvas!=null)
{
//以下開始編數據
varimgData=canvas.toDataURL();
//將圖像轉換為base64數據
varbase64Data=imgData;//.substr(22);//在前端截取22位之後的字元串作為圖像數據
//開始非同步上
$.post("saveimg.php",{"img":base64Data},function(result)
{
printHtml("解析結果："+result.data);
if(result.status=="success"&&result.data!="")
{
printHtml("解析結果成功！");
}else{
startPat();//如果沒有解析出來則重新抓拍解析
}
},"json");
}
}
</script>
<body>
<divid="support"></div>
<divid="contentHolder">
<videoid="video"width="320"height="320"autoplay>
</video>
<canvasstyle="display:none;background-color:#F00;"id="canvas"width="320"height="320">
</canvas><br/>
<buttonid="snap"style="display:none;height:50px;width:120px;">開始掃描</button>
</div>
</body></html>
4. 用HTML5寫網頁代碼和寫移動端代碼有什麼區別
沒什麼區別，html5隻是一個標記語言，電腦網頁和移動商網頁都是使用html的。
5. html5開發移動端要用什麼框架比較好
下面給出部分框架的具體優勢，比較後可以選出適合自己的
1， jQTouch
jQTouch易用性強，相關文檔也很全面。它的特色是在 使用HTML,CSS和JavaScript創建iPhone App方面擁有出色的能力。jQTouch使用漸進增強的方案，在您相應的HTML頂層來實現像iPhone那樣的用戶體驗。它簡單易用，提供了一個基礎的小工具集以及動畫方案，開發人員只需要編程控制其動態行為即可。
不過有簡單測試中發現app的性能存在一定的問題，頁面在轉換時可能出現跳轉或者缺失的情況，以及在響應tap事件的時候還有周期性延遲。該項目在技術上還活躍著，不過原作者的進展和部署都顯得太慢了。
只需要遵守MIT的license許可就可以使用jQTouch了
2， jQueryMobile
jQuery Mobile是這個領域的新丁，2010年8月才正式宣布成立，但是已經迅速進展到功能豐富的Alpha 2測試版本了。jQuery Mobile跟jQTouch相比很相似，但是更加標准，更有適應性，感覺很像jQTouch的後繼版本，對用戶介面和style的支持范圍更加寬廣了。
jQuery Mobile的性能是不穩定的，（雖然比jQTouch好一些）特別是在響應TAP事件的動畫延遲補償的時候。此外，還缺少一些關鍵的程序hook，所以不能輕松地讓app更加具有動態性能。例如：當一個頁面啟動的時候事件觸發了，這時候卻無法通知響應的代碼頁面將轉向哪個用戶介面，也不能傳遞附加的信息給處理模塊。針對上述問題，創建工作區來解決還是可行的，但是在這里作者希望其將來的版本能從jQTouch那裡學習一下，並把現在的功能缺陷處理掉。
jQuery Mobile的相關文檔資料很零散但是有所改進，,（請注意，jQuery Mobile是和jQuery UI相輔相成的，並不是建在單純jQuery之上的）
想獲得jQuery Mobile只需獲得MIT或者GPL2 license。
3， Sencha Touch
這是個與Ext JS框架完全不同的產物，其方案與jQTouch/jQuery完全不同：Sencha生成自己的DOM（基於用JavaScript創建的對象）代替了先前存在的HTML增強方式。如此，使用Sencha工作的感覺不像是web編程，而更像是使用Java或者Flex等技術來做app的樣子。比起jQuery來，Sencha的感覺更像是YUI。
sencha跟其競爭對手們相比，擴展性強了很多：它擁有大量的用戶介面組件，直接的iPad支持，擁有JSON和HTML5線下存儲技術使得存儲和數據綁定更加方便。（使用Sencha的數據結構來操作app的數據十分酷~它可以實時響應列表的更新）此外，Sencha還是唯一在工具欄上支持內嵌的對象支持，其他方式都是滾輪列表的樣子。
在測試程序中，使用Sencha與jQTouch/jQuery相比，雖然app很明顯地不那麼輕量級，但是其性能和可靠性方面明顯提高了，不過其初始化載入時間略慢。
當使用庫library或者框架frame進行開發的時候，不遵守框架或者用自己的方式通常都不會獲得成功。但Sencha的支持范圍足夠寬廣，這意味著可以使用Sencha的開發方式來實現任何需求。
在文檔方面，Sencha做的不太好，雖然很廣泛，但是又有很多舊版本的老漏洞沒有及時更新，在這些框架中與bug作斗爭，調試過程浪費了很多時間，因為文檔不夠健全，很多問題難以追蹤或理解。而在開發者論壇響應作者提問的頻率還算較高，不過最終感覺還是不太夠。Sencha提供的付費技術支持起價是$300每年，
獲取Sencha需要遵守GPL3 license，以及在某種不是GPL標准又很相似LGPL的授權下也能用，以及遵循非商業license也可以獲得。
4，TitaniumMobile
與Sencha Touch很相似，Appcelerator公司的Titanium Mobile可以讓您使用Javascript API來編寫app。不過與Sencha不同的是，Titanium把代碼編譯成Native的iPhone或Android app，這意味著它並不是一個真正的Web框架，而是一個兼容層或者編譯器。（請注意Titanium Mobile的近親Titanium Desktop是一個基於web的，可以使用HTML /js來編寫桌面封裝的本地應用的一款軟體）
這么說來Titanium允許web開發人員使用JavaScript和一點點XML之類的其他相關技術，可以實現高性能、更換皮膚很方便的Native App，而不需要額外去學習Objective-C或者Cocoa Touch等技術了。
不過這個優點也是其致命的缺點，只能作出Titanium所支持的平台上面的應用，被它們的開發工具限制住了。想證明這一點只需要換一個不是iPhone的平台上來跑一下就知道了。同時，Titanium的調試器也不怎麼樣，不能使用XCode方式運行或者調試，就算在其模擬器上面程序跑的還算不錯，還是需要自己去實際機器上自己再找問題。
6. html5上下滑動「翻頁」實現，是真正的翻頁
HTML5手機上下滑動翻頁特效是一款手機移動端觸屏滑動效果實現完整代碼如下：
1、html5頁面代碼
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5手機頁面觸屏滑動上下翻頁特效</title>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<link rel="stylesheet" type="text/css" href="./hamer_files/main.css">
<link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css">
<script type="text/javascript" src="./hamer_files/offline.js"></script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
</head>
<body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;">
<section class="u-alert">
<img style="display:none;" src="./hamer_files/loading_large.gif">
<div class="alert-loading z-move">
<div class="cycleWrap"> <span class="cycle cycle-1"></span>
<span class="cycle cycle-2"></span><span class="cycle cycle-3"></span><span class="cycle cycle-4"></span>
</div>
<div class="lineWrap"> <span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span>
</div>
</div>
</section>
<section class="u-arrow">
<p class="css_sprite01"></p>
</section>
<section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;">
<div class="translate-back" style="height: 918px;">
<div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;">
<div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
</div>
</section>
<section class="u-pageLoading">
<img src="./hamer_files/load.gif" alt="loading">
</section>
<script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"></script>
</body></html>
2、css代碼：
@charset "utf-8";
.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}
.ad_foot li a {display:block;}
.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}
.ad_foot li .l img {width:75px; width:75px;}
.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}
.ad_foot li .r p {color:#999; font-size:1.2em; }
.ad_foot li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
.lazy-img, .lazy-finish{background-color:#f0eded;}
.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}
.ad_foot{padding:15px 15px 0 15px;}
/*聲音播放按鈕*/
#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}
/*底部推薦*/
.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}
.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}
.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}
.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}
.ad_foot h3 a.active {color:#FFF; background:#FF9240;}
.magazine_1 li {
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;}
.magazine_1 li a {display:block;}
.magazine_1 li .l {width: 75px;
height: 75px;
float: left;
overflow: hidden;}
.magazine_1 li .l img {width:75px; height:75px;}
.magazine_1 li .r {width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;}
.magazine_1 li .r p {
color: #999;
font-size: 1.2em;
.magazine_1 li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
3、運行效果如下：
7. 如何獲取HTML5源碼
1是用chrome直接訪問瀏覽器。
2是用手機USB鏈接電腦，開啟開發者模式，手機端安裝chrome並開啟開發者模式訪問頁面，PC端chrome安裝插件ADB Plugin，訪問localhost:****，用chrome開發者工具調試。
8. 初學者如何學習HTML5
HTML前端怎麼學習好？作為一門面向大眾的、簡單易學的編程語言，HTML前端入門還是相對比較簡單的，大家在學習的時候只要選擇一個適合自己多學習方式和專業的課程學習就可以，下面我簡單分享一些html的學習路線，感興趣的朋友可以嘗試一下：
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和
BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、
JavaScript函數式編程JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
如果您是零基礎的話您可以按照順序學習就可以得，先學習最基礎的東西，有問題可以及時溝通。
9. 有沒有移動端h5的活體檢測源碼
活體檢測，這個首先要後端有這方面介面。
前端只負責獲取照片或者視頻，檢測的工作都是後端處理。
後端處理完成後，返回結果給前端顯示。
前端就是一個上傳圖片，或者上傳視頻。這個源碼，自己寫一個也是可以的。