從零開始學HTML5+CSS3+JavaScript

第1篇　HTML基礎(chǔ)篇
第1章  HTML基礎(chǔ)  2 視頻講解：5節(jié)，58分鐘
1.1  HTML概述  3
1.1.1  什么是HTML  3
1.1.2  HTML的發(fā)展歷程  3
1.2  HTML文件的基本結(jié)構(gòu)  3
1.2.1  HTML的基本結(jié)構(gòu)  4
1.2.2  HTML的基本標簽  5
1.3  編寫第一個HTML文件  8
1.3.1  HTML文件的編寫方法  8
1.3.2  手工編寫頁面  9
1.3.3  使用WebStorm制作頁面  10
[實例1.1]  運用屬性，渲染頁面效果  15
本章知識思維導圖  16

第2章  文本  17 視頻講解：10節(jié)，72分鐘
2.1  標題  18
2.1.1  標題標簽  18
[實例2.1]  巧用標題標簽，編寫開心一笑  18
2.1.2  標題的對齊方式  20
[實例2.2]  活用文字居中，推薦商品信息  20
2.2  文字  21
2.2.1  文字的斜體、下劃線、刪除線  21
[實例2.3]  活用文字裝飾，推薦商品信息  21
2.2.2  文字的上標與下標  22
[實例2.4]  使用上標與下標，展示數(shù)學公示表   23
2.2.3  特殊文字符號  23
[實例2.5]  巧用文字符，繪制字符畫  24
2.3  段落  24
2.3.1  段落標簽  25
[實例2.6]  巧用段落標簽，介紹創(chuàng)意文字  25
2.3.2  段落的換行標簽  26
[實例2.7]  巧用換行，書寫古詩  26
2.3.3  段落的原格式標簽  27
[實例2.8]  巧用原格式標簽，輸出元旦快樂  27
2.4  水平線  28
2.4.1  水平線標簽  28
[實例2.9]  巧用水平線，繪制行表格  28
2.4.2  水平線標簽的寬度  29
[實例2.10]  巧用的寬度屬性，裝飾文字  29
本章知識思維導圖  30

第3章  添加圖像  31 視頻講解：5節(jié)，74分鐘
3.1  添加圖像  32
3.1.1  圖像的基本格式  32
3.1.2  添加圖像  32
[實例3.1]  使用img標簽，實現(xiàn)象棋簡介  33
3.2  設(shè)置圖像屬性  34
3.2.1  圖像大小與邊框  34
[實例3.2]  改變手機商品圖像的大小和邊框  34
3.2.2  圖像間距與對齊方式  35
[實例3.3]  使用align和vspace等改變頭像的位置  36
3.2.3  替換文本與提示文字  36
[實例3.4]  設(shè)置圖像的提示文字與替換文本  37
本章知識思維導圖  38

第4章  超鏈接的使用  39 視頻講解：4節(jié)，67分鐘
4.1  鏈 接 標 簽  40
4.1.1  文本鏈接  40
[實例4.1]  巧用文本鏈接，實現(xiàn)網(wǎng)站導航  40
4.1.2  書簽鏈接  41
[實例4.2]  巧用書簽鏈接，實現(xiàn)商城網(wǎng)頁內(nèi)部跳轉(zhuǎn)  41
4.2  圖像的超鏈接  43
4.2.1  圖像的超鏈接  43
[實例4.3]  添加圖像鏈接，實現(xiàn)“手機風暴”板塊  43
4.2.2  圖像熱區(qū)鏈接  44
[實例4.4]  使用熱區(qū)鏈接，添加多個鏈接地址  45
本章知識思維導圖  46

第5章  表格與標簽  47 視頻講解：9節(jié)，72分鐘
5.1  簡單表格  48
5.1.1  簡單表格的制作  48
[實例5.1]  使用表格標簽編寫值日表  48
5.1.2  表頭的設(shè)置  49
[實例5.2]  使用表頭標簽制作簡單課程表  50
5.2  表格的高級應(yīng)用  51
5.2.1  表格的樣式  51
[實例5.3]  制作商品推薦表格  51
5.2.2  表格的合并  52
[實例5.4]  使用表格標簽，制作復(fù)雜的課程表  53
5.2.3  表格的分組  54
[實例5.5]  使用表格分組制作學生練習表  54
5.3  標簽  56
5.3.1  標簽的介紹  56
[實例5.6]  使用標簽制作一首古詩  56
5.3.2  標簽的應(yīng)用  57
[實例5.7]  使用標簽制作個人簡歷  57
5.4  標簽  58
5.4.1  標簽的介紹  58
[實例5.8]  使用標簽制作春節(jié)介紹短文  59
5.4.2  標簽的應(yīng)用  59
[實例5.9]  使用標簽制作公司介紹小短文  60
本章知識思維導圖  61

