HTML5移動Web開發任務教程（慕課版）

《HTML5移動Web開發任務教程（慕課版）》，2023年人民郵電出版社出版的圖書，作者是葉品菊。

基本介紹

• 中文名：HTML5移動Web開發任務教程（慕課版）
• 作者：葉品菊
• 出版社：人民郵電出版社
• ISBN：9787115590053

內容簡介

本書詳細講解了HTML5在移動Web開發中的套用，包括移動端常用布局、多媒體、Canvas、拖放、檔案操作等。除了這些相對獨立的技術點講解，本書還講解了當下使用最為廣泛的移動Web框架Bootstrap，並且詳細介紹了一個綜合項目的開發，將所學套用到實際開發中。

本書附有配套視頻、原始碼、習題等數位化學習資源，與本書配套的線上開放課程在“中國大學慕課”上線，讀者可以登錄網站進行線上開放課程的學習。

本書既可作為高等院校本、專科相關專業的HTML5課程、移動Web開發課程的教材，也可作為前端與移動開發的培訓教材，對於廣大網站開發人員來說，更是一本不可多得的閱讀與參考的優秀讀物。

圖書目錄

單元1 移動Web 開發概述 ······················· 1

1．1 移動Web 開發簡介 ·························· 1

1．1．1 什麼是移動Web 開發 ··························· 1

1．1．2 移動Web 開發與PC 端Web 開發的

區別 ························································ 2

1．2 移動Web 開發技術入門 ·················· 2

1．2．1 HTML5 簡介 ·········································· 2

1．2．2 CSS3 簡介 ·············································· 3

1．2．3 Bootstrap 簡介 ········································ 3

1．2．4 移動端的Web 瀏覽器 ··························· 3

1．3 基於HTML5 的移動Web 開發 ······ 4

1．4 開發工具HBuilderX 的使用 ··········· 6

1．5 單元案例——我的個人主頁 ··········· 7

1．5．1 頁面效果分析 ········································ 8

1．5．2 頁面實現 ················································ 8

1．5．3 頁面樣式設計 ········································ 9

1．6 單元小結 ··········································· 9

1．7 動手實踐 ··········································· 9

單元2 初識HTML5 ······························· 11

2．1 HTML5 的優勢 ······························ 11

2．2 HTML5 網頁文檔結構 ··················· 12

2．3 HTML5 常用標籤及其屬性 ··········· 13

2．3．1 標籤的分類 ·········································· 13

2．3．2 標籤屬性 ·············································· 14

2．3．3 HTML5 文檔頭部相關標籤 ················ 14

2．3．4 HTML5 常用的文本標籤 ···················· 16

2．4 HTML5 新增的語義化結構標籤 ····· 19

2．5 HTML5 新增的屬性 ······················· 22

2．6 單元案例——“少壯不努力，

老大徒傷悲”--古詩賞析 ·············· 24

2．6．1 頁面效果分析 ······································ 24

2．6．2 頁面實現 ·············································· 25

2．6．3 頁面功能設計 ······································ 29

2．6．4 頁面樣式設計 ······································ 29

2．7 單元小結 ········································· 30

2．8 動手實踐 ········································· 30

單元3 CSS3 基礎 ·································· 32

3．1 結構與表現分離 ····························· 32

3．2 CSS3 發展史及性能預覽 ··············· 33

3．2．1 CSS3 發展史 ········································ 33

3．2．2 CSS3 性能預覽 ···································· 34

3．3 CSS3 核心基礎 ······························· 38

3．3．1 CSS 樣式規則 ······································ 38

3．3．2 引入CSS 樣式表 ································· 38

3．4 CSS3 選擇器 ··································· 42

3．4．1 CSS3 屬性選擇器 ································ 42

3．4．2 CSS3 結構偽類選擇器 ························ 47

3．4．3 CSS3 UI 偽元素選擇器 ······················· 54

3．5 單元案例——仿寫軟大學院首頁 ····· 58

3．5．1 搭建項目 ·············································· 58

3．5．2 主要模組開發 ······································ 60

3．6 單元小結 ········································· 68

3．7 動手實踐 ········································· 69

單元4 CSS3 常用樣式 ·························· 70

4．1 盒子模型概述 ································· 70

4．1．1 認識盒子模型 ······································ 70

4．1．2 盒子的寬與高 ······································ 72

4．2 盒子模型的相關屬性 ····················· 73

4．2．1 框線屬性 ·············································· 74

4．2．2 內邊距屬性 ·········································· 82

移動Web 開發實戰HTML5+CSS3+Bootstrap（慕課版）

