⑴ 怎麼用百度地圖實現 移動web 定位
web2.0
則更注重用戶的交互作用，用戶既是網站內容的瀏覽者，也是網站內容的製造者。越來越多的用戶希望從你的網站上面獲取到有用的信息，比如：公司地址，電話，業務方面等等...相信網頁地圖這個小功能必然會為你的網站增色不少；
2
1.打開瀏覽器，輸入map..com，在右上角找到地圖api鏈接，點擊；
3
2.進入頁面後，拖動滑鼠到達頁面最下方，找到地圖生成器，點擊；
4
3.跳轉到生成代碼頁面，首先選擇你的城市，在圖中所示位置切換，這里以北京為例給大家做演示；
5
4.找到你的位置（或是公司的位置），這里以北京大學為例，單擊；
6
5.設置地圖，寬度和高度可以自定義，這里使用默認的，下面的一些個選項根據自己的需要去選就行；
7
6.添加標注（就是地圖上的小標志），圖標可以選擇，輸入名稱和備注，點擊保存；
8
7.將標注移動到地圖上對應的位置，然後單擊標注，即可顯示你保存的標注信息，效果如圖所示；
9
8.點擊復制代碼，原則上應該將代碼處理後然後插入到網頁適當的位置，（有點html基礎的朋友都知道應該怎麼做），這里給大家做演示，就隨便新建了一個html文件，然後將代碼放了進去；
ps：頂部的網頁字元格式要和自己的原網頁保持一致，如果是在原網頁中嵌入代碼，這個需要自己處理；
⑵ HTML5移動Web開發指南的前言
你是否使用過智能手機瀏覽真正的網頁？
你在使用智能手機瀏覽網頁時會感到困惑嗎？
你是否想知道智能手機上的Web網頁是如何實現的？
如果你存在以上的問題並想解決，那麼閱讀本書將是你的最佳選擇。
HTML5從討論到實踐
現今，HTML5已經成為互聯網的熱門話題之一。2011年的HTML5發展得非常快，各大瀏覽器開發公司如Google、蘋果、微軟、Mozilla及Opera的最新版本瀏覽器都紛紛支持HTML5標准規范。在桌面端Web技術領域，HTML5標準的強大已經開始威脅Adobe公司的Flash在Web上的統治地位。然而，在移動端Web技術領域，由於歷史的原因，HTML5標准才剛剛起步，但隨著HTML5和CSS3逐漸興起，其強大的特性在移動Web應用當中得到了非常好的發揮。
隨著HTML5網站、HTML5應用軟體及HTML5游戲不斷涌現，讓我們更加有理由相信未來HTML5技術將會成為我們在計算機行業當中必備的專業知識。因此，我希望能夠藉助此書幫助國內的Web開發從業者或者即將在此行業發展的讀者，在學習HTML5的同時也能掌握移動Web技術。
為什麼寫作本書
2011年是HTML5實踐的一年，無論是國外的開發者，還是國內的開發者，都熱衷於研究HTML5新標准究竟能給我們帶來什麼。由於HTML5技術非常新，國內很多開發者在實踐過程中經常遇到非常多的困難，例如如何入門與解決BUG等常見問題，都很難找到解答問題的中文資源。因此，開發者們亟需一本能夠帶領他們入門的HTML5書籍。
2011年也是移動互聯網高速發展的一年，隨著iPhone、Android等智能設備的迅速普及，以及Web技術跨平台等優點更廣泛的為人所知，移動Web技術逐漸成為大家關注的新熱點之一。國內移動Web技術中文資源相對缺乏，社區尚待不斷發展，很多開發者仍處於探索研究階段。同時也有部分准備進入移動Web開發領域的新手，苦於入門困難，而難以上手。因此，一本介紹移動Web開發的書籍便成為開發者最渴望的資源之一。
基於上述兩種原因，作者認為需要編寫一本能夠利用HTML5新技術開發移動Web應用的入門書籍，令廣大讀者在真正學習到HTML5新技術的同時，也能快速掌握移動Web開發的基礎知識。
關於本書
本書不足之處在於，本書並沒有全面地介紹HTML5技術，但這並不代表HTML5的其他知識點不能適用於移動Web開發。畢竟HTML5是一個新生事物，它的標准規范仍然在制定之中，而它的不斷發展對於未來的移動Web技術的發展，必將有很大的推動作用。
本書在編寫過程中參考了下列網站、社區及官方文檔等，並引用了部分內容。
HTML5研究小組官方網站
Sencha Touch官方介面文檔及demo例子
jQuery Mobile官方介面文檔
PhoneGap官方網站及介面文檔
PhoneGap中國讀者對象
致 謝
在本書的寫作過程中，得到了很多人士的悉心幫助。在此謹向給予本書幫助的諸位及我所參考的網站社區、官方網站表示誠摯的感謝。特別感謝HTML5研究小組負責人田愛娜女士給予了很大的幫助和支持，她推薦的很多專業人士對本書提供了很多中肯的建議。
另外，由於時間及水平有限，在本書編寫過程中可能存在一些對HTML5及移動Web技術認識不全面或者表述錯漏的地方，敬請讀者批評指正。作者的聯系郵箱為，新浪微博是@三橋sankyu。謹以最真誠的心希望能與讀者共同交流，共同成長。
⑶ 2020年Web前端自學之路指南
今天小編要跟大家分享的文章是關於2020年Web前端自學之路指南。許多人可能跟著網路上的各種教程就入了前端這行的門，但大多數都只是機械的學習著資料中的內容。俗話說，選擇要比努力重要。那麼學習開發，首先應該要有一個清晰的學習路線。希望這篇文章，能為大家在選擇未來的發展方向時提供一些參考和幫助。下面來和小編一起看一看吧！
1、基礎學習
●HTML+CSS基礎：
HTML進階、CSS進階、div+css布局、排版、html+css整站開發，樣式美化和瀏覽器兼容
●JavaScript基礎：
掌握Js基本語法、條件、語句和循環、js內置對象常用方法、ECMAscript、DOM、BOM、定時器和焦點圖，並學習增強邏輯的常用演算法，實現木馬、拖放、放大鏡等常見的網路特效。
●JavaScript高級特性：
正則表達式與JSON、正則表達式案例、JavaScript原理與庫封裝、閉包、函數節流、作用域鏈、面向對象基礎、事件與運動框架封裝
●JQuery基礎使用：
DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件的基本使用，開發復雜的交互功能和效果，並能熟悉JQuery的插件開發機制。
2、HTML5+CSS3和移動Web開發
●HTML5：
HTML5新語義標簽、HTML5表單、音頻和告早視頻、離線和本地存儲、SVG、WebSocket
●CSS3：
CSS3新選擇器、偽元素、顏色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作
●圖像學：
Canvas、Canvas游戲、數據可視化、Heighcharts.js
●Bootstrap：
響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用擾友乎模板、LESS和SASS
●移動Web開發：
跨終端WEB和主流設備簡介、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、商城頁面、滾屏
3、HTTP服務和AJAX編程
●WEB伺服器基礎：
伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹
●PHP基礎：
PHP基礎語法，使用PHP處理簡單的GET/POST請求
●AJAX上篇：
Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用
●AJAX下篇：
JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI用法、使用Ajax實現瀑布流案例
4、面向對象進階
●面向對象終極篇：
從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器
●面向對象三大特徵：
繼承性、多態性、封裝性、介面
●設計模式：
面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程
5、封裝一個屬於自己的框架
●框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框架、選擇框架
●框架封裝中級：
運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝
●框架封裝高級和補充：
JQuery框架雛形、可擴展性、模緩悉塊化
6、模塊化組件開發
●面向組件編程：
面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序
●面向模塊編程：
AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS、CommonJS、ES6Moles
7、工程化&構建、主流的框架
●Web開發工作流：
GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack、打包案例
●MVC/MVVM/MVW框架：
Vue.js、React、Angular.js、Backbone.js、Knockout/Ember、項目驅動
8、Node.js全棧開發
●快速入門：
Node.js發展、生態圈、Io.js、Linux/Windows/OS
X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試;掌握node.js全棧的解決方案和在伺服器端JS高效開發
●核心模塊和對象：
全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端、Socket.IO
●Web開發基礎：
HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。
●快速開發框架：
Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。
●資料庫：
mongoose/mongoDB、MYSQL
●Node.js開發電子商務實戰：
需求與設計、賬戶模塊注冊登錄、會員中心模塊、前台展示模塊、購物車，訂單結算、在線客服即時通訊模塊
9、微信系列
●微信公眾號
JS-SDK配置、定製菜單、回調、定製分享內容、掃一掃、地理位置、微信音頻、圖像、語音識別功能、伺服器端curl
庫、支付、卡券、微店、微信開發模式與公眾號分析、統計分析
●微信小程序
小程序項目、uni-app、mpvue
10、移動APP(Web/Native/Hybrid)
●ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API
●Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)
11、其他
●職業素養
溝通表達、團隊合作、目標管理、時間管理、心態管理
●就業指導
簡歷&投遞技巧、面試&筆試技巧
12、推薦一些編程學習網站
01、嗶哩嗶哩
這個網站如果讓我評價，可謂是上邊的視頻都是非常高質量的，你可以去搜索看一下。
02、菜鳥教程
這個網站雖然不是視頻網站，一聽名字就知道適合菜鳥的，但是基礎的知識寫的非常詳細，很清晰易懂，非常適合剛開始學習編程的小夥伴。
03、W3School
之前剛開始學WEB開發時，經常在該網站，就是結合w3school學習前端，開發時，如果遇到記不清的標簽，就去w3school搜索，平常有時間，就來慕課看前端視頻。
類似這樣的學習網站還有很多，該開始入門的話上面的網站足矣。其他的網站推薦還有騰訊課堂、實驗樓、果殼MOOC學院等、知乎、掘金......
以上就是小編今天為大家分享的關於2020年Web前端自學之路指南的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：原創前端猿前端猿指北
⑷ 如何做一個移動web頁面，用Jquery Mobile 嗎
方法/步驟1簡單的說明一下JQueryMobile.它是一個很好的跨平台的移動端網站開發框架。是一個前台的框架。現在要使用這個框架組一個界面，這個界面很簡單，但是麻雀雖小五臟俱全，然後模板實現，知識講解完畢。html要使用HTML5的標准來寫，因為JQueryMobile是基於HTML5的。書寫html5的格式如圖，2既然使用JQueryMobile就要有這個框架，這里可以使用本地引用的方式，和網上引用，也叫做cdn引用。就是比較穩定和快速的引用外部文件的一種方式。這里使用cdn的方式，這樣只要可以上網就可以使用該框架。3在寫移動端的網站的時候，一定要寫一個meta的name為viewport的屬性，因為該屬性代表著網站頁面的自適應。簡單的寫法為：代表著網站為驅動設備的寬度。4然後加入框架之後，寫一個簡單的界面。這裡面JQueryMobile大量的使用了一個data-的屬性，這里使用最多的事data-role。代表著他默認的樣式規則。就是提前定義好了很多的樣式來供你使用。常用的page.代表著頁面，listview，代表著一個列表視圖。下面是代碼和效果圖5稍微說明一下。data-role="page"是代表著一個頁面可以看做該內容下是一個頁面顯示的內容data-role=」header"代表著頁面的頁頭，就是頁面的最上面顯示的內容這里需要注意，裡面要加上子標簽內容，要不然，就不會居中顯示內容了。推薦使用h1.data-role="footer"代表著頁腳的內容。也是網站的一個說明信息。或者是一個底部導航菜單。還有一部分，就是data-role="content"是代表著頁面內容部分，主要的內容在這裡面顯示。這3個部分構成了一個簡單的頁面。所以，現在可以體驗到它的強大，不用寫太多的代碼一個簡單的框架就好了，下面繼續增加一個listveiw的列表視圖。6完成列表視圖的代碼，增加一個文章列舉表的代碼，這里列表是使用data-role="listview"來修飾樣式。然後這里只需要加上data-role="listview"你發現想要的list效果就實現了。這樣我們一個簡單的頁面效果就實現了。一個簡單開發例子
⑸ 移動端Web頁面適配方案（整理版）
<meta charset="utf-8">
@(概述)[基本概念|百分比|rem|vw/vh|響應式設計]
移動端web頁面的開發，由於手機 屏幕尺寸 、 解析度 不同，或者需要考慮 橫豎屏 問題，為了使得web頁面在不同移動設備上具有相適應的展示效果，需要在開發過程中使用合理的適配方案來解決這個問題。
早期網頁設計採用 靜態布局 ，通過 <meta> 標簽中的 applicable-device 應用設備標識識別移動設備，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 標簽中的 viewport 標簽中設置 width ，通過 js 動態修改標簽的 initial-scale 使得頁面等比縮放，剛好占滿整個屏幕。一些文章中有提到靜態布局中頁面各個元素採用 px 為單位，這種方案實現簡單，不存在兼容性問題，但用戶體驗很不友好。
後面出現 流式布局 ，使用百分比 % 定義寬度，高度使用 px 固定，根據可視區域大小實時進行尺寸調整，通常使用 max-width/min-width 控制尺寸范圍過大或者過小。這種方案實現比較簡單，但在大屏手機或橫豎屏切換場景下可能會導致頁面元素被拉伸變形，字體大小無法隨屏幕大小發生變化。
順應不同頁面字體大小展現問題，出現了 彈性布局 。這種布局方案下，包裹文字的元素的尺寸採用 em/rem 為單位，頁面主要劃分區域的尺寸依據情況使用 px 、百分數或者 em/rem 。如一些高校的網站 jlu ，頁面的主要劃分區域使用 px 和百分比，包裹文字的元素和文字採用 em 。
上面的這幾種方案下，頁面元素的大小按照屏幕解析度進行適配調整，但是整體布局不變，對於 響應式web設計 ，網頁布局會隨著訪問它的視口及設備的不同呈現不同的樣式，在實現上可能會以上多種方案的結合，同時搭配 媒體查詢 技術使用，使得一個頁面在多個終端 (PC, mobile, pad) 呈現滿意效果，如 mashable 。
[TOC]
像素，是屏幕上顯示數據的最基本的點，表示相對大小。不同解析度下相同長度的 px 元素顯示會不一樣，是因為像素點的個數相同情況下，不同解析度下每個像素點對應的像素寬度不同。比如同樣是 14px 大小的字，在 1366×768 顯示屏下會顯示的小，在 1024×768 顯示屏下會相對大。也稱為 物理像素（設備像素 ），是解析度的尺寸單位。
印刷行業常用單位，能夠使用測量設備測得的長度，等於 1/72 英寸。
在不同屏幕上， css 像素呈現的物理尺寸一致，但 css 像素對應的物理像素具數不同。標準的顯示密度下， 1 個 css 像素對應一個物理像素，縮放時， 1 個 css 像素對應的物理像素會減增。是一種 設備獨立像素(device independent pixels: DIPs)
像素密度，每英寸所擁有的像素數。值越高，顯示畫面細節越豐富。計算公式為：[圖片上傳失敗...(image-245547-1621406560980)]
，其中 [圖片上傳失敗...(image-2b7617-1621406560980)]
和 [圖片上傳失敗...(image-f0525f-1621406560980)]
是解析度的寬高，[圖片上傳失敗...(image-2b6254-1621406560980)]
是屏幕尺寸。
列印設備每英寸印刷出來的點有多少個，值越高，圖片越細膩。
設備物理像素和設備獨立像素比 ，即[圖片上傳失敗...(image-6bbc3c-1621406560980)]
是指在理想布局寬度，使用多少個物理像素來渲染一個css像素。js中通過 window.devicePixelRatio 獲取，css中通過 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 進行媒體查詢。
<meta> 標簽中定義了一些元數據信息，通過設置 <meta name = "viewport"> ，提供有關 視口初始大小 的信息，供 移動設備 使用。屬性值為
移動端涉及 布局視口 （Layout Viewport）、 視覺視口 （Visual ViewPort）和 理想視口 （Ideal ViewPort）。
與移動端web頁面適配有關的手機屏幕特性包括
硬體所支持的，屏幕每行的像素 * 每列的像素點數，單位是 px 。
設備獨立的，軟體可以達到的，個人理解是使得軟體/頁面在不同屏幕上顯示出來的效果一致。
像素解析度 ÷ 邏輯解析度等於 倍率 ，如 @3x 表示解析度的 3 倍。一個已知物理像素大小的元素，如果在普通屏中其設備像素等於 css 像素，但在一些高清屏中，如 Retina 顯示屏，一個css像素對應 2 或 3 個設備像素，這時顯示出來的元素會變小。為了讓元素如期待顯示，需要傳入 原始設計稿尺寸 × 倍率 的設計稿，根據 DPR 的定義，這樣載入後能夠達到同樣的效果。
手機屏幕對角線長度換算成英寸的大小
貼上 源碼 分析
視口 是瀏覽器中用於呈現網頁的區域，移動端的視口通常指的是 布局視口
使用 css 預處理器把設計稿尺寸轉換為 vw 單位，包括 文本 ， 布局高寬 ， 間距 等，使得這些元素能夠隨視口大小自適應調整。以 1080px 設計稿為基準，轉化的計算表示為
響應式設計 使得一個網站同時適配 多種設備 和 多個屏幕 ，讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸出方式、設備/瀏覽器能力而變化），使其視覺合理，交互方式符合習慣。如使得內容區塊可伸縮與自由排布，邊距適應頁面尺寸，圖片適應比例變化，能夠自動隱藏/部分顯示內容，能自動折疊導航和菜單。
⑹ 如何使用HTML5開發移動web
1、本質上沒什麼區別 多關注一下移動端性能問題 其他與web差不多
2、這個問題還是和性能有關系 css框架還好 js框架 在部分低版本android機的卡頓明顯
3、h5主要調試 還是chrome 較新版本的chrome 都有模擬移動端調試功能
實際上移動端和pc H5開發 沒有什麼本質上的區分，目前移動端webkit當道。只是把pc的多瀏覽器/核心兼容 轉向 多版本/os定製的兼容罷了。
⑺ 移動web如何實現上傳圖片與伺服器端,之後顯示與手機端
webJSP頁面可以使用smartupload或者fileupload組件上傳圖片到伺服器端，然後再寫個JSP頁面獲取上傳圖片，然後手機在同一個區域網就可以訪問了
⑻ 《HTML5移動Web開發指南》和《HTML5移動應用開發入門經典》哪個更好
建議可以從入門的程度選擇，如果是一點都沒有接觸過，建議選擇《HTML5移動Web開發指南》；如果是了解過原理以及一些常識《HTML5移動應用開發入門經典》更加偏向於實戰案例講解入門：
選擇哪一本書，主要是根據讀者現在自身的情況和講解的內容來進行判斷，兩本書的內容簡介如下：
一、《HTML5移動Web開發指南》本書主要圍繞HTML5技術，講述如何利用HTML5相關技術開發移動Web網站和Web App應用程序。本書共分為四大部分：
1、第一部分主要講述Web技術的發展及HTML5標准在移動Web技術中的應用；
2、第二部分主要介紹HTML5的新功能和新特性如何在移動設備瀏覽器中使用及相關展望；
3、第三部分主要介紹比較流行的兩套JavaScript移動開發框架jQuery Mobile、Sencha ；Touch，以及PhoneGap，並配備豐富的例子作為實踐；
4、第四部分主要結合Sencha Touch框架庫和HTML5技術構建進行講解，旨在幫助讀者將HTML5技術運用於實踐之中。
二、《HTML5移動應用開發入門經典》總共分為24章，以示例的方式對如何使用HTML5及相關技術進行移動應用開發做了全面而細致的介紹。
1、《HTML5移動應用開發入門經典》首先講解了HTML5的起源以及它為什麼適用於移動設備，然後講解了HTML5的基本元素以及所做的改進、canvas（畫布）、視音頻、微格式、微數據、拖曳等新增特性；
2、還講解了WebSocket、WebWorkers、Web存儲、離線Web應用程序、地理定位等新增的API。同時，《HTML5移動應用開發入門經典》還針對不同平台（如iOS、BlackBerry、Android）的移動設備、不同的瀏覽器，就如何開發高可用性的移動應用程序進行了講解。
⑼ WEB移動端開發使用什麼框架比較好
很久以前整理了篇將手機網站做成手機應用的JS框架。時隔一年多，很多新的技術已經出現，下面再來總結下還有哪些框架是適合面向手機設備的開發的。
1、jQuery Mobile
jQuery Mobile 是 jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平台。jQuery Mobile開發團隊說：能開發這個項目，我們非常興奮。移動Web太需要一個跨瀏覽器的框架，讓開發人員開發出真正的移動Web網站。
2、jQTouch
jQTouch 是一個 jQuery 的插件，主要用於手機上的 Webkit 瀏覽器上實現一些包括動畫、列表導航、默認應用樣式等各種常見UI效果的 JavaScript 庫。支持包括 iPhone、Android 等手機。
3、DHTMLX Touch
DHTMLX Touch是一個免費的HTML5/JavaScript框架，專門為觸摸屏設備而優化。為您帶來快速開發工藝精美的移動Web應用程序的能力。DHTMLX Touch UI Designer是一個可視化的編輯器用於構建移動用戶界面。它能夠幫您以最少的編碼構建一流的用戶界面。在其主頁上提供一些示例可以展示DHTMLX Touch強大的用戶界面。包括一個menu app for the iPad (適用於開發餐廳應用) 和Book Shop (一個電子書店應用)。
4、Mobilize.js
Mobilize.js是一個開源的HTML5-JavaScript框架用於從任何現在有標准網站快速，簡便地構建移動網站。這個框架其實就是將需要在移動設備上顯示的部分頁面以jQuery Mobile的默認主題顯示，而不是實現一個全新完整的移動頁面。Mobilize.js 可用於任意網站，但對於基於WordPress和Sphinx的網站不需要使用該框架轉換，因為已經有非常多的插件可以使用。
5、The M Project
The-M-Project是另外一個強大的JavaScript框架，它利用HTML5新的特性來更好和更簡便地開發移動應用。這個框架遵循著名的MVC軟體架構模式。它還支持離線，所以你的用戶可以在沒有連接網路的情況下繼續操作(當下次有連線的時候，再將數據同步到伺服器中)。提供優秀的文檔(這個項目擁有一個引導新用戶入門的開發指南)。可以查看提供的示例來對該項目有一個初目的了解。這些示例包括：ToDo App(待辦事項目應用) 和 KitchenSink (這個示例包括這個框架提供的所有UI元素)。
6、WebApp.Net
WebApp.Net 提供了很多的 API，因此可以幫助你節省很多工作了。不需要花時間去進行 Ajax 調用的編碼，因為已經內置了，另外還有很多其它內置功能，提供了詳細的文檔和應用演示。
7、Wijmo
Wijmo是一個基於jQuery UI的UI部件的套件。Wijmo部件進行了優化客戶端Web開發和利用jQuery的優越的性能和易用性的力量。所有的Wijmo部件都配備了20多個主題和支持ThemeRoller。
8、960 Grid on jQuery-Mobile
jquery-mobile-960 是一個用於移動 Web 開發的網格框架，綜合了 960.gs 的靈活性和 jQuery Mobile 的方便性。它的目的是讓 jQuery Mobile 布局更加的靈活，使得應用應許在移動終端更加易用。
9、Sencha Touch Framework
Sencha Touch 是世界上第一個基於 HTML5 的移動 Web 開發框架，支持最新的 HTML5 和 CSS3 標准，全面兼容 Android 和 Apple iOS 設備，提供了豐富的 WEB UI 組件，可以快速的開發出運行於移動終端的應用程序。Shencha是第一個使用HTML5，CSS和JavaScript並且支持音頻/視頻，本地存儲，圓角，漸變背景以及陰影的開發框架。
10、NimbleKit
NimbleKit 是為 iOS 設備構建應用程序最快速的方式，你不需要知道 Objective-C 或者 iOS SDK，你只需結合 JavaScript 代碼編寫 HTML 頁面就可以了。
11、Touchy™ Boilerplate
Touchy Boilerplate 是一個用來創建移動web app，包括HTML模板，Meta tag等的工具。Touchy可以支持動態頁面導航，固定頁頭，滾動內容，瀏覽歷史記錄等功能。Touchy使用jQuery或者 Zepto.JS。
12、PhoneGap
PhoneGap是一個用基於HTML，CSS和JavaScript的，創建移動跨平台移動應用程序的快速開發平台。它使開發者能夠利用iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯系人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴展無限的功能。PhoneGap是免費的，但是它需要特定平台提供的附加軟體，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套開發。使用PhoneGap只比為每個平台分別建立應用程序好一點點，因為雖然基本代碼是一樣的，但是你仍然需要為每個平台分別編譯應用程序。
13、joshfire
Joshfire是一個開源的跨設備開發框架，幫助開發者創建可以在多種設備上運行的web app。它使用HTML5和JavaScript，並且允許開發者快速整合本地應用和特定的web應用。Joshfire可以讓你的應用接受鍵盤，滑鼠，觸摸屏，遙控器等設備的輸入。Joshfire支持Node.JS。4.Sencha Touch：基於HTML5的移動網頁開發框架。
14、 Julia
Julia框架由基本CSS3文件、JS庫和各個平台的運行庫構成。不像PhoneGap，Julia不僅僅包含調用本機代碼的介面層，它還包含 Model-View-Controller(MVC)支持，Delegation支持，OAuth支持，非同步資料庫存取介面，HTML選擇符(類jQuery調用介面)，HTML模版(允 許嵌入JS代碼)等應用開發必備的API介面。 基於Julia的應用開發就像網站開發那麼簡單，是的，你終於可以用HTML5開發一個完整的、跨平台 的、不亞於本機代碼的、易於維護的移動應用了！大幕即將揭曉，讓我們一起進入移動開發的新時代
15、SproutCore HTML5 Application Framework
SproutCore 是一個 HTML5 移動 Web 開發框架，它的目標是在無需瀏覽器插件的情況下，在瀏覽器中位應用程序提供極佳的桌面效果。
16、Titanium
這是一個強大的，健壯的移動Web開發框架。能夠讓使用現有的HTML, CSS和JavaScript知識來為 iOS和Android平台開發原生移動應用。作為一個越來越大的移動Web框架，它擁有超過300個的APIs和活躍的開發者社區。你從這個社區中得到每一個開發人員的幫助。Titanium Mobile支持原生的iOS和Android UI元素如Table views, tabs, switches和popovers。它提供能夠與移動設備的攝像頭和本地文件存儲系統相交互的特性。
17、Lungo.js
Lungo.js 是一個採用HTML5, CSS3 和JavaScript技術實現的移動Web應用程序開發框架。利用這框架開發的應用程序可運行所有流行的平台包括：iOS, Android, Blackberry 和 WebOs。它還支持觸摸事件如：tap, double-tap和swipe。整個框架沒有用到任何圖片包括圖標，所有都矢量化。可以在這個框架中使用HTML5擁有的一些特性如：WebSQL, 地理位置定位，歷史或設備方向等。Lungo.js是一個模塊化並且完全可定製的框架。
18、xui.js
有時候你可能需要一個超輕量級的框架，只要擁有用於開發標准客戶端所需要的功能如：DOM操作，事件處理，Ajax和一些動畫效果。如果是這樣的話，這個框架剛好非常適合你。整個框架採用GZIP壓縮完之後只有4.2 KB。
19、EmbedJS
EmbedJS是一個用於嵌入式設備的JavaScript框架如：行動電話，TVs、tablets和so forth。EmbedJS強大之處在於，它擁有專門為特定平台和瀏覽器如iOS, Firefox, Android等提供相應的開發版本。這樣就能夠以最少的代碼，為用戶提供最佳的體驗。而且假如你喜歡自己定製，可以利用其提供的EmbedJS Build tool工具實現。EmbedJS基於Dojo實現，所以你如果熟悉Dojo API語法，那EmbedJS將是你最佳的選擇。
20、zepto.js
zepto.js是一個專為mobile WebKit瀏覽器(如：Safari和Chrome)而開發的一個JavaScript框架。它標榜自己在其簡約的開發理念，能夠幫助開發人員簡單、快速地完成開發交付任務。更重要的是這個JS框架，是超輕量級的，只有5KB。zepto.js的語法借鑒並且兼容jQuery。
21、Baker
Baker是用來在iPad或者iPhone平台上發布互動式的電子書或者電子雜志的HTML5電子書框架。
22、ChocolateChip-UI
ChocolateChip-UI 是一個手機移動 Web 開發框架，採用 HTML5, WAML, CSS 和 JavaScript等技術實現。基於 ChocolateChip JavaScript 框架，包含最新的 ChUI.JS 和 ChUI.css.
23、Magazine Grid
Magazine Grid 是一個超現代的 CSS 框架，用於 iPad 和 iPhone 手機，使用類似雜志的設計風格。Magazine Grid 可讓用戶使用 HTML5 元素來組織雜志頁，非常輕量級(<4k)，在移動設備上載入非常快，對老的瀏覽器也支持。
24、Kendo UI
Kendo UI是一個強大的框架用於快速HTML5 UI開發。基於最新的HTML5、CSS3和JavaScript標准。 Kendo UI包含了開發現代JavaScript開發所需要的所有一切，包括：強大的數據源，通用的拖拉(Drag-and-Drop)功能，模板，和UI控制項。
25、HTML App Host Framework
這是一個用於構建基於 Windows Phone 7 的 HTML/JavaScript 託管框架，使用 HTML5 技術。該框架由支持在標准 xap 格式中嵌入 html 應用的控制項。
⑽ web網站優化可以如何實現
隨著互聯網的不斷發展，越來越多的消費者都開始通過移動端來訪問網路接收自己需要的信息。而這些信息的傳播都是需要通過移動端網頁來實現的，所以，霍營北大青鳥今天就一起來了解一下關於移動端web網頁的優化方法。
WEB服務端優化
有貨的WEB端主要使用了nodejs，基於後端服務提供的HTTP介面服務來實現的前後端分離，這里的服務端優化主要是指在nodejs實現的web服務端進行優化。
優化的目的是提升服務端的響應和並發能力，充分發揮nodejs的非同步非阻塞的特性，主要從以下幾個方面去優化。
介面服務調用的優化
對於一個頁面展示的路由，要處理這個路由，可能需要調用多個介面並且進行進行界面邏輯的處理。
介面合並我們對於一個頁面調用可以合並的介面，進行介面合並，減少介面調用次數，如：以商品詳情頁為例，商品的一些特性，可以在一個介面返回，盡可能的減少介面調用的個數，因為每次介面的處理都有網路IO,對象序列化，壓縮和解壓的過程。
介面非同步調用但是並不是所有的介面都可以合並，對於無法合並的介面，我們盡量使用node的非同步非阻塞的特性，進行非同步調用，同時調取多個介面，而調用耗時取決於較慢的介面。
這里要說明一點：對於介面依賴，如A介面依賴B介面的返回結果，像這種情況，我們最好梳理下介面設計，減少這樣的串列調用，因為這樣，調用耗時是多個介面耗時的總和。
減少介面交互數據返回的數據較多的情況下，會導致JSON序列化，數據批量對象處理，產生額外的性能損耗。可以做下介面返回數據結構的精簡，返回必要的欄位(頁面會展示用到的數據)以及可以調整返回item個數。從而達到減少數據的返回消息體的大小。此外請求介面時需要gzip壓縮，可以大大的減少網路傳輸的時間，盡管需要解壓會消耗一部分CPU的時間，但是對接網路IO的損耗，還是值得的。
業務處理的優化
現在我們主要的服務端業務處理，主要對於頁面邏歲散輯的處理，如路由控制，會話處理，視圖對象處理，模板渲染。我們在這些處理過程中進行了一些優化。
模板渲染的優化
我們在實際使用過程中，發現模板的渲染是十分消耗性能的，特別的模板的預處理過程，如果預處理過程是在用戶訪問過程中去處理，會弊雀飢慢不止一個數量級，所以我們把預處理的過程提前了(改造租返了hbs)，在啟動web應用時，已經預編譯完成。同時我們發現handlebars的一些默認配置屬性，如縮減處理，在字元串拼接過程中會損耗一定的性能，所以可以關閉html片段的縮減。