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

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

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

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

前 言

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

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

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

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

 在線直播課程

 錄播視頻課程

 案例素材下載

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

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

以上所有資源請訪問課工場www.kgc.cn。

本套教材特點

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

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

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

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

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

（2）真實的項目驅(qū)動

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

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

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

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

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

讀者對象

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

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

課工場出品（kgc.cn）

前言
課程設(shè)計說明
關(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高級選擇器 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 瀏覽器對HTML5的支持 31
3 HTML5新增的input屬性 33
4 自定義錯誤提示信息 37
4.1 validity屬性 37
4.2 使用CSS設(shè)置驗證樣式 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高級特效 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動畫 101
1 transition屬性 102
2 animation屬性 110
2.1 創(chuàng)建動畫 110
2.2 使用動畫 112
2.3 動畫實戰(zhàn)演練 118
本章總結(jié) 127
本章作業(yè) 127
第6章 多媒體播放 129
1 在網(wǎng)頁中播放視頻或音頻 130
1.1 在網(wǎng)頁中播放視頻或音頻 130
1.2 用canPlayType方法檢測音頻格式
支持情況 137
2 打造個性的視頻播放器 138
本章總結(jié) 147
本章作業(yè) 147
第7章 使用canvas繪制圖形 149
1 canvas基礎(chǔ) 150
1.1 在頁面上添加canvas元素 150
1.2 使用canvas繪制簡單的圖形 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高級功能 185
1 canvas高級功能 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)景時鐘 207
本章總結(jié) 215
本章作業(yè) 215

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