2

4．2．3 外邊距屬性 ·········································· 84

4．3 CSS3 彈性盒布局 ··························· 86

4．3．1 定義彈性容器 ······································ 86

4．3．2 彈性容器屬性 ······································ 88

4．3．3 彈性子元素屬性 ·································· 95

4．4 背景設定 ······································· 102

4．4．1 背景圖像的大小 ································ 102

4．4．2 背景的顯示區域 ································ 104

4．4．3 背景圖像的裁剪區域 ························ 105

4．4．4 多重背景圖像 ···································· 106

4．4．5 背景複合屬性 ···································· 107

4．5 CSS3 漸變屬性 ····························· 109

4．5．1 線型漸變 ············································ 109

4．5．2 徑向漸變 ············································ 110

4．5．3 重複漸變 ············································ 112

4．6 CSS3 盒子陰影與倒影 ················· 114

4．6．1 盒子陰影 ············································ 114

4．6．2 盒子倒影 ············································ 116

4．7 單元案例——製作小信圖書

展示框 ··········································· 117

4．7．1 頁面效果分析 ···································· 118

4．7．2 製作頁面結構 ···································· 118

4．7．3 定義頁面CSS 樣式 ··························· 120

4．8 單元小結 ······································· 121

4．9 動手實踐 ······································· 122

單元5 CSS3 高級套用 ························ 123

5．1 CSS3 過渡 ····································· 123

5．1．1 transition 子屬性設定 ························ 123

5．1．2 transition 屬性複合設定 ···················· 127

5．2 CSS3 變形 ····································· 129

5．2．1 認識transform 屬性 ··························· 129

5．2．2 2D 轉換 ·············································· 129

5．2．4 自定義轉換 ········································ 136

5．3 CSS3 動畫 ····································· 142

5．3．1 @keyframes 規則創建動畫 ··············· 143

5．3．2 animation 屬性調用動畫 ··················· 144

5．4 單元案例——“愛我中華”—

動畫製作 ··································· 146

5．4．1 頁面效果分析 ···································· 147

5．4．2 頁面動畫定義 ···································· 147

5．4．3 頁面結構設計 ···································· 148

5．4．4 頁面樣式設計 ···································· 149

5．5 單元小結 ······································· 150

5．6 動手實踐 ······································· 151

單元6 HTML5 智慧型表單 ······················ 152

6．1 表單… ··········································· 152

6．1．1 表單的構成 ········································ 152

6．1．2 創建表單 ············································ 153

6．2 表單控制項 ······································· 154

6．2．1 input 控制項 ··········································· 154

6．2．2 textarea 控制項 ······································· 157

6．2．3 select 控制項 ·········································· 159

6．3 HTML5 表單新屬性 ····················· 161

6．3．1 HTML5 的Input 類型 ························ 162

6．3．2 HTML5 的表單元素 ·························· 166

6．3．3 HTML5 的表單屬性 ·························· 168

6．4 單元案例——志願者註冊頁面 ····· 172

6．4．1 表單註冊頁面效果分析 ···················· 173

6．4．2 搭建表單註冊頁面結構 ···················· 173

6．4．3 定義表單註冊頁面CSS 樣式 ··········· 176

6．5 單元小結 ······································· 178

6．6 動手實踐 ······································· 178

單元7 基於HTML5 的移動

Web 套用-上 ····························· 179

7．1 HTML5 音頻與視頻 ····················· 179

7．1．1 HTML5 多媒體技術概述 ·················· 179

7．1．2 HTML5 音頻 ······································ 182

7．1．3 HTML5 視頻 ······································ 184

7．1．4 音頻與視頻相關屬性、方法與事件 ····· 187

7．2 HTML5 拖放 ································· 190

7．2．1 拖放概述 ············································ 190

7．2．2 拖放事件 ············································ 191

7．2．3 dataTransfer 對象 ······························· 194

目錄

3

7．3 檔案操作 ······································· 196

7．3．1 選擇檔案 ············································ 196

7．3．2 操作檔案 ············································ 197

7．4 單元案例——DIY 視頻播放器 ····· 200

7．4．1 頁面功能分析 ···································· 200

7．4．2 頁面效果展示 ···································· 200

7．4．2 頁面設計與實現 ································ 200

7．5 單元小結 ······································· 204

7．6 動手實踐 ······································· 204

單元8 基於HTML5 的移動

Web 套用-下 ···························· 206

8．1 認識Canvas 元素 ························· 206

8．2 繪製簡單圖形 ······························· 210

