領(lǐng)先的實(shí)用技能——打造前端開發(fā)工程師

科學(xué)的訓(xùn)練模式——授人以漁而不只是作品臨摹

真實(shí)的項(xiàng)目驅(qū)動(dòng)——行業(yè)知識(shí)與專業(yè)設(shè)計(jì)相呼應(yīng)

便捷的學(xué)習(xí)體驗(yàn)——傳統(tǒng)教材與二維碼革命性攜手

前 言

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，“互聯(lián)網(wǎng)+”時(shí)代已經(jīng)悄然到來，這自然催生了互聯(lián)網(wǎng)行業(yè)工種的細(xì)分，前端開發(fā)工程師這個(gè)職業(yè)應(yīng)運(yùn)而生，各行業(yè)、企業(yè)對(duì)前端設(shè)計(jì)開發(fā)人才的需求也日益增長(zhǎng)。與傳統(tǒng)網(wǎng)頁開發(fā)設(shè)計(jì)人員相比，新“互聯(lián)網(wǎng)+”時(shí)代對(duì)前端開發(fā)工程師提出了更高的要求，傳統(tǒng)網(wǎng)頁開發(fā)設(shè)計(jì)人員已無法勝任。在這樣的大環(huán)境下，這套“前端開發(fā)工程師系列”教材應(yīng)運(yùn)而生，它旨在幫助讀者快速成長(zhǎng)為符合“互聯(lián)網(wǎng)+”時(shí)代企業(yè)需求的優(yōu)秀的前端開發(fā)工程師。

“前端開發(fā)工程師系列”教材是由課工場(chǎng)（kgc.cn）的教研團(tuán)隊(duì)研發(fā)的。課工場(chǎng)是北京大學(xué)下屬企業(yè)北京課工場(chǎng)教育科技有限公司推出的互聯(lián)網(wǎng)教育平臺(tái)，專注于互聯(lián)網(wǎng)企業(yè)各崗位人才的培養(yǎng)。平臺(tái)匯聚了數(shù)百位來自知名培訓(xùn)機(jī)構(gòu)、高校的頂級(jí)名師和互聯(lián)網(wǎng)企業(yè)的行業(yè)專家，面向大學(xué)生以及需要“充電”的在職人員，針對(duì)與互聯(lián)網(wǎng)相關(guān)的產(chǎn)品設(shè)計(jì)、開發(fā)、運(yùn)維、推廣和運(yùn)營(yíng)等崗位，提供在線的直播和錄播課程，并通過遍及全國(guó)的幾十家線下服務(wù)中心提供現(xiàn)場(chǎng)面授以及多種形式的教學(xué)服務(wù)，并同步研發(fā)出版最新的課程教材。參與本書編寫的還有于繼武、李杰、于琳琳、李禮等院校教師。

課工場(chǎng)為培養(yǎng)互聯(lián)網(wǎng)前端設(shè)計(jì)開發(fā)人才，特別推出“前端開發(fā)工程師系列”教育產(chǎn)品，提供各種學(xué)習(xí)資源和支持，包括：

 現(xiàn)場(chǎng)面授課程

 在線直播課程

 錄播視頻課程

 案例素材下載

 學(xué)習(xí)交流社區(qū)

 QQ討論組（技術(shù)，就業(yè)，生活）

以上所有資源請(qǐng)?jiān)L問課工場(chǎng)www.kgc.cn。

本套教材特點(diǎn)

（1）科學(xué)的訓(xùn)練模式

 科學(xué)的課程體系。

 創(chuàng)新的教學(xué)模式。

 技能人脈，實(shí)現(xiàn)多方位就業(yè)。

 隨需而變，支持終身學(xué)習(xí)。

（2）真實(shí)的項(xiàng)目驅(qū)動(dòng)

 覆蓋80%的網(wǎng)站效果制作。

 幾十個(gè)實(shí)訓(xùn)項(xiàng)目，涵蓋電商、金融、教育、旅游、游戲等行業(yè)。

（3）便捷的學(xué)習(xí)體驗(yàn)

 每章提供二維碼掃描，可以直接觀看相關(guān)視頻講解和案例操作。

 課工場(chǎng)開辟教材配套版塊，提供素材下載、學(xué)習(xí)社區(qū)等豐富在線學(xué)習(xí)資源。

