第1章 初識HTML5 1
任務1 了解HTML5的優(yōu)勢 3
任務2 HTML5新增元素及屬性 4
1.2.1 HTML5新增結構元素 4
1.2.2 HTML5新增網頁元素 9
1.2.3 HTML5新增全局屬性 12
1.2.4 上機訓練 13
任務3 CSS3高級選擇器 14
1.3.1 結構偽類選擇器 14
1.3.2 上機訓練 18
本章作業(yè) 19
第2章 HTML5表單 21
任務1 了解HTML5表單在網頁中的應用 22
任務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 上機訓練 32
任務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 上機訓練 38
本章作業(yè) 38
第3章 CSS3應用 41
任務1 會使用CSS3邊框效果 43
3.1.1 CSS3圓角 43
3.1.2 CSS3邊界圖片 47
3.1.3 CSS3盒子陰影 49
3.1.4 上機訓練 52
任務2 CSS3文本效果的應用 53
3.2.1 CSS3文本陰影 53
3.2.2 word-wrap屬性 55
任務3 CSS3背景與漸變效果的應用 57
3.3.1 CSS3背景 57
3.3.2 CSS3漸變 61
3.3.3 上機訓練 63
任務4 會使用CSS3字體美化網頁 64
本章作業(yè) 66
第4章 CSS3高級應用 69
任務1 CSS3 2D變形的應用 70
4.1.1 2D變形簡介 70
4.1.2 瀏覽器兼容性 71
4.1.3 2D變形 71
4.1.4 上機訓練 79
任務2 CSS3 3D變形的應用 82
4.2.1 3D變形屬性 82
4.2.2 3D變形方法 83
4.2.3 上機訓練 88
本章作業(yè) 88
第5章 使用CSS3制作動畫 91
任務1 利用CSS3過渡實現(xiàn)動畫效果 93
5.1.1 過渡簡介 93
5.1.2 瀏覽器兼容性 93
5.1.3 過渡屬性的使用 93
5.1.4 完善旋轉按鈕案例 97
5.1.5 上機訓練 98
任務2 CSS3動畫的使用 99
5.2.1 CSS3動畫簡介 99
5.2.2 瀏覽器兼容性 100
5.2.3 CSS3動畫使用過程 100
5.2.4 上機訓練 104
本章作業(yè) 106
第6章 HTML5媒體元素 109
任務1 視頻元素及音頻元素在網頁中的使用 111
6.1.1 如何在網頁中播放視頻及音頻 111
6.1.2 視頻元素 112
6.1.3 音頻元素 116
6.1.4 上機訓練 118
任務2 自定義視頻播放器 119
6.2.1 自定義視頻播放器需要的屬性和方法 119
6.2.2 自定義視頻播放器制作步驟 119
6.2.3 上機訓練 125
本章作業(yè) 125
第7章 Canvas基礎 127
任務1 Canvas概述及應用 129
7.1.1 Canvas概述 129
7.1.2 創(chuàng)建Canvas步驟 130
任務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 上機訓練 144
任務3 使用Canvas繪制貝塞爾曲線 145
7.3.1 繪制二次方貝塞爾曲線 145
7.3.2 繪制三次方貝塞爾曲線 146
7.3.3 上機訓練 148
本章作業(yè) 148
第8章 Canvas高級應用 151
任務1 Canvas高級功能的使用 152
8.1.1 Canvas漸變 152
8.1.2 圖形組合 157
8.1.3 Canvas繪制圖像 159
8.1.4 裁剪圖像 163
8.1.5 Canvas繪制文本 164
任務2 使用Canvas繪制風景時鐘 165
本章作業(yè) 170