第2篇　CSS3與HTML5應(yīng)用篇
第6章  CSS3概述  64 視頻講解：9節(jié)，141分鐘
6.1  CSS概述  65
6.1.1  CSS的發(fā)展史  65
6.1.2  一個簡單的CSS示例  65
6.2  CSS3中的選擇器  67
6.2.1  屬性選擇器  68
[實例6.1]  實現(xiàn)51購商城中的手機風暴版塊  68
6.2.2  類和ID選擇器  69
[實例6.2]  實現(xiàn)商城首頁中爆款特賣版塊  70
6.2.3  偽類和偽元素選擇器  71
[實例6.3]  實現(xiàn)vivo X9s手機的宣傳頁面  72
6.2.4  其他選擇器  74
[實例6.4]  實現(xiàn)商城的分類版塊界面  74
6.3  常用屬性  76
6.3.1  文本相關(guān)屬性  76
[實例6.5]  實現(xiàn)51購商城的搶購頁面  78
6.3.2  背景相關(guān)屬性  79
[實例6.6]  實現(xiàn)為登錄頁面插入背景圖像  80
6.3.3  列表相關(guān)屬性  81
[實例6.7]  實現(xiàn)購物商城導航欄  81
本章知識思維導圖  83

第7章  CSS3高級應(yīng)用  84 視頻講解：8節(jié)，155分鐘
7.1  框模型  85
7.1.1  外邊距（margin）  85
[實例7.1]  實現(xiàn)vivo X9 Plus手機宣傳頁面  86
7.1.2  內(nèi)邊距（padding）  87
[實例7.2]  實現(xiàn)手機商城新品專區(qū)的商品頁面  88
7.1.3  邊框（border）  89
[實例7.3]  實現(xiàn)購物商城中的商品列表  91
7.2  布局常用屬性  92
7.2.1  浮動  93
[實例7.4]  比較各浮動方式的區(qū)別  93
7.2.2  定位  94
[實例7.5]  實現(xiàn)鼠標滑過文字顯示對應(yīng)的內(nèi)容  95
7.3  動畫與特效  95
7.3.1  變換（transform）  96
[實例7.6]  實現(xiàn)鼠標滑過時圖像顯示對應(yīng)的變形效果  96
7.3.2  過渡（transition）  98
[實例7.7]  實現(xiàn)鼠標滑過時逐漸展開圖像的效果  99
7.3.3  動畫（animation）  100
[實例7.8]  實現(xiàn)滾動廣告動畫  102
本章知識思維導圖  103

第8章  列表  104 視頻講解：7節(jié)，32分鐘
8.1  列表的標簽  105
8.2  無序列表  105
8.2.1  無序列表標簽  105
[實例8.1]  無序列表列舉唐宋八大家  106
8.2.2  無序列表屬性  106
[實例8.2]  無序列表制作商品預(yù)覽效果  106
8.3  有序列表  108
8.3.1  有序列表標簽  108
[實例8.3]  運用有序列表輸出古詩  108
8.3.2  有序列表屬性  108
[實例8.4]  運用有序列表制作商城頁面  109
8.4  列表的嵌套  110
8.4.1  定義列表的嵌套  110
[實例8.5]  運用列表嵌套輸出古詩  111
8.4.2  無序列表和有序列表的嵌套  112
[實例8.6]  使用列表嵌套制作導航欄  112
本章知識思維導圖  114