讀者對(duì)象

（1）初學(xué)者：本套教材將幫助你快速進(jìn)入互聯(lián)網(wǎng)前端開發(fā)行業(yè)，從零開始逐步成長(zhǎng)為專業(yè)的前端開發(fā)工程師。

（2）初級(jí)前端開發(fā)者：本套教材將帶你進(jìn)行全面、系統(tǒng)的互聯(lián)網(wǎng)前端設(shè)計(jì)開發(fā)學(xué)習(xí)，幫助你梳理全面、科學(xué)的技能理論，提供實(shí)用的開發(fā)技巧和項(xiàng)目經(jīng)驗(yàn)。

課工場(chǎng)出品（kgc.cn）

前言
課程設(shè)計(jì)說明
關(guān)于引用作品版權(quán)說明

第1章 HTML5結(jié)構(gòu) 1
1 什么是HTML5 2
2 HTML5新增元素 3
2.1 HTML5結(jié)構(gòu)元素 3
2.2 HTML5網(wǎng)頁元素 9
2.3 HTML5廢除的元素 11
2.4 HTML5全局屬性 11
2.5 HTML5廢除的屬性 12
3 CSS3高級(jí)選擇器 13
本章總結(jié) 20
本章作業(yè) 20
第2章 HTML5表單 21
1 HTML5表單在網(wǎng)頁中的應(yīng)用 22
2 HTML5新增的input類型 23
2.1 新增的input類型 23
2.1.1 email類型的應(yīng)用 23
2.1.2 url類型的應(yīng)用 25
2.1.3 number類型的應(yīng)用 26
2.1.4 range類型的應(yīng)用 27
2.1.5 Date pickers類型的應(yīng)用 28
2.2 瀏覽器對(duì)HTML5的支持 31
3 HTML5新增的input屬性 33
4 自定義錯(cuò)誤提示信息 37
4.1 validity屬性 37
4.2 使用CSS設(shè)置驗(yàn)證樣式 44
本章總結(jié) 44
本章作業(yè) 45
第3章 CSS3基礎(chǔ) 46
1 CSS3邊框效果 47
1.1 border-radius 47
1.2 border-image 53
1.3 box-shadow 55
2 CSS3文本效果 59
2.1 text-shadow 59
2.2 word-wrap 62
3 CSS3背景 63
4 CSS3字體 65
5 設(shè)置CSS3透明度 67
本章總結(jié) 71
本章作業(yè) 71
第4章 CSS3高級(jí)特效 73
1 2D轉(zhuǎn)換 74
1.1 translate()方法 74
1.2 rotate()方法 77
1.3 scale()方法 80
1.4 skew()方法 84
2 3D轉(zhuǎn)換 86
2.1 3D轉(zhuǎn)換的介紹 86
2.2 3D轉(zhuǎn)換方法 88
2.2.1 3D位移 88
2.2.2 3D旋轉(zhuǎn) 90
2.2.3 3D縮放 92
本章總結(jié) 99
本章作業(yè) 99
第5章 CSS3動(dòng)畫 101
1 transition屬性 102
2 animation屬性 110
2.1 創(chuàng)建動(dòng)畫 110
2.2 使用動(dòng)畫 112
2.3 動(dòng)畫實(shí)戰(zhàn)演練 118
本章總結(jié) 127
本章作業(yè) 127
第6章 多媒體播放 129
1 在網(wǎng)頁中播放視頻或音頻 130
1.1 在網(wǎng)頁中播放視頻或音頻 130
1.2 用canPlayType方法檢測(cè)音頻格式
支持情況 137
2 打造個(gè)性的視頻播放器 138
本章總結(jié) 147
本章作業(yè) 147
第7章 使用canvas繪制圖形 149
1 canvas基礎(chǔ) 150
1.1 在頁面上添加canvas元素 150
1.2 使用canvas繪制簡(jiǎn)單的圖形 152
1.2.1 繪制直線 152
1.2.2 繪制三角形 154
1.2.3 繪制多邊形 159
1.2.4 繪制矩形 160
1.2.5 繪制圓形 162
1.2.6 清空畫布 166
2 繪制貝塞爾曲線 167
2.1 繪制二次方貝塞爾曲線 168
2.2 繪制三次方貝塞爾曲線 169
3 坐標(biāo)變換 172
3.1 坐標(biāo)位移 172
3.2 圖形縮放 177
3.3 圖形旋轉(zhuǎn) 180
本章總結(jié) 183
本章作業(yè) 184
第8章 canvas高級(jí)功能 185
1 canvas高級(jí)功能 186
1.1 漸變 186
1.2 圖形組合 194
1.3 創(chuàng)建陰影 196
1.4 繪制圖像和文本 197
1.4.1 繪制圖像 197
1.4.2 裁剪圖像 201
1.4.3 畫布狀態(tài)的保存和恢復(fù) 202
1.4.4 createPattern方法 203
1.4.5 繪制文本 204
2 繪制風(fēng)景時(shí)鐘 207
本章總結(jié) 215
本章作業(yè) 215

