第一：學(xué)習(xí)前端我是怎么掉培訓(xùn)機(jī)構(gòu)坑里的前端確實(shí)是一門(mén)很好的技術(shù)，我個(gè)人也很喜歡這個(gè)技術(shù)，奈何我大學(xué)的時(shí)候光玩了，沒(méi)有好好學(xué)習(xí)這么技術(shù)，當(dāng)大學(xué)畢業(yè)面臨找工作的時(shí)候，我才突然發(fā)現(xiàn)，原來(lái)這幾年的大學(xué)都是虛度了，我什么都不會(huì)，腦子沒(méi)什么長(zhǎng)進(jìn)，肉長(zhǎng)了一身。在我內(nèi)心迷茫的時(shí)刻，我發(fā)現(xiàn)我的前輩師哥師姐們很多做前端混的不錯(cuò)，于是我就想從事前端技術(shù)的開(kāi)發(fā)，可是我不會(huì)，我就在我們當(dāng)?shù)氐囊粋€(gè)前端機(jī)構(gòu)參加了培訓(xùn)耗費(fèi)了我?guī)兹f(wàn)的大洋，在這個(gè)機(jī)構(gòu)半年的學(xué)習(xí)，我簡(jiǎn)直是要崩潰了，曾經(jīng)大學(xué)時(shí)代，老師講的好，我不好好學(xué)?，F(xiàn)在是我想好好學(xué)了，老師講的太差了，很多知識(shí)點(diǎn)老師自己講著講著自己都蒙圈了，不知道應(yīng)該如何往下講了，此刻我的心是崩潰的。后來(lái)我調(diào)查發(fā)現(xiàn)，其實(shí)很多類(lèi)似的機(jī)構(gòu)都是剛剛從大學(xué)畢業(yè)的學(xué)生當(dāng)?shù)睦蠋煟麄儾](méi)有什么實(shí)戰(zhàn)開(kāi)發(fā)經(jīng)驗(yàn)，講的也不是什么實(shí)用的新技術(shù)流，依然每天圍繞著所謂的概念講啊講，簡(jiǎn)直就是糊弄。半年的課程還沒(méi)結(jié)束，我們班的同學(xué)已經(jīng)走了一半多了。二   在我迷茫時(shí)想放棄前端時(shí)，他改變了我，讓我玩轉(zhuǎn)前端當(dāng)我懷著一個(gè)迷茫的心情離開(kāi)這家機(jī)構(gòu)，我的內(nèi)心是迷茫的，看不清未來(lái)，更何況我因?yàn)閰⒓舆@個(gè)機(jī)構(gòu)的學(xué)習(xí)欠了幾萬(wàn)塊錢(qián)了，我實(shí)在是走投無(wú)路了。只能在網(wǎng)吧打游戲混日子頹廢我的人生，也不想回家，就怕爸爸媽媽問(wèn)我學(xué)的怎么樣，我真的沒(méi)臉回答他們。每天在網(wǎng)吧對(duì)著電腦，我的內(nèi)心是很空洞的，我再問(wèn)我難道要這么繼續(xù)下去嗎？我難道要這么失敗下去嗎？為什么別人可以做到，而我卻不可以呢？我要證明我的存在，我要證明我的價(jià)值。在網(wǎng)吧待了很多天，我發(fā)現(xiàn)一個(gè)奇怪的人，我們整個(gè)網(wǎng)吧里的人幾乎都在打游戲，唯獨(dú)他，每天拿著一個(gè)筆，一個(gè)本子，在電腦旁邊學(xué)邊記，我鼓著勇氣走到他面前，看他在干什么，他對(duì)我笑了笑說(shuō)，你好，我在學(xué)前端呢。我問(wèn)他學(xué)的怎么樣了，他說(shuō)他學(xué)了一個(gè)多月了，已經(jīng)自己獨(dú)立完成了三個(gè)網(wǎng)站的制作了。我簡(jiǎn)直不敢相信我的耳朵，我都學(xué)習(xí)了三個(gè)月了，一個(gè)像樣的網(wǎng)站我也沒(méi)整出來(lái)啊，更何況我是正規(guī)軍跟老師學(xué)的，這哥們?cè)诰W(wǎng)上學(xué)的。這哥們很熱心，把他學(xué)習(xí)的群介紹給了我，把我也拉了進(jìn)去，我在里面聽(tīng)了幾天，聽(tīng)的我是熱血沸騰，原來(lái)前端這么好玩，這么高大上，可以開(kāi)發(fā)出這么炫酷的效果，技術(shù)可以這么好玩。我在這個(gè)群里學(xué)了2個(gè)月，啥也沒(méi)花，就付出了時(shí)間和努力，就感覺(jué)收獲滿(mǎn)滿(mǎn)的，然后再我們當(dāng)?shù)卣伊艘环莺苓€不錯(cuò)的工作。很多朋友在問(wèn)我這個(gè)群是啥？那我跟大家說(shuō)一下吧，位于前面開(kāi)頭的一組數(shù)字是：517，接下來(lái)排在第二組的數(shù)字是：125，位于尾巴部位的一組是：299，按照先后順序組合起來(lái)就可以了。是不是很好玩的一個(gè)數(shù)字組合游戲，聰明的你可以試試，里面有很多實(shí)用的前端開(kāi)發(fā)教程奧。這個(gè)地方改變了我的命運(yùn)，這個(gè)人也成為了我的好朋友。二  ：   大前端完整學(xué)習(xí)路線(xiàn)（詳解），讓大家少走一些彎路第一階段：HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開(kāi)發(fā)、JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對(duì)象常用方法、常見(jiàn)DOM樹(shù)操作大全、ECMAscript、DOM、BOM、定時(shí)器和焦點(diǎn)圖。JS基本特效：常見(jiàn)特效、例如：tab、導(dǎo)航、整頁(yè)滾動(dòng)、輪播圖、JS制作幻燈片、彈出層、手風(fēng)琴菜單、瀑布流布局、滾動(dòng)事件、滾差視圖。JS高級(jí)特征：正則表達(dá)式、排序算法、遞歸算法、閉包、函數(shù)節(jié)流、作用域鏈、基于距離運(yùn)動(dòng)框架、面向?qū)ο蠡A(chǔ)、JQuery：基礎(chǔ)使用懸著器、DOM操作、特效和動(dòng)畫(huà)、方法鏈、拖拽、變形、JQueryUI組件基本使用。第二階段：HTML5和移動(dòng)Web開(kāi)發(fā)HTML5：HTML5新語(yǔ)義標(biāo)簽、HTML5表單、音頻和視頻、離線(xiàn)和本地存儲(chǔ)、SVG、Web Socket、Canvas.CSS3:CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動(dòng)畫(huà)、景深和深透、3D效果制作、Velocity.js框架、元素進(jìn)場(chǎng)、出場(chǎng)策略、炫酷CSS3網(wǎng)頁(yè)制作。Bootstrap:響應(yīng)式概念、媒體查詢(xún)、響應(yīng)式網(wǎng)站制作、刪格系統(tǒng)、刪格系統(tǒng)原理、Bootstrap常用模板、LESS和SASS。移動(dòng)Web開(kāi)發(fā)：跨終端WEB和主流設(shè)備簡(jiǎn)介、視口、流式布局、彈性盒子、rem、移動(dòng)終端JavaScript事件、手機(jī)中常見(jiàn)JS效果制作、Zepto.js、手機(jī)聚劃算頁(yè)面、手機(jī)滾屏。第三階段：HTTP服務(wù)和AJAX編程WEB服務(wù)器基礎(chǔ)：服務(wù)器基礎(chǔ)知識(shí)、Apache服務(wù)器和其他WEB服務(wù)器介紹、Apache服務(wù)器搭建、HTTP介紹。PHP基礎(chǔ)：PHP基礎(chǔ)語(yǔ)法、使用PHP處理簡(jiǎn)單的GET或者POST請(qǐng)求、AJAX上篇：Ajax簡(jiǎn)介和異步的概念、Ajax框架的封裝、XMLHttpRequest對(duì)象詳細(xì)介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問(wèn)題、XML介紹和使用。AJAX下篇：JSON和JSON解析、數(shù)據(jù)綁定和模板技術(shù)、JSONP、跨域技術(shù)、圖片預(yù)讀取和lazy-load技術(shù)、JQuery框架中的AjaxAPI、使用Ajax實(shí)現(xiàn)爆布流案例額。第四階段：面向?qū)ο筮M(jìn)階面向?qū)ο蠼K極篇：從內(nèi)存角度到理解JS面向?qū)ο?、基本?lèi)型、復(fù)雜類(lèi)型、原型鏈、ES6中的面向?qū)ο蟆傩宰x寫(xiě)權(quán)限、設(shè)置器、訪(fǎng)問(wèn)器。面向?qū)ο笕筇卣鳎豪^承性、多態(tài)性、封裝性、接口。設(shè)計(jì)模式：面向?qū)ο缶幊趟季S、單例模式、工廠(chǎng)模式、策略模式、觀(guān)察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。第五階段：封裝一個(gè)屬于自己的框架框架封裝基礎(chǔ)：事件流、冒泡、捕獲、事件對(duì)象、事件框架、選擇框架?？蚣芊庋b中級(jí)：運(yùn)動(dòng)原理、單物體運(yùn)動(dòng)框架、多物體運(yùn)動(dòng)框架、運(yùn)動(dòng)框架面向?qū)ο蠓庋b?？蚣芊庋b高級(jí)和補(bǔ)充：JQuery框架雛形、可擴(kuò)展性、模塊化、封裝屬于傳智自己的框架。第六階段：模塊化組件開(kāi)發(fā)面向組件編程：面向組件編程的方式、面向組件編程的實(shí)現(xiàn)原理、面向組件編程實(shí)戰(zhàn)、基于組件化思想開(kāi)發(fā)網(wǎng)站應(yīng)用程序。面向模塊編程：AMD設(shè)計(jì)規(guī)范、CMD設(shè)計(jì)規(guī)范、RequireJS，LoadJS、淘寶的SeaJS。第七階段：主流的流行框架Web開(kāi)發(fā)工作流：GIT/SVN、Yeoman腳手架、NPM/Bower依賴(lài)管理工具、Grunt/Gulp/Webpack。MVC/MVVM/MVW框架：Angular.js、Backbone.js、Knockout/Ember。常用庫(kù)：React.js、Vue.js、Zepto.js。第八階段：HTML5原生移動(dòng)應(yīng)用開(kāi)發(fā)Cordova：WebApp/NativeApp/HybirdApp簡(jiǎn)介、Cordova簡(jiǎn)介、與PhoneGap之間的關(guān)系、開(kāi)發(fā)環(huán)境搭建、Cordova實(shí)戰(zhàn)（創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布）。Ionic：Ionic簡(jiǎn)介和同類(lèi)對(duì)比、模板項(xiàng)目解析、常見(jiàn)組件及使用、結(jié)合Angular構(gòu)建APP、常見(jiàn)效果（下拉刷新，上拉加載，側(cè)滑導(dǎo)航，選項(xiàng)卡）。React Native：React Native簡(jiǎn)介、React Native環(huán)境配置、創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布、原生模塊和UI組件、原生常用API。HTML5+：HTML5+中國(guó)產(chǎn)業(yè)聯(lián)盟、HTML5 Plus Runtime環(huán)境、HBuilder開(kāi)發(fā)工具、MUI框架、H5+開(kāi)發(fā)和部署。第九階段：   Node.js全棧開(kāi)發(fā)：快速入門(mén)：Node.js發(fā)展、生態(tài)圈、Io.js、Linux/Windows/OS X環(huán)境配置、REPL環(huán)境和控制臺(tái)程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開(kāi)發(fā)流程，調(diào)試，測(cè)試。核心模塊和對(duì)象：全局對(duì)象global，process，console，util、事件驅(qū)動(dòng)，事件發(fā)射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務(wù)端與客戶(hù)端、Socket.IO。Web開(kāi)發(fā)基礎(chǔ)：HTTP協(xié)議，請(qǐng)求響應(yīng)處理過(guò)程、關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪(fǎng)問(wèn)、非關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪(fǎng)問(wèn)、原生的Node.js開(kāi)發(fā)Web應(yīng)用程序、Web開(kāi)發(fā)工作流、Node.js開(kāi)發(fā)Blog案例?？焖匍_(kāi)發(fā)框架：Express簡(jiǎn)介+MVC簡(jiǎn)介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構(gòu)Blog案例、Koa等其他常見(jiàn)MVC框架。Node.js開(kāi)發(fā)電子商務(wù)實(shí)戰(zhàn)：需求與設(shè)計(jì)、賬戶(hù)模塊注冊(cè)登錄、會(huì)員中心模塊、前臺(tái)展示模塊、購(gòu)物車(chē)，訂單結(jié)算、在線(xiàn)客服即時(shí)通訊模塊。