第9章  表單  115 視頻講解：8節(jié)，44分鐘
9.1  表單概述  116
9.1.1  概述  116
9.1.2  表單標簽  116
9.2  輸入標簽  118
9.2.1  文本框  118
[實例9.1]  實現(xiàn)商城中登錄頁面  119
9.2.2  單選框和復(fù)選框  120
[實例9.2]  實現(xiàn)購物車界面選擇商品功能  120
9.2.3  按鈕  121
[實例9.3]  實現(xiàn)收貨地址信息填寫頁面  122
9.2.4  圖像域和文件域  123
[實例9.4]  實現(xiàn)上傳頭像頁面  124
9.3  文本域和菜單/列表  125
9.3.1  文本域  125
[實例9.5]  實現(xiàn)商品評價輸入框  126
9.3.2  菜單/列表  126
[實例9.6]  實現(xiàn)個人資料填寫頁面  127
本章知識思維導圖  128

第10章  多媒體播放  129 視頻講解：8節(jié)，116分鐘
10.1  HTML5多媒體的簡述  130
10.1.1  HTML4中多媒體的應(yīng)用  130
10.1.2  HTML5頁面中的多媒體  130
10.2  多媒體元素基本屬性  131
10.3  多媒體元素常用方法  135
10.3.1  媒體播放時的方法  135
[實例10.1]  多功能的視頻播放效果  135
10.3.2  canPlayType(type)方法  137
10.4  多媒體元素重要事件  138
10.4.1  事件處理方式  138
10.4.2  事件介紹  138
10.4.3  事件實例  139
[實例10.2]  多媒體元素重要事件的運用示例  139
本章知識思維導圖  141

第11章  HTML5新特性  142 視頻講解：12節(jié)，53分鐘
11.1  誰在開發(fā)HTML5  143
11.2  HTML5和HTML4的區(qū)別  143
11.2.1  HTML5的語法變化  143
11.2.2  HTML5中的標記方法  143
11.2.3  HTML5語法中需要掌握的3個要點  144
[實例11.1]  巧用標簽制作區(qū)域圖像映射  145
11.3  新增和廢除的元素  146
11.3.1  新增的結(jié)構(gòu)元素  146
[實例11.2]  運用結(jié)構(gòu)元素制作導航鏈接  147
11.3.2  新增的塊級（block）的語義元素  149
11.3.3  新增的行內(nèi)（inline）的語義元素  150
[實例11.3]  運用meter元素制作柱狀圖  151
11.3.4  新增的嵌入多媒體元素與交互性元素  151
11.3.5  新增的input元素的類型  152
11.3.6  廢除的元素  153
11.4  新增的屬性和廢除的屬性  153
11.4.1  新增的屬性  153
11.4.2  廢除的屬性  155
本章知識思維導圖  157

第12章  響應(yīng)式網(wǎng)頁設(shè)計  158 視頻講解：10節(jié)，40分鐘
12.1  概述  159
12.1.1  響應(yīng)式網(wǎng)頁設(shè)計的概念  159
12.1.2  響應(yīng)式網(wǎng)頁設(shè)計的優(yōu)缺點和技術(shù)原理  159
12.2  像素和屏幕分辨率  160
12.2.1  像素和屏幕分辨率  160
12.2.2  設(shè)備像素和CSS像素  161
12.3  視口  162
12.3.1  視口  162
12.3.2  視口常用屬性  163
12.3.3  媒體查詢  163
12.4  響應(yīng)式網(wǎng)頁的布局設(shè)計  164
12.4.1  常用布局類型  164
12.4.2  布局的實現(xiàn)方式  165
12.4.3  響應(yīng)式布局的設(shè)計與實現(xiàn)  166
[實例12.1]  實現(xiàn)51購商城登錄頁面的響應(yīng)式布局  166
本章知識思維導圖  167

