零基礎(chǔ)HTML+CSS+JavaScript學(xué)習(xí)筆記

第一篇 基礎(chǔ)篇
第 1 章 HTML 概述 .1
1.1 HTML 簡(jiǎn)介 . 1
1.1.1 什么是 HTML . 1
1.1.2 HTML 的發(fā)展歷程 . 1
1.2 HTML 文件的基本結(jié)構(gòu) . 2
1.2.1 HTML 相關(guān)概念 . 2
1.2.2 HTML 的基本標(biāo)簽 . 4
1.3 編寫(xiě)第一個(gè) HTML 文件 7
1.3.1 HTML 文件的編寫(xiě)方法 . 7
1.3.2 手工直接編寫(xiě)網(wǎng)頁(yè) . 8
1.3.3 使用可視化軟件 WebStorm 制作網(wǎng)頁(yè) 9
第 2 章 初識(shí) HTML5 .15
2.1 標(biāo)題 . 15
2.1.1 標(biāo)題標(biāo)簽 . 15
2.1.2 標(biāo)題的對(duì)齊方式 . 17
2.2 文字 . 19
2.2.1 文字的斜體、下畫(huà)線、刪除線 . 19
2.2.2 文字的上標(biāo)與下標(biāo) . 21
2.2.3 特殊文字符號(hào) . 22
2.3 段落 . 23
2.3.1 段落標(biāo)簽 . 23
2.3.2 段落的換行標(biāo)簽 . 24
2.3.3 段落的原格式標(biāo)簽 . 26
2.4 水平線 . 27
2.4.1 水平線標(biāo)簽 . 27
2.4.2 水平線標(biāo)簽的寬度 . 29目錄
第 3 章 圖像和超鏈接 .31
3.1 添加圖像 . 31
3.1.1 圖像的基本格式 . 31
3.1.2 在 HTML 中添加圖像 32
3.2 設(shè)置圖像屬性 . 33
3.2.1 圖像大小與邊框 . 33
3.2.2 圖像間距與對(duì)齊方式 . 35
3.2.3 替換文本與提示文字 . 36
3.3 鏈接標(biāo)簽 . 38
3.3.1 文本鏈接 . 38
3.3.2 書(shū)簽鏈接 . 39
3.4 圖像的鏈接 . 41
3.4.1 為圖像添加鏈接 . 41
3.4.2 圖像熱區(qū)鏈接 . 43
第 4 章 表格與 標(biāo)簽 46 4.1 簡(jiǎn)單表格 . 46
4.1.1 簡(jiǎn)單表格的制作 . 46
4.1.2 表頭的設(shè)置 . 49
4.2 表格的高級(jí)應(yīng)用 . 51
4.2.1 表格的樣式 . 51
4.2.2 表格的合并 . 53
4.2.3 表格的分組 . 55
4.3 標(biāo)簽 . 57 4.3.1 標(biāo)簽的介紹 . 57 4.3.2 標(biāo)簽的應(yīng)用 . 58 4.4 標(biāo)簽 . 60 4.4.1 標(biāo)簽的介紹 60 4.4.2 標(biāo)簽的應(yīng)用 61 第 5 章 列表 63
5.1 列表的標(biāo)簽 . 63
5.2 無(wú)序列表 . 64
5.2.1 無(wú)序列表標(biāo)簽 . 64
5.2.2 無(wú)序列表屬性 65
5.3 有序列表 . 67
5.3.1 有序列表標(biāo)簽 . 67
5.3.2 有序列表屬性 . 68
5.4 列表的嵌套 . 70
5.4.1 定義列表的嵌套 . 70
5.4.2 無(wú)序列表和有序列表的嵌套 . 72
第 6 章 表單 74
6.1 表單概述 . 74
6.1.1 概述 . 74
6.1.2 表單標(biāo)簽 75
6.2 輸入標(biāo)簽 . 77
6.2.1 文本框 . 77
6.2.2 單選框和復(fù)選框 . 79
6.2.3 按鈕 . 81
6.2.4 圖像域和文件域 . 84
6.3 文本域和菜單列表控件 . 86
6.3.1 文本域 . 86
6.3.2 菜單列表控件 . 87
第 7 章 多媒體 90
7.1 HTML5 多媒體的簡(jiǎn)述 . 90
7.1.1 HTML4 中多媒體的應(yīng)用 . 90
7.1.2 HTML5 網(wǎng)頁(yè)中的多媒體 . 91
7.2 多媒體元素基本屬性 . 92
7.3 多媒體元素常用方法 . 97
7.3.1 多媒體播放時(shí)的方法 . 97
7.3.2 canPlayType(type) 方法 99
7.4 多媒體元素重要事件 . 100
7.4.1 事件處理方式 . 100
7.4.2 事件介紹 . 100
7.4.3 事件實(shí)例 . 101
第二篇 CSS篇
第 8 章 CSS3 概述 .104
8.1 CSS3 簡(jiǎn)介 . 104
8.1.1 CSS3 的發(fā)展史 . 104
8.1.2 一個(gè)簡(jiǎn)單的 CSS 實(shí)例 105
8.2 CSS3 中的選擇器 . 108
8.2.1 標(biāo)簽選擇器與屬性選擇器 . 108
8.2.2 類選擇器和 ID 選擇器 111
8.2.3 偽類選擇器和偽元素選擇器 . 113
8.2.4 其他選擇器 . 116
8.3 常用屬性 . 117
8.3.1 文本相關(guān)屬性 . 117
8.3.2 背景相關(guān)屬性 . 122
8.3.3 列表相關(guān)屬性 . 129
第 9 章 CSS3 中的布局常用屬性 132
9.1 框模型 . 132
9.1.1 概述 . 132
9.1.2 內(nèi)、外邊距的相關(guān)屬性 . 133
9.1.3 邊框的相關(guān)屬性 . 135
9.2 定位相關(guān)屬性 . 137
9.2.1 概述 . 137
9.2.2 設(shè)置定位方式 . 137
9.2.3 浮動(dòng) . 139
第 10 章 CSS3 中的動(dòng)畫(huà)與變形 .141
10.1 2D 變換——transform 141
10.1.1 transform 的基本屬性值 . 141
10.1.2 應(yīng)用 transform 屬性實(shí)現(xiàn)旋轉(zhuǎn) 142
10.1.3 應(yīng)用 transform 屬性實(shí)現(xiàn)縮放 143
10.1.4 應(yīng)用 transform 屬性實(shí)現(xiàn)平移 144
10.1.5 應(yīng)用 transform 屬性實(shí)現(xiàn)傾斜 145
10.1.6 變形原點(diǎn) . 148
10.2 過(guò)渡效果——transition . 149
10.2.1 指定參與過(guò)渡的屬性 . 149
10.2.2 指定過(guò)渡的持續(xù)時(shí)間 . 150
10.2.3 指定過(guò)渡的延遲時(shí)間 . 150
10.2.4 指定過(guò)渡的動(dòng)畫(huà)類型 . 150
10.3 動(dòng)畫(huà)——Animation . 156
10.3.1 關(guān)鍵幀 . 156
10.3.2 動(dòng)畫(huà)屬性 . 157
第 11 章 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 160
11.1 概述 160
11.1.1 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念 . 160
11.1.2 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)點(diǎn)、缺點(diǎn)和技術(shù)原理 . 161
11.2 像素和屏幕分辨率 161
11.2.1 像素和屏幕分辨率 . 162
11.2.2 設(shè)備像素和 CSS 像素 163
11.3 視口 163
11.3.1 視口概述 . 164
11.3.2 視口常用屬性 . 164
11.3.3 媒體查詢 . 165
11.4 響應(yīng)式網(wǎng)頁(yè)的布局設(shè)計(jì) 166
11.4.1 常用布局類型 . 166
11.4.2 布局的實(shí)現(xiàn)方式 . 167
11.4.3 響應(yīng)式網(wǎng)頁(yè)布局的設(shè)計(jì)與實(shí)現(xiàn) . 168
第三篇 高級(jí)篇
第 12 章 JavaScript 概述 171
12.1 JavaScript 簡(jiǎn)述 171
12.2 WebStorm 簡(jiǎn)介 174
12.3 JavaScript 在 HTML 中的使用 175
12.3.1 在網(wǎng)頁(yè)中直接嵌入 JavaScript 代碼 . 175
12.3.2 鏈接外部 JavaScript 文件 . 180
12.3.3 作為特定標(biāo)簽的屬性值使用 . 182
12.4 JavaScript 基本語(yǔ)法 182
第 13 章 JavaScript 基礎(chǔ) 185
13.1 數(shù)據(jù)類型 . 185
13.1.1 數(shù)值型 . 185
13.1.2 字符串型 . 188
13.1.3 布爾型 . 191
13.1.4 特殊數(shù)據(jù)類型 . 191
13.2 常量和變量 . 191
13.2.1 常量 . 192
13.2.2 變量 . 192
13.3 運(yùn)算符 . 195
13.3.1 算術(shù)運(yùn)算符 . 196
13.3.2 字符串運(yùn)算符 . 197
13.3.3 比較運(yùn)算符 . 198
13.3.4 賦值運(yùn)算符 . 199
13.3.5 邏輯運(yùn)算符 . 201
13.3.6 條件運(yùn)算符 . 202
13.3.7 其他運(yùn)算符 . 203
13.3.8 運(yùn)算符優(yōu)先級(jí) . 204
13.4 表達(dá)式 . 206
13.5 數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則 . 207
第 14 章 JavaScript 基本語(yǔ)句 .209
14.1 條件判斷語(yǔ)句 . 209
14.1.1 if 語(yǔ)句 209
14.1.2 switch 語(yǔ)句 216
14.2 循環(huán)語(yǔ)句 . 219
14.2.1 while 語(yǔ)句 . 219
14.2.2 do…while 語(yǔ)句 . 221
14.2.3 for 語(yǔ)句 223
14.2.4 循環(huán)語(yǔ)句的嵌套 . 225
14.3 跳轉(zhuǎn)語(yǔ)句 . 226
14.3.1 continue 語(yǔ)句 226
14.3.2 break 語(yǔ)句 . 228
14.4 異常處理語(yǔ)句 . 229
14.4.1 try…catch…fifinally 語(yǔ)句 . 229
14.4.2 Error 對(duì)象 230
14.4.3 使用 throw 語(yǔ)句拋出異常 231
第 15 章 JavaScript 中的函數(shù) .232
15.1 函數(shù)的定義和調(diào)用 . 232
15.1.1 函數(shù)的定義 . 232
15.1.2 函數(shù)的調(diào)用 . 233
15.2 函數(shù)的參數(shù) . 236
15.3 函數(shù)的返回值 . 237
15.4 嵌套函數(shù) . 238
15.4.1 函數(shù)的嵌套定義 . 239
15.4.2 函數(shù)的嵌套調(diào)用 . 239
15.5 遞歸函數(shù) . 240
15.6 變量的作用域 . 241
15.6.1 全局變量和局部變量 . 242
15.6.2 變量的優(yōu)先級(jí) . 242
15.7 內(nèi)置函數(shù) . 243
15.7.1 數(shù)值處理函數(shù) . 243
15.7.2 字符串處理函數(shù) . 245
15.8 定義匿名函數(shù) . 246
15.8.1 在表達(dá)式中定義函數(shù) . 247
15.8.2 使用 Function() 構(gòu)造函數(shù)定義函數(shù) 248
第 16 章 JavaScript 中的對(duì)象 .249
16.1 對(duì)象簡(jiǎn)介 . 249
16.1.1 什么是對(duì)象 . 249
16.1.2 對(duì)象的屬性和方法 . 250
16.1.3 JavaScript 對(duì)象的種類 250
16.2 自定義對(duì)象的創(chuàng)建 . 251
16.2.1 直接創(chuàng)建自定義對(duì)象 . 251
16.2.2 通過(guò)自定義構(gòu)造函數(shù)創(chuàng)建自定義對(duì)象 . 252
16.2.3 通過(guò) Object 對(duì)象創(chuàng)建自定義對(duì)象 . 256
16.3 對(duì)象訪問(wèn)語(yǔ)句 . 258
16.3.1 for…in 語(yǔ)句 259
16.3.2 with 語(yǔ)句 . 260
16.4 常用內(nèi)部對(duì)象 . 261
16.4.1 Math 對(duì)象 261
16.4.2 Date 對(duì)象 . 264
第 17 章 JavaScript 中的數(shù)組 .271
17.1 數(shù)組介紹 . 271
17.2 定義數(shù)組 . 272
17.2.1 定義空數(shù)組 . 272
17.2.2 指定數(shù)組長(zhǎng)度 . 273
17.2.3 指定數(shù)組元素 . 273
17.2.4 直接定義數(shù)組 . 273
17.3 操作數(shù)組元素 . 274
17.3.1 數(shù)組元素的輸入和輸出 . 274
17.3.2 數(shù)組元素的添加 . 276
17.3.3 數(shù)組元素的刪除 . 277
17.4 數(shù)組的屬性 . 277
17.4.1 length 屬性 277
17.4.2 prototype 屬性 . 279
17.5 數(shù)組的方法 . 280
17.5.1 數(shù)組的添加和刪除 . 281
17.5.2 設(shè)置數(shù)組的排列順序 . 285
17.5.3 獲取某段數(shù)組元素 . 288
17.5.4 將數(shù)組轉(zhuǎn)換成字符串 . 290
第 18 章 AJAX 技術(shù) 292
18.1 AJAX 概述 292
18.1.1 AJAX 應(yīng)用案例 292
18.1.2 AJAX 的開(kāi)發(fā)模式 293
18.1.3 AJAX 的優(yōu)點(diǎn) 294
18.2 AJAX 的技術(shù)組成 295
18.2.1 XMLHttpRequest 對(duì)象 . 295
18.2.2 XML. 295
18.2.3 JavaScript . 297
18.2.4 DOM 298
18.2.5 CSS 298
18.3 XMLHttpRequest 對(duì)象的使用 298
18.3.1 XMLHttpRequest 對(duì)象的初始化 . 298
18.3.2 XMLHttpRequest 對(duì)象的常用屬性 . 299
18.3.3 XMLHttpRequest 對(duì)象的常用方法 . 301
第 19 章 jQuery 基礎(chǔ) 306
19.1 jQuery 概述 . 306
19.2 下載與配置 jQuery . 307
19.3 jQuery 選擇器 . 309
19.3.1 jQuery 的工廠函數(shù) . 309
19.3.2 基本選擇器 . 310
19.3.3 層級(jí)選擇器 . 316
19.3.4 過(guò)濾選擇器 . 323
19.3.5 屬性選擇器 . 329
19.3.6 表單選擇器 . 330
第 20 章 jQuery 控制網(wǎng)頁(yè)和事件處理 .332
20.1 jQuery 控制網(wǎng)頁(yè)元素 . 332
20.1.1 對(duì)元素的內(nèi)容和值進(jìn)行操作 . 332
20.1.2 對(duì)網(wǎng)頁(yè)中的 DOM 節(jié)點(diǎn)進(jìn)行操作 336
20.1.3 對(duì)網(wǎng)頁(yè)元素的屬性進(jìn)行操作 . 342
20.1.4 對(duì)元素的 CSS 樣式進(jìn)行操作 343
20.2 jQuery 的事件處理 . 344
20.2.1 網(wǎng)頁(yè)加載響應(yīng)事件 . 344
20.2.2 jQuery 中的事件 . 345
20.2.3 事件綁定 . 346
20.2.4 模擬用戶操作 . 347