8．2．1 繪製直線 ············································ 210

8．2．2 繪製三角形 ········································ 211

8．2．3 繪製矩形 ············································ 213

8．2．4 清空畫布 ············································ 215

8．3 繪製曲線 ······································· 217

8．3．1 繪製圓 ················································ 217

8．3．2 繪製其他曲線 ···································· 218

8．4 圖形的變換 ··································· 221

8．4．1 移動坐標空間 ···································· 221

8．4．2 旋轉坐標空間 ···································· 222

8．5 操作與使用圖像 ··························· 224

8．5．1 繪製圖像 ············································ 224

8．5．2 改變圖像大小 ···································· 225

8．5．2 創建圖像切片 ···································· 226

8．6 繪製文字 ······································· 228

8．6．1 繪製填充文字 ···································· 228

8．6．2 繪製輪廓文字 ···································· 230

8．7 圖形的組合與裁切 ······················· 233

8．7．1 圖形的組合 ········································ 233

8．7．2 裁切路徑 ············································ 234

8．8 更多的顏色和樣式選擇 ··············· 235

8．8．1 繪製線性漸變 ···································· 235

8．8．2 繪製放射性漸變 ································ 238

8．8．3 繪製圖案 ············································ 239

8．9 SVG 創建2D 圖形 ······················· 240

8．9．1 在頁面中添加SVG ··························· 241

8．9．2 套用SVG ··········································· 241

8．10 單元案例——繪製桌面時鐘 ····· 243

8．10．1 頁面效果分析 ·································· 244

8．10．2 頁面實現 ·········································· 244

8．11 單元小結 ····································· 247

8．12 動手實踐 ····································· 247

單元9 回響式Web 設計神器

Bootstrap ································· 248

9．1 Bootstrap 環境安裝 ······················ 248

9．2 Bootstrap 常用CSS 樣式 ············· 252

9．2．1 Bootstrap 柵格系統 ···························· 252

9．2．2 Bootstrap 排版 ···································· 254

9．2．3 Bootstrap 表格 ···································· 257

9．2．4 Bootstrap 表單 ···································· 258

9．2．5 Bootstrap 按鈕 ···································· 261

9．3 Bootstrap 布局組件 ······················ 263

9．3．1 Bootstrap 字型圖示 ···························· 263

9．3．2 Bootstrap 下拉選單與按鈕組 ············ 264

9．3．3 Bootstrap 導航 ···································· 266

9．3．4 Bootstrap 導航欄 ································ 267

9．3．5 Bootstrap 分頁和列表組 ···················· 268

9．4 Bootstrap 常用外掛程式 ······················ 270

9．4．1 Bootstrap 標籤頁 ································ 270

9．4．2 Bootstrap 輪播外掛程式 ···························· 271

9．4．3 Bootstrap 摺疊 ···································· 274

9．5 單元案例——新冠疫苗預約

網頁面 ··········································· 276

9．5．1 頁面效果分析 ···································· 276

9．5．2 頁面實現 ············································ 277

9．6 單元小結 ······································· 279

9．7 動手實踐 ······································· 279

單元10 實戰開發——英語學習網站 ···· 281

10．1 Bootstrap 項目的搭建 ················ 281

10．2 首頁效果預覽與首頁結構搭建 ···· 282

移動Web 開發實戰HTML5+CSS3+Bootstrap（慕課版）

4

10．3 首頁導航與輪播圖實現 ············· 284

10．3．1 首頁導航欄實現 ······························ 284

10．3．2 首頁輪播圖 ······································ 285

10．4 首頁主體內容及底部選單 ········· 288

10．4．1 主體內容 ·········································· 288

10．4．2 底部選單 ·········································· 292

10．5 線上學習頁面 ····························· 295

10．5．1 導航欄與底部選單 ·························· 295

10．5．2 主體內容實現 ·································· 297

10．6 英語新聞頁面 ····························· 300

10．6．1 導航欄與底部選單 ·························· 300

10．6．2 主體內容實現 ·································· 302

10．7 單元小結 ····································· 306

10．8 動手實踐 ····································· 306

作者簡介

葉品菊

在常州信息職業技術學院從事多年移動Web開發相關教學和科研工作；主持創新創業類教育理論研究課題5項，江蘇省大學生創新訓練項目2項；參與Web前端1+X證書開發，指導學生獲得2019年江蘇省職業技能大賽HTML5融媒體賽項二等獎；獲得第三屆全國高校微課教學大賽國賽三等獎，江蘇賽區微課教學大賽一等獎1項，二等獎1項。