本書會(huì)介紹HTML5的新特性、新標(biāo)準(zhǔn)，訓(xùn)練HTML5的網(wǎng)頁制作能力。通過CSS3制作各種網(wǎng)頁特效和動(dòng)畫效果，增強(qiáng)用戶體驗(yàn)，制作更加精致的網(wǎng)頁內(nèi)容。并且還會(huì)學(xué)習(xí)canvas繪圖技能，canvas的出現(xiàn)顛覆了之前編寫HTML時(shí)只能添加圖片的概念，使用canvas實(shí)現(xiàn)很多更加酷炫的效果。此外本課程還提供很多企業(yè)中實(shí)用的經(jīng)驗(yàn)分享，能夠讓大家學(xué)會(huì)知識(shí)點(diǎn)的同時(shí)也能掌握更多企業(yè)需求，提升自己的項(xiàng)目經(jīng)驗(yàn)。

1、選取知識(shí)點(diǎn)核心實(shí)用，以互聯(lián)網(wǎng) 實(shí)現(xiàn)終身學(xué)習(xí) 2、以企業(yè)需求為設(shè)計(jì)導(dǎo)向，以任務(wù)驅(qū)動(dòng)為講解方式 3、以案例為主線組織知識(shí)點(diǎn)，以實(shí)戰(zhàn)項(xiàng)目來提升技術(shù) 4、充分考慮學(xué)習(xí)者的認(rèn)知曲線，由淺入深，邊講邊練

課工場是專注互聯(lián)網(wǎng)教育的生態(tài)平臺(tái)，匯聚了中國和北美數(shù)百位來自知名互聯(lián)網(wǎng)企業(yè)的行業(yè)大咖，向?qū)で缶蜆I(yè)和技術(shù)提升的人群提供直播、錄播、面授等多模式教學(xué)場景，并通過遍布全國的線下服務(wù)中心提供成熟的學(xué)習(xí)服務(wù)，形成完善的互聯(lián)網(wǎng) 教育解決方案。同時(shí)，課工場也為高校、企業(yè)、行業(yè)提供教育技術(shù)賦能，依托Transformer智能教育生態(tài)平臺(tái)，打造智慧校園、企業(yè)大學(xué)、行業(yè)培訓(xùn)的教育場景，提供一站式教育解決方案

第1章　初識(shí)HTML5　1

任務(wù)1　了解HTML5的優(yōu)勢　3

任務(wù)2　HTML5新增元素及屬性　4

1.2.1　HTML5新增結(jié)構(gòu)元素　4

1.2.2　HTML5新增網(wǎng)頁元素　9

1.2.3　HTML5新增全局屬性　12

1.2.4　上機(jī)訓(xùn)練　13

任務(wù)3　CSS3高級(jí)選擇器　14

1.3.1　結(jié)構(gòu)偽類選擇器　14

1.3.2　上機(jī)訓(xùn)練　18

本章作業(yè)　19

第2章　HTML5表單　21

任務(wù)1　了解HTML5表單在網(wǎng)頁中的應(yīng)用　22

任務(wù)2　HTML5新增的input類型　24

2.2.1　email類型　24

2.2.2　url類型　26

2.2.3　number類型　26

2.2.4　range類型　28

2.2.5　search類型　28

2.2.6　Date pickers類型　29

2.2.7　上機(jī)訓(xùn)練　32

任務(wù)3　HTML5新增的input屬性　34

2.3.1　autofocus　34

2.3.2　required　35

2.3.3　placeholder　35

2.3.4　pattern　37

2.3.5　height/width　38

2.3.6　上機(jī)訓(xùn)練　38

本章作業(yè)　38

第3章　CSS3應(yīng)用　41

任務(wù)1　會(huì)使用CSS3邊框效果　43

3.1.1　CSS3圓角　43

3.1.2　CSS3邊界圖片　47

3.1.3　CSS3盒子陰影　49

3.1.4　上機(jī)訓(xùn)練　52

任務(wù)2　CSS3文本效果的應(yīng)用　53

3.2.1　CSS3文本陰影　53

3.2.2　word-wrap屬性　55

任務(wù)3　CSS3背景與漸變效果的應(yīng)用　57

3.3.1　CSS3背景　57

3.3.2　CSS3漸變　61

3.3.3　上機(jī)訓(xùn)練　63

任務(wù)4　會(huì)使用CSS3字體美化網(wǎng)頁　64

本章作業(yè)　66

第4章　CSS3高級(jí)應(yīng)用　69

任務(wù)1　CSS3 2D變形的應(yīng)用　70

4.1.1　2D變形簡介　70

4.1.2　瀏覽器兼容性　71

4.1.3　2D變形　71

4.1.4　上機(jī)訓(xùn)練　79

任務(wù)2　CSS3 3D變形的應(yīng)用　82

4.2.1　3D變形屬性　82

4.2.2　3D變形方法　83

4.2.3　上機(jī)訓(xùn)練　88

本章作業(yè)　88

第5章　使用CSS3制作動(dòng)畫　91

任務(wù)1　利用CSS3過渡實(shí)現(xiàn)動(dòng)畫效果　93

5.1.1　過渡簡介　93

5.1.2　瀏覽器兼容性　93

5.1.3　過渡屬性的使用　93

5.1.4　完善旋轉(zhuǎn)按鈕案例　97

5.1.5　上機(jī)訓(xùn)練　98

任務(wù)2　CSS3動(dòng)畫的使用　99

5.2.1　CSS3動(dòng)畫簡介　99

5.2.2　瀏覽器兼容性　100

5.2.3　CSS3動(dòng)畫使用過程　100

5.2.4　上機(jī)訓(xùn)練　104

本章作業(yè)　106

第6章　HTML5媒體元素　109

任務(wù)1　視頻元素及音頻元素在網(wǎng)頁中的使用　111

6.1.1　如何在網(wǎng)頁中播放視頻及音頻　111

6.1.2　視頻元素　112

6.1.3　音頻元素　116

6.1.4　上機(jī)訓(xùn)練　118

任務(wù)2　自定義視頻播放器　119

6.2.1　自定義視頻播放器需要的屬性和方法　119

6.2.2　自定義視頻播放器制作步驟　119

6.2.3　上機(jī)訓(xùn)練　125

本章作業(yè)　125

第7章　Canvas基礎(chǔ)　127

任務(wù)1　Canvas概述及應(yīng)用　129

7.1.1　Canvas概述　129

7.1.2　創(chuàng)建Canvas步驟　130

任務(wù)2　使用Canvas繪制基本圖形　132

7.2.1　繪制直線　132

7.2.2　繪制三角形　134

7.2.3　繪制矩形　138

7.2.4　繪制圓形　140

7.2.5　清空畫布　143

7.2.6　上機(jī)訓(xùn)練　144

任務(wù)3　使用Canvas繪制貝塞爾曲線　145

7.3.1　繪制二次方貝塞爾曲線　145

7.3.2　繪制三次方貝塞爾曲線　146

7.3.3　上機(jī)訓(xùn)練　148

本章作業(yè)　148

第8章　Canvas高級(jí)應(yīng)用　151

任務(wù)1　Canvas高級(jí)功能的使用　152

8.1.1　Canvas漸變　152

8.1.2　圖形組合　157

8.1.3　Canvas繪制圖像　159

8.1.4　裁剪圖像　163

8.1.5　Canvas繪制文本　164

任務(wù)2　使用Canvas繪制風(fēng)景時(shí)鐘　165

本章作業(yè)　170