《移動Web應用開發教程——HTML5+JavaScript框架全棧App開發》繫統地講解移動web應用開發的*新技術，從簡單的B/S應用原理開始，到*新的HTML5技術規範，從各種復雜的移動開發框架，精選一兩個流行的框架做為入門，通俗易懂。

\"本書全面介紹了Web移動應用開發的基本技術，從HTML 4.01+CSS+JavaScript的網站開發基礎到最新的HTML 5的移動特性，CSS 3新特征，增強的JavaScript API，流行的Web移動應用開發框架BootStrap，jQuery Mobile,AngualrJS，NoSQL的MongoDB數據庫和Node.js全棧開發，及Web混合（Hybrid）應用開發框架PhoneGap/Cordova，把Web的應用重新打包編譯成為Android App或iOS App。 全書共分為5篇： 第1～4章為基礎篇，著重介紹HTML的結構和基本元素，CSS樣式布局和JavaScript語言的編程技術； 第5～17章為進階篇，著重討論最新發布的HTML 5標準的特性，語義化元素，微數據/微格式，新的表單元素和屬性，Web字體，畫圖，文件與拖放技術，音頻視頻播放技術，客戶端數據存儲和數據庫技術，離線應用，Web Socket通信與多線程技術。同時，也介紹了CSS 3的新特征，包括透明度、圓角、陰影、背景圖、漸變、過渡和變換特效，及復雜的CSS 3選擇器； 第18~24章為移動篇，重點介紹與Web移動開發相關的主要技術，包括移動Web響應式設計和BootStrap框架，移動UI設計與jQuery Mobile類庫，移動測試方法，及移動硬件接口編程，例如，地理位置信息、移動設備方向接口、屏幕方向接口和攝像頭接口的編程； 第25章為全棧篇，利用前面所學的知識（HTML+CSS+JavaScript），通過MEAN（MongoDB+Express+AngularJS+Node.js）框架整合技術，介紹了一個完整的Web應用開發過程，包括瀏覽器端和服務器端的開發（B/S模式）及MVC架構的開發方法； 第26~36章為實訓篇，介紹了10個Web移動開發實驗，包括移動開發環境搭建與測試，地理位置與地圖，WebSocket通信，瀏覽器、多媒體播放器制作，響應式Web移動設計，UI設計，遊戲，PhoneGap/Cordova及MEAN全棧開發實驗。本書提供了大量應用實例代碼，每章後均有拓展練習。 本書適合作為應用技術型高等院校計算機、軟件工程專業高年級學生選用教材，同時也適合從事C/S軟件開發人員轉行到B/S模式的Web應用開發，或從傳統的網站開發轉行到Web移動應用開發，及廣大軟件編程愛好者作為參考學習用書。\"

目錄
基礎篇


第1章Web開發概念和構架

1.1靜態網頁與動態網頁

1.2描述標記語言與腳本語言

1.3解釋語言與編譯語言

1.4跨操作繫統平臺語言

1.5軟件開發構架

1.5.1服務器端與客戶端軟件構架(C/S)

1.5.2Web(B/S)的軟件構架

1.6HTTP

1.6.1HTTP請求包

1.6.2HTTP響應包

1.7Web應用的開發環境

1.7.1Web服務器

1.7.2瀏覽器

1.7.3代碼編程工具

練習

第2章HTML基本結構

2.1*簡單的HTML頁面結構

2.2HTML基本語法

2.3HTML標簽與屬性

2.4HTML特殊符號與轉義符

2.5HTML網頁的語言定義

2.6HTML標簽元素的屬性詳解

2.7HTML常用標簽

2.7.1form表單標簽

2.7.2table表格標簽

2.7.3div和span區塊標簽

2.7.4img圖像標簽

2.7.5a**鏈接標簽

2.7.6ul和ol列表標簽

練習

第3章HTML+CSS樣式

3.1CSS樣式表

3.2CSS的語法

3.3CSS樣式結構

3.3.1內聯樣式表

3.3.2內部樣式表

3.3.3外部樣式表

3.4CSS選擇器

3.5選擇器組合定義

3.6CSS顏色、長度和字體單位

3.6.1顏色單位

3.6.2長度單位

3.6.3字體單位

3.6.4CSS字體定義

3.7CSS盒子模型

3.8網頁設計的忠告

練習

第4章HTML+CSS+JavaScript

4.1JavaScript語言

4.2JavaScript的基本語法

4.3JavaScript的結構

4.4JavaScript函數詳解

4.5JavaScript的DOM技術

4.6JavaScript的面向對像編程

4.6.1內置對像

4.6.2原生對像

4.6.3宿主對像

4.6.4創建對像和訪問對像屬性方法

4.7JavaScript事件驅動

4.8JavaScript的AJAX異步通信技術

