Web前端開發項目教程（HTML5+CSS3+JavaScript）（微課版）

卞孝麗，鄭州財稅金融職業學院信息技術學院卞孝麗，鄭州財稅金融職業學院信息技術學院卞孝麗，鄭州財稅金融職業學院信息技術學院卞孝麗，鄭州財稅金融職業學院信息技術學院

項目1　Web前端職業前景與開發初

體驗 1

任務1.1 認識Web前端開發工程師 1

【任務目標】 1

【導學知識】 2

1.1.1　Web前端開發崗位 2

1.1.2　Web前端開發的發展方向 2

【任務實現】 3

任務1.2 熟悉Web前端開發相關

技術 4

【任務目標】 4

【導學知識】 5

1.2.1　Web前端開發的入門技術 5

1.2.2　相關專業術語 6

1.2.3　Web前端開發工具簡介 7

1.2.4　HBuilder X 9

【任務實現】 12

任務1.3 熟悉Web前端開發工作

流程 12

【任務目標】 12

【導學知識】 13

1.3.1　Web前端開發工作流程 13

1.3.2　Web前端開發崗位分工 13

1.3.3　Web前端項目目錄結構 13

【任務實現】 15

任務1.4 初識HTML5頁面 16

【任務目標】 16

【導學知識】 16

1.4.1　項目目錄及文件 16

1.4.2　HTML網頁標簽結構分析 16

【任務實現】 17

【任務拓展】 19

項目2　制作5G新時代科學知識頁面 24

任務2.1 規劃頁面的布局 24

【任務目標】 24

【導學知識】 25

2.1.1　傳統的布局標簽 25

2.1.2　HTML5新增語義化標簽 25

【任務實現】 26

任務2.2 構建網頁的內容 27

【任務目標】 27

【導學知識】 28

2.2.1　文本控制標記 28

2.2.2　圖像和超鏈接 30

2.2.3　表格和列表 32

【任務實現】 35

任務2.3 美化網頁的樣式 36

【任務目標】 36

【導學知識】 36

2.3.1　使用CSS的方式 36

2.3.2　CSS選擇器 38

2.3.3　文本格式化 40

【任務實現】 44

項目3　制作背包客旅行網站註冊和登錄

頁面 50

任務3.1 創建背包客旅行網站註冊和

登錄頁面 50

【任務目標】 50

【導學知識】 51

3.1.1　初識表單 51

3.1.2　創建表單 51

3.1.3　構建表單控件 53

【任務實現】 57

任務3.2 美化背包客旅行網站註冊和登錄頁面 60

【任務目標】 60

【導學知識】 61

3.2.1　定義頁面布局和基礎樣式 61

3.2.2　使用CSS控制表單樣式 61

【任務實現】 61

項目4　開發今日影評網站頁面 69

任務4.1 制作今日影評網站劇情簡介

頁面 69

【任務目標】 69

【導學知識】 70

4.1.1　應用CSS樣式規則 70

4.1.2　引入CSS 71

4.1.3　CSS中的特殊選擇器 72

【任務實現】 73

任務4.2 使用CSS控制元素樣式 77

【任務目標】 77

【導學知識】 77

4.2.1　CSS圖像 77

4.2.2　CSS鏈接 78

4.2.3　CSS表格 78

4.2.4　CSS列表 78

4.2.5　CSS表單 79

【任務實現】 79

任務4.3 使用CSS高級設置 85

【任務目標】 85

【導學知識】 85

4.3.1　CSS組合選擇器 85

4.3.2　CSS的特征 86

4.3.3　CSS優先級 87

4.3.4　CSS排錯 88

【任務實現】 88

項目5　美化傳統文化網 98

任務5.1 制作圖片展及圖片邊框 98

【任務目標】 98

【導學知識】 99

5.1.1　認識盒子模型 99

5.1.2　盒子的外邊距與內邊距 99

