HTML 5+CSS 3+jQuery Mobile移動(dòng)網(wǎng)站與APP開發(fā)實(shí)戰(zhàn)

目 錄
第一篇 HTML與HTML 5
第1章 網(wǎng)頁的架構(gòu)基礎(chǔ) 2
1.1 HTML網(wǎng)頁的基礎(chǔ)構(gòu)成 2
1.1.1 從一個(gè)空白的HTML網(wǎng)頁說起 2
1.1.2 通過網(wǎng)頁中的DOCTYPE標(biāo)簽識(shí)別文檔類型 4
1.1.3 html標(biāo)簽聲明這是一個(gè)網(wǎng)頁 5
1.1.4 head標(biāo)簽定義網(wǎng)頁的頭部 5
1.1.5 body標(biāo)簽定義網(wǎng)頁的主體 10
1.2 基底網(wǎng)址標(biāo)記base標(biāo)簽 12
1.3 定義CSS樣式表為網(wǎng)頁排版 16
1.3.1 CSS樣式表概述 16
1.3.2 定義外鏈?zhǔn)紺SS樣式表 17
1.3.3 定義CSS樣式style標(biāo)簽 20
1.3.4 定義內(nèi)聯(lián)式CSS樣式表 22
1.4 添加網(wǎng)站LOGO 23
1.4.1 添加網(wǎng)站圖像 LOGO 24
1.4.2 添加網(wǎng)站文字LOGO 26
1.4.3 添加網(wǎng)站圖形LOGO 29
1.5 使用腳本元素script標(biāo)簽 33
1.5.1 HTML網(wǎng)頁內(nèi)嵌腳本讓網(wǎng)頁動(dòng)起來 33
1.5.2 載入外部腳本庫 36
1.5.3 推遲腳本執(zhí)行 38
1.5.4 異步執(zhí)行腳本 40
1.6 使用noscript標(biāo)簽判斷瀏覽器是否支持腳本 44
1.7 為標(biāo)簽添加id、name或class屬性 45
1.7.1 為標(biāo)簽添加id屬性 45
1.7.2 為標(biāo)簽添加name屬性 47
1.7.3 為標(biāo)簽添加class屬性 50
1.8 為標(biāo)簽添加title屬性 53
1.9 添加網(wǎng)頁注釋 55
1.10 測(cè)試瀏覽器對(duì)HTML 5屬性的支持 58
1.11 案例實(shí)戰(zhàn)：一個(gè)完整的HTML 5網(wǎng)頁應(yīng)用 61
1.12 小結(jié) 64
第2章 HTML網(wǎng)頁的基本標(biāo)簽 65
2.1 HTML網(wǎng)頁段落排版 65
2.1.1 設(shè)置段落樣式的標(biāo)記 65
2.1.2 設(shè)置對(duì)齊與縮進(jìn)的標(biāo)記 66
2.1.3 添加分割線 68
2.1.4 設(shè)置段落標(biāo)題 69
2.2 文字效果 70
2.2.1 設(shè)置字形樣式的標(biāo)記 70
2.2.2 設(shè)置上標(biāo)和下標(biāo) 72
2.3 項(xiàng)目符號(hào)與編號(hào) 73
2.3.1 符號(hào)列表 73
2.3.2 編號(hào)列表 75
2.3.3 自定義列表 76
2.4 使用特殊符號(hào) 78
2.5 創(chuàng)建超鏈接 80
2.5.1 什么是超鏈接 80
2.5.2 站外網(wǎng)頁鏈接 80
2.5.3 站內(nèi)網(wǎng)頁鏈接 81
2.6 小結(jié) 83
第3章 HTML 5表單 84
3.1 各瀏覽器內(nèi)核一覽 84
3.2 E-Mail類型的input標(biāo)簽 85
3.3 URL類型的input標(biāo)簽 87
3.4 數(shù)值類型的input標(biāo)簽 89
3.5 使用日期選擇器 91
3.6 用datalist標(biāo)簽實(shí)現(xiàn)自動(dòng)提示功能 93
3.7 各個(gè)瀏覽器對(duì)HTML 5表單新類型的支持 95
3.8 小結(jié) 96
第4章 HTML 5的特色 97
4.1 HTML 5的新特性 97
4.1.1 語義化標(biāo)簽元素 97
4.1.2 CSS 3的新特性 99
4.1.3 音頻、視頻與多媒體 99
4.1.4 畫布 101
4.1.5 本地文件訪問 104
4.1.6 開放字體格式WOFF 108
4.1.7 地理定位 108
4.1.8 微數(shù)據(jù) 110
4.1.9 Ajax升級(jí)版——XMLHttpRequest Level 2 112
4.1.10 HTML 5 Forms 115
4.2 HTML 5之Web存儲(chǔ) 122
4.2.1 Web存儲(chǔ)概述 122
4.2.2 localStorage存儲(chǔ)方式 123
4.2.3 sessionStorage存儲(chǔ)方式 124
4.3 HTML 5之應(yīng)用緩存 126
4.4 Web索引數(shù)據(jù)庫：IndexedDB 130
4.4.1 打開一個(gè)IndexedDB數(shù)據(jù)庫 130
4.4.2 向ObjectStore里新增對(duì)象 131
4.4.3 從ObjectStore里刪除對(duì)象 131
4.4.4 通過key取出對(duì)象 131
4.4.5 更新一個(gè)對(duì)象 131
4.5 小結(jié) 132
第二篇 CSS與CSS 3
第5章 定義CSS網(wǎng)頁樣式 134
5.1 什么是CSS 134
5.2 CSS樣式表 135
5.2.1 CSS樣式表的構(gòu)成 135
5.2.2 CSS樣式表高級(jí)語法 135
5.2.3 CSS選擇器 136
5.3 標(biāo)簽語義化 137
5.4 CSS命名規(guī)范 138
5.5 CSS樣式重置 139
5.6 CSS Sprites技術(shù) 142
5.7 頁面質(zhì)量評(píng)估標(biāo)準(zhǔn) 146
5.8 CSS Hack 147
5.8.1 什么是CSS Hack 147
5.8.2 CSS Hack的原理 148
5.8.3 CSS Hack實(shí)例 148
5.9 小結(jié) 155
第6章 CSS網(wǎng)頁設(shè)計(jì)基礎(chǔ) 156
6.1 設(shè)計(jì)文字樣式 156
6.1.1 字體屬性 156
6.1.2 段落屬性 166
6.1.3 文字效果 175
6.2 設(shè)計(jì)背景樣式 181
6.2.1 設(shè)計(jì)背景顏色 181
6.2.2 設(shè)計(jì)背景圖片 183
6.2.3 設(shè)計(jì)背景漸變 184
6.3 設(shè)計(jì)邊界樣式 187
6.3.1 邊框 187
6.3.2 內(nèi)邊距 191
6.3.3 外邊距 194
6.4 網(wǎng)頁元素的定位 197
6.4.1 相對(duì)定位 197
6.4.2 絕對(duì)定位 201
6.5 小結(jié) 205
第7章 CSS選擇器 206
7.1 標(biāo)簽選擇器 206
7.2 后代與子代選擇器 209
7.3 類別選擇器 211
7.4 id選擇器 213
7.5 屬性選擇器 215
7.6 偽類選擇器 219
7.6.1 動(dòng)態(tài)偽類選擇器 219
7.6.2 狀態(tài)偽類選擇器 222
7.6.3 偽元素選擇器 224
7.7 結(jié)構(gòu)性偽類選擇器 226
7.8 nth偽類選擇器 228
7.9 取反偽類選擇器 231
7.10 全局選擇器 233
7.11 小結(jié) 235
第8章 媒體查詢 236
8.1 響應(yīng)式Web設(shè)計(jì)介紹 236
8.1.1 流動(dòng)布局 236
8.1.2 自適應(yīng)圖片 240
8.1.3 媒體查詢 247
8.2 媒體查詢使用方法 249
8.2.1 媒體查詢基本語法 249
8.2.2 使用媒體查詢 251
8.3 案例實(shí)戰(zhàn)：響應(yīng)式登錄頁面 252
8.4 小結(jié) 258
第9章 案例：HTML 5+CSS 3之輕量級(jí)內(nèi)容管理系統(tǒng) 259
9.1 內(nèi)容管理系統(tǒng)概述 259
9.2 HTML、CSS和JS等資源的離線緩存 260
9.3 數(shù)據(jù)存儲(chǔ)結(jié)構(gòu) 262
9.4 登錄驗(yàn)證模塊 263
9.5 新用戶注冊(cè)模塊 272
9.6 游客信息模塊 275
9.7 用戶信息模塊 278
9.8 管理員信息模塊 282
9.9 關(guān)于本系統(tǒng)的補(bǔ)充說明 288
9.9.1 如何初始化用戶信息 288
9.9.2 如何清除全部用戶信息 289
9.9.3 關(guān)于404頁面 289
9.9.4 關(guān)于Bootstrap框架 289
9.9.5 關(guān)于localStorage與sessionStorage 290
9.10 小結(jié) 290
第三篇 jQuery Mobile
第10章 跨平臺(tái)移動(dòng)開發(fā) 292
10.1 跨平臺(tái)移動(dòng)開發(fā)框架 292
10.1.1 什么是跨平臺(tái)移動(dòng)開發(fā)框架 292
10.1.2 為什么選擇跨平臺(tái)移動(dòng)開發(fā)框架 293
10.1.3 常見的跨平臺(tái)移動(dòng)開發(fā)框架有哪些 294
10.2 認(rèn)識(shí)jQuery Mobile 299
10.2.1 為什么選擇jQuery Mobile 299
10.2.2 漸進(jìn)式增強(qiáng)的主題界面 300
10.2.3 簡單但是有調(diào)理的標(biāo)記化語言開發(fā) 302
10.2.4 自適應(yīng)布局 303
10.2.5 jQuery Mobile案例 304
10.3 小結(jié) 305
第11章 安裝jQuery Mobile 306
11.1 下載并應(yīng)用jQuery Mobile 306
11.1.1 下載jQuery Mobile 306
11.1.2 使用Dreamweaver編輯jQuery Mobile 308
11.1.3 創(chuàng)建第一個(gè)jQuery Mobile文件 308
11.1.4 在PC上測(cè)試jQuery Mobile 309
11.1.5 應(yīng)用jQuery Mobile開發(fā)的頁面 312
11.2 小結(jié) 313
第12章 jQuery Mobile快速開發(fā) 314
12.1 從選擇元素入手 314
12.1.1 選擇頁面中的元素 314
12.1.2 設(shè)置頁面中元素的屬性 315
12.2 應(yīng)用jQuery Mobile中的控件 315
12.2.1 在界面中固定一個(gè)工具欄 315
12.2.2 按鈕形式的菜單 318
12.2.3 表單做成的手機(jī)QQ 321
12.2.4 列表形式的貼吧 326
12.2.5 使用對(duì)話框?qū)崿F(xiàn)一個(gè)相冊(cè) 329
12.3 小結(jié) 332
第13章 APP的布局 333
13.1 QQ登錄界面 333
13.2 簡潔通訊錄 337
13.3 完美九宮格 340
13.4 可以折疊的QQ好友列表 342
13.5 展開圖標(biāo) 347
13.6 Metro效果 349
13.6.1 利用分欄布局 350
13.6.2 利用純CSS調(diào)整色塊尺寸 352
13.7 課程表 354
13.8 小結(jié) 356