移動web開發(fā)和html5開發(fā)有什么不同

總體上應該一樣，技術(shù)體系都差不多。不過pc需要兼容的瀏覽器更多些,mobile下andorid,ios都是基于webkit，所以相對好些。

目前創(chuàng)新互聯(lián)建站已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管維護、企業(yè)網(wǎng)站設(shè)計、右玉網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

1、手機網(wǎng)頁開發(fā)。這部分跟web前端開發(fā)差別不大，使用的技術(shù)都是html+css+js。區(qū)別為手機瀏覽器是webkit的天下，pc端是IE的天下。手機網(wǎng)頁可以理解成pc網(wǎng)頁的縮小版加一些觸摸特性。因為是在瀏覽器中進行的網(wǎng)頁開發(fā)，所有最終代碼具有跨系統(tǒng)平臺的特性。

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

PHP配合HTML5在移動WEB開發(fā)上有什么前景？

PHP是后臺技術(shù)，跟移動和PC關(guān)系不大。

至于HTML5的新特性，有不少是針對終端設(shè)備，為的就是在以后在終端設(shè)備上有更好的體驗和交互。

使用HTML5開發(fā)的優(yōu)勢簡單說就是低成本，跨平臺，易維護。劣勢也顯而易見，性能和體驗達不到Native App的水準。

前景肯定是有的，不能說HTML5以后多強多強，因為瀏覽器是硬傷。也不能說多弱，畢竟跨平臺不是誰都可以玩的。因此我理解的前景是，以后的終端App應用，大部分會用HTML5來做，就像現(xiàn)在大部分的PC系統(tǒng)會使用Web技術(shù)而不是類似WinForm的本地技術(shù)。但是這需要時間，等終端上的Web應用性能達到用戶可以接受的時候，HTML5就能達到大范圍使用；而這個時間是可以預見的，也是必然的，因此HTML5的前景還是很可觀。

基于HTML5的移動Web開發(fā)支持哪些新功能

HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。新的語法特征被引進以支持這一點，如video、audio和canvas 標記。HTML5還引進了新的功能，可以真正改變用戶與文檔的交互方式，包括：epub360 等H5編輯工具都是圍繞這個標準設(shè)計的：

· 新的解析規(guī)則增強了靈活性

· 新屬性

· 淘汰過時的或冗余的屬性

· 一個HTML5文檔到另一個文檔間的拖放功能

· 離線編輯

· 信息傳遞的增強

· 詳細的解析規(guī)則

· 多用途互聯(lián)網(wǎng)郵件擴展（MIME）和協(xié)議處理程序注冊

· 在SQL數(shù)據(jù)庫中存儲數(shù)據(jù)的通用標準（Web SQL）

HTML5在2007年被萬維網(wǎng)聯(lián)盟(W3C)新的工作組采用。這個工作組在2008年1月發(fā)布了HTML 5的首個公開草案。眼下，HTML5處于“呼吁審查”狀態(tài)，W3C預期它將在2014年年底達到其最終狀態(tài)。

特性

HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標簽將隨著對RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。

本地存儲特性（Class: OFFLINE STORAGE）

基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術(shù)之一）和API說明文檔。

設(shè)備兼容特性 (Class: DEVICE ACCESS)

從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應用接入開放接口。使外部應用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

連接特性（Class: CONNECTIVITY）

更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。

網(wǎng)頁多媒體特性(Class: MULTIMEDIA)

支持網(wǎng)頁端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。

三維、圖形及特效特性（Class: 3D, Graphics Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。

性能與集成特性（Class: Performance Integration）

沒有用戶會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術(shù)，解決以前的跨域等問題，幫助您的Web應用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

CSS3特性(Class: CSS3)

在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

如何使用HTML5開發(fā)移動web

1、本質(zhì)上沒什么區(qū)別 多關(guān)注一下移動端性能問題 其他與web差不多

2、這個問題還是和性能有關(guān)系 css框架還好 js框架 在部分低版本android機的卡頓明顯

3、h5主要調(diào)試 還是chrome 較新版本的chrome 都有模擬移動端調(diào)試功能