第13章  響應(yīng)式組件  168 視頻講解：9節(jié)，76分鐘
13.1  響應(yīng)式圖像  169
13.1.1  方法1：使用標簽  169
[實例13.1]  巧用標簽實現(xiàn)圖像響應(yīng)式布局  169
13.1.2  方法2：使用CSS圖像  170
[實例13.2]  巧用媒體查詢控制圖像顯示  170
13.2  響應(yīng)式視頻  171
13.2.1  方法1：使用標簽  172
[實例13.3]  巧用標簽播放手機視頻  172
13.2.2  方法2：使用HTML5手機播放器  173
[實例13.4]  實現(xiàn)帶點贊、分享和換膚功能的手機播放器  173
13.3  響應(yīng)式導航菜單  174
13.3.1  方法1：CSS3響應(yīng)式菜單  175
[實例13.5]  巧用media關(guān)鍵字實現(xiàn)響應(yīng)式菜單  175
13.3.2  方法2：JavaScript響應(yīng)式菜單  176
[實例13.6]  巧用第三方組件實現(xiàn)響應(yīng)式菜單  177
13.4  響應(yīng)式表格  178
13.4.1  方法1：隱藏表格中的列  178
[實例13.7]  設(shè)計招聘信息表格隱藏次要信息列  178
13.4.2  方法2：滾動表格中的列  180
[實例13.8]   設(shè)計招聘信息表格滾動查看信息列  180
13.4.3  方法3：轉(zhuǎn)換表格中的列  182
[實例13.9]  將招聘信息的表格變?yōu)榱斜?nbsp; 182
本章知識思維導圖  183

第3篇　JavaScript基礎(chǔ)篇
第14章   JavaScript概述  186 視頻講解：6節(jié)，46分鐘
14.1  JavaScript簡述  187
14.2  WebStorm簡介  190
14.3  JavaScript在HTML中的使用  190
14.3.1  在頁面中直接嵌入JavaScript代碼  190
[實例14.1]  編寫第一個JavaScript程序  191
14.3.2  鏈接外部JavaScript文件  194
[實例14.2]  調(diào)用外部JavaScript文件  194
14.3.3  作為標簽的屬性值使用  196
14.4  JavaScript基本語法  197
本章知識思維導圖  198

第15章  JavaScript基礎(chǔ)  199 視頻講解：16節(jié)，139分鐘
15.1  數(shù)據(jù)類型  200
15.1.1  數(shù)值型  200
[實例15.1]  輸出紅、綠、藍三種顏色的色值  201
[實例15.2]  輸出科學計數(shù)法表示的浮點數(shù)  202
15.1.2  字符串型  202
[實例15.3]  輸出奧尼爾的中文名、英文名和別名  204
15.1.3  布爾型  205
15.1.4  特殊數(shù)據(jù)類型  205
15.2  常量和變量  206
15.2.1  常量  206
15.2.2  變量  206
[實例15.4]   輸出球員信息  208
15.3  運算符  209
15.3.1  算術(shù)運算符  209
[實例15.5]  將華氏度轉(zhuǎn)換為攝氏度  210
15.3.2  字符串運算符  210
[實例15.6]  字符串運算符的使用  211
15.3.3  比較運算符  211
[實例15.7]  比較運算符的使用  212
15.3.4  賦值運算符  213
[實例15.8]  賦值運算符的使用  213
15.3.5  邏輯運算符  214
[實例15.9]  邏輯運算符的使用  214
15.3.6  條件運算符  215
[實例15.10]  條件運算符的使用  215
15.3.7  其他運算符  216
15.3.8  運算符優(yōu)先級  217
[實例15.11]  運算符優(yōu)先級的使用  218
15.4  表達式  219
15.5  數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則  219
本章思維導圖  220

第16章  JavaScript基本語句  221 視頻講解：11節(jié)，115分鐘
16.1  條件判斷語句  222
16.1.1  if語句  222
[實例16.1]  獲取3個數(shù)中的最大值  223
[實例16.2]  判斷2021年2月份的天數(shù)  224
[實例16.3]  輸出考試成績對應(yīng)的等級  225
[實例16.4]  判斷女職工是否已經(jīng)退休  227
16.1.2  switch語句  227
[實例16.5]  輸出獎項級別及獎品  229
16.2  循環(huán)語句  229
16.2.1  while語句  230
[實例16.6]  計算5000米比賽的完整圈數(shù)  231
16.2.2  do...while語句  231
[實例16.7]  計算1 2 … 100的和  232
16.2.3  for語句  232
[實例16.8]  計算100以內(nèi)所有偶數(shù)的和  234
16.2.4  循環(huán)語句的嵌套  234
[實例16.9]  輸出乘法口訣表  235
16.3  跳轉(zhuǎn)語句  235
16.3.1  continue語句  235
[實例16.10]  輸出影廳座位圖  236
16.3.2  break語句  236
16.4  異常處理語句  237
16.4.1  try...catch...finally語句  238
16.4.2  Error對象  239
16.4.3  使用throw語句拋出異常  239
本章知識思維導圖  240

