本書緊密結(jié)合互聯(lián)網(wǎng)行業(yè)發(fā)展對(duì)Web前端開(kāi)發(fā)工程師崗位的技術(shù)和能力要求，以通俗易懂的語(yǔ)言及大量實(shí)例，循序漸進(jìn)地介紹了Web前端開(kāi)發(fā)的基礎(chǔ)知識(shí)與前沿技術(shù)。全書共13章，主要內(nèi)容包括前端技術(shù)概述、HTML語(yǔ)言基礎(chǔ)、CSS層疊樣式表基礎(chǔ)和進(jìn)階、JavaScript語(yǔ)言基礎(chǔ)、DOM與BOM編程、HTML5基礎(chǔ)、HTML5圖形與圖像、HTML5音頻與視頻、HTML5文件與數(shù)據(jù)處理、HTML5網(wǎng)絡(luò)通信與多線程、HTML5+CSS3頁(yè)面布局、前端框架技術(shù)等。每章都配有相應(yīng)的習(xí)題，以幫助讀者更好地理解所學(xué)內(nèi)容，鞏固所學(xué)知識(shí)，達(dá)到學(xué)以致用的目的。
本書結(jié)構(gòu)嚴(yán)謹(jǐn)，兼有普及與提高的雙重功能，既可作為應(yīng)用型本科院校計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程、信息管理與信息系統(tǒng)、通信工程相關(guān)專業(yè)“Web前端技術(shù)”“Web應(yīng)用程序設(shè)計(jì)”“網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)”“網(wǎng)頁(yè)制作”等課程的教材，也可作為高職高專院校相關(guān)專業(yè)的教材，還可作為Web前端應(yīng)用開(kāi)發(fā)人員和前端技術(shù)愛(ài)好者的參考用書。
隨著HTML5規(guī)范的完善和普及，Web前端開(kāi)發(fā)技術(shù)也越來(lái)越引人注目。如何開(kāi)發(fā)Web應(yīng)用程序，設(shè)計(jì)精美、獨(dú)特的網(wǎng)頁(yè)已經(jīng)成為當(dāng)前的熱門問(wèn)題之一。
Web前端是軟件產(chǎn)品中不可缺少的組成部分。從廣義上講，所有用戶終端產(chǎn)品與視覺(jué)和交互有關(guān)的部分，都屬于前端工程師的專業(yè)領(lǐng)域。從狹義上講，Web前端就是使用HTML、CSS、JavaScript等專業(yè)技能和工具將產(chǎn)品的UI（User Interface，用戶界面）設(shè)計(jì)稿實(shí)現(xiàn)成網(wǎng)站產(chǎn)品，涵蓋用戶PC端、移動(dòng)端等。Web前端所包含的知識(shí)模塊很多，就目前而言，HTML、CSS/CSS3、JavaScript、HTML5、前端框架庫(kù)是前端開(kāi)發(fā)中最為基礎(chǔ)也是最為重要的技術(shù)。
本書共13章。第1章是前端技術(shù)概述，主要介紹前端技術(shù)發(fā)展歷程、學(xué)習(xí)路線、開(kāi)發(fā)工具以及就業(yè)前景；第2章是HTML語(yǔ)言基礎(chǔ)，主要介紹HTML基本概念、常用元素和表單元素；第3章是CSS層疊樣式表基礎(chǔ)，主要介紹CSS基本概念、CSS選擇器、CSS常用屬性、CSS盒子模型以及CSS元素布局與定位；第4章是CSS3層疊樣式表進(jìn)階，主要介紹CSS3新增選擇器、CSS3新增盒子屬性、CSS3漸變屬性、CSS3字體與文本效果、CSS3?2D/3D變換以及CSS3過(guò)渡與動(dòng)畫效果；第5章為JavaScript語(yǔ)言基礎(chǔ)，主要介紹JavaScript語(yǔ)法規(guī)則、數(shù)據(jù)類型、運(yùn)算符、流程控制語(yǔ)句、函數(shù)和對(duì)象；第6章為DOM與BOM編程，主要包括DOM編程、BOM編程、表單編程與正則表達(dá)式；第7~12章圍繞HTML5新技術(shù)，分別講解HTML5新增元素與屬性、圖形圖像繪制、音頻與視頻、文件與數(shù)據(jù)處理、網(wǎng)絡(luò)通信與多線程、頁(yè)面布局等內(nèi)容；第13章介紹前端框架技術(shù)，包括jQuery、Bootstrap、Vue和React。
本書在內(nèi)容選擇、深度把握上充分考慮初學(xué)者的特點(diǎn)，內(nèi)容安排上力求做到循序漸進(jìn)。每章節(jié)各個(gè)知識(shí)點(diǎn)都對(duì)應(yīng)相應(yīng)示例，方便讀者閱讀、調(diào)試和運(yùn)行。同時(shí)，每章都配有相應(yīng)的習(xí)題，可使讀者更好地掌握所學(xué)內(nèi)容，學(xué)以致用。
本書不僅適合作為應(yīng)用型本科院校相關(guān)專業(yè)Web應(yīng)用開(kāi)發(fā)或網(wǎng)頁(yè)設(shè)計(jì)制作類課程的教材，也適合作為高職高專院校相關(guān)專業(yè)的教材，亦可作為Web應(yīng)用開(kāi)發(fā)人員和前端技術(shù)愛(ài)好者的參考用書。
本書在編寫和出版過(guò)程中，得到江蘇科技大學(xué)計(jì)算機(jī)學(xué)院、西安電子科技大學(xué)出版社等各部門領(lǐng)導(dǎo)的關(guān)心和大力支持，江蘇科技大學(xué)教材科陳海關(guān)老師、西安電子科技大學(xué)出版社高櫻老師給予了很多幫助，并提出了許多寶貴意見(jiàn)，在此向他們表示衷心的感謝。
由于作者水平有限，書中難免存在不足之處，敬請(qǐng)各位專家、老師和讀者批評(píng)指正。
第1章 前端技術(shù)概述 1
1.1 前端技術(shù)發(fā)展歷程 1
1.1.1 起源階段 2
1.1.2 第一次瀏覽器之爭(zhēng) 2
1.1.3 動(dòng)態(tài)頁(yè)面技術(shù)的興起 3
1.1.4 第二次瀏覽器之爭(zhēng) 4
1.1.5 HTML5的發(fā)展 4
1.2 前端學(xué)習(xí)路線 6
1.2.1 HTML 6
1.2.2 CSS/CSS3 7
1.2.3 JavaScript 7
1.2.4 HTML5 7
1.2.5 前端框架 8
1.3 前端開(kāi)發(fā)工具 9
1.3.1 Nodepad++ 9
1.3.2 Visual Studio Code 9
1.3.3 WebStorm 10
1.3.4 HBuilder X 11
1.4 前端就業(yè)前景 11
習(xí)題 12
第 2 章 HTML語(yǔ)言基礎(chǔ) 13
2.1 HTML基本概念 14
2.1.1 HTML概述 14
2.1.2 HTML元素 14
2.1.3 HTML文檔的基本結(jié)構(gòu) 15
2.1.4 HTML中顏色的表示 16
2.2 頁(yè)面頭部元素 16
2.2.1 標(biāo)題元素 17
2.2.2 元信息元素 17
2.3 頁(yè)面主體元素 18
2.3.1 網(wǎng)頁(yè)文字和背景顏色 18
2.3.2 網(wǎng)頁(yè)背景圖片 19
2.3.3 網(wǎng)頁(yè)邊距 19
2.4 文字與段落元素 19
2.4.1 文字內(nèi)容的輸入 19
2.4.2 字體元素 20
2.4.3 文字修飾元素 20
2.4.4 標(biāo)題與段落元素 21
2.4.5 預(yù)格式化文本元素 21
2.4.6 換行與水平線元素 22
2.5 列表與表格元素 22
2.5.1 有序列表 22
2.5.2 無(wú)序列表 24
2.5.3 表格元素 24
2.6 圖片與多媒體元素 27
2.6.1 圖片元素 27
2.6.2 嵌入音視頻文件 28
2.6.3 嵌入Flash動(dòng)畫 28
2.7 超鏈接元素 29
2.7.1 定義超鏈接 29
2.7.2 鏈接路徑 30
2.7.3 超鏈接類型 30
2.8 表單元素 31
2.8.1 form表單元素 31
2.8.2 input輸入元素 31
2.8.3 select列表元素 33
2.8.4 textarea文本域元素 34
2.8.5 fieldset分組元素 35
習(xí)題 36
第 3 章 CSS層疊樣式表基礎(chǔ) 39
3.1 CSS基本概念 40
3.1.1 CSS概述 40
3.1.2 CSS基本語(yǔ)法 41
3.1.3 在頁(yè)面中使用CSS 41
3.2 CSS選擇器 43
3.2.1 元素(標(biāo)簽)選擇器 43
3.2.2 類選擇器 43
3.2.3 ID選擇器 44
3.2.4 后代選擇器 45
3.2.5 子元素選擇器 46
3.2.6 相鄰兄弟元素選擇器 47
3.2.7 兄弟元素選擇器 47
3.2.8 復(fù)合選擇器 48
3.2.9 屬性選擇器 50
3.2.10 偽類選擇器 51
3.2.11 偽元素選擇器 52
3.3 CSS常用屬性 53
3.3.1 字體屬性 53
3.3.2 文本屬性 54
3.3.3 顏色與背景屬性 56
3.3.4 列表屬性 58
3.3.5 表格屬性 60
3.4 CSS盒子模型 61
3.4.1 盒子組成 61
3.4.2 盒子邊框?qū)傩?62
3.4.3 盒子內(nèi)邊距屬性 63
3.4.4 盒子外邊距屬性 64
3.5 CSS元素布局與定位 65
3.5.1 標(biāo)準(zhǔn)文檔流 65
3.5.2 元素在標(biāo)準(zhǔn)流中的定位 67
3.5.3 元素的定位屬性 68
3.5.4 元素的浮動(dòng)屬性 71
3.5.5 元素的顯示屬性 73
3.5.6 元素的可見(jiàn)性屬性 75
3.5.7 元素的溢出處理屬性 76
習(xí)題 77
第4章 CSS3層疊樣式表進(jìn)階 80
4.1 CSS3新增選擇器 81
4.1.1 E:not() 81
4.1.2 E:target 82
4.1.3 E:first-child, E:last-child 83
4.1.4 E:only-child 84
4.1.5 E:nth-child(n), E:nth-last-child(n) 84
4.1.6 E: first-of-type, E: last-of-type,
E: only-of-type, E:nth-of-type(n),
E:nth- of-last-type(n) 85
4.1.7 E: empty 86
4.1.8 E:checked 87
4.2 CSS3新增盒子屬性 87
4.2.1 圓角邊框?qū)傩?87
4.2.2 邊框圖片屬性 90
4.2.3 盒子陰影屬性 92
4.2.4 盒子背景屬性 94
4.3 CSS3漸變屬性 97
4.3.1 線性漸變 98
4.3.2 重復(fù)線性漸變 100
4.3.3 徑向漸變 100
4.3.4 重復(fù)徑向漸變 101
4.4 CSS3字體與文本效果 101
4.4.1 使用字體 101
4.4.2 文本陰影 102
4.4.3 文本溢出處理 103
4.5 CSS3 2D/3D變換 103
4.5.1 平移變換 103
4.5.2 旋轉(zhuǎn)變換 105
4.5.3 縮放變換 107
4.5.4 傾斜變換 108
4.5.5 perspective屬性 109
4.5.6 變換應(yīng)用案例 110
4.6 CSS3過(guò)渡與動(dòng)畫效果 111
4.6.1 過(guò)渡效果 111
4.6.2 動(dòng)畫效果 113
4.6.3 圖像濾鏡效果 114
4.7 CSS3應(yīng)用案例 116
4.7.1 導(dǎo)航條 116
4.7.2 下拉菜單 117
4.7.3 響應(yīng)式圖片與媒體查詢 119
4.7.4 關(guān)鍵幀動(dòng)畫 122
4.7.5 旋轉(zhuǎn)照片墻 123
4.7.6 輪播圖效果 125
習(xí)題 128
第5章 JavaScript語(yǔ)言基礎(chǔ) 130
5.1 JavaScript簡(jiǎn)介 131
5.2 基本語(yǔ)法 131
5.2.1 代碼書寫規(guī)范 132
5.2.2 標(biāo)識(shí)符與保留字 132
5.2.3 常量與變量 133
5.2.4 數(shù)據(jù)類型 133
5.2.5 運(yùn)算符 134
5.3 流程控制語(yǔ)句 136
5.3.1 賦值語(yǔ)句 136
5.3.2 條件判斷語(yǔ)句 136
5.3.3 循環(huán)語(yǔ)句 138
5.4 函數(shù) 140
5.4.1 函數(shù)的定義 141
5.4.2 函數(shù)的調(diào)用 141
5.4.3 常用內(nèi)置函數(shù) 143
5.5 自定義對(duì)象 144
5.5.1 自定義對(duì)象的創(chuàng)建 144
5.5.2 對(duì)象成員的訪問(wèn)與操作 145
5.6 內(nèi)置對(duì)象 146
5.6.1 Array對(duì)象 146
5.6.2 String對(duì)象 148
5.6.3 Math對(duì)象 149
5.6.4 Date對(duì)象 150
5.7 JavaScript腳本的編寫 152
5.7.1 腳本直接嵌入在script元素中 152
5.7.2 在事件響應(yīng)中嵌入和執(zhí)行腳本 152
5.7.3 鏈接外部腳本文件 153
5.8 JavaScript腳本的調(diào)試 153
5.8.1 使用alert方法調(diào)試腳本 154
5.8.2 使用console.log調(diào)試腳本 154
5.8.3 使用斷點(diǎn)調(diào)試腳本 155
習(xí)題 156
第6章 DOM與BOM編程 158
6.1 DOM概念與基礎(chǔ)操作 159
6.1.1 DOM概述 159
6.1.2 獲取節(jié)點(diǎn) 159
6.1.3 創(chuàng)建與插入節(jié)點(diǎn) 162
6.1.4 復(fù)制、刪除和替換節(jié)點(diǎn) 163
6.1.5 獲取、設(shè)置和刪除屬性 164
6.2 DOM級(jí)別與DOM事件 165
6.2.1 DOM0級(jí)事件 165
6.2.2 DOM2級(jí)事件 166
6.2.3 DOM3級(jí)事件 166
6.2.4 DOM事件流 167
6.3 BOM編程 168
6.3.1 window對(duì)象 169
6.3.2 history對(duì)象 173
6.3.3 location對(duì)象 173
6.3.4 screen對(duì)象 174
6.3.5 navigator對(duì)象 174
6.4 表單編程 174
6.4.1 表單元素及其相關(guān)操作 174
6.4.2 文本框編程 176
6.4.3 列表框編程 177
6.4.4 選擇框編程 179
6.5 正則表達(dá)式 179
6.5.1 基本符號(hào) 179
6.5.2 正則表達(dá)式的使用 181
6.5.3 常用正則表達(dá)式 182
習(xí)題 183
第7章 HTML5基礎(chǔ) 185
7.1 HTML5 概述 185
7.1.1 HTML5新特性 186
7.1.2 HTML5文檔基本結(jié)構(gòu) 187
7.2 HTML5 新增元素與屬性 188
7.2.1 新增語(yǔ)義元素 188
7.2.2 其他新增元素 190
7.2.3 新增屬性 194
7.3 HTML5中新增表單功能 195
7.3.1 新增form屬性 195
7.3.2 新增input類型 196
7.3.3 新增input屬性 198
習(xí)題 200
第8章 HTML5圖形與圖像 202
8.1 前端頁(yè)面中的圖形圖像 203
8.1.1 圖形圖像繪制方式 203
8.1.2 前端頁(yè)面坐標(biāo)系統(tǒng) 203
8.2 Canvas圖形與圖像繪制 205
8.2.1 Canvas元素的定義 205
8.2.2 直線線條的繪制 205
8.2.3 曲線線條的繪制 206
8.2.4 矩形的繪制 207
8.2.5 圓的繪制 208
8.2.6 圖像的繪制 211
8.2.7 文字的繪制 211
8.3 Canvas圖形變換 212
8.3.1 平移變換 212
8.3.2 縮放變換 213
8.3.3 旋轉(zhuǎn)變換 214
8.3.4 狀態(tài)的保存與恢復(fù) 215
8.4 Canvas繪圖效果 215
8.4.1 漸變填充效果 215
8.4.2 圖案填充效果 217
8.4.3 透明度效果 218
8.4.4 陰影效果 219
8.4.5 圖形組合效果 220
8.5 Canvas綜合應(yīng)用 222
8.5.1 時(shí)鐘繪制 222
8.5.2 雪花粒子特效 224
8.6 SVG圖形繪制 226
8.6.1 SVG線條繪制 226
8.6.2 SVG矩形與多邊形繪制 227
8.6.3 SVG圓與橢圓繪制 229
8.6.4 SVG路徑繪制 229
8.6.5 SVG文本繪制 230
8.6.6 SVG模糊和陰影效果 232
習(xí)題 233
第9章 HTML5音頻與視頻 235
9.1 HTML5音頻元素 235
9.1.1 Audio元素 235
9.1.2 Audio對(duì)象 236
9.1.3 個(gè)性化音樂(lè)播放器 239
9.1.4 Web Audio API 243
9.2 HTML5視頻元素 245
9.2.1 Video元素 245
9.2.2 Video對(duì)象 246
9.2.3 視頻作為頁(yè)面背景 247
習(xí)題 248
第10章 HTML5文件與數(shù)據(jù)處理 249
10.1 HTML5文件操作 249
10.1.1 FileList對(duì)象和file對(duì)象 249
10.1.2 BLOB對(duì)象 251
10.1.3 FileReader接口 253
10.1.4 元素與文件的拖放 255
10.2 數(shù)據(jù)交換格式JSON 260
10.2.1 JSON概述 260
10.2.2 JSON與JavaScript 261
10.3 本地?cái)?shù)據(jù)存儲(chǔ)技術(shù) 262
10.3.1 Session Storage 262
10.3.2 Local Storage 264
10.3.3 WebSQL Database 265
10.3.4 IndexedDB 267
10.4 離線應(yīng)用和客戶端緩存 272
10.4.1 離線狀態(tài)檢測(cè) 272
10.4.2 應(yīng)用緩存 273
習(xí)題 274
第11章 HTML5網(wǎng)絡(luò)通信與多線程 277
11.1 WebSocket 277
11.1.1 WebSocket協(xié)議概述 277
11.1.2 WebSocket連接過(guò)程 279
11.1.3 WebSocket API 280
11.2 XMLHttpRequest 281
11.2.1 XMLHttpRequest對(duì)象 281
11.2.2 改進(jìn)的XMLHttpRequest對(duì)象 282
11.3 Web Worker 284
11.3.1 Web Worker對(duì)象 284
11.3.2 Web Worker應(yīng)用實(shí)例 285
習(xí)題 287
第12章 HTML5+CSS3頁(yè)面布局 289
12.1 彈性盒子布局 289
12.1.1 彈性盒子基本概念 289
12.1.2 彈性容器屬性 291
12.1.3 彈性項(xiàng)目屬性 296
12.2 網(wǎng)格布局 298
12.2.1 等寬度網(wǎng)格布局 298
12.2.2 百分比網(wǎng)格布局 299
12.2.3 多列布局 301
12.3 頁(yè)面布局應(yīng)用 302
12.3.1 雙飛翼布局 302
12.3.2 瀑布流布局 304
習(xí)題 305
第13章 前端框架技術(shù) 307
13.1 jQuery 307
13.1.1 jQuery概述 307
13.1.2 jQuery基本語(yǔ)法 308
13.1.3 jQuery選擇器 309
13.1.4 jQuery中的DOM操作 312
13.1.5 jQuery對(duì)象和DOM對(duì)象 316
13.1.6 jQuery效果 316
13.2 Bootstrap 317
13.3 Vue 321
13.4 React 323
習(xí)題 324
參考文獻(xiàn) 326
書單推薦