1. Java面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 姜春磊 陳虹潔]
2. C語言程序設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)與實(shí)訓(xùn)（第二版） [主編 倪燃]
3. Python程序設(shè)計(jì)及實(shí)踐教程 [肖朝暉]
4. C語言程序設(shè)計(jì) [魏琴 劉祖珉 趙仕波 肖陽春]
5. C語言程序設(shè)計(jì)實(shí)驗(yàn)教程 [張小剛 司春景]
6. 電氣控制與PLC程序設(shè)計(jì)（第二版） [胡冠山]
7. Java Web項(xiàng)目化設(shè)計(jì)實(shí)踐教程 [邱云 曾陳萍]
8. C語言程序設(shè)計(jì)（第三版） [主編 丁紅 王立新 蔡開立]
9. Python數(shù)據(jù)分析 [主編　馮志輝　趙磊　李放]
10. Python程序設(shè)計(jì)與應(yīng)用（第二版） [主編 張廣淵]
11. C程序設(shè)計(jì)實(shí)踐教程 [劉衛(wèi)國(guó)]
12. C程序設(shè)計(jì)（慕課版） [劉衛(wèi)國(guó)]
13. 程序設(shè)計(jì)基礎(chǔ)實(shí)踐教程（C/C++語言版） [張桂芬 葛麗娜]
14. C++案例項(xiàng)目精講 [主編 楊國(guó)興]
15. SwiftUI完全開發(fā) [李智威 著]
16. MySQL數(shù)據(jù)庫(kù)項(xiàng)目式教程 [陳亞峰]
17. C語言程序設(shè)計(jì)習(xí)題與實(shí)驗(yàn)指導(dǎo)（第二版） [主編 甄增榮 張賓]
18. C語言程序設(shè)計(jì)（第二版） [主編 甄增榮 田云霞]
19. Unity3D虛擬現(xiàn)實(shí)應(yīng)用開發(fā)實(shí)踐 [主 編 劉龍]
20. Python程序設(shè)計(jì) [主編 姜春磊 陳虹潔]
21. C語言程序設(shè)計(jì)實(shí)踐教程（活頁式） [主編 鄭茵 陳巍 滕泓虬]
22. 面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 張勇 張平華 趙小龍]
23. Python程序設(shè)計(jì)基礎(chǔ)及實(shí)戰(zhàn) [主編　劉健]
24. C語言程序設(shè)計(jì) [姜雪]
25. Python程序設(shè)計(jì)實(shí)踐教程 [王鶴琴 蔡正保]
26. C++程序設(shè)計(jì)實(shí)踐教程（第三版） [主編 劉衛(wèi)國(guó) 曹岳輝]
27. C++程序設(shè)計(jì)（第三版） [主編 曹岳輝 劉衛(wèi)國(guó)]
28. C語言程序設(shè)計(jì)項(xiàng)目化教程（活頁式） [主編 張利華 潘曉利]
29. 機(jī)器人流程自動(dòng)化（RPA）實(shí)戰(zhàn)——基于UiPath [主編　金鑫]
30. Python 語言程序設(shè)計(jì)實(shí)踐指導(dǎo) [主編　張雙獅]