5.1.3　盒子的寬度與高度 101

5.1.4　盒子邊框屬性 103

5.1.5　輪廓屬性 104

5.1.6　盒子陰影屬性 104

5.1.7　CSS3新增盒子模型屬性 105

【任務實現】 109

【任務拓展】 112

任務5.2 添加創意漸變色與多重圖像

背景 113

【任務目標】 113

【導學知識】 113

5.2.1　背景顏色 113

5.2.2　背景圖像 114

5.2.3　CSS3新增漸變 117

【任務實現】 119

【任務拓展】 121

項目6　優化國學文化網 127

任務6.1 轉換元素類型 127

【任務目標】 127

【導學知識】 128

6.1.1　認識元素類型 128

6.1.2　轉換元素類型 128

6.1.3　對象的顯示與隱藏 129

【任務實現】 129

任務6.2 處理元素的溢出問題 130

【任務目標】 130

【導學知識】 130

6.2.1　認識溢出 130

【任務實現】 131

任務6.3 改變元素的排列方式 132

【任務目標】 132

【導學知識】 133

6.3.1　認識浮動 133

6.3.2　清除浮動 134

6.3.3　父級塌陷 134

【任務實現】 137

【任務拓展】 141

任務6.4 重定義元素間位置關系 142

【任務目標】 142

【導學知識】 142

6.4.1　認識定位 142

6.4.2　認識偏移 143

6.4.3　定位案例 143

【任務實現】 147

【任務拓展】 149

任務6.5 調整元素的層疊順序 150

【任務目標】 150

【導學知識】 150

6.5.1　認識層疊 150

【任務實現】 151

項目7　開發響應式音樂播放頁面 156

任務7.1 設計響應式頁面 156

【任務目標】 156

【導學知識】 157

7.1.1　響應式布局簡介 157

7.1.2　響應式頁面設計 157

【任務實現】 161

【任務拓展】 165

任務7.2 設計響應式音樂播放

界面 169

【任務目標】 169

【導學知識】 170

7.2.1　音頻/視頻嵌入技術概述 170

7.2.2　在HTML5中嵌入音頻 170

7.2.3　在HTML5中嵌入視頻 172

【任務實現】 174

【任務拓展】 181

項目8　制作遊樂場摩天輪動畫效果

頁面 185

任務8.1 創建網頁導航條 185

【任務目標】 185

【導學知識】 186

8.1.1　認識transform屬性 186

8.1.2　二維變形 186

8.1.3　三維變形 191

【任務實現】 199

任務8.2 設計愛心照片墻 202

【任務目標】 202

【導學知識】 203

8.2.1　過渡簡介 203

8.2.2　過渡屬性的使用 203

【任務實現】 205

【任務拓展】 209

任務8.3 制作遊樂場摩天輪動畫

效果 210

【任務目標】 210

【導學知識】 210

8.3.1　animation動畫 210

8.3.2　@keyframes規則 211

8.3.3　animation屬性 212

【任務實現】 214

項目9　開發果果鮮水果電商PC端

網站 222

任務9.1 創建網站項目目錄 223

【任務目標】 223

【導學知識】 223

9.1.1　分析網站項目目錄結構 223

9.1.2　搭建網站項目目錄結構 223

9.1.3　網頁基本代碼結構 224

【任務實現】 224

任務9.2 開發網站 229

【任務目標】 229

【導學知識】 229

9.2.1　網站常見模塊分析 229

9.2.2　版心 229

【任務實現】 230

任務9.3 使用字體圖標美化

網站 248

【任務目標】 248

【導學知識】 248

9.3.1　字體圖標概述 248

9.3.2　iconfont字體圖標庫的下載 249

【任務實現】 249

任務9.4 開發網站動效交互 252

【任務目標】 252

【導學知識】 252

9.4.1　JavaScript概述 253

9.4.2　引入外部JavaScript代碼 253

9.4.3　在