查看全部↓ 前言/序言 前言：
瀏覽網(wǎng)頁(yè)已經(jīng)成為人們生活和工作中不可或缺的一部分，網(wǎng)頁(yè)頁(yè)面也隨著技術(shù)的發(fā)展而越來(lái)越豐富、美觀。HTML（超文本標(biāo)記語(yǔ)言）是一種網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)語(yǔ)言，它和 CSS3的出現(xiàn)，可以使設(shè)計(jì)的網(wǎng)頁(yè)外觀效果更炫、網(wǎng)頁(yè)設(shè)計(jì)技術(shù)更簡(jiǎn)單。JavaScript 是 Web 網(wǎng)頁(yè)中的一種腳本編程語(yǔ)言，以開(kāi)發(fā) Web 網(wǎng)頁(yè)的腳本語(yǔ)言而聞名。因此，HTML、CSS 和JavaScript 又被稱為 Web 開(kāi)發(fā)的“三劍客”。
本書(shū)內(nèi)容
本書(shū)包含學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到高級(jí)應(yīng)用開(kāi)發(fā)所需的各類必備知識(shí)，全書(shū)共 20 章，
知識(shí)結(jié)構(gòu)如下。
本書(shū)特點(diǎn)
●內(nèi)容由淺入深，循序漸進(jìn)。本書(shū)以初、中級(jí)程序員為重點(diǎn)對(duì)象，先講解 HTML 基礎(chǔ)，再講解 HTML 網(wǎng)頁(yè)的結(jié)構(gòu)、常用標(biāo)簽、CSS 基礎(chǔ)知識(shí)、CSS 中的偽類選擇器、CSS 中的布局常用屬性、JavaScript 概述、JavaScript 基本語(yǔ)法、AJAX、jQuery 等知識(shí)。在講解過(guò)程中，步驟詳盡，使讀者在閱讀時(shí)一目了然，快速掌握書(shū)中的內(nèi)容。
●教學(xué)視頻，講解詳盡。本書(shū)基礎(chǔ)知識(shí)部分提供了配套教學(xué)視頻，讀者可以根據(jù)這些視頻進(jìn)行學(xué)習(xí)，感受編程的快樂(lè)，增強(qiáng)進(jìn)一步學(xué)習(xí)的信心，從而快速成為編程高手。
●實(shí)例典型，輕松易學(xué)。通過(guò)例子來(lái)學(xué)習(xí)知識(shí)是最好的學(xué)習(xí)方式。本書(shū)在講解知識(shí)時(shí)，通過(guò)多個(gè)實(shí)例透徹、詳盡地講述了在實(shí)際開(kāi)發(fā)中所需的各類知識(shí)。另外，為了便于讀者閱讀程序代碼，并快速學(xué)習(xí)編程技能，書(shū)中的關(guān)鍵代碼都提供了注釋。
●精彩欄目，貼心提醒。本書(shū)根據(jù)需要在各章安排了很多“學(xué)習(xí)筆記”小欄目，讓讀者可以在學(xué)習(xí)的過(guò)程中更輕松地理解相關(guān)知識(shí)點(diǎn)和概念，從而更快地掌握相關(guān)技術(shù)的應(yīng)用技巧。
讀者對(duì)象
●初學(xué)編程的自學(xué)者
●編程愛(ài)好者
● 大中專院校的老師和學(xué)生
●相關(guān)培訓(xùn)機(jī)構(gòu)的老師和學(xué)員
●進(jìn)行畢業(yè)設(shè)計(jì)的學(xué)生
●初級(jí)、中級(jí)、高級(jí)程序開(kāi)發(fā)人員
● 程序測(cè)試及維護(hù)人員
●參加實(shí)習(xí)的“菜鳥(niǎo)”程序員
讀者服務(wù)
本書(shū)約定
開(kāi)發(fā)環(huán)境及工具如下。
●操作系統(tǒng)：Windows 7、Windows 10 等
●開(kāi)發(fā)工具：Visual Studio 2017（Visual Studio 2015 及 Visual Studio 2019 兼容）
● 數(shù)據(jù)庫(kù)：SQL Server 2014
查看全部↓
"})