4.9JSON： JavaScript對像表示法

4.9.1JSON的特性

4.9.2JSON的語法

4.10JavaScript的jQuery框架

4.11JavaScript和jQuery代碼風格

練習

進階篇

第5章HTML 5概要

5.1HTML標準制定時間表

5.2HTML 5的發展

5.3HTML 5在移動領域的應用

5.4HTML 5+CSS 3+JavaScript規範新特性

5.5HTML 5與瀏覽器

5.6HTML 5驗證及回退機制

5.6.1HTML 5功能驗證

5.6.2HTML 5的回退機制

練習

第6章HTML 5網頁布局新元素

6.1語義化標簽元素

6.2HTML 5文檔綱要

6.3分節(分塊)元素

6.4section元素

6.5article元素

6.6aside元素

6.7nav元素

6.8details和summary元素

6.9figure和figcaption元素

6.10address與footer元素

6.11meter元素

6.12progress元素

6.13time元素

6.14非英語的**化元素

6.15其他語義化元素

6.16語義化標簽小結

練習

第7章微格式與微數據的語義化布局

7.1格式化數據

7.2微數據

7.2.1微數據標記

7.2.2微數據詞彙表

7.2.3微數據取值

7.2.4訪問微數據

7.2.5微數據的應用

7.3微格式

7.3.1標記微格式數據

7.3.2微格式工具

7.3.3微數據與微格式比較

7.4data*自定義數據

7.4.1用dataset對像訪問自定義數據

7.4.2用getAttribute()和setAttribute()訪問自定義數據

7.4.3dataset和getAttribute()的區別

7.4.4data*自定義屬性與CSS

7.4.5data*自定義屬性的應用範圍

練習

第8章深入了解CSS 3

8.1CSS 3介紹

8.2新CSS 3的屬性命名

8.3CSS 3的指令@及函數url()

8.4CSS 3的盒子**

8.4.1透明度

8.4.2圓角

8.4.3陰影

8.4.4背景圖

8.4.5漸變

8.4.6過渡

8.4.7變換

8.5CSS 3的復雜選擇器

8.5.1元素屬性選擇器

8.5.2元素屬性值選擇器

8.5.3偽類選擇器

8.5.4偽元素選擇器

8.5.5偽類與偽元素的區別

練習

第9章HTML 5表單

9.1增強特性

9.1.1占位符

9.1.2自動聚焦

9.1.3自動完成數據列表

9.2新的input的type類型

9.2.1數字

9.2.2日期時間

9.2.3Email、URL、顏色和搜索

9.3表單新元素

9.3.1生成密鑰

9.3.2表單輸出

9.4表單驗證

9.4.1表單驗證屬性

9.4.2表單驗證樣式

9.4.3自定義表單驗證非法信息提示

9.5HTML標簽元素內容可編輯屬性

練習

**0章Web字體與排版

10.1Web字體

10.2Web字體格式

10.3Web字體的導入

10.4Web字體的使用

10.5使用Web字體問題

10.6排版中的字體屬性

10.7排版中的行高

10.8排版中的特殊符號

10.9排版分欄

練習

**1章畫圖

11.1畫圖功能

11.2canvas畫布

11.3畫線

11.3.1畫線外觀

11.3.2圖形形狀路徑與填充

11.4畫矩形

11.5圖形的清除

11.6畫弧線與圓

11.7畫曲線

11.8變換、漸變、透明度與陰影

11.8.1漸變

11.8.2變換

11.8.3透明度

11.8.4陰影

11.9畫布插入文字、圖片及圖案

11.9.1畫布插入文字

11.9.2畫布插入圖片

11.9.3畫布插入圖案

11.10關於3D繪圖、動畫和矢量圖

11.10.13D繪圖

11.10.2動畫

11.10.3矢量圖

練習

**2章文件與拖放技術

12.1File文件

12.2HTML的文件操作

12.3File API讀取文件屬性

12.4FileReader讀文件的方法和事件

12.5讀取圖片和文本文件操作

12.6通過AJAX上傳文件

12.7拖放

12.7.1拖放對像屬性draggable

12.7.2拖放對像與目標地

12.7.3拖放事件的產生

12.7.4拖放事件的處理過程

12.7.5瀏覽器外部的拖放

練習

**3章History API

13.1瀏覽器翻頁與URL地址

13.2瀏覽器翻頁與AJAX技術

13.3History對像與瀏覽器翻頁

練習

**4章視頻音頻播放

14.1瀏覽器播放視頻音頻

14.2視頻音頻格式及轉換

14.3視頻音頻的標簽元素

14.3.1video和audio標簽元素

14.3.2source標簽

14.3.3track標簽

14.4JavaScript API控制播放

練習

**5章客戶端數據存儲

15.1數據存儲

