《HTML5 移動Web開發從入門到精通(微課精編版)》是2019年8月清華大學出版社出版的圖書,作者是前端科技。
基本介紹
- 中文名:HTML5 移動Web開發從入門到精通(微課精編版)
- 作者:前端科技
- 出版時間:2019年08月
- 出版社:清華大學出版社
- ISBN:9787302520436
- 定價:89.8 元
內容簡介,圖書目錄,
內容簡介
《HTML5移動Web開發從入門到精通(微課精編版)》結合HTML5 和CSS3 技術,為讀者全面深入地講解了針對各種螢幕大小設計和開發現代網站的技術。全書共19 章,包括HTML5 基礎、CSS3 基礎、設計移動頁面結構、設計移動頁面正文、美化頁面文本、設計列表結構、套用多媒體、使用CSS3 定義版式、使用媒體查詢、設計彈性布局、設計回響式圖片、設計移動表單、設計回響式表格、使用CSS3 修飾背景、使用CSS3 美化界面樣式、CSS3 動畫、設計回響式網站、酒店預訂微信wap 網站、發布網頁等內容。
圖書目錄
第1 章 HTML5 基礎 1
視頻講解:27 分鐘
1.1 HTML5概述 2
1.2 HTML5設計原則 3
1.2.1 避免不必要的複雜性 3
1.2.2 支持已有內容 4
1.2.3 解決實際問題 4
1.2.4 用戶怎么使用就怎么設計規範 5
1.2.5 優雅地降級 5
1.2.6 支持的優先權 6
1.3 HTML5語法特性 6
1.3.1 文檔和標記 6
1.3.2 寬鬆的約定 7
1.4 HTML5基本結構 8
1.4.1 新建HTML5文檔 9
1.4.2 網頁頂部和頭部 10
1.4.3 網頁主體 10
1.4.4 認識標籤 11
1.4.5 網頁文本內容 13
1.4.6 網頁非文本內容 13
1.5 案例實戰 14
1.5.1 編寫第一個HTML5文檔 14
1.5.2 比較HTML4與HTML5文檔結構 15
1.6 線上練習 16
第2 章 CSS3 基礎 17
視頻講解:1 小時1 分鐘
2.1 CSS3概述 18
2.2 CSS3基本用法 18
2.2.1 CSS樣式 19
2.2.2 引入CSS樣式 20
2.2.3 CSS樣式表 20
2.2.4 導入外部樣式表 21
2.2.5 CSS格式化 21
2.2.6 CSS屬性 21
2.2.7 CSS屬性值 22
2.3 元素選擇器 23
2.3.1 標籤選擇器 23
2.3.2 類選擇器 23
2.3.3 ID選擇器 24
2.3.4 通配選擇器 25
2.4 關係選擇器 25
2.4.1 包含選擇器 25
2.4.2 子選擇器 26
2.4.3 相鄰選擇器 27
2.4.4 兄弟選擇器 27
2.4.5 分組選擇器 28
2.5 屬性選擇器 28
2.6 偽選擇器 31
2.6.1 結構偽類 32
2.6.2 否定偽類 39
2.6.3 狀態偽類 39
2.6.4 目標偽類 41
2.7 CSS特性 42
2.7.1 CSS繼承性 42
2.7.2 CSS層疊性 43
2.8 線上練習 44
第3 章 設計移動頁面結構 45
視頻講解:36 分鐘
3.1 頭部信息 46
3.1.1 定義網頁標題 46
3.1.2 定義網頁元信息 47
3.1.3 定義文檔視口 48
3.1.4 移動套用的head頭信息說明 50
3.2 構建基本結構 50
3.2.1 定義文檔結構 50
3.2.2 定義內容標題 51
3.2.3 使用div元素 53
3.2.4 使用id和class 54
3.2.5 使用title 55
3.2.6 HTML注釋 56
3.3 構建語義結構 56
3.3.1 定義頁眉 56
3.3.2 定義導航 57
3.3.3 定義主要區域 59
3.3.4 定義文章塊 59
3.3.5 定義區塊 61
3.3.6 定義附欄 63
3.3.7 定義頁腳 65
3.3.8 使用role 66
3.4 案例實戰 67
3.5 線上練習 70
第4 章 設計移動頁面正文 71
視頻講解:1 小時1 分鐘
4.1 通用文本 72
4.1.1 標題文本 72
4.1.2 段落文本 72
4.2 描述文本 73
4.2.1 強調文本 73
4.2.2 標記細則 73
4.2.3 特殊格式 74
4.2.4 定義上標和下標 74
4.2.5 定義術語 76
4.2.6 標記代碼 77
4.2.7 預定義格式 77
4.2.8 定義縮寫詞 79
4.2.9 標註編輯或不用文本 79
4.2.10 指明引用或參考 80
4.2.11 引述文本 81
4.2.12 換行顯示 82
4.2.13 修飾文本 83
4.2.14 非文本註解 83
4.3 特殊文本 83
4.3.1 標記高亮顯示 83
4.3.2 標記進度信息 84
4.3.3 標記刻度信息 86
4.3.4 標記時間信息 87
4.3.5 標記聯繫信息 88
4.3.6 標記顯示方向 89
4.3.7 標記換行斷點 89
4.3.8 標記旁註 90
4.4 HTML5全局屬性 90
4.4.1 可編輯內容 90
4.4.2 快捷選單 91
4.4.3 自定義屬性 92
4.4.4 定義可拖動操作 93
4.4.5 拖動數據 93
4.4.6 隱藏元素 94
4.4.7 語法檢查 94
4.4.8 翻譯內容 95
4.5 線上練習 95
第5 章 美化頁面文本 96
視頻講解:2 小時6 分鐘
5.1 設計字型樣式 97
5.1.1 定義字型類型 97
5.1.2 定義字型大小 97
5.1.3 定義字型顏色 98
5.1.4 定義字型粗細 98
5.1.5 定義藝術字型 99
5.1.6 定義修飾線 99
5.1.7 定義字型的變體 101
5.1.8 定義大小字型 101
5.2 設計文本樣式 102
5.2.1 定義文本對齊 102
5.2.2 定義垂直對齊 103
5.2.3 定義文本間距 104
5.2.4 定義行高 104
5.2.5 定義首行縮進 105
5.3 CSS3文本模組 107
5.3.1 文本溢出 107
5.3.2 文本換行 108
5.3.3 書寫模式 110
5.3.4 initial值 112
5.3.5 inherit值 113
5.3.6 unset值 114
5.3.7 all屬性 115
5.4 色彩模式 115
5.4.1 rgba( )函式 115
5.4.2 hsl( )函式 117
5.4.3 hsla( )函式 119
5.4.4 opacity屬性 121
5.4.5 transparent值 122
5.4.6 currentColor值 123
5.5 文本陰影 124
5.5.1 定義text-shadow 124
5.5.2 案例:設計特效字 126
5.6 動態內容 130
5.6.1 定義content 130
5.6.2 案例:套用content 131
5.7 網路字型 133
5.7.1 使用@font-face 133
5.7.2 案例:設計字型圖示 134
5.8 案例實戰 136
5.8.1 設計文本新聞頁 136
5.8.2 設計正文內頁 138
5.8.3 設計列表文本樣式 139
5.8.4 設計黑科技首頁 141
5.8.5 設計訊息提示框 142
5.9 線上練習 142
第6 章 設計列表結構 143
視頻講解:52 分鐘
6.1 定義列表 144
6.1.1 無序列表 144
6.1.2 有序列表 145
6.1.3 項目編號 146
6.1.4 設計CSS樣式 147
6.1.5 嵌套列表 148
6.1.6 描述列表 148
6.1.7 選單列表 150
6.1.8 快捷選單 152
6.2 定義連結 155
6.2.1 普通連結 155
6.2.2 塊連結 156
6.2.3 錨點連結 157
6.2.4 目標連結 158
6.2.5 下載連結 159
6.2.6 圖像熱點 159
6.2.7 框架連結 161
6.3 案例實戰 162
6.3.1 設計導航頁面 162
6.3.2 設計熱銷榜 167
6.3.3 設計品牌牆 169
6.3.4 設計品類引導列表 171
6.3.5 為快捷選單添加命令 173
6.3.6 設計快捷分享命令 173
6.3.7 設計任務列表命令 173
6.3.8 設計排行榜列表結構 173
6.3.9 設計圖文列表欄目 173
6.4 線上練習 174
第7 章 套用多媒體 175
視頻講解:40 分鐘
7.1 認識網頁圖像 176
7.2 使用圖像 177
7.2.1 使用img元素 177
7.2.2 定義流內容 178
7.2.3 插入圖示 179
7.2.4 定義圖像大小 180
7.2.5 案例:圖文混排 181
7.3 使用多媒體外掛程式 182
7.3.1 使用embed元素 182
7.3.2 使用object元素 183
7.4 使用HTML5多媒體 185
7.4.1 使用audio元素 185
7.4.2 使用video元素 187
7.5 案例實戰 190
7.5.1 設計網頁音樂播放器 190
7.5.2 設計MP3播放條 192
7.5.3 設計視頻播放器 193
7.6 HTML5多媒體API 196
7.6.1 設定屬性 196
7.6.2 設定方法 196
7.6.3 設定事件 196
7.6.4 綜合案例 196
7.7 線上練習 200
第8 章 使用CSS3 定義版式 201
視頻講解:40 分鐘
8.1 CSS盒模型 202
8.1.1 認識display 202
8.1.2 認識CSS盒模型 202
8.1.3 定義邊界 203
8.1.4 定義框線 205
8.1.5 定義補白 206
8.2 設計浮動顯示 208
8.2.1 定義float 208
8.2.2 使用clear 210
8.3 設計定位顯示 213
8.3.1 定義position 213
8.3.2 設定層疊順序 218
8.4 案例實戰 220
8.4.1 設計兩欄頁面 220
8.4.2 設計三欄頁面 222
8.4.3 設計九宮格版式 223
8.4.4 設計用戶管理界面 226
8.4.5 設計側滑面板 227
8.4.6 設計格線化版式 229
8.4.7 設計音樂列表版式 231
8.5 線上練習 232
第9 章 使用媒體查詢 233
視頻講解:21 分鐘
9.1 認識媒體查詢 234
9.2 使用媒體查詢 234
9.2.1 媒體類型和媒體查詢 234
9.2.2 使用@media 236
9.2.3 套用@media 238
9.2.4 案例:設計第一個回響式版式 241
9.3 案例實戰 243
9.3.1 判斷顯示螢幕寬度 243
9.3.2 設計回響式版式 244
9.3.3 設計回響式選單 247
9.3.4 設計自動隱藏布局 248
9.3.5 設計自適應手機頁面 251
9.4 線上練習 254
第10 章 設計彈性布局 255
視頻講解:32 分鐘
10.1 多列布局 256
10.1.1 設定列寬 256
10.1.2 設定列數 257
10.1.3 設定間距 257
10.1.4 設定列框線 258
10.1.5 設定跨列顯示 259
10.1.6 設定列高度 260
10.2 舊版伸縮盒 260
10.2.1 啟動伸縮盒 261
10.2.2 設定寬度 261
10.2.3 設定順序 263
10.2.4 設定方向 264
10.2.5 設定對齊方式 265
10.3 新版伸縮盒 267
10.3.1 認識Flexbox系統 267
10.3.2 啟動伸縮盒 268
10.3.3 設定主軸方向 269
10.3.4 設定行數 270
10.3.5 設定對齊方式 271
10.3.6 設定伸縮項目 273
10.4 瀏覽器支持和伸縮盒版本疊代 276
10.4.1 瀏覽器對Flexbox的支持 276
10.4.2 比較Flexbox新舊版本 277
10.5 案例實戰 280
10.5.1 將固寬頁轉換為彈性頁 280
10.5.2 設計彈性選單 283
10.5.3 設計多斷點彈性選單 285
10.5.4 設計粘附頁腳欄 286
10.5.5 設計3欄頁面 287
10.5.6 設計3行3列套用 287
10.6 線上練習 287
第11 章 設計回響式圖片 288
11.1 認識回響式圖片 289
11.2 使用picture 289
11.2.1 基本用法 290
11.2.2 瀏覽器支持 290
11.2.3 套用示例 291
11.3 案例實戰 292
11.3.1 圖片載入 292
11.3.2 針對不同設備調整顯示焦點 293
11.3.3 使用媒體查詢調整顯示焦點 294
11.3.4 圖片解析度處理 295
11.3.5 設計圖文版式 295
11.3.6 設計熱點景點欄目 297
11.3.7 設計圖片分享頁面 299
11.3.8 設計圖片列表頁面 302
11.4 線上練習 304
第12 章 設計移動表單 305
視頻講解:1 小時12 分鐘
12.1 認識HTML5表單 306
12.2 定義表單 307
12.3 提交表單 308
12.4 組織表單 309
12.5 定義文本框 310
12.6 定義標籤 312
12.7 使用常用控制項 313
12.7.1 密碼框 313
12.7.2 單選按鈕 314
12.7.3 複選框 314
12.7.4 文本區域 315
12.7.5 選擇框 316
12.7.6 上傳檔案 317
12.7.7 隱藏欄位 318
12.7.8 提交按鈕 319
12.8 HTML5新型輸入框 320
12.8.1 定義E-mail框 320
12.8.2 定義URL框 321
12.8.3 定義數字框 321
12.8.4 定義範圍框 322
12.8.5 定義日期選擇器 323
12.8.6 定義搜尋框 327
12.8.7 定義電話號碼框 328
12.8.8 定義拾色器 328
12.9 HTML5輸入屬性 329
12.9.1 定義自動完成 329
12.9.2 定義自動獲取焦點 331
12.9.3 定義所屬表單 332
12.9.4 定義表單重寫 332
12.9.5 定義高和寬 333
12.9.6 定義列表選項 333
12.9.7 定義最小值、最大值和步長 333
12.9.8 定義多選 334
12.9.9 定義匹配模式 335
12.9.10 定義替換文本 335
12.9.11 定義必填 336
12.10 HTML5新表單元素 336
12.10.1 定義數據列表 337
12.10.2 定義密鑰對生成器 337
12.10.3 定義輸出結果 338
12.11 HTML5表單屬性 339
12.11.1 定義自動完成 339
12.11.2 定義禁止驗證 339
12.12 案例實戰 340
12.12.1 設計註冊表單 340
12.12.2 設計登錄表單 342
12.12.3 設計反饋表單 344
12.13 線上練習 346
第13 章 設計回響式表格 347
視頻講解:35 分鐘
13.1 認識表格結構 348
13.2 新建表格 349
13.2.1 定義普通表格 349
13.2.2 定義列標題 349
13.2.3 定義表格標題 351
13.2.4 表格行分組 351
13.2.5 表格列分組 352
13.3 設定table屬性 355
13.3.1 定義單線表格 356
13.3.2 定義分離單元格 357
13.3.3 定義細線框線 357
13.3.4 添加表格說明 358
13.4 設定td和th屬性 358
13.4.1 定義跨單元格顯示 359
13.4.2 定義表頭單元格 360
13.4.3 為單元格指定表頭 361
13.4.4 定義信息縮寫 361
13.4.5 單元格分類 362
13.5 使用CSS定義表格樣式 362
13.5.1 定義表格的基本方法 363
13.5.2 定義框線 364
13.5.3 定義間距 364
13.5.4 定義標題 365
13.5.5 定義空單元格 366
13.6 案例實戰 367
13.6.1 設計產品信息列表 367
13.6.2 設計自適應布局表格 368
13.6.3 設計滾動顯示表格 371
13.6.4 設計隱藏不重要的數據列 373
13.7 線上練習 374
第14 章 使用CSS3 修飾背景 375
視頻講解:51 分鐘
14.1 設計背景圖像 376
14.1.1 設定定位原點 376
14.1.2 設定裁剪區域 377
14.1.3 設定背景圖像大小 379
14.1.4 設定多重背景圖像 380
14.2 設計漸變背景 382
14.2.1 定義線性漸變 383
14.2.2 設計線性漸變樣式 385
14.2.3 案例:設計網頁漸變色 387
14.2.4 案例:設計條紋背景 389
14.2.5 定義重複線性漸變 391
14.2.6 定義徑向漸變 393
14.2.7 設計徑向漸變樣式 395
14.2.8 定義重複徑向漸變 397
14.2.9 案例:設計網頁背景色 398
14.2.10 案例:設計圖示 399
14.3 案例實戰 401
14.3.1 設計優惠券 401
14.3.2 設計桌面紋理背景 401
14.3.3 設計按鈕 401
14.3.4 漸變特殊套用場景 402
14.3.5 設計欄目折角效果 402
14.4 線上練習 403
第15 章 使用CSS3 美化界面樣式 404
視頻講解:36 分鐘
15.1 界面顯示 405
15.1.1 顯示方式 405
15.1.2 調整尺寸 406
15.1.3 縮放比例 407
15.2 輪廓樣式 407
15.2.1 定義輪廓 408
15.2.2 設計輪廓線 410
15.3 框線樣式 412
15.3.1 定義框線圖像源 412
15.3.2 定義框線圖像平鋪方式 413
15.3.3 定義框線圖像寬度 414
15.3.4 定義框線圖像分割方式 414
15.3.5 定義框線圖像擴展 415
15.3.6 案例:套用框線圖像 417
15.3.7 定義圓角框線 419
15.3.8 案例:設計橢圓圖形 421
15.4 盒子陰影 422
15.4.1 定義盒子陰影 422
15.4.2 案例:box-shadow的套用 424
15.4.3 案例:設計翹邊陰影 427
15.5 案例實戰 429
15.5.1 設計內容頁 429
15.5.2 設計套用界面 429
15.6 線上練習 430
第16 章 CSS3 動畫 431
視頻講解:1 小時1 分鐘
16.1 CSS3變形 432
16.1.1 認識Transform 432
16.1.2 設定原點 432
16.1.3 2D旋轉 433
16.1.4 2D縮放 434
16.1.5 2D平移 435
16.1.6 2D傾斜 436
16.1.7 2D矩陣 436
16.1.8 設定變形類型 437
16.1.9 設定透視距離和原點 438
16.1.10 3D平移 441
16.1.11 3D縮放 442
16.1.12 3D旋轉 443
16.1.13 透視函式 444
16.1.14 變形原點 445
16.1.15 背景可見 445
16.2 過渡動畫 446
16.2.1 設定過渡屬性 446
16.2.2 設定過渡時間 447
16.2.3 設定延遲過渡時間 448
16.2.4 設定過渡動畫類型 448
16.2.5 設定過渡觸發動作 449
16.3 幀動畫 454
16.3.1 設定關鍵幀 454
16.3.2 設定動畫屬性 456
16.4 案例實戰 458
16.4.1 設計圖形 458
16.4.2 設計冒泡背景按鈕 459
16.4.3 設計動畫效果選單 459
16.4.4 設計照片特效 459
16.4.5 設計立體盒子 460
16.4.6 旋轉盒子 460
16.4.7 設計翻轉廣告 460
16.4.8 設計跑步效果 461
16.4.9 設計摺疊面板 461
16.5 線上練習 461
第17 章 綜合實戰:設計回響式網站 462
17.1 認識回響式Web設計 463
17.2 構建頁面 463
17.3 設計基本樣式 466
17.3.1 兼容早期瀏覽器 466
17.3.2 重置默認樣式 467
17.4 設計回響式樣式 467
17.4.1 創建可伸縮圖像 468
17.4.2 創建彈性布局格線 468
17.4.3 實現媒體查詢 469
17.4.4 組合樣式 472
17.4.5 兼容舊版IE 478
第18 章 案例開發:酒店預訂微信wap 網站 480
視頻講解:16 分鐘
18.1 設計思路 481
18.1.1 內容 481
18.1.2 結構 481
18.1.3 效果 482
18.2 設計首頁 483
18.3 設計登錄頁 485
18.4 選擇城市 487
18.5 選擇酒店 490
18.6 預訂酒店 491
第19 章 發布網頁 496
19.1 Web套用發布基礎 497
19.2 下載、安裝Cordova 498
19.2.1 安裝Java JDK 498
19.2.2 安裝Android SDK 499
19.2.3 安裝Apache Ant 500
19.2.4 設定用戶變數 501
19.2.5 測試工具 502
19.2.6 通過npm安裝Cordova 503
19.2.7 設定Android模擬器 504
19.3 將網頁轉換成Android APP 506