第1章 移動設備與Web技術1.1 了解移動互聯網1
1.1.1 移動互聯網的特點1
1.1.2 移動互聯網的發展方向2
1.2 智能手機與手機瀏覽器2
1.2.1 智能手機的發展2
1.2.2 智能手機系統3
1.2.3 智能手機瀏覽器5
1.2.4 移動Web瀏覽器的特點6
1.3 關于移動Web應用6
1.3.1 移動Web應用的發展6
1.3.2 基于Web的應用開發7
1.3.3 基于HTML5的移動應用7
1.3.4 移動應用開發框架8
1.4 移動應用開發注意事項8
1.4.1 了解移動設備的屏幕尺寸和分辨率8
1.4.2 確定移動應用的內容8
1.4.3 簡潔的HTML、CSS和JavaScript代碼9
1.4.4 測試移動應用9
1.5 本章小結9
第2章 初識HTML5
2.1 了解HTML510
2.1.1 HTML的發展10
2.1.2 HTML5概述11
2.1.3 HTML5的優勢11
2.2 HTML5語法結構12
2.2.1 HTML5文檔結構12
2.2.2 HTML5的基本語法13
2.2.3 HTML5中精簡的頭部14
2.3 HTML5中新增的標簽14
2.3.1 結構標簽14
2.3.2 文本標簽15
2.3.3 應用和輔助標簽15
2.3.4 進度標簽15
2.3.5 交互性標簽16
2.3.6 在文檔和應用中使用的標簽16
2.3.7 <rudy>標簽16
2.3.8 其他標簽16
2.4 HTML5的標準屬性17
2.5 HTML5的事件屬性17
2.6 本章小結18
第3章 使用網頁基本標簽
3.1 設置文字效果19
3.1.1 文字樣式<font>標簽19
3.1.2 文字加粗<b>和<strong>標簽21
3.1.3 文字傾斜<i>和<em>標簽21
3.1.4 文字下劃線<u>標簽22
3.1.5 其他文字修飾標簽23
3.2 設置段落效果25
3.2.1 文本分段<p>標簽25
3.2.2 文本分行<br>標簽25
3.2.3 標題<h1>至<h6>標簽27
3.2.4 水平線<hr>標簽28
3.2.5 文本對齊設置29
3.3 創建列表30
3.3.1 使用<ul>標簽創建項目列表30
3.3.2 使用<ol>標簽創建編號列表31
3.3.3 使用<dl>標簽創建定義列表33
3.4 插入圖片34
3.4.1 圖像<img>標簽34
3.4.2 圖文混排36
3.5 創建超鏈接38
3.5.1 什么是超鏈接38
3.5.2 超鏈接<a>標簽38
3.5.3 相對鏈接和絕對鏈接39
3.5.4 網頁中的特殊超鏈接40
3.5.5 超鏈接標簽中的其他屬性設置43
3.6 本章小結43
第4章 使用HTML5結構標簽
4.1 構建HTML5頁面主體內容44
4.1.1 <article>標簽標識文章44
4.1.2 <section>標簽標識章節46
4.1.3 <nav>標簽標識導航48
4.1.4 <aside>標簽標識輔助內容50
4.1.5 <time>標簽標識文章發布日期50
4.2 添加語義模塊51
4.2.1 <header>標簽添加標題塊51
4.2.2 <hgroup>標簽為標題分組52
4.2.3 <footer>標簽添加頁腳53
4.2.4 <address>標簽添加聯系信息54
4.3 制作文章頁面55
4.4 本章小結59
第5章 使用HTML5繪圖
5.1 <canvas>標簽60
5.1.1 了解<canvas>標簽60
5.1.2 在網頁中插入canvas元素60
5.1.3 使用<canvas>標簽實現繪圖的流程61
5.2 繪制基本圖形62
5.2.1 繪制直線62
5.2.2 繪制矩形64
5.2.3 繪制圓形66
5.2.4 繪制三角形69
5.2.5 圖形組合70
5.3 繪制曲線72
5.3.1 使用arc()方法72
5.3.2 使用arcTo()方法74
5.3.3 使用quadraticCurveTo()方法76
5.3.4 使用bezierCurveTo()方法78
5.4 繪制文本80
5.4.1 使用文本80
5.4.2 獲取文字寬度82
5.4.3 創建對象陰影83
5.5 圖像的繪制與裁切85
5.5.1 繪制線性漸變85
5.5.2 繪制徑向漸變87
5.5.3 繪制圖像89
5.5.4 裁切區域91
5.6 本章小結93
第6章 使用HTML5在頁面中嵌入視頻和音頻
6.1 使用<embed>標簽94
6.1.1 使用<embed>標簽嵌入音頻94
6.1.2 使用<embed>標簽嵌入視頻96
6.2 HTML5多媒體基礎97
6.2.1 在線多媒體的發展97
6.2.2 音頻和視頻編解碼器98
6.2.3 功能缺陷及未來趨勢98
6.3 在網頁中使用HTML5音頻99
6.3.1 <audio>標簽所支持的音頻格式99
6.3.2 使用<audio>標簽99
6.4 在網頁中使用HTML5視頻100
6.4.1 <video>標簽所支持的視頻格式101
6.4.2 使用<video>標簽101
6.4.3 使用<source>標簽102
6.4.4 檢查瀏覽器是否支持audio和video元素103
6.5 <audio>與<video>標簽的屬性103
6.5.1 元素的標簽屬性104
6.5.2 元素的接口屬性104
6.6 <audio>與<video>標簽的方法和事件107
6.6.1 <audio>與<video>標簽的接口方法107
6.6.2 <audio>與<video>標簽的事件109
6.7 本章小結115
第7章 HTML5中的表單
7.1 網頁表單概述116
7.1.1 表單的作用116
7.1.2 表單<form>標簽116
7.1.3 表單的數據傳遞方式method屬性117
7.2 傳統表單元素117
7.2.1 文本域117
7.2.2 密碼域118
7.2.3 文本區域118
7.2.4 隱藏域118
7.2.5 復選框119
7.2.6 單選按鈕119
7.2.7 選擇域119
7.2.8 文件域120
7.2.9 按鈕120
7.2.10 圖像域120
7.3 了解HTML5表單125
7.3.1 HTML表單的發展125
7.3.2 HTML5新增表單元素的作用125
7.3.3 瀏覽器對HTML5表單的支持情況126
7.4 HTML5新增表單輸入類型126
7.4.1 url類型126
7.4.2 email類型126
7.4.3 range類型126
7.4.4 number類型127
7.4.5 tel類型127
7.4.6 search類型127
7.4.7 color類型127
7.4.8 date類型128
7.4.9 month、week、time、datetime、datetime-local類型128
7.5 HTML5新增表單屬性132
7.5.1 form屬性132
7.5.2 formaction屬性132
7.5.3 formmethod、formenctype、formnovalidate、formtarget屬性132
7.5.4 placeholder屬性133
7.5.5 autofocus屬性134
7.5.6 autocomplete屬性134
7.6 HTML5新增表單元素134
7.6.1 <datalist>標簽和list屬性135
7.6.2 <keygen>標簽135
7.6.3 <output>標簽136
7.7 HTML5提供的表單驗證方法136
7.7.1 與驗證有關的表單元素屬性136
7.7.2 表單驗證屬性138
7.7.3 ValidityState對象139
7.7.4 表單驗證方法140
7.7.5 表單驗證事件141
7.8 本章小結142
第8章 HTML5本地存儲
8.1 本地存儲WebStorage143
8.1.1 cookie存儲數據的不足143
8.1.2 使用WebStorage存儲的優勢144
8.1.3 會話存儲(sessionStorage)與本地存儲(localStorage)的區別144
8.2 使用WebStorage145
8.2.1 檢查瀏覽器是否支持WebStorage145
8.2.2 設置和獲取Storage數據146
8.2.3 StorageAPI的屬性和方法148
8.2.4 存儲JSON對象的數據150
8.2.5 StorageAPI的事件152
8.3 本地數據庫WebSQL153
8.3.1 了解WebSQL數據庫153
8.3.2 WebSQL數據庫的基本操作154
8.4 本章小結155
第9章 CSS樣式基礎
9.1 了解CSS樣式156
9.1.1 為什么要使用CSS樣式156
9.1.2 CSS樣式的版本發展157
9.1.3 CSS3的發展157
9.1.4 瀏覽器對CSS3的支持情況157
9.1.5 了解CSS3的全新功能158
9.2 CSS樣式語法158
9.2.1 CSS樣式基本語法158
9.2.2 CSS規則構成159
9.3 CSS選擇器160
9.3.1 通配選擇器160
9.3.2 標簽選擇器161
9.3.3 id選擇器162
9.3.4 類選擇器163
9.3.5 偽類和偽對象選擇器166
9.3.6 群組選擇器168
9.3.7 派生選擇器168
9.4 CSS3新增選擇器170
9.4.1 屬性選擇器171
9.4.2 結構偽類選擇器173
9.4.3 UI元素狀態偽類選擇器173
9.4.4 偽元素選擇器174
9.5 應用CSS樣式176
9.5.1 應用CSS樣式的4種方式176
9.5.2 CSS樣式的特性180
9.6 本章小結182
第10章 文字與背景設置
10.1 文字樣式CSS屬性183
10.1.1 font-family屬性——字體183
10.1.2 font-size屬性——字體大小183
10.1.3 color屬性——字體顏色184
10.1.4 font-weight屬性——字體粗細186
10.1.5 font-style屬性——字體樣式187
10.1.6 text-transform屬性——英文字體大小寫189
10.1.7 text-decoration屬性——文字修飾190
10.1.8 letter-spacing屬性——字符間距192
10.2 段落樣式CSS屬性193
10.2.1 line-height屬性——行間距193
10.2.2 text-indent屬性——段落首行縮進193
10.2.3 text-align屬性——文本水平對齊195
10.2.4 vertical-align屬性——文本垂直對齊196
10.3 CSS3新增文本樣式屬性199
10.3.1 text-overflow屬性——文本溢出處理199
10.3.2 word-wrap和word-break屬性——文本換行控制200
10.3.3 text-shadow屬性——文本陰影202
10.3.4 @font-face規則——使用服務器端字體203
10.4 列表樣式CSS屬性205
10.4.1 list-style-type屬性——設置列表符號205
10.4.2 list-style-image屬性——自定義列表符號208
10.4.3 設置定義列表209
10.5 背景樣式CSS屬性210
10.5.1 background-color屬性——背景顏色210
10.5.2 background-image屬性——背景圖像211
10.5.3 background-repeat屬性——背景圖像平鋪方式211
10.5.4 background-position屬性——背景圖像位置214
10.5.5 background-attachment屬性——背景圖像固定216
10.6 CSS3新增顏色設置樣式218
10.6.1 RGBA顏色值218
10.6.2 HSL顏色值219
10.6.3 HSLA顏色值219
10.6.4 opacity屬性——元素不透明度221
10.6.5 transparent顏色值222
10.7 CSS3新增漸變背景222
10.7.1 線性漸變背景223
10.7.2 徑向漸變背景226
10.8 CSS3新增背景樣式屬性227
10.8.1 background屬性——設置多背景圖像228
10.8.2 background-size屬性——背景圖像大小229
10.8.3 background-origin屬性——背景圖像原點231
10.8.4 background-clip屬性——背景圖像顯示區域232
10.9 本章小結233
第11章 邊框與超鏈接設置
11.1 邊框樣式CSS屬性234
11.1.1 border-width屬性——邊框寬度234
11.1.2 border-style屬性——邊框樣式235
11.1.3 border-color屬性——邊框顏色236
11.2 CSS3新增邊框樣式屬性238
11.2.1 border-colors屬性——多重邊框顏色238
11.2.2 border-image屬性——圖像邊框240
11.2.3 border-radius屬性——圓角邊框242
11.3 超鏈接CSS樣式偽類244
11.3.1 :link偽類244
11.3.2 :hover偽類244
11.3.3 :active偽類245
11.3.4 :visited偽類246
11.3.5 按鈕式超鏈接249
11.4 光標指針樣式251
11.4.1 cursor屬性——光標效果251
11.4.2 設置網頁中光標指針效果252
11.5 本章小結253
第12章 CSS3盒模型和界面設計
12.1 傳統CSS盒模型254
12.1.1 什么是CSS盒模型254
12.1.2 CSS盒模型的要點255
12.1.3 margin屬性——邊距255
12.1.4 border屬性——邊框256
12.1.5 padding屬性——填充256
12.2 CSS3彈性盒模型259
12.2.1 開啟彈性盒模型259
12.2.2 box-orient屬性——元素布局方向261
12.2.3 box-direction屬性——元素布局順序263
12.2.4 box-ordinal-group屬性——元素位置264
12.2.5 box-flex屬性——元素空間分配266
12.2.6 box-pack和box-align屬性——元素對齊方式267
12.2.7 實現元素水平和垂直居中顯示268
12.2.8 實現元素底部對齊269
12.3 增強的CSS3盒模型271
12.3.1 box-shadow屬性——元素陰影271
12.3.2 box-sizing屬性——元素尺寸大小272
12.3.3 overflow-x和overflow-y屬性——元素溢出內容處理274
12.4 定位網頁元素275
12.4.1 position屬性——元素定位275
12.4.2 relative——相對定位276
12.4.3 absolute——絕對定位277
12.4.4 fixed——固定定位278
12.4.5 float屬性——浮動定位280
12.5 CSS3新增用戶界面設計屬性283
12.5.1 resize屬性——改變元素尺寸283
12.5.2 outline屬性——輪廓外邊框284
12.5.3 appearance屬性——偽裝的元素287
12.5.4 content屬性——為元素添加內容289
12.6 CSS3新增多列布局屬性290
12.6.1 columns屬性——多列布局291
12.6.2 column-width屬性——列寬度292
12.6.3 column-count屬性——列數292
12.6.4 column-gap屬性——列間距293
12.6.5 column-rule屬性——列分隔線293
12.6.6 column-span屬性——橫跨所有列294
12.7 本章小結296
第13章 CSS3動畫效果
13.1 CSS3實現元素變換效果297
13.1.1 transform屬性297
13.1.2 旋轉變形298
13.1.3 縮放和翻轉變形299
13.1.4 移動變形301
13.1.5 傾斜變形302
13.1.6 矩陣變形304
13.1.7 定義變形中心點305
13.1.8 同時使用多個變形函數307
13.2 CSS3實現元素過渡效果309
13.2.1 transition屬性309
13.2.2 transition-property屬性——實現過渡效果309
13.2.3 transition-duration屬性——設置過渡時間311
13.2.4 transition-delay屬性——設置過渡延遲效果312
13.2.5 transition-timing-function屬性——設置過渡方式313
13.2.6 制作動態選項卡315
13.3 CSS3實現元素動畫效果319
13.3.1 @keyframes規則——關鍵幀動畫319
13.3.2 animation屬性——實現元素動畫效果320
13.3.3 制作交互導航菜單動畫效果324
13.4 本章小結328
第14章 jQuery和jQueryMobile基礎
14.1 JavaScript基礎329
14.1.1 JavaScript簡介329
14.1.2 在網頁中使用JavaScript
的方法329
14.1.3 JavaScript運算符330
14.1.4 JavaScript條件和循環語句332
14.1.5 JavaScript函數335
14.1.6 JavaScript事件337
14.2 jQuery基礎339
14.2.1 jQuery簡介339
14.2.2 在網頁中引用jQuery函數庫340
14.2.3 jQuery基本語法341
14.2.4 jQuery選擇器341
14.2.5 使用jQuery設置CSS樣式屬性343
14.3 jQueryMobile基礎344
14.3.1 jQueryMobile簡介344
14.3.2 jQueryMobile功能特點344
14.3.3 jQueryMobile的工作原理345
14.4 jQueryMobile操作流程345
14.4.1 下載移動設備模擬器345
14.4.2 使用URL方式加載jQueryMobile函數庫346
14.4.3 創建jQueryMobile頁面348
14.4.4 jQueryMobile頁面鏈接350
14.5 本章小結352
第15章 jQueryMobile頁面
15.1 jQueryMobile頁面結構353
15.1.1 jQueryMobile頁面基本架構353
15.1.2 多容器jQueryMobile頁面354
15.1.3 鏈接外部jQueryMobile頁面354
15.1.4 在jQueryMobile頁面中實現后退功能356
15.1.5 彈出對話框358
15.2 預加載和緩存jQueryMobile頁面360
15.2.1 預加載jQueryMobile頁面360
15.2.2 頁面緩存360
15.3 jQueryMobile頁面頭部欄362
15.3.1 頭部欄的基本結構362
15.3.2 設置后退按鈕的文字363
15.3.3 添加按鈕364
15.3.4 設置按鈕位置366
15.4 jQueryMobile頁面導航欄367
15.4.1 導航欄的基本結構367
15.4.2 導航欄的圖標369
15.4.3 設置導航欄圖標位置371
15.5 jQueryMobile頁面尾部欄372
15.5.1 添加按鈕372
15.5.2 添加表單元素373
15.6 結構化jQueryMobile頁面
內容374
15.6.1 jQueryMobile布局
網格375
15.6.2 可折疊區塊377
15.6.3 可折疊區塊的嵌套379
15.6.4 可折疊區塊組380
15.7 本章小結381
16.1 jQueryMobile按鈕組件382
16.1.1 內聯按鈕382
16.1.2 按鈕組384
16.2 jQueryMobile表單組件385
16.2.1 文本輸入組件385
16.2.2 滑塊386
16.2.3 翻轉切換開關388
16.2.4 單選按鈕388
16.2.5 復選框390
16.2.6 選擇菜單391
16.2.7 多項選擇菜單393
16.3 jQueryMobile列表組件394
16.3.1 基本列表394
16.3.2 有序列表395
16.3.3 分割列表選項396
16.3.4 對列表項進行分類398
16.3.5 圖標與計數器399
16.3.6 列表項內容格式化處理400
16.4 本章小結402
4402403
17.1 了解jQueryMobile主題403
17.2 jQueryMobile頁面主題404
17.2.1 默認主題404
17.2.2 修改默認主題406
17.3 自定義jQueryMobile頁面和
工具欄主題408
17.3.1 自定義頁面主題408
17.3.2 自定義工具欄主題410
17.3.3 自定義內容主題412
17.4 使用ThemeRoller創建主題413
17.5 本章小結420
420421
18.1 設置jQueryMobile421
18.2 jQueryMobile事件422
18.2.1 頁面事件423
18.2.2 觸摸事件426
18.2.3 屏幕滾動事件431
18.2.4 翻轉事件434
18.3 jQueryMobile常用技巧436
18.3.1 開啟或禁用列表項中的
圖標437
18.3.2 固定頁面頭部欄與
尾部欄439
18.3.3 隨機顯示頁面背景圖片440
18.4 本章小結443
443444
19.1 使用插件實現對話框效果444
19.1.1 ActionSheet插件444
19.1.2 mmenu插件447
19.2 使用插件實現表單效果451
19.2.1 DateBox插件451
19.2.2 Mobiscroll插件454
19.3 使用插件實現圖片瀏覽效果457
19.3.1 Camera插件457
19.3.2 Swipebox插件462
19.4 本章小結465
6
20.1 移動APP引導頁466
20.1.1 功能分析466
20.1.2 制作步驟466
20.2 移動應用首頁473
20.2.1 功能分析473
20.2.2 制作背景圖輪換473
20.2.3 制作可滑動的底部
導航欄476
20.3 訂餐APP480
20.3.1 系統分析480
20.3.2 制作啟動頁面481
20.3.3 制作訂餐APP首頁面483
20.3.4 制作訂餐城市頁面486
20.3.5 制作餐廳列表頁面489
20.3.6 制作餐廳介紹頁面491
20.4 本章小結495