項目1 認(rèn)識HTML5 001
項目概述 001
項目導(dǎo)航 001
任務(wù)1.1 HTML5+CSS3網(wǎng)頁設(shè)計概述 001
任務(wù)目標(biāo) 001
任務(wù)準(zhǔn)備 002
1.1.1 認(rèn)識網(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ù)目標(biāo) 008
任務(wù)準(zhǔn)備 008
1.2.1 前端開發(fā)的工具 008
1.2.2 WebStrom使用 009
任務(wù)實施 011
任務(wù)1.3 自適應(yīng)網(wǎng)頁設(shè)計 017
任務(wù)目標(biāo) 017
任務(wù)準(zhǔn)備 017
1.3.1 響應(yīng)式布局設(shè)計 017
1.3.2 響應(yīng)式網(wǎng)頁部署 018
任務(wù)實施 019
項目總結(jié) 021
項目2 使用HTML5基本標(biāo)簽 022
項目概述 022
項目導(dǎo)航 022
任務(wù)2.1 “古詩詞鑒賞”導(dǎo)航欄
頁面制作 023
任務(wù)目標(biāo) 023
任務(wù)準(zhǔn)備 023
2.1.1 HTML文件的基本結(jié)構(gòu) 023
2.1.2 HTML5基本結(jié)構(gòu) 023
2.1.3 HTML5新增標(biāo)簽 024
2.1.4 HTML5廢棄標(biāo)簽 024
2.1.5 HTML5廢棄屬性 025
2.1.6 基礎(chǔ)標(biāo)簽 025
2.1.7 文本格式化標(biāo)簽 027
任務(wù)實施 032
任務(wù)2.2 “詩人與古詩大全”頁面制作 034
任務(wù)目標(biāo) 034
任務(wù)準(zhǔn)備 034
2.2.1 有序列表 034
2.2.2 無序列表 035
2.2.3 定義列表 035
任務(wù)實施 036
任務(wù)2.3 “詩詞詳情”頁面制作 039
任務(wù)目標(biāo) 039
任務(wù)準(zhǔn)備 039
2.3.1 圖像標(biāo)簽 039
2.3.2 范圍標(biāo)簽span 042
2.3.3 超鏈接標(biāo)簽a 042
2.3.4 div標(biāo)簽 044
任務(wù)實施 044
項目總結(jié) 048
項目3 表格與表單應(yīng)用 049
項目概述 049
項目導(dǎo)航 049
任務(wù)3.1 制作校園學(xué)生論壇網(wǎng)站 050
任務(wù)目標(biāo) 050
任務(wù)準(zhǔn)備 050
3.1.1 表格的基本語法 050
3.1.2 跨行跨列 061
任務(wù)實施 063
任務(wù)3.2 制作論壇登錄頁面 069
任務(wù)目標(biāo) 069
任務(wù)準(zhǔn)備 070
3.2.1 表單的基本語法 070
3.2.2 基本元素介紹 071
任務(wù)實施 076
任務(wù)3.3 制作論壇注冊頁面 079
任務(wù)目標(biāo) 079
任務(wù)準(zhǔn)備 079
3.3.1 ＜datalist＞元素 079
3.3.2 HTML5新增input類型與屬性 080
任務(wù)實施 085
項目總結(jié) 089
項目4 HTML5音視頻標(biāo)簽 090
項目概述 090
項目導(dǎo)航 090
任務(wù)4.1 制作論壇音樂分區(qū) 090
任務(wù)目標(biāo) 090
任務(wù)準(zhǔn)備 091
4.1.1 ＜audio＞標(biāo)簽 091
4.1.2 ＜source＞標(biāo)簽 091
任務(wù)實施 092
任務(wù)4.2 制作論壇視頻欣賞分區(qū) 095
任務(wù)目標(biāo) 095
任務(wù)準(zhǔn)備 095
4.2.1 ＜video＞標(biāo)簽 095
4.2.2 ＜track＞標(biāo)簽 097
任務(wù)實施 098
項目總結(jié) 102
項目5 CSS3基礎(chǔ)應(yīng)用 103
項目概述 103
項目導(dǎo)航 103
任務(wù)5.1 CSS基本知識 103
任務(wù)目標(biāo) 103
任務(wù)準(zhǔn)備 104
5.1.1 CSS樣式表創(chuàng)建 104
5.1.2 基本語法 106
任務(wù)實施 107
任務(wù)5.2 選擇器 109
任務(wù)目標(biāo) 109
任務(wù)準(zhǔn)備 109
5.2.1 常用選擇器 109
5.2.2 CSS3新增選擇器 114
任務(wù)實施 120
項目總結(jié) 129
項目6 CSS3美化網(wǎng)頁 130
項目概述 130
項目導(dǎo)航 130
任務(wù)6.1 CSS核心屬性 131
任務(wù)目標(biāo) 131
任務(wù)準(zhǔn)備 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ù)目標(biāo) 159
任務(wù)準(zhǔn)備 159
6.2.1 浮動屬性 159
6.2.2 定位屬性 162
任務(wù)實施 165
任務(wù)6.3 邊框?qū)傩?168
任務(wù)目標(biāo) 168
任務(wù)準(zhǔn)備 168
6.3.1 盒子模型 168
6.3.2 邊框?qū)傩?172
任務(wù)實施 179
任務(wù)6.4 自適應(yīng)屬性 186
任務(wù)目標(biāo) 186
任務(wù)準(zhǔn)備 186
6.4.1 寬高自適應(yīng) 186
6.4.2 屏幕自適應(yīng) 188
任務(wù)實施 189
項目總結(jié) 195
項目7 CSS3過渡變形與動畫 196
項目概述 196
項目導(dǎo)航 196
任務(wù)7.1 CSS3過渡 197
任務(wù)目標(biāo) 197
任務(wù)準(zhǔn)備 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ù)目標(biāo) 206
任務(wù)準(zhǔn)備 207
7.2.1 transform屬性 207
7.2.2 transform-origin屬性 212
7.2.3 3D變形其他屬性 214
任務(wù)實施 215
任務(wù)7.3 動畫 224
任務(wù)目標(biāo) 224
任務(wù)準(zhǔn)備 224
7.3.1 @keyframes 225
7.3.2 animation 225
任務(wù)實施 227
項目總結(jié) 231
項目8 繪圖與數(shù)據(jù)存儲 232
項目概述 232
項目導(dǎo)航 232
任務(wù)8.1 JavaScript概述 232
任務(wù)目標(biāo) 232
任務(wù)準(zhǔn)備 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事件機(jī)制 238
任務(wù)實施 239
任務(wù)8.2 Canvas 246
任務(wù)目標(biāo) 246
任務(wù)準(zhǔn)備 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ù)目標(biāo) 258
任務(wù)準(zhǔn)備 259
8.3.1 Cookie 259
8.3.2 Web Storage 259
任務(wù)實施 260
項目總結(jié) 262
參考文獻(xiàn) 263