步驟1 創(chuàng)建空白的HTML 5模版 首先，我們創(chuàng)建一個(gè)空白的模版，代碼很簡(jiǎn)單，如下所示：復(fù)制代碼步驟2 增加HTML 5新標(biāo)簽 HTML 5中新增加了不少標(biāo)簽，如： article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section在頁(yè)面模版中，我們需要確保每個(gè)區(qū)域都能正確地對(duì)齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示：復(fù)制代碼讀者可能留意到這里使用的div id=”wrapper”，這個(gè)是稍候用來(lái)做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的 步驟3 往HTML 5標(biāo)簽中增加代碼 1）首先往標(biāo)題中增加如下代碼： 　Simple HTML5 Template 復(fù)制代碼2）往導(dǎo)航標(biāo)簽中添加如下代碼，這樣很方便地構(gòu)件了一個(gè)簡(jiǎn)單的頁(yè)面分類(lèi)導(dǎo)航： Home About Parent Page Child One Child Two with child Child One Child Two Child Three Child Three Contact 復(fù)制代碼3）使用標(biāo)簽來(lái)描述每一個(gè)要展示的內(nèi)容實(shí)體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用標(biāo)簽了。如下代碼所示： This is a title for post Richard KS 20th March 2013 Tutorials HTML5, CSS3 and Responsive 10 Comments Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 復(fù)制代碼4）添加標(biāo)簽 HTML5提供的元素標(biāo)簽用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類(lèi)似的有別與主要內(nèi)容的部分。根據(jù)目前的規(guī)范，元素有兩種使用方法：被包含在中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。 在之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分；最典型的形式是側(cè)邊欄(sidebar)，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。 代碼如下：Categories Category 1 Category 2 Parent Category Child One Child Two Grandchild One Grandchild Two Grandchild Three Child Three Category 3 Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. 復(fù)制代碼5）加上最后的標(biāo)簽，代碼為： Copyright@ 2013 HTML5.com Privacy Policy - About Us復(fù)制代碼 步驟4 增加CSS樣式 首先創(chuàng)建一個(gè)空白的樣式，如下：[/code] 然后在http://necolas.github.com/normalize.css/中下載這個(gè)css,然后將其內(nèi)容復(fù)制到該空白的文件中代碼如下： [code]body {font-family: arial, sans-serif;font-size: 100%; /* best for all browser using em */padding:0;margin:0;}*, html { line-height: 1.6em; }article img { width:auto; max-width:100%; height:auto; }.sidebar a, article a, header a, footer a { color: #C30; }header a { text-decoration: none; }#wrapper {font-size: 0.8em; /* 13px from 100% global font-size */max-width: 960px; /* standard 1024px wide */margin: 0 auto;}/* css for */header { padding: 1em 0; margin: 0px; float: left; width: 100%;}header hgroup { width: 100%; font-weight:normal; }/* css for */nav { display: block; margin: 0 0 2em; padding: 0px; float: left; width: 100%; background-color: #181919;}nav ul ul {display: none;}nav ul li:hover > ul {display: block;}nav ul { padding: 0; list-style: none; position: relative; display: inline-table; z-index: 9999; margin: 0px; float: left; width: 100%;}nav ul:after {content: ""; clear: both; display: block;}nav ul li {float: left;}nav ul li:hover a {color: #fff;}nav ul li a { display: block; padding: 1em; font-size: 1.125em; color: #ccc; text-decoration: none; margin: 0px; background-color: #000; border-right: 1px solid #333;}nav ul li:last-of-type a {border-right: 1px solid transparent !important;}nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; width: auto; float: none;}nav ul li:hover { background: #5f6975; color: #FFF;}nav ul ul li a:hover { background-color: #4b545f;}nav ul ul li {float: none;border-bottom: 1px solid #444240;position: relative;}nav ul ul li a {padding: 0.5em 1em;font-size: 1em;width:10em;color: #fff;}nav ul ul ul {position: absolute; left: 100%; top:0;}/* css for */section.content { width: 70%; float:left; }.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }article .entry { clear:both; padding: 0 0 1em; }h1.post-title { font-size: 1.8em; margin:0; padding:0;}.entry.post-meta { color: #888; }.entry.post-meta span { padding: 0 1em 0 0; }.entry.post-content { font-size: 1.125em; margin:0; padding:0;}/* css for */aside.sidebar { width: 25%; float:right; }aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;}aside.sidebar ul li { width:100%; margin: 0px 0px 2em; padding: 0px; float: left; list-style: none;}aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;}aside.sidebar ul li ul li ul li { margin: 0px; padding: 0px 0px 0px 1em; width: 90%; font-size: 0.9em;}aside.sidebar ul li h3.widget-title { width:100%; margin: 0px; padding: 0px; float: left; font-size: 1.45em;}/* css for */footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;}footer .footer-left { width: 45%; float:left; text-align:left; }footer .footer-right { width: 45%; float:right; text-align:right; }復(fù)制代碼步驟5 為移動(dòng)應(yīng)用使用@media query查詢(xún) 為了進(jìn)行響應(yīng)式設(shè)計(jì)，最佳的方案是使用@media query去進(jìn)行查詢(xún)，在上面的CSS代碼中添加如下代碼：/* ipad 768px */@media only screen and (min-width:470px) and (max-width:770px){body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}/* iphone 468px */@media only screen and (min-width:270px) and (max-width:470px){body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}復(fù)制代碼步驟6 增加jquery,modernizer和html5shiv到標(biāo)簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個(gè)能在多種瀏覽器中通過(guò)運(yùn)行各種腳本兼容運(yùn)行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫(kù)放在標(biāo)簽前，代碼如下：0復(fù)制代碼

