圖書簡介
《HTML5+CSS3+JavaScript從入門到精通(微視頻精編版)》內容淺顯易懂,實例豐富,詳細介紹了HTML5+CSS3+JavaScript開發需要掌握的各類實戰知識。全書分為兩冊:核心技術分冊和強化訓練分冊。核心技術分冊共17章,包括HTML基礎、文本、圖像和超鏈鞏員采接、CSS3概述、CSS3高級套用、表格與標籤、列表、表單、多媒體、HTML5新特性、JavaScript基礎、繪製圖形、檔案與拖放、JavaScript對象編程、回響式網頁設計、回響式組件、課程設計—遊戲公園等內容。
目錄
核心技術分冊目錄
第1篇 基礎阿戲希只篇
第1章 HTML基礎 2
視頻講解:58分鐘
1.1 HTML概述 3
1.1.1 什麼是HTML 3
1.1.2 HTML的發展歷程 3
1.2.1 HTML的基本結構 4
1.2.2 HTML的基本標籤 5
1.3 編寫第一個HTML檔案 9
1.3.1 HTML檔案的編寫方法 9
1.3.2 手工編寫頁面 9
1.3.3 使用可視化軟體WebStorm製作頁面 10
1.4 小結 16
1.5 實戰 17
1.5.1 實戰一:設定背景顏色 17
1.5.2 實戰二:設定連結顏色 17
第2章 文本 18
視頻講解:1小時14分鐘
2.1 標題 19
2.1.1 標題標籤 19
2.1.2 標題的對齊方式 21
2.2 文字 23
2.2.1 文字的斜體、下畫線、刪除線 23
2.2.2 文字的上標與下標 24
2.2.3 特殊文字元號 25
2.3 段落 27
2.3.1 段落標籤 27
2.3.2 段落的換行標籤 28
2.3.3 段落的原格式標籤 29
2.4 水平線 31
2.4.1 水平線標籤 31
2.4.2 水平線標籤的寬度 32
2.5 小結 33
2.6 實戰 34
2.6.1 實戰一:實現一則天氣預報 34
2.6.2 實戰二:實現一則唐詩 34
2.6.3 實戰三:實現商品打折清單 34
2.6.4 實戰四:實現一個人物字元畫 34
第3章 圖像和超連結 35
視頻講解:39分鐘
3.1 添加圖像 36
3.1.1 圖像的基本格式 36
3.1.2 添加圖像 36
3.2 設定圖像屬性 38
3.2.1 圖像大小與籃霉框線 38
3.2.2 圖像間距與對齊方式 39
3.2.3 替換文本與提示文字 41
3.3 連結標籤 42
3.3.1 文本連結 42
3.3.2 書籤連結 44
3.4 圖像的超連結 45
3.4.1 圖像的基本連結 45
3.4.2 圖像熱區連結 47
3.5 小結 49
3.6 實戰 50
3.6.1 實戰一:顯示圖書封面 50
3.6.2 實戰二:製作商品評價頁面 50
3.6.3 實戰三:製作抽獎頁面 50
第4章 CSS3概述 51
視頻講解:1小時6分鐘
4.1 CSS3概述 52
4.1.1 CSS的發展史 52
4.1.2 一個簡單的CSS示例 52
4.2 CSS3中的選擇器 55
4.2.1 屬性選擇器 56
4.2.2 類和ID選擇器 58
4.2.3 偽類和偽元素宙采市禁選擇器 60
4.2.4 其他選擇器 63
4.3 常用屬性 65
4.3.1 文本相關屬性 66
4.3.2 背景相關屬性 69
4.3.3 列表相關屬性 71
4.4 小結 73
4.5 實戰 73
4.5.1 實戰一:製作登錄註冊頁面 73
4.5.2 實戰二:製作網頁版生日賀卡 74
4.5.3 實戰三:實現個人主頁 74
第5章 CSS3高級套用 75
視頻講解:1小時3分鐘
5.1 框模型 76
5.1.1 外邊距margin 76
5.1.2 內邊距padding 79
5.1.3 框線border 81
5.2 布局常用屬性 85
5.2.1 浮動 85
5.2.2 定位欠獄照相關屬性 87
5.3 動畫與特效 88
5.3.1 變換(transform) 88
5.3.2 過渡(transition) 90
5.3.3 動畫(animation) 92
5.4 小結 96
5.5 實戰 96
5.5.1 實戰一:設定手機篩選頁面 96
5.5.2 實戰二:製作橫嚮導航 97
5.5.3 實戰三:製作圖片輪播 97
第6章 表格與
標籤 98
視頻講解:1小時12分鐘
6.1 簡單表格埋臘擊 99
6.1.1 簡單表格的製作 99
6.1.2 表頭的設定 101
6.2 表格的高級套用 103
6.2.1 表格的樣式 103
6.2.2 表格的合併 105
6.2.3 表格的分組 107
6.3
標籤 109
6.3.1
標籤的介紹 109
6.3.2
標籤的套用 110
6.4 標籤 112
6.4.1 標籤的介紹 112
6.4.2 標籤的套用 113
6.5 小結 114
6.6 實戰 114
6.6.1 實戰一:製作每日工作計畫表 114
6.6.2 實戰二:實現網頁版工作總結 114
6.6.3 實戰三:製作一則公司公告 114
第7章 列表 115
視頻講解:11分鐘
7.1 列表的標籤 116
7.2 無序列表 116
7.2.1 無序列表標籤 116
7.2.2 無序列表屬性 117
7.3 有序列表 119
7.3.1 有序列表標籤 119
7.3.2 有序列表屬性 120
7.4 列表的嵌套 122
7.4.1 定義列表的嵌套 122
7.4.2 無序列表和有序列表的嵌套 124
7.5 小結 125
7.6 實戰 126
7.6.1 實戰一:製作網站購買提示內容 126
7.6.2 實戰二:製作QQ聯繫人列表 126
7.6.3 實戰三:製作商品列表內容 126
第8章 表單 127
視頻講解:42分鐘
8.1 表單概述 128
8.1.1 概述 128
8.1.2 表單標籤 128
8.2 輸入標籤 131
8.2.1 文本框 131
8.2.2 單選框和多選框 133
8.2.3 按鈕 135
8.2.4 檔案域和圖像域 137
8.3 文本域和列表 139
8.3.1 文本域 139
8.3.2 列表/選單 140
8.4 小結 142
8.5 實戰 143
8.5.1 實戰一:製作QQ登錄頁面 143
8.5.2 實戰二:製作象棋遊戲註冊頁面 143
8.5.3 實戰三:製作個人檔案 143
第9章 多媒體 144
視頻講解:1小時5分鐘
9.1 HTML5多媒體的簡述 145
9.1.1 HTML4中多媒體的套用 145
9.1.2 HTML5頁面中的多媒體 145
9.2 多媒體元素基本屬性 146
9.3 多媒體元素常用方法 150
9.3.1 多媒體播放時的方法 150
9.3.2 canPlayType(type)方法 153
9.4 多媒體元素重要事件 153
9.4.1 事件處理方式 153
9.4.2 事件介紹 154
9.4.3 事件實例 155
9.5 小結 157
9.6 實戰 157
9.6.1 實戰一:製作音樂小球 157
9.6.2 實戰二:載入一段視頻檔案 157
9.6.3 實戰三:製作一段音頻檔案 157
第10章 HTML5新特性 158
視頻講解:57分鐘
10.1 誰在開發HTML5 159
10.2 HTML5的新特性 159
10.3 HTML5和HTML4的區別 161
10.3.1 HTML5的語法變化 161
10.3.2 HTML5中的標記方法 161
10.3.3 HTML5語法中需要掌握的幾個要點 162
10.4 新增和廢除的元素 164
10.4.1 新增的結構元素 164
10.4.2 新增的塊級(block)的語義元素 167
10.4.3 新增的行內(inline)的語義元素 169
10.4.4 新增的嵌入
多媒體元素與互動性元素 171
10.4.5 新增的input元素的類型 172
10.4.6 廢除的元素 172
10.5 新增的屬性和廢除的屬性 173
10.5.1 新增的屬性 173
10.5.2 廢除的屬性 175
10.6 小結 176
10.7 實戰 177
實戰一:製作一個圖像連結 177
第11章 JavaScript基礎 178
視頻講解:2小時13分鐘
11.1 JavaScript概述 179
11.1.1 JavaScript的發展史 179
11.1.2 JavaScript在HTML中的使用 180
11.2 JavaScript語言基礎 183
11.2.1 數據類型 183
11.2.2 運算符與表達式 186
11.2.3 流程控制 190
11.3 JavaScript對象編程 193
11.3.1 Window視窗對象 193
11.3.2 Document文檔對象 195
11.4 JavaScript事件處理 198
11.4.1 滑鼠鍵盤事件 198
11.4.2 頁面事件 201
11.5 小結 203
11.6 實戰 203
11.6.1 實戰一:製作九九乘法表 203
11.6.2 實戰二:製作手機抽獎頁面 203
11.6.3 實戰三:製作購物車結算頁面 203
第2篇 提 高 篇
第12章 繪製圖形 206
視頻講解:1小時15分鐘
12.1 認識HTML5中的畫布Canvas 207
12.1.1 Canvas概述 207
12.1.2 使用Canvas繪製矩形 207
12.2 繪製基本圖形 209
12.2.1 繪製直線 209
12.2.2 繪製曲線 212
12.2.3 繪製圓形 214
12.3 繪製變形圖形 216
12.3.1 繪製平移效果的圖形 216
12.3.2 繪製縮放效果的圖形 217
12.3.3 繪製旋轉效果的圖形 219
12.4 繪製文字 220
12.4.1 繪製輪廓文字 220
12.4.2 繪製填充文字 221
12.4.3 文字相關屬性 222
12.5 小結 224
12.6 實戰 224
12.6.1 實戰一:Canvas繪製移動的正方形 224
12.6.2 實戰二:製作遊戲彈幕效果 224
12.6.3 實戰三:實現計時器 224
第13章 檔案與拖放 225
視頻講解:37分鐘
13.1 選擇檔案 226
13.1.1 通過file對象選擇檔案 226
13.1.2 使用Blob接口獲取檔案的類型與大小 227
13.2 讀取檔案 228
13.2.1 FileReader接口的方法以及事件 228
13.2.2 使用readAsDataURL方法預覽圖片 229
13.2.3 使用readAsText方法讀取文本檔案 231
13.3 拖放檔案 233
13.3.1 拖放頁面元素 233
13.3.2 DataTransfer對象的屬性與方法 234
13.3.3 使用effectAllowed和dropEffect屬性設定拖放效果 235
13.4 小結 236
13.5 實戰 237
13.5.1 實戰一:實現編輯照片牆中上傳圖片的功能 237
13.5.2 實戰二:查看網頁源碼 237
13.5.3 實戰三:預覽檔案功能 237
第14章 JavaScript對象編程 238
視頻講解:1小時2分鐘
14.1 Window視窗對象 239
14.1.1 Window對象 239
14.1.2 對話框(Dialog) 241
14.1.3 視窗對象常用操作 244
14.2 Document文檔對象 247
14.2.1 文檔對象概述 247
14.2.2 文檔對象的常用屬性、方法與事件 248
14.3 JavaScript與表單操作 255
14.3.1 在JavaScript中訪問表單 255
14.3.2 在JavaScript中訪問表單域 256
14.3.3 表單的驗證 256
14.4.1 DOM概述 258
14.4.2 DOM對象節點屬性 260
14.4.3 節點的幾種操作 261
14.4.4 獲取文檔中的指定元素 262
14.4.5 與DHTML相對應的DOM 264
14.5 小結 265
14.6 實戰 266
實戰一:在頁面的指定位置顯示當前日期 266
第15章 回響式網頁設計 267
視頻講解:38分鐘
15.1 概述 268
15.1.1 回響式網頁設計的概念 268
15.1.2 回響式網頁設計的優缺點和技術原理 268
15.2 像素和螢幕解析度 269
15.2.1 像素和螢幕解析度 269
15.2.2 設備像素和CSS像素 270
15.3 視口 271
15.3.1 視口 271
15.3.2 視口常用屬性 272
15.3.3 媒體查詢 273
15.4 回響式網頁的布局設計 274
15.4.1 常用布局類型 274
15.4.2 布局的實現方式 275
15.4.3 回響式布局的設計與實現 276
15.5 小結 278
15.6 實戰 278
實戰一:實現主頁回響式實現 278
第16章 回響式組件 279
視頻講解:1小時14分鐘
16.1 回響式圖片 280
16.1.1 方法1:使用標籤 280
16.1.2 方法2:使用CSS圖片 281
16.2 回響式視頻 284
16.2.1 方法1:使用標籤 284
16.2.2 方法2:使用HTML5手機播放器 285
16.3 回響式導航選單 288
16.3.1 方法1:CSS3回響式選單 288
16.3.2 方法2:JavaScript回響式選單 290
16.4 回響式表格 293
16.4.1 方法1:隱藏表格中的列 293
16.4.2 方法2:滾動表格中的列 295
16.4.3 方法3:轉換表格中的列 296
16.5 小結 298
16.6 實戰 298
實戰一:實現一個回響式選單 298
第3篇 項目篇
第17章 課程設計:遊戲公園 300
視頻講解:1小時5分鐘
17.1 課程設計目的 301
17.2 遊戲公園網站概述 301
17.2.1 網站特點 302
17.2.2 功能結構 303
17.3 主頁的設計與實現 303
17.3.1 主頁的設計 303
17.3.2 頂部區和底部區功能的實現 304
17.3.3 推薦遊戲功能的實現 306
17.3.4 最新遊戲功能的實現 307
17.4 部落格列表的設計與實現 309
17.4.1 部落格列表的設計 309
17.4.2 部落格列表的實現 310
6.6 實戰 114
6.6.1 實戰一:製作每日工作計畫表 114
6.6.2 實戰二:實現網頁版工作總結 114
6.6.3 實戰三:製作一則公司公告 114
第7章 列表 115
視頻講解:11分鐘
7.1 列表的標籤 116
7.2 無序列表 116
7.2.1 無序列表標籤 116
7.2.2 無序列表屬性 117
7.3 有序列表 119
7.3.1 有序列表標籤 119
7.3.2 有序列表屬性 120
7.4 列表的嵌套 122
7.4.1 定義列表的嵌套 122
7.4.2 無序列表和有序列表的嵌套 124
7.5 小結 125
7.6 實戰 126
7.6.1 實戰一:製作網站購買提示內容 126
7.6.2 實戰二:製作QQ聯繫人列表 126
7.6.3 實戰三:製作商品列表內容 126
第8章 表單 127
視頻講解:42分鐘
8.1 表單概述 128
8.1.1 概述 128
8.1.2 表單標籤 128
8.2 輸入標籤 131
8.2.1 文本框 131
8.2.2 單選框和多選框 133
8.2.3 按鈕 135
8.2.4 檔案域和圖像域 137
8.3 文本域和列表 139
8.3.1 文本域 139
8.3.2 列表/選單 140
8.4 小結 142
8.5 實戰 143
8.5.1 實戰一:製作QQ登錄頁面 143
8.5.2 實戰二:製作象棋遊戲註冊頁面 143
8.5.3 實戰三:製作個人檔案 143
第9章 多媒體 144
視頻講解:1小時5分鐘
9.1 HTML5多媒體的簡述 145
9.1.1 HTML4中多媒體的套用 145
9.1.2 HTML5頁面中的多媒體 145
9.2 多媒體元素基本屬性 146
9.3 多媒體元素常用方法 150
9.3.1 多媒體播放時的方法 150
9.3.2 canPlayType(type)方法 153
9.4 多媒體元素重要事件 153
9.4.1 事件處理方式 153
9.4.2 事件介紹 154
9.4.3 事件實例 155
9.5 小結 157
9.6 實戰 157
9.6.1 實戰一:製作音樂小球 157
9.6.2 實戰二:載入一段視頻檔案 157
9.6.3 實戰三:製作一段音頻檔案 157
第10章 HTML5新特性 158
視頻講解:57分鐘
10.1 誰在開發HTML5 159
10.2 HTML5的新特性 159
10.3 HTML5和HTML4的區別 161
10.3.1 HTML5的語法變化 161
10.3.2 HTML5中的標記方法 161
10.3.3 HTML5語法中需要掌握的幾個要點 162
10.4 新增和廢除的元素 164
10.4.1 新增的結構元素 164
10.4.2 新增的塊級(block)的語義元素 167
10.4.3 新增的行內(inline)的語義元素 169
10.4.4 新增的嵌入
多媒體元素與互動性元素 171
10.4.5 新增的input元素的類型 172
10.4.6 廢除的元素 172
10.5 新增的屬性和廢除的屬性 173
10.5.1 新增的屬性 173
10.5.2 廢除的屬性 175
10.6 小結 176
10.7 實戰 177
實戰一:製作一個圖像連結 177
第11章 JavaScript基礎 178
視頻講解:2小時13分鐘
11.1 JavaScript概述 179
11.1.1 JavaScript的發展史 179
11.1.2 JavaScript在HTML中的使用 180
11.2 JavaScript語言基礎 183
11.2.1 數據類型 183
11.2.2 運算符與表達式 186
11.2.3 流程控制 190
11.3 JavaScript對象編程 193
11.3.1 Window視窗對象 193
11.3.2 Document文檔對象 195
11.4 JavaScript事件處理 198
11.4.1 滑鼠鍵盤事件 198
11.4.2 頁面事件 201
11.5 小結 203
11.6 實戰 203
11.6.1 實戰一:製作九九乘法表 203
11.6.2 實戰二:製作手機抽獎頁面 203
11.6.3 實戰三:製作購物車結算頁面 203
第2篇 提 高 篇
第12章 繪製圖形 206
視頻講解:1小時15分鐘
12.1 認識HTML5中的畫布Canvas 207
12.1.1 Canvas概述 207
12.1.2 使用Canvas繪製矩形 207
12.2 繪製基本圖形 209
12.2.1 繪製直線 209
12.2.2 繪製曲線 212
12.2.3 繪製圓形 214
12.3 繪製變形圖形 216
12.3.1 繪製平移效果的圖形 216
12.3.2 繪製縮放效果的圖形 217
12.3.3 繪製旋轉效果的圖形 219
12.4 繪製文字 220
12.4.1 繪製輪廓文字 220
12.4.2 繪製填充文字 221
12.4.3 文字相關屬性 222
12.5 小結 224
12.6 實戰 224
12.6.1 實戰一:Canvas繪製移動的正方形 224
12.6.2 實戰二:製作遊戲彈幕效果 224
12.6.3 實戰三:實現計時器 224
第13章 檔案與拖放 225
視頻講解:37分鐘
13.1 選擇檔案 226
13.1.1 通過file對象選擇檔案 226
13.1.2 使用Blob接口獲取檔案的類型與大小 227
13.2 讀取檔案 228
13.2.1 FileReader接口的方法以及事件 228
13.2.2 使用readAsDataURL方法預覽圖片 229
13.2.3 使用readAsText方法讀取文本檔案 231
13.3 拖放檔案 233
13.3.1 拖放頁面元素 233
13.3.2 DataTransfer對象的屬性與方法 234
13.3.3 使用effectAllowed和dropEffect屬性設定拖放效果 235
13.4 小結 236
13.5 實戰 237
13.5.1 實戰一:實現編輯照片牆中上傳圖片的功能 237
13.5.2 實戰二:查看網頁源碼 237
13.5.3 實戰三:預覽檔案功能 237
第14章 JavaScript對象編程 238
視頻講解:1小時2分鐘
14.1 Window視窗對象 239
14.1.1 Window對象 239
14.1.2 對話框(Dialog) 241
14.1.3 視窗對象常用操作 244
14.2 Document文檔對象 247
14.2.1 文檔對象概述 247
14.2.2 文檔對象的常用屬性、方法與事件 248
14.3 JavaScript與表單操作 255
14.3.1 在JavaScript中訪問表單 255
14.3.2 在JavaScript中訪問表單域 256
14.3.3 表單的驗證 256
14.4.1 DOM概述 258
14.4.2 DOM對象節點屬性 260
14.4.3 節點的幾種操作 261
14.4.4 獲取文檔中的指定元素 262
14.4.5 與DHTML相對應的DOM 264
14.5 小結 265
14.6 實戰 266
實戰一:在頁面的指定位置顯示當前日期 266
第15章 回響式網頁設計 267
視頻講解:38分鐘
15.1 概述 268
15.1.1 回響式網頁設計的概念 268
15.1.2 回響式網頁設計的優缺點和技術原理 268
15.2 像素和螢幕解析度 269
15.2.1 像素和螢幕解析度 269
15.2.2 設備像素和CSS像素 270
15.3 視口 271
15.3.1 視口 271
15.3.2 視口常用屬性 272
15.3.3 媒體查詢 273
15.4 回響式網頁的布局設計 274
15.4.1 常用布局類型 274
15.4.2 布局的實現方式 275
15.4.3 回響式布局的設計與實現 276
15.5 小結 278
15.6 實戰 278
實戰一:實現主頁回響式實現 278
第16章 回響式組件 279
視頻講解:1小時14分鐘
16.1 回響式圖片 280
16.1.1 方法1:使用標籤 280
16.1.2 方法2:使用CSS圖片 281
16.2 回響式視頻 284
16.2.1 方法1:使用標籤 284
16.2.2 方法2:使用HTML5手機播放器 285
16.3 回響式導航選單 288
16.3.1 方法1:CSS3回響式選單 288
16.3.2 方法2:JavaScript回響式選單 290
16.4 回響式表格 293
16.4.1 方法1:隱藏表格中的列 293
16.4.2 方法2:滾動表格中的列 295
16.4.3 方法3:轉換表格中的列 296
16.5 小結 298
16.6 實戰 298
實戰一:實現一個回響式選單 298
第3篇 項目篇
第17章 課程設計:遊戲公園 300
視頻講解:1小時5分鐘
17.1 課程設計目的 301
17.2 遊戲公園網站概述 301
17.2.1 網站特點 302
17.2.2 功能結構 303
17.3 主頁的設計與實現 303
17.3.1 主頁的設計 303
17.3.2 頂部區和底部區功能的實現 304
17.3.3 推薦遊戲功能的實現 306
17.3.4 最新遊戲功能的實現 307
17.4 部落格列表的設計與實現 309
17.4.1 部落格列表的設計 309
17.4.2 部落格列表的實現 310