實際上移動端和pc H5開發(fā) 沒有什么本質(zhì)上的區(qū)分，目前移動端webkit當?shù)馈Ｖ皇前裵c的多瀏覽器/核心兼容 轉(zhuǎn)向 多版本/os定制的兼容罷了。

如何用html5構(gòu)建移動端的webapp

H5edu教育html5開發(fā)為您解答：

移動web在當今的發(fā)展速度是一日千里，作為移動領(lǐng)域的門外漢，在這段時間的接觸后，發(fā)現(xiàn)前端開發(fā)這一塊做一個小小的總結(jié)。

1.四大瀏覽器內(nèi)核

1.Trident (IE瀏覽器) :因為在早期IE占有大量的市場份額，所以以前有很多網(wǎng)頁是根據(jù)這個Trident的標準來編寫的，但是實際上這個內(nèi)核對真正的網(wǎng)頁標準支持不是很好，同時存在許多安全Bug。

2.Gecko:( FireFox )優(yōu)點就是功能強大、豐富，可以支持很多復雜網(wǎng)頁效果和瀏覽器擴展接口，缺點是消耗很多的資源，比如內(nèi)存。

3.Webkit: ( Chrome/ Safari / UC )優(yōu)點就是Webkit擁有清晰的源碼結(jié)構(gòu)、極快的渲染速度，缺點是對網(wǎng)頁代碼的兼容性較低，會使一些編寫不標準的網(wǎng)頁無法正確顯示。

4.Presto: ( 歐朋 ) Presto內(nèi)核被稱為公認的瀏覽網(wǎng)頁速度最快的內(nèi)核，同時也是處理JS腳本最兼容的內(nèi)核，能在Windows、Mac及Linux操作系統(tǒng)下完美運行。

移動端開發(fā)主要對象是手持設(shè)備，其中絕大部分是IOS和Android系統(tǒng)，基于Webkit內(nèi)核，可使用Chrome瀏覽器調(diào)試即可。

2.手機瀏覽器

瀏覽器已經(jīng)逐漸從傳統(tǒng)桌面轉(zhuǎn)向手機端，競爭也越來越激烈。目前國內(nèi)市場主流的手機瀏覽器：UC、百度、歐朋、QQ、海豚、safari、Chrome，這些瀏覽器都是基于webkit內(nèi)核的，兼容性方面不存在問題，同時對html5和css3的支持很好，所以，大膽地應用html5和css3技術(shù)吧。

在開始編寫webapp時，前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現(xiàn)一些HTML4中無法實現(xiàn)的豐富的WEB應用程序 的體驗，可以減少開發(fā)者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標簽的作用。比如定義一塊內(nèi)容或文章區(qū)域 可使用section標簽，定義導航條或選項卡可以直接使用nav標簽等等。

3.終端分辨率

手機分辨率比PC分辨率要龐雜得多，各種分辨率有木有？大小差距那么大有木有？這在一定程度上給頁面制作帶來了不小的麻煩。所以針對這樣的因素，必須有充分的考慮。考慮到瀏覽器自適應，需要設(shè)計和制作完成各種不同的方法。

1) 市場上主流手機生產(chǎn)商的產(chǎn)品分辨率。經(jīng)過調(diào)研發(fā)現(xiàn)，目前主流的手機分辨率為：480*800像素、320*480像素，而1280*720像素（720P）會是接下來的趨勢。這些都是很粗略的統(tǒng)計，要有精確的數(shù)據(jù)需要花費不少的精力，那是數(shù)據(jù)分析人員的工作。

2) 項目目標群所持設(shè)備的分辨率。項目目標群即用戶，用戶擁有什么樣的手機分辨率，從一定程度上來說比第一點來得更加重要，它決定著項目開發(fā)的方向。

4.響應式web開發(fā)

在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內(nèi)層）的寬度定死。為達到適配各種手持設(shè)備，我建議前端工程師使用自適應布局模式（支付 寶 采用了自適應布局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮設(shè)備的分辨率。

響應式web開發(fā)不是一項開創(chuàng)性的技術(shù)變革，簡單地說，響應式web設(shè)計采用了媒體查詢、流式布局、液態(tài)圖片三項技術(shù)，把它們組合在一起來制作頁面，使得頁面不只在傳統(tǒng)桌面，在平板電腦和手機上，各種不同的分辨率都能夠完美顯示。而要做到這點，我覺得不難，請繼續(xù)往下：