第17章   JavaScript中的函數(shù)  241 視頻講解：13節(jié)，82分鐘
17.1  函數(shù)的定義和調(diào)用  242
17.1.1  函數(shù)的定義  242
17.1.2  函數(shù)的調(diào)用  243
17.2  函數(shù)的參數(shù)  244
[實例17.1]  輸出圖書名稱和圖書作者  245
17.3  函數(shù)的返回值  245
[實例17.2]  計算購物車中商品總價  246
17.4  嵌套函數(shù)  247
17.4.1  函數(shù)的嵌套定義  247
17.4.2  函數(shù)的嵌套調(diào)用  247
[實例17.3]  獲得選手的平均分  248
17.5  遞歸函數(shù)  249
17.6  變量的作用域  249
17.6.1  全局變量和局部變量  249
17.6.2  變量的優(yōu)先級  250
17.7  內(nèi)置函數(shù)  250
17.7.1  數(shù)值處理函數(shù)  251
17.7.2  字符串處理函數(shù)  253
17.8  定義匿名函數(shù)  254
17.8.1  在表達式中定義函數(shù)  254
[實例17.4]  輸出6以內(nèi)的乘法表  255
17.8.2  使用Function()構(gòu)造函數(shù)  255
本章知識思維導圖  256

第18章  JavaScript中的對象  257 視頻講解：10節(jié)，132分鐘
18.1  對象簡介  258
18.1.1  什么是對象  258
18.1.2  對象的屬性和方法  258
18.1.3  JavaScript對象的種類  259
18.2  自定義對象的創(chuàng)建  259
18.2.1  直接創(chuàng)建自定義對象  259
18.2.2  通過自定義構(gòu)造函數(shù)創(chuàng)建對象  260
[實例18.1]  創(chuàng)建一個球員對象  261
[實例18.2]  輸出電影信息  262
[實例18.3]  創(chuàng)建一個圓的對象  263
18.2.3  通過Object對象創(chuàng)建自定義對象  264
[實例18.4]  創(chuàng)建一個圖書對象  265
18.3  對象訪問語句  266
18.3.1  for...in語句  266
18.3.2  with語句  266
18.4  常用內(nèi)部對象  267
18.4.1  Math對象  268
[實例18.5]  生成指定位數(shù)的隨機數(shù)  269
18.4.2  Date對象  270
[實例18.6]  輸出當前日期和時間  273
[實例18.7]  獲取當前日期距離明年元旦的天數(shù)  275
本章知識思維導圖  276

第19章  JavaScript中的數(shù)組  277 視頻講解：14節(jié)，114分鐘
19.1  數(shù)組介紹  278
19.2  定義數(shù)組  278
19.2.1  定義空數(shù)組  278
19.2.2  指定數(shù)組長度  279
19.2.3  指定數(shù)組元素  279
19.2.4  直接定義數(shù)組  280
19.3  操作數(shù)組元素  280
19.3.1  數(shù)組元素的輸入和輸出  280
[實例19.1]  輸出3個學霸的姓名  282
19.3.2  數(shù)組元素的添加  282
19.3.3  數(shù)組元素的刪除  283
19.4  數(shù)組的屬性  283
19.4.1  length屬性  283
[實例19.2]  輸出省份、省會以及旅游景點  284
19.4.2  prototype屬性  285
[實例19.3]  應(yīng)用自定義方法輸出數(shù)組  285
19.5  數(shù)組的方法  286
19.5.1  數(shù)組的添加和刪除  287
19.5.2  設(shè)置數(shù)組的排列順序  290
[實例19.4]  輸出2016電影票房排行榜前五名  292
19.5.3  獲取某段數(shù)組元素  293
[實例19.5]  計算選手的最終得分  294
19.5.4  數(shù)組轉(zhuǎn)換成字符串  294
本章知識思維導圖  296