好就業(yè)互聯(lián)網(wǎng)專(zhuān)業(yè)就業(yè)方向說(shuō)起電子商務(wù)，可能有些人不熟悉，然而說(shuō)起淘寶網(wǎng)，你一定不會(huì)不知道。除了淘寶網(wǎng)，五花八門(mén)的團(tuán)購(gòu)網(wǎng)也是電子商務(wù)的一種。網(wǎng)購(gòu)將電子商務(wù)帶入人們的視野。隨著計(jì)算機(jī)技術(shù)、信息技術(shù)逐漸滲透人們的日常生活，信息化產(chǎn)業(yè)的實(shí)際人才需求發(fā)生很大變化?；ヂ?lián)網(wǎng)專(zhuān)業(yè)的人才，朝著更高層次發(fā)展，更加精細(xì)化。低層次的人才需求較少，人才需求朝兩端發(fā)展，一是信息服務(wù)型人才，一是高層次的設(shè)計(jì)研究性人才。網(wǎng)絡(luò)安全網(wǎng)絡(luò)和IT已經(jīng)日漸深入到日常生活和工作當(dāng)中，社會(huì)信息化和信息網(wǎng)絡(luò)化，突破了應(yīng)用信息在時(shí)間和空間上的障礙，使信息的價(jià)值不斷提高。但是與此同時(shí)，網(wǎng)頁(yè)篡改、計(jì)算機(jī)病毒、系統(tǒng)非法入侵、數(shù)據(jù)泄密、網(wǎng)站欺騙、服務(wù)癱瘓、漏洞非法利用等信息安全事件時(shí)有發(fā)生。面對(duì)我國(guó)人口結(jié)構(gòu)及就業(yè)形式，在金融危機(jī)來(lái)襲的當(dāng)下，求職就業(yè)之路雖說(shuō)充滿(mǎn)荊棘和坎坷，通過(guò)各大招聘網(wǎng)站的數(shù)據(jù)表明， 薪酬待遇：網(wǎng)絡(luò)安全工程師一般薪水是4000-8000元，經(jīng)驗(yàn)豐富的專(zhuān)業(yè)人士可以達(dá)到年薪20萬(wàn)左右。除了企業(yè)之外，機(jī)關(guān)上網(wǎng)工程的實(shí)施也造就了人才和培訓(xùn)的巨大需求，需要配備大量的網(wǎng)絡(luò)應(yīng)用、網(wǎng)絡(luò)管理人才?，F(xiàn)有媒體的網(wǎng)站和商業(yè)、專(zhuān)業(yè)性質(zhì)網(wǎng)站對(duì)專(zhuān)業(yè)人才的渴求更是迫不及待。有關(guān)統(tǒng)計(jì)表明，媒體、企業(yè)上網(wǎng)工程未來(lái)10年前在人才需求在135萬(wàn)以上，平均每年人才需求不低于13.5萬(wàn)人。網(wǎng)絡(luò)營(yíng)銷(xiāo)方向網(wǎng)絡(luò)營(yíng)銷(xiāo)就是以互聯(lián)網(wǎng)為基礎(chǔ)進(jìn)行的營(yíng)銷(xiāo)活動(dòng)。網(wǎng)絡(luò)營(yíng)銷(xiāo)的以后選做工作崗位范圍也很多。網(wǎng)站架構(gòu)師：網(wǎng)站系統(tǒng)、功能、模塊、流程的設(shè)計(jì)師。網(wǎng)站模板設(shè)計(jì)師：主要是把設(shè)計(jì)好的網(wǎng)頁(yè)制作成一個(gè)網(wǎng)站的模板。網(wǎng)站維護(hù)工程師：管理和維護(hù)網(wǎng)站以及根據(jù)需求完成網(wǎng)站信息的更新和信息資源的整合成為他們的分內(nèi)之事。除此之外，精通CSS、HTML等語(yǔ)言 ，熟悉數(shù)據(jù)庫(kù)應(yīng)用，有一定美工基礎(chǔ)能獨(dú)立進(jìn)行網(wǎng)站設(shè)計(jì)和制作。網(wǎng)頁(yè)設(shè)計(jì)師：設(shè)計(jì)制作網(wǎng)站的各個(gè)網(wǎng)頁(yè)。