1) 準備工作：

a) 插件安裝：window resize。您可以通過下載安裝谷歌瀏覽器插件，安裝成功后，當您調(diào)整瀏覽器窗口時，在瀏覽器右下角會有灰度提示當前窗口和類似于手機視圖的大小提示。

b) 編輯器安裝：Hbulder或Webstorm

c) 弄清視圖和屏幕的區(qū)別。視圖是瀏覽器的內(nèi)容顯示區(qū)域，屏幕是設(shè)備的物理顯示區(qū)域。比如視圖寬度我們一般用width表示，而屏幕寬度是用device-width來表示。相信做過手機頁面的童鞋都經(jīng)常見過這段代碼：

meta name="viewport" content="width=device-width,initial-scale=1.0"

其中width=device-width就是說把頁面寬度設(shè)置成和屏幕寬度一樣。

d) 響應式設(shè)計創(chuàng)意網(wǎng)站收集 。這里有很多響應式Web設(shè)計的網(wǎng)站，供您參考和學習。

2) 征途ING：

e) 響應式web設(shè)計之媒體查詢：

為了減少http請求，我想在css樣式表里進行媒體查詢會是個不錯的選擇，而不是在頁面head部分使用link進行加載。樣式表里的媒體查詢格式為：

@media screen and (max-width:960px){}

大括號內(nèi)部書寫樣式。該語句相當于判斷語句，有兩個條件，一個是視口寬度最大不超過960px，screen代表顯示屏，這兩個條件都具備了，就調(diào)用大括號內(nèi)的樣式。

f) 響應式web設(shè)計之流式布局：

流式布局以百分比進行布局。最重要是時刻關(guān)注元素的父級層，所有的元素都是以父級層為基準。流式布局的應用是為了和媒體查詢完美地結(jié)合，形成平滑的布局變 化跳轉(zhuǎn)效果。一般而言，media里的樣式多以width、padding、margin、font-size、line-height這些為主。

g) 響應式web設(shè)計之液態(tài)圖片：

要實現(xiàn)液態(tài)圖片，只需加入如下代碼：img{max-width:100%;}

web移動頭部書寫

1、首先我們來看看webkit內(nèi)核中的一些私有的meta標簽，這些meta標簽在開發(fā)webapp時起到非常重要的作用

meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /

這個meta標簽表示：強制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；

meta content="yes” name=" apple-mobile-web-app-capable" /

meta標簽是iphone設(shè)備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；

meta content="black" name=" apple-mobile-web-app-status-bar-style" /

meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；

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

meta標簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼

主流HTML5移動web開發(fā)框架

肯定使用框架啊，不然還原生 JS、自己寫樣式？

H5 做移動開發(fā)也分兩種，一種就是正常的網(wǎng)頁，一種是封裝的成 App 在手機上跑的。下面我只大致介紹一下又哪些框架，具體的特性不是三兩句能說完的，題主可以自行搜索相關(guān)資料。

后者比較知名的框架就是 PhoneGap、MUI 等等了。

而前者具體分的話還分 CSS 框架和 JS 框架。樣式框架有很多了，常見的有 jQuery Mobile、Bootstrap、Kendo UI、Amaze UI 等等。JS 框架一般是 AngularJS、Backbone、ReactJS 等等，但說實話這些 JS 框架都比較繁重，一般是為比較復雜的場景設(shè)計的，如果你的頁面需求很簡單，那么大可以不用它們只用樣式框架就好了。

值得一提的是國內(nèi) BAT 三大巨頭也分別有自己的 H5 框架，并且都已經(jīng)開源了，百度的是 GMU（Global Mobile UI）、Clouda+、EFE 這三個，阿里的是 Kissy Mobile，騰訊的是 Frozen UI。

網(wǎng)站欄目：html5移動web,html5移動web開發(fā)技術(shù)課后答案
路徑分享：http://chinadenli.net/article49/dsshieh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、建站公司、云服務(wù)器、網(wǎng)站內(nèi)鏈、App設(shè)計、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)