項目1 認識HTML5 001
項目概述 001
項目導航 001
任務(wù)1.1 HTML5+CSS3網(wǎng)頁設(shè)計概述 001
任務(wù)目標 001
任務(wù)準備 002
1.1.1 認識網(wǎng)頁 002
1.1.2 HTML5簡介 003
1.1.3 CSS層疊樣式表 005
1.1.4 JavaScript簡介 005
1.1.5 瀏覽器及瀏覽器內(nèi)核 006
任務(wù)1.2 網(wǎng)頁設(shè)計工具 008
任務(wù)目標 008
任務(wù)準備 008
1.2.1 前端開發(fā)的工具 008
1.2.2 WebStrom使用 009
任務(wù)實施 011
任務(wù)1.3 自適應網(wǎng)頁設(shè)計 017
任務(wù)目標 017
任務(wù)準備 017
1.3.1 響應式布局設(shè)計 017
1.3.2 響應式網(wǎng)頁部署 018
任務(wù)實施 019
項目總結(jié) 021
項目2 使用HTML5基本標簽 022
項目概述 022
項目導航 022
任務(wù)2.1 “古詩詞鑒賞”導航欄
頁面制作 023
任務(wù)目標 023
任務(wù)準備 023
2.1.1 HTML文件的基本結(jié)構(gòu) 023
2.1.2 HTML5基本結(jié)構(gòu) 023
2.1.3 HTML5新增標簽 024
2.1.4 HTML5廢棄標簽 024
2.1.5 HTML5廢棄屬性 025
2.1.6 基礎(chǔ)標簽 025
2.1.7 文本格式化標簽 027
任務(wù)實施 032
任務(wù)2.2 “詩人與古詩大全”頁面制作 034
任務(wù)目標 034
任務(wù)準備 034
2.2.1 有序列表 034
2.2.2 無序列表 035
2.2.3 定義列表 035
任務(wù)實施 036
任務(wù)2.3 “詩詞詳情”頁面制作 039
任務(wù)目標 039
任務(wù)準備 039
2.3.1 圖像標簽 039
2.3.2 范圍標簽span 042
2.3.3 超鏈接標簽a 042
2.3.4 div標簽 044
任務(wù)實施 044
項目總結(jié) 048
項目3 表格與表單應用 049
項目概述 049
項目導航 049
任務(wù)3.1 制作校園學生論壇網(wǎng)站 050
任務(wù)目標 050
任務(wù)準備 050
3.1.1 表格的基本語法 050
3.1.2 跨行跨列 061
任務(wù)實施 063
任務(wù)3.2 制作論壇登錄頁面 069
任務(wù)目標 069
任務(wù)準備 070
3.2.1 表單的基本語法 070
3.2.2 基本元素介紹 071
任務(wù)實施 076
任務(wù)3.3 制作論壇注冊頁面 079
任務(wù)目標 079
任務(wù)準備 079
3.3.1 ＜datalist＞元素 079
3.3.2 HTML5新增input類型與屬性 080
任務(wù)實施 085
項目總結(jié) 089
項目4 HTML5音視頻標簽 090
項目概述 090
項目導航 090
任務(wù)4.1 制作論壇音樂分區(qū) 090
任務(wù)目標 090
任務(wù)準備 091
4.1.1 ＜audio＞標簽 091
4.1.2 ＜source＞標簽 091
任務(wù)實施 092
任務(wù)4.2 制作論壇視頻欣賞分區(qū) 095
任務(wù)目標 095
任務(wù)準備 095
4.2.1 ＜video＞標簽 095
4.2.2 ＜track＞標簽 097
任務(wù)實施 098
項目總結(jié) 102
項目5 CSS3基礎(chǔ)應用 103
項目概述 103
項目導航 103
任務(wù)5.1 CSS基本知識 103
任務(wù)目標 103
任務(wù)準備 104
5.1.1 CSS樣式表創(chuàng)建 104
5.1.2 基本語法 106
任務(wù)實施 107
任務(wù)5.2 選擇器 109
任務(wù)目標 109
任務(wù)準備 109
5.2.1 常用選擇器 109
5.2.2 CSS3新增選擇器 114
任務(wù)實施 120
項目總結(jié) 129
項目6 CSS3美化網(wǎng)頁 130
項目概述 130
項目導航 130
任務(wù)6.1 CSS核心屬性 131
任務(wù)目標 131
任務(wù)準備 131
6.1.1 字體屬性 131
6.1.2 文本屬性 135
6.1.3 列表屬性 139
6.1.4 文本溢出 141
6.1.5 背景圖像 145
6.1.6 類型轉(zhuǎn)換 149
6.1.7 指針屬性 151
任務(wù)實施 152
任務(wù)6.2 浮動與定位 159
任務(wù)目標 159
任務(wù)準備 159
6.2.1 浮動屬性 159
6.2.2 定位屬性 162
任務(wù)實施 165
任務(wù)6.3 邊框?qū)傩?168
任務(wù)目標 168
任務(wù)準備 168
6.3.1 盒子模型 168
6.3.2 邊框?qū)傩?172
任務(wù)實施 179
任務(wù)6.4 自適應屬性 186
任務(wù)目標 186
任務(wù)準備 186
6.4.1 寬高自適應 186
6.4.2 屏幕自適應 188
任務(wù)實施 189
項目總結(jié) 195
項目7 CSS3過渡變形與動畫 196
項目概述 196
項目導航 196
任務(wù)7.1 CSS3過渡 197
任務(wù)目標 197
任務(wù)準備 197
7.1.1 transition-property屬性 197
7.1.2 transition-duration屬性 197
7.1.3 transition-timing-function 屬性 198
7.1.4 transition-delay屬性 199
7.1.5 transition屬性 200
任務(wù)實施 202
任務(wù)7.2 CSS3變形 206
任務(wù)目標 206
任務(wù)準備 207
7.2.1 transform屬性 207
7.2.2 transform-origin屬性 212
7.2.3 3D變形其他屬性 214
任務(wù)實施 215
任務(wù)7.3 動畫 224
任務(wù)目標 224
任務(wù)準備 224
7.3.1 @keyframes 225
7.3.2 animation 225
任務(wù)實施 227
項目總結(jié) 231
項目8 繪圖與數(shù)據(jù)存儲 232
項目概述 232
項目導航 232
任務(wù)8.1 JavaScript概述 232
任務(wù)目標 232
任務(wù)準備 233
8.1.1 JavaScript引入 233
8.1.2 JavaScript基礎(chǔ)知識 233
8.1.3 函數(shù) 234
8.1.4 Document對象 235
8.1.5 DOM事件機制 238
任務(wù)實施 239
任務(wù)8.2 Canvas 246
任務(wù)目標 246
任務(wù)準備 246
8.2.1 Canvas概述 246
8.2.2 Canvas繪制基本圖形 247
8.2.3 繪制漸變圖形 250
8.2.4 繪制變形圖形 252
8.2.5 SVG 253
任務(wù)實施 254
任務(wù)8.3 數(shù)據(jù)存儲 258
任務(wù)目標 258
任務(wù)準備 259
8.3.1 Cookie 259
8.3.2 Web Storage 259
任務(wù)實施 260
項目總結(jié) 262
參考文獻 263