HTML 5+CSS 3+jQuery Mobile移動網(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 從一個空白的HTML網(wǎng)頁說起 2
1.1.2 通過網(wǎng)頁中的DOCTYPE標(biāo)簽識別文檔類型 4
1.1.3 html標(biāo)簽聲明這是一個網(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)頁動起來 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 測試瀏覽器對HTML 5屬性的支持 58
1.11 案例實(shí)戰(zhàn)：一個完整的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è)置對齊與縮進(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)目符號與編號 73
2.3.1 符號列表 73
2.3.2 編號列表 75
2.3.3 自定義列表 76
2.4 使用特殊符號 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)自動提示功能 93
3.7 各個瀏覽器對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升級版——XMLHttpRequest Level 2 112
4.1.10 HTML 5 Forms 115
4.2 HTML 5之Web存儲 122
4.2.1 Web存儲概述 122
4.2.2 localStorage存儲方式 123
4.2.3 sessionStorage存儲方式 124
4.3 HTML 5之應(yīng)用緩存 126
4.4 Web索引數(shù)據(jù)庫：IndexedDB 130
4.4.1 打開一個IndexedDB數(shù)據(jù)庫 130
4.4.2 向ObjectStore里新增對象 131
4.4.3 從ObjectStore里刪除對象 131
4.4.4 通過key取出對象 131
4.4.5 更新一個對象 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樣式表高級語法 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ì)量評估標(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 相對定位 197
6.4.2 絕對定位 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 動態(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 流動布局 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之輕量級內(nèi)容管理系統(tǒng) 259
9.1 內(nèi)容管理系統(tǒng)概述 259
9.2 HTML、CSS和JS等資源的離線緩存 260
9.3 數(shù)據(jù)存儲結(jié)構(gòu) 262
9.4 登錄驗(yàn)證模塊 263
9.5 新用戶注冊模塊 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章 跨平臺移動開發(fā) 292
10.1 跨平臺移動開發(fā)框架 292
10.1.1 什么是跨平臺移動開發(fā)框架 292
10.1.2 為什么選擇跨平臺移動開發(fā)框架 293
10.1.3 常見的跨平臺移動開發(fā)框架有哪些 294
10.2 認(rèn)識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)建第一個jQuery Mobile文件 308
11.1.4 在PC上測試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 在界面中固定一個工具欄 315
12.2.2 按鈕形式的菜單 318
12.2.3 表單做成的手機(jī)QQ 321
12.2.4 列表形式的貼吧 326
12.2.5 使用對話框?qū)崿F(xiàn)一個相冊 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