15.1.1數據存儲方式比較

15.1.2Cookie與Web本地存儲比較

15.2Web本地數據存儲

15.2.1localStorage和sessionStorage對像

15.2.2Web存儲的事件處理

15.2.3保存其他數據類型

15.3數據庫存儲

15.3.1Web SQL

15.3.2IndexedDB

練習

**6章離線應用

16.1離線應用概述

16.2離線應用原理

16.3創建緩存清單

16.4離線應用事件與緩存*新

16.5Web服務器設置

練習

**7章WebSocket通信與Workers多線程

17.1Web通信

17.2WebSocket通信方式

17.3專用的WebSocket服務器

17.4WebSocket客戶端編程

17.5Workers多線程編程

17.6Workers的編程實現

17.7Workers編程注意事項

練習

移動篇

**8章Web移動應用新領域

18.1Web移動應用的發展概況

18.2移動App與桌面App

18.3Web App與Native App

18.4移動Web開發設計方法及優化

18.4.1前端開發模式

18.4.2後端開發模式

18.4.3響應式Web設計

18.4.4單頁面應用

18.4.5混合式應用

18.4.6移動Web開發優化

練習

**9章移動Web響應式設計

19.1關於視口、像素和分辨率

19.1.1屏幕分辨率、像素、像素密度與CSS問題

19.1.2視口

19.2媒體查詢選擇器

19.2.1Media媒體查詢

19.2.2viewport的縮放技術

19.2.3使用viewport的效果比較

19.3流體網格布局

19.3.1網格布局

19.3.2將CSS的塊單位從像素變成百分數

19.3.3字體的流式布局

19.4動態圖片處理

19.5BootStrap——一個Web響應式框架

練習

第20章移動Web UI設計

20.1人機交互的UI設計

20.1.1人機交互的發展

20.1.2移動設備的交互特殊性

20.2菜單、導航與標簽欄

20.3圖標、按鈕擬物化設計與扁平化風格

20.4表單

20.5表格

20.6jQuery Mobile類庫

20.6.1jQuery Mobile的設計風格

20.6.2jQuery Mobile UI控件

20.6.3jQuery Mobile移動事件

練習

第21章地理位置檢測

21.1地理位置信息

21.2地理位置檢測方法

21.3Geolocation API

21.4地理位置與地圖接口

21.4.1騰訊地圖的URI API

21.4.2百度地圖服務的URI API

練習

第22章移動設備其他功能接口

22.1攝像頭API

22.2設備移動方向API

22.2.1設備方向與alpha、beta、gamma定位值

22.2.2deviceorientation事件編程接口

22.2.3設備移動

22.2.4devicemotion事件編程接口

22.2.5指南針Compassneedscalibration事件

22.3屏幕方向API

22.3.1全屏模式

22.3.2讀取屏幕模式

22.3.3鎖屏接口

22.3.4瀏覽器支持

練習

第23章移動混合(Hybrid)應用開發

23.1Web、Native和Hybrid App的比較

23.2PhoneGap(Apache Cordova)

23.3PhoneGap開發環境

23.4PhoneGap的基本架構

23.5PhoneGap的API

23.6PhoneGap App開發調試

23.7Ionic(Html+Angular.js+Cordova)介紹

23.8React Native(JS+CSS)介紹

練習

第24章移動Web應用測試方法

24.1搭建測試環境

24.1.1Web服務器

24.1.2瀏覽器

24.1.3網絡連接

24.1.4移動模擬器

24.2桌面瀏覽器與移動瀏覽器

24.2.1移動瀏覽器

24.2.2渲染引擎

24.2.3瀏覽器識別

24.3通過桌面瀏覽器做移動測試

24.3.1專用HTTP測試工具

24.3.2使用開發者工具

24.3.3修改桌面瀏覽器用戶代理

24.4移動設備模擬器

24.4.1在線模擬網站

24.4.2模擬器軟件

24.4.3瀏覽器插件的移動模擬器

24.4.4廠商SDK開發工具包自帶模擬器

24.4.5虛擬機下的模擬器

24.5遠程測試

24.6Web軟件測試範圍

24.6.1單元測試

24.6.2端到端測試

24.6.3UI與瀏覽器兼容測試

24.6.4性能測試

24.6.5安全要求

練習

全棧篇

第25章全棧Web開發

25.1Web開發三層軟件架構

25.2全棧Web開發的三層軟件架構


25.3Node.js

25.3.1Node.js語法規範

25.3.2Node.js構建簡單的Web服務器

25.3.3Node.js的非阻塞I/O，異步編程和事件驅動

25.3.4JavaScript函數的閉包與自我調用

25.3.5構造一個靜態資源的Web服務器

25.3.6Node.js路由功能

25.3.7Node.js的模塊化編程

25.4Web框架Express