1、jQuery MobilejQuery Mobile 是 jQuery 在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile 不僅會(huì)給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。jQuery Mobile開(kāi)發(fā)團(tuán)隊(duì)說(shuō)：能開(kāi)發(fā)這個(gè)項(xiàng)目，我們非常興奮。移動(dòng)Web太需要一個(gè)跨瀏覽器的框架，讓開(kāi)發(fā)人員開(kāi)發(fā)出真正的移動(dòng)Web網(wǎng)站。2、jQTouchjQTouch 是一個(gè) jQuery 的插件，主要用于手機(jī)上的 Webkit 瀏覽器上實(shí)現(xiàn)一些包括動(dòng)畫(huà)、列表導(dǎo)航、默認(rèn)應(yīng)用樣式等各種常見(jiàn)UI效果的 JavaScript 庫(kù)。支持包括 iPhone、Android 等手機(jī)。3、DHTMLX TouchDHTMLX Touch是一個(gè)免費(fèi)的HTML5/JavaScript框架，專(zhuān)門(mén)為觸摸屏設(shè)備而優(yōu)化。為您帶來(lái)快速開(kāi)發(fā)工藝精美的移動(dòng)Web應(yīng)用程序的能力。DHTMLX Touch UI Designer是一個(gè)可視化的編輯器用于構(gòu)建移動(dòng)用戶(hù)界面。它能夠幫您以最少的編碼構(gòu)建一流的用戶(hù)界面。在其主頁(yè)上提供一些示例可以展示DHTMLX Touch強(qiáng)大的用戶(hù)界面。包括一個(gè)menu app for the iPad (適用于開(kāi)發(fā)餐廳應(yīng)用) 和Book Shop (一個(gè)電子書(shū)店應(yīng)用)。4、Mobilize.jsMobilize.js是一個(gè)開(kāi)源的HTML5-JavaScript框架用于從任何現(xiàn)在有標(biāo)準(zhǔn)網(wǎng)站快速，簡(jiǎn)便地構(gòu)建移動(dòng)網(wǎng)站。這個(gè)框架其實(shí)就是將需要在移動(dòng)設(shè)備上顯示的部分頁(yè)面以jQuery Mobile的默認(rèn)主題顯示，而不是實(shí)現(xiàn)一個(gè)全新完整的移動(dòng)頁(yè)面。Mobilize.js 可用于任意網(wǎng)站，但對(duì)于基于WordPress和Sphinx的網(wǎng)站不需要使用該框架轉(zhuǎn)換，因?yàn)橐呀?jīng)有非常多的插件可以使用。5、The M ProjectThe-M-Project是另外一個(gè)強(qiáng)大的JavaScript框架，它利用HTML5新的特性來(lái)更好和更簡(jiǎn)便地開(kāi)發(fā)移動(dòng)應(yīng)用。這個(gè)框架遵循著名的MVC軟件架構(gòu)模式。它還支持離線(xiàn)，所以你的用戶(hù)可以在沒(méi)有連接網(wǎng)絡(luò)的情況下繼續(xù)操作(當(dāng)下次有連線(xiàn)的時(shí)候，再將數(shù)據(jù)同步到服務(wù)器中)。提供優(yōu)秀的文檔(這個(gè)項(xiàng)目擁有一個(gè)引導(dǎo)新用戶(hù)入門(mén)的開(kāi)發(fā)指南)?？梢圆榭刺峁┑氖纠齺?lái)對(duì)該項(xiàng)目有一個(gè)初目的了解。這些示例包括：ToDo App(待辦事項(xiàng)目應(yīng)用) 和 KitchenSink (這個(gè)示例包括這個(gè)框架提供的所有UI元素)。6、WebApp.NetWebApp.Net 提供了很多的 API，因此可以幫助你節(jié)省很多工作了。不需要花時(shí)間去進(jìn)行 Ajax 調(diào)用的編碼，因?yàn)橐呀?jīng)內(nèi)置了，另外還有很多其它內(nèi)置功能，提供了詳細(xì)的文檔和應(yīng)用演示。7、WijmoWijmo是一個(gè)基于jQuery UI的UI部件的套件。Wijmo部件進(jìn)行了優(yōu)化客戶(hù)端Web開(kāi)發(fā)和利用jQuery的優(yōu)越的性能和易用性的力量。所有的Wijmo部件都配備了20多個(gè)主題和支持ThemeRoller。8、960 Grid on jQuery-Mobilejquery-mobile-960 是一個(gè)用于移動(dòng) Web 開(kāi)發(fā)的網(wǎng)格框架，綜合了 960.gs 的靈活性和 jQuery Mobile 的方便性。它的目的是讓 jQuery Mobile 布局更加的靈活，使得應(yīng)用應(yīng)許在移動(dòng)終端更加易用。9、Sencha Touch FrameworkSencha Touch 是世界上第一個(gè)基于 HTML5 的移動(dòng) Web 開(kāi)發(fā)框架，支持最新的 HTML5 和 CSS3 標(biāo)準(zhǔn)，全面兼容 Android 和 Apple iOS 設(shè)備，提供了豐富的 WEB UI 組件，可以快速的開(kāi)發(fā)出運(yùn)行于移動(dòng)終端的應(yīng)用程序。Shencha是第一個(gè)使用HTML5，CSS和JavaScript并且支持音頻/視頻，本地存儲(chǔ)，圓角，漸變背景以及陰影的開(kāi)發(fā)框架。10、NimbleKitNimbleKit 是為 iOS 設(shè)備構(gòu)建應(yīng)用程序最快速的方式，你不需要知道 Objective-C 或者 iOS SDK，你只需結(jié)合 JavaScript 代碼編寫(xiě) HTML 頁(yè)面就可以了。11、Touchy™ BoilerplateTouchy Boilerplate 是一個(gè)用來(lái)創(chuàng)建移動(dòng)web app，包括HTML模板，Meta tag等的工具。Touchy可以支持動(dòng)態(tài)頁(yè)面導(dǎo)航，固定頁(yè)頭，滾動(dòng)內(nèi)容，瀏覽歷史記錄等功能。Touchy使用jQuery或者 Zepto.JS。12、PhoneGapPhoneGap是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開(kāi)發(fā)平臺(tái)。它使開(kāi)發(fā)者能夠利用iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等，此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無(wú)限的功能。PhoneGap是免費(fèi)的，但是它需要特定平臺(tái)提供的附加軟件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套開(kāi)發(fā)。使用PhoneGap只比為每個(gè)平臺(tái)分別建立應(yīng)用程序好一點(diǎn)點(diǎn)，因?yàn)殡m然基本代碼是一樣的，但是你仍然需要為每個(gè)平臺(tái)分別編譯應(yīng)用程序。13、joshfireJoshfire是一個(gè)開(kāi)源的跨設(shè)備開(kāi)發(fā)框架，幫助開(kāi)發(fā)者創(chuàng)建可以在多種設(shè)備上運(yùn)行的web app。它使用HTML5和JavaScript，并且允許開(kāi)發(fā)者快速整合本地應(yīng)用和特定的web應(yīng)用。Joshfire可以讓你的應(yīng)用接受鍵盤(pán)，鼠標(biāo)，觸摸屏，遙控器等設(shè)備的輸入。Joshfire支持Node.JS。4.Sencha Touch：基于HTML5的移動(dòng)網(wǎng)頁(yè)開(kāi)發(fā)框架。14、 JuliaJulia框架由基本CSS3文件、JS庫(kù)和各個(gè)平臺(tái)的運(yùn)行庫(kù)構(gòu)成。不像PhoneGap，Julia不僅僅包含調(diào)用本機(jī)代碼的接口層，它還包含 Model-View-Controller(MVC)支持，Delegation支持，OAuth支持，異步數(shù)據(jù)庫(kù)存取接口，HTML選擇符(類(lèi)jQuery調(diào)用接口)，HTML模版(允 許嵌入JS代碼)等應(yīng)用開(kāi)發(fā)必備的API接口。 基于Julia的應(yīng)用開(kāi)發(fā)就像網(wǎng)站開(kāi)發(fā)那么簡(jiǎn)單，是的，你終于可以用HTML5開(kāi)發(fā)一個(gè)完整的、跨平臺(tái) 的、不亞于本機(jī)代碼的、易于維護(hù)的移動(dòng)應(yīng)用了！大幕即將揭曉，讓我們一起進(jìn)入移動(dòng)開(kāi)發(fā)的新時(shí)代15、SproutCore HTML5 Application FrameworkSproutCore 是一個(gè) HTML5 移動(dòng) Web 開(kāi)發(fā)框架，它的目標(biāo)是在無(wú)需瀏覽器插件的情況下，在瀏覽器中位應(yīng)用程序提供極佳的桌面效果。16、Titanium這是一個(gè)強(qiáng)大的，健壯的移動(dòng)Web開(kāi)發(fā)框架。能夠讓使用現(xiàn)有的HTML, CSS和JavaScript知識(shí)來(lái)為 iOS和Android平臺(tái)開(kāi)發(fā)原生移動(dòng)應(yīng)用。作為一個(gè)越來(lái)越大的移動(dòng)Web框架，它擁有超過(guò)300個(gè)的APIs和活躍的開(kāi)發(fā)者社區(qū)。你從這個(gè)社區(qū)中得到每一個(gè)開(kāi)發(fā)人員的幫助。Titanium Mobile支持原生的iOS和Android UI元素如Table views, tabs, switches和popovers。它提供能夠與移動(dòng)設(shè)備的攝像頭和本地文件存儲(chǔ)系統(tǒng)相交互的特性。17、Lungo.jsLungo.js 是一個(gè)采用HTML5, CSS3 和JavaScript技術(shù)實(shí)現(xiàn)的移動(dòng)Web應(yīng)用程序開(kāi)發(fā)框架。利用這框架開(kāi)發(fā)的應(yīng)用程序可運(yùn)行所有流行的平臺(tái)包括：iOS, Android, Blackberry 和 WebOs。它還支持觸摸事件如：tap, double-tap和swipe。整個(gè)框架沒(méi)有用到任何圖片包括圖標(biāo)，所有都矢量化?？梢栽谶@個(gè)框架中使用HTML5擁有的一些特性如：WebSQL, 地理位置定位，歷史或設(shè)備方向等。Lungo.js是一個(gè)模塊化并且完全可定制的框架。18、xui.js有時(shí)候你可能需要一個(gè)超輕量級(jí)的框架，只要擁有用于開(kāi)發(fā)標(biāo)準(zhǔn)客戶(hù)端所需要的功能如：DOM操作，事件處理，Ajax和一些動(dòng)畫(huà)效果。如果是這樣的話(huà)，這個(gè)框架剛好非常適合你。整個(gè)框架采用GZIP壓縮完之后只有4.2 KB。19、EmbedJSEmbedJS是一個(gè)用于嵌入式設(shè)備的JavaScript框架如：移動(dòng)電話(huà)，TVs、tablets和so forth。EmbedJS強(qiáng)大之處在于，它擁有專(zhuān)門(mén)為特定平臺(tái)和瀏覽器如iOS, Firefox, Android等提供相應(yīng)的開(kāi)發(fā)版本。這樣就能夠以最少的代碼，為用戶(hù)提供最佳的體驗(yàn)。而且假如你喜歡自己定制，可以利用其提供的EmbedJS Build tool工具實(shí)現(xiàn)。EmbedJS基于Dojo實(shí)現(xiàn)，所以你如果熟悉Dojo API語(yǔ)法，那EmbedJS將是你最佳的選擇。20、zepto.jszepto.js是一個(gè)專(zhuān)為mobile WebKit瀏覽器(如：Safari和Chrome)而開(kāi)發(fā)的一個(gè)JavaScript框架。它標(biāo)榜自己在其簡(jiǎn)約的開(kāi)發(fā)理念，能夠幫助開(kāi)發(fā)人員簡(jiǎn)單、快速地完成開(kāi)發(fā)交付任務(wù)。更重要的是這個(gè)JS框架，是超輕量級(jí)的，只有5KB。zepto.js的語(yǔ)法借鑒并且兼容jQuery。21、BakerBaker是用來(lái)在iPad或者iPhone平臺(tái)上發(fā)布交互式的電子書(shū)或者電子雜志的HTML5電子書(shū)框架。22、ChocolateChip-UIChocolateChip-UI 是一個(gè)手機(jī)移動(dòng) Web 開(kāi)發(fā)框架，采用 HTML5, WAML, CSS 和 JavaScript等技術(shù)實(shí)現(xiàn)?；?ChocolateChip JavaScript 框架，包含最新的 ChUI.JS 和 ChUI.css.23、Magazine GridMagazine Grid 是一個(gè)超現(xiàn)代的 CSS 框架，用于 iPad 和 iPhone 手機(jī)，使用類(lèi)似雜志的設(shè)計(jì)風(fēng)格。Magazine Grid 可讓用戶(hù)使用 HTML5 元素來(lái)組織雜志頁(yè)，非常輕量級(jí)(<4k)，在移動(dòng)設(shè)備上加載非?？欤瑢?duì)老的瀏覽器也支持。24、Kendo UIKendo UI是一個(gè)強(qiáng)大的框架用于快速HTML5 UI開(kāi)發(fā)?；谧钚碌腍TML5、CSS3和JavaScript標(biāo)準(zhǔn)。 Kendo UI包含了開(kāi)發(fā)現(xiàn)代JavaScript開(kāi)發(fā)所需要的所有一切，包括：強(qiáng)大的數(shù)據(jù)源，通用的拖拉(Drag-and-Drop)功能，模板，和UI控件。25、HTML App Host Framework這是一個(gè)用于構(gòu)建基于 Windows Phone 7 的 HTML/JavaScript 托管框架，使用 HTML5 技術(shù)。該框架由支持在標(biāo)準(zhǔn) xap 格式中嵌入 html 應(yīng)用的控件。