領先的實用技能——打造前端開發工程師

科學的訓練模式——授人以漁而不只是作品臨摹

真實的項目驅動——行業知識與專業設計相呼應

便捷的學習體驗——傳統教材與二維碼革命性攜手

前 言

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

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

課工場為培養互聯網前端設計開發人才，特別推出“前端開發工程師系列”教育產品，提供各種學習資源和支持，包括：

 現場面授課程

 在線直播課程

 錄播視頻課程

 案例素材下載

 學習交流社區

 QQ討論組（技術，就業，生活）

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

本套教材特點

（1）科學的訓練模式

 科學的課程體系。

 創新的教學模式。

 技能人脈，實現多方位就業。

 隨需而變，支持終身學習。

（2）真實的項目驅動

 覆蓋80%的網站效果制作。

 幾十個實訓項目，涵蓋電商、金融、教育、旅游、游戲等行業。

（3）便捷的學習體驗

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

 課工場開辟教材配套版塊，提供素材下載、學習社區等豐富在線學習資源。

讀者對象

（1）初學者：本套教材將幫助你快速進入互聯網前端開發行業，從零開始逐步成長為專業的前端開發工程師。

（2）初級前端開發者：本套教材將帶你進行全面、系統的互聯網前端設計開發學習，幫助你梳理全面、科學的技能理論，提供實用的開發技巧和項目經驗。

課工場出品（kgc.cn）

前言
課程設計說明
關于引用作品版權說明

第1章 HTML5結構 1
1 什么是HTML5 2
2 HTML5新增元素 3
2.1 HTML5結構元素 3
2.2 HTML5網頁元素 9
2.3 HTML5廢除的元素 11
2.4 HTML5全局屬性 11
2.5 HTML5廢除的屬性 12
3 CSS3高級選擇器 13
本章總結 20
本章作業 20
第2章 HTML5表單 21
1 HTML5表單在網頁中的應用 22
2 HTML5新增的input類型 23
2.1 新增的input類型 23
2.1.1 email類型的應用 23
2.1.2 url類型的應用 25
2.1.3 number類型的應用 26
2.1.4 range類型的應用 27
2.1.5 Date pickers類型的應用 28
2.2 瀏覽器對HTML5的支持 31
3 HTML5新增的input屬性 33
4 自定義錯誤提示信息 37
4.1 validity屬性 37
4.2 使用CSS設置驗證樣式 44
本章總結 44
本章作業 45
第3章 CSS3基礎 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 設置CSS3透明度 67
本章總結 71
本章作業 71
第4章 CSS3高級特效 73
1 2D轉換 74
1.1 translate()方法 74
1.2 rotate()方法 77
1.3 scale()方法 80
1.4 skew()方法 84
2 3D轉換 86
2.1 3D轉換的介紹 86
2.2 3D轉換方法 88
2.2.1 3D位移 88
2.2.2 3D旋轉 90
2.2.3 3D縮放 92
本章總結 99
本章作業 99
第5章 CSS3動畫 101
1 transition屬性 102
2 animation屬性 110
2.1 創建動畫 110
2.2 使用動畫 112
2.3 動畫實戰演練 118
本章總結 127
本章作業 127
第6章 多媒體播放 129
1 在網頁中播放視頻或音頻 130
1.1 在網頁中播放視頻或音頻 130
1.2 用canPlayType方法檢測音頻格式
支持情況 137
2 打造個性的視頻播放器 138
本章總結 147
本章作業 147
第7章 使用canvas繪制圖形 149
1 canvas基礎 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 坐標變換 172
3.1 坐標位移 172
3.2 圖形縮放 177
3.3 圖形旋轉 180
本章總結 183
本章作業 184
第8章 canvas高級功能 185
1 canvas高級功能 186
1.1 漸變 186
1.2 圖形組合 194
1.3 創建陰影 196
1.4 繪制圖像和文本 197
1.4.1 繪制圖像 197
1.4.2 裁剪圖像 201
1.4.3 畫布狀態的保存和恢復 202
1.4.4 createPattern方法 203
1.4.5 繪制文本 204
2 繪制風景時鐘 207
本章總結 215
本章作業 215

1. C程序設計實踐教程 [劉衛國]
2. C程序設計（慕課版） [劉衛國]
3. 程序設計基礎實踐教程（C/C++語言版） [張桂芬 葛麗娜]
4. C++案例項目精講 [主編 楊國興]
5. SwiftUI完全開發 [李智威 著]
6. MySQL數據庫項目式教程 [陳亞峰]
7. C語言程序設計習題與實驗指導（第二版） [主編 甄增榮 張賓]
8. C語言程序設計（第二版） [主編 甄增榮 田云霞]
9. Unity3D虛擬現實應用開發實踐 [主 編 劉龍]
10. Python程序設計 [主編 姜春磊 陳虹潔]
11. C語言程序設計實踐教程（活頁式） [主編 鄭茵 陳巍 滕泓虬]
12. 面向對象程序設計 [主編 張勇 張平華 趙小龍]
13. Python程序設計基礎及實戰 [主編　劉健]
14. C語言程序設計 [姜雪]
15. Python程序設計實踐教程 [王鶴琴 蔡正保]
16. C++程序設計實踐教程（第三版） [主編 劉衛國 曹岳輝]
17. C++程序設計（第三版） [主編 曹岳輝 劉衛國]
18. C語言程序設計項目化教程（活頁式） [主編 張利華 潘曉利]
19. 機器人流程自動化（RPA）實戰——基于UiPath [主編　金鑫]
20. Python 語言程序設計實踐指導 [主編　張雙獅]
21. Python程序設計案例教程 [主編 毛錦庚 鐘肖英 周賢來 ]
22. 基于.NET Core框架的分布式系統架構設計 [湯佳 著]
23. Python語言程序設計教程 [郭其標 房宜汕]
24. Python程序設計 [李國燕 王新強 劉佳 等編著]
25. Python程序設計項目化教程（活頁式） [主編　盧鳳偉]
26. Java編程基礎案例式教程 [主編 陳艷華 唐春蘭]
27. Python語言同步案例習題精解 [主編 肖朝暉]
28. Unity應用開發與實戰（微課版） [主 編 程永恒]
29. PHP程序設計項目化教程 [主 編 杜海穎]
30. 簡單易懂的Python入門教程 [［日］大澤文孝　著]