第4篇　JavaScript高級篇
第20章  Ajax技術(shù)  298 視頻講解：11節(jié)，33分鐘
20.1  Ajax概述  299
20.1.1  Ajax應(yīng)用案例  299
20.1.2  Ajax的開發(fā)模式  299
20.1.3  Ajax的優(yōu)點和缺點  300
20.2  Ajax的技術(shù)組成  301
20.2.1  XMLHttpRequest對象  301
20.2.2  XML語言  301
20.2.3  JavaScript腳本語言  303
20.2.4  DOM  303
20.2.5  CSS  303
20.3  XMLHttpRequest對象  304
20.3.1  XMLHttpRequest對象的初始化  304
20.3.2  XMLHttpRequest對象的常用屬性  305
20.3.3  XMLHttpRequest對象的常用方法  306
[實例20.1]  讀取HTML文件  309
本章知識思維導圖  310

第21章  jQuery基礎(chǔ)  311 視頻講解：8節(jié)，62分鐘
21.1  jQuery概述  312
21.2  jQuery下載與配置  312
21.3  jQuery選擇器  313
21.3.1  jQuery的工廠函數(shù)  313
21.3.2  基本選擇器  314
[實例21.1]  獲取文本框中輸入的值  314
[實例21.2]  修改div元素的內(nèi)容  316
[實例21.3]  獲取元素并設(shè)置CSS樣式  317
[實例21.4]  篩選元素并添加新的樣式  319
21.3.3  層級選擇器  319
[實例21.5]  為版權(quán)列表設(shè)置樣式  320
[實例21.6]  實現(xiàn)為匹配元素換膚  322
[實例21.7]  改變匹配元素的背景顏色  323
[實例21.8]  篩選div元素的同輩元素  324
21.3.4  過濾選擇器  325
[實例21.9]  實現(xiàn)一個帶表頭的雙色表格  326
[實例21.10]  應(yīng)用內(nèi)容過濾器匹配不同的單元格  328
[實例21.11]  利用表單對象的屬性過濾器匹配元素  329
21.3.5  屬性選擇器  331
21.3.6  表單選擇器  331
[實例21.12]  利用表單選擇器匹配元素  332
本章知識思維導圖  333

第22章  jQuery控制頁面和事件處理  334 視頻講解：8節(jié)，50分鐘
22.1  jQuery控制頁面和時間處理  335
22.1.1  對元素內(nèi)容和值進行操作  335
[實例22.1]  對元素內(nèi)容進行設(shè)置  336
[實例22.2]  為多行列表框設(shè)置并獲取值  337
22.1.2  對DOM節(jié)點進行操作  338
[實例22.3]  開心小農(nóng)場  341
22.1.3  對元素屬性進行操作  343
22.1.4  對元素的CSS樣式進行操作  343
22.2  jQuery的事件處理  345
22.2.1  頁面加載響應(yīng)事件  345
22.2.2  jQuery中的事件  345
22.2.3  事件綁定  346
22.2.4  模擬用戶操作  347
[實例22.4]  模擬用戶單擊事件  348
[實例22.5]  為圖像添加和去除邊框  348
本章知識思維導圖  349

第5篇　項目開發(fā)篇
第23章  設(shè)計叮叮商城網(wǎng)站  352 視頻講解：1節(jié)，4分鐘
23.1  項目設(shè)計思路  353
23.1.1  需求分析  353
23.1.2  功能結(jié)構(gòu)  353
23.1.3  叮叮商城概覽  353
23.2  主頁功能實現(xiàn)  354
23.2.1  關(guān)鍵技術(shù)  355
23.2.2  實現(xiàn)過程  355
23.3  商品詳情頁面設(shè)計  356
23.3.1  關(guān)鍵技術(shù)  356
23.3.2  實現(xiàn)過程  357
23.4  購物車頁面設(shè)計  357
23.4.1  關(guān)鍵技術(shù)  358
23.4.2  實現(xiàn)過程  358
23.5  付款頁面設(shè)計  359
23.5.1  關(guān)鍵技術(shù)  359
23.5.2  實現(xiàn)過程  360
本章知識思維導圖  361

第24章  模仿王者榮耀網(wǎng)站  362 視頻講解：1節(jié)，3分鐘
24.1  功能概述  363
24.2  界面預(yù)覽  363
24.3  設(shè)計思路  364
24.4  實現(xiàn)過程  364
24.4.1  主頁的設(shè)計與實現(xiàn)  364
24.4.2  登錄頁面的設(shè)計與實現(xiàn)  368
24.4.3  注冊頁面的設(shè)計與實現(xiàn)  370
本章知識思維導圖  371