25.4.1Express的路由

25.4.2Express的中間件

25.4.3Express的模板引擎

25.5AngularJS框架

25.5.1RESTful架構

25.5.2AngularJS的單頁應用

25.5.3模塊化編程和依賴注入

25.5.4AngularJS的指令、視圖和模板

25.5.5作用域、模板和數據模型

25.5.6Angular的路由

25.5.7AngularJS的控制器

25.6MongoDB數據庫

25.6.1用MongoDB驅動連接數據庫

25.6.2用Mongoose模塊連接數據庫

25.7MEAN： 一個簡單的全棧Web應用

25.7.1RESTful API設計

25.7.2AngularJS前端設計

25.7.3服務器後端設計

練習

實訓篇

第26章實訓準備——團隊學習模式

26.1團隊合作學習

26.2學習小組組成

26.3小組管理

26.4小組考核

練習

第27章移動開發環境搭建實驗

27.1實驗目的

27.2實驗環境及工具

27.3實驗方法

27.3.1Apache Web服務器介紹

27.3.2安裝WAMP服務器

27.3.3Web代碼編輯器

27.3.4手機訪問Apache Web服務器

27.3.5用瀏覽器開發者工具

27.4實驗拓展

第28章響應式Web設計實驗

28.1實驗目的

28.2實驗環境及工具

28.3實驗方法

28.3.1Responsive移動布局CSS值改變

28.3.2Responsive移動優化、媒體查詢

28.3.3Responsive移動優化、視窗優化

28.3.4測試環境搭建與測試效果

第29章UI外觀設計實驗

29.1實驗目的

29.2實驗環境及工具

29.3實驗方法

第30章多媒體音頻視頻實驗

30.1實驗目的

30.2實驗環境及工具

30.3實驗方法

第31章離線應用實驗

31.1實驗目的

31.2實驗環境及工具

31.3實驗方法

31.3.1離線應用緩存事件檢查

31.3.2緩存文件資源檢查

31.3.3Manifest文件本地緩存檢查

31.3.4清除離線應用緩存

31.4實驗拓展

第32章網絡通信與本地數據存儲實驗

32.1實驗目的

32.2實驗環境與工具

32.3實驗方法

32.3.1基於Node.js+Socket.io的運行環境搭建

32.3.2瀏覽器開發者工具檢查Web Socket

32.4實驗拓展

第33章地理位置和其他傳感器實驗

33.1實驗目的

33.2實驗環境與工具

33.3實驗方法

33.3.1編寫一個應用

33.3.2測試

第34章遊戲實驗

34.1實驗目的

34.2實驗環境與工具

34.3實驗方法

34.3.1遊戲規則

34.3.2源碼分析

第35章PhoneGap制作Hybrid App實驗

35.1實驗要求

35.2實驗環境與工具

35.3實驗方法

35.3.1Java SDK開發環境的安裝

35.3.2Node.js下載安裝

35.3.3安裝Cordova和PhoneGap

35.3.4創建helloworld應用

35.3.5添加應用平臺

35.3.6在瀏覽器端調試App應用

35.3.7安裝Android SDK開發工具包

35.3.8通過AVD Manager安裝一個模擬器

35.3.9在模擬器上運行helloworld項目

35.3.10在手機環境下運行helloworld項目

35.4實驗拓展

第36章全棧Web開發實驗

36.1實驗目的

36.2實驗環境與工具

36.3實驗方法

36.3.1安裝運行Node.js解釋器

36.3.2一個*簡單的HTTP服務器

36.3.3一個簡單的AngularJS框架應用

36.3.4MongoDB數據庫安裝

36.3.5MongoDB的後臺管理

36.4實驗拓展

附錄

參考文獻

學習網站

術語解釋

致謝

第3章HTML+CSS樣式 3.1CSS樣式表 CSS(Cascading Style Sheets，層疊樣式表）是從HTML分離出來的技術，所有HTML標簽的樣式都集中到這個樣式表定義，無須再在標簽中定義屬性了。這樣做的目的是對網頁的樣式維護*簡單，因為所有樣式外觀的定義都集中在一個樣式文件裡面，文件擴展名為“.css”。隻要修改一個地方，就可以應用到引用這個樣式的網頁中。
3.2CSS的語法 CSS是一個獨立的技術，它有自己的樣式屬性定義和語法結構，雖然有些屬性和HTML的屬性相似。所以，這裡的CSS屬性並不等同於HTML的屬性，例如，p{color:red}並不可以換成

。
（1） CSS屬性用值對表示，即“屬性:值”，用冒號“:”，而不是等號“=”來給屬性賦值。用“;”結束一個屬性。
（2） 樣式的定義要加大括號{}。
（3） 一個樣式定義可以同時定義多個屬性值，每個屬性值用“;”分離。