任務(wù)01　搭建項(xiàng)目開(kāi)發(fā)環(huán)境　1 1.1　任務(wù)概述　1 1.2　任務(wù)目標(biāo)　2 1.3　知識(shí)圖譜　2 1.4　任務(wù)準(zhǔn)備　2 1.4.1　Web概述　2 1.4.2　主流Web瀏覽器　3 1.4.3　常用Web開(kāi)發(fā)工具　4 1.4.4　Web標(biāo)準(zhǔn)　5 1.4.5　HTML5的優(yōu)勢(shì)　6 1.5　任務(wù)實(shí)戰(zhàn)　7 任務(wù)1：安裝Chrome瀏覽器　7 任務(wù)2：安裝HBuilderX　IDE　9 任務(wù)3：使用HBuilderX創(chuàng)建項(xiàng)目　11 1.6　任務(wù)小結(jié)　15 1.7　知識(shí)鞏固　15 1.8　任務(wù)拓展　15 任務(wù)02　制作課程基礎(chǔ)頁(yè)面　16 2.1　任務(wù)概述　16 2.2　任務(wù)目標(biāo)　16 2.3　知識(shí)圖譜　17 2.4　任務(wù)準(zhǔn)備　17 2.4.1　HTML5基礎(chǔ)語(yǔ)法　17 2.4.2　HTML5語(yǔ)義化結(jié)構(gòu)標(biāo)簽　20 2.4.3　HTML5常用標(biāo)簽　21 2.4.4　HTML5實(shí)體字符　24 2.4.5　HTML5超鏈接、框架標(biāo)簽　26 2.4.6　HTML5元素分類(lèi)　29 2.5　任務(wù)實(shí)戰(zhàn)　29 任務(wù)1：制作頁(yè)面通用尾部　29 任務(wù)2：制作頁(yè)面通用頭部　30 任務(wù)3：制作課程說(shuō)明頁(yè)面　31 2.6　任務(wù)小結(jié)　32 2.7　知識(shí)鞏固　32 2.8　任務(wù)拓展　33 任務(wù)03　制作課程播放頁(yè)面　34 3.1　任務(wù)概述　34 3.2　任務(wù)目標(biāo)　34 3.3　知識(shí)圖譜　35 3.4　任務(wù)準(zhǔn)備　35 3.4.1　HTML5列表　35 3.4.2　HTML5表格　36 3.4.3　HTML5媒體元素　40 3.5　任務(wù)實(shí)戰(zhàn)　42 任務(wù)1：制作課程播放頁(yè)面“視頻列表”列表　42 任務(wù)2：制作課程推薦頁(yè)面“成長(zhǎng)路線(xiàn)”列表　43 任務(wù)3：制作課程播放頁(yè)面“課程資料”表格　44 任務(wù)4：制作課程播放頁(yè)面播放區(qū)域　45 3.6　任務(wù)小結(jié)　46 3.7　知識(shí)鞏固　47 3.8　任務(wù)拓展　47 任務(wù)04　使用表單制作頁(yè)面　50 4.1　任務(wù)概述　50 4.2　任務(wù)目標(biāo)　50 4.3　知識(shí)圖譜　51 4.4　任務(wù)準(zhǔn)備　51 4.4.1　表單概述　51 4.4.2　表單發(fā)送方式　52 4.4.3　常用表單控件　53 4.4.4　表單驗(yàn)證的作用　64 4.4.5　表單驗(yàn)證的方法　65 4.5　任務(wù)實(shí)戰(zhàn)　71 任務(wù)1：制作信息登記頁(yè)面　71 任務(wù)2：制作用戶(hù)登錄頁(yè)面　72 任務(wù)3：制作用戶(hù)注冊(cè)頁(yè)面　73 4.6　任務(wù)小結(jié)　74 4.7　知識(shí)鞏固　75 4.8　任務(wù)拓展　75 任務(wù)05　在項(xiàng)目中引入CSS　77 5.1　任務(wù)概述　77 5.2　任務(wù)目標(biāo)　77 5.3　知識(shí)圖譜　78 5.4　任務(wù)準(zhǔn)備　78 5.4.1　CSS3概述　78 5.4.2　CSS3基礎(chǔ)語(yǔ)法　79 5.4.3　CSS3引入方式　79 5.4.4　CSS3基礎(chǔ)選擇器　83 5.4.5　CSS3高級(jí)選擇器　85 5.4.6　CSS3選擇器權(quán)重問(wèn)題　90 5.5　任務(wù)實(shí)戰(zhàn)　92 任務(wù)1：美化課程說(shuō)明頁(yè)面　92 任務(wù)2：美化課程播放頁(yè)面　93 5.6　任務(wù)小結(jié)　96 5.7　知識(shí)鞏固　96 5.8　任務(wù)拓展　96 任務(wù)06　使用CSS3美化頁(yè)面　97 6.1　任務(wù)概述　97 6.2　任務(wù)目標(biāo)　97 6.3　知識(shí)圖譜　98 6.4　任務(wù)準(zhǔn)備　98 6.4.1　文字樣式　98 6.4.2　文本樣式　101 6.4.3　超鏈接樣式　108 6.4.4　列表樣式　110 6.4.5　背景樣式　112 6.4.6　背景漸變　118 6.5　任務(wù)實(shí)戰(zhàn)　120 任務(wù)1：美化頁(yè)面通用尾部　120 任務(wù)2：美化頁(yè)面通用頭部　121 任務(wù)3：美化課程播放頁(yè)面中的“課程資料”表格　123 任務(wù)4：制作課程推薦頁(yè)面“更多好課”部分　125 6.6　任務(wù)小結(jié)　126 6.7　知識(shí)鞏固　126 6.8　任務(wù)拓展　127 任務(wù)07　使用盒子模型布局頁(yè)面　129 7.1　任務(wù)概述　129 7.2　任務(wù)目標(biāo)　129 7.3　知識(shí)圖譜　130 7.4　任務(wù)準(zhǔn)備　130 7.4.1　盒子模型結(jié)構(gòu)　130 7.4.2　盒子模型的組成　130 7.4.3　計(jì)算盒子模型的尺寸　135 7.4.4　IE盒子模型　135 7.4.5　使用Chrome調(diào)試工具檢查盒子尺寸　136 7.4.6　邊框圓角　137 7.4.7　使用border-radius屬性制作特殊圖形　139 7.4.8　盒子陰影　142 7.5　任務(wù)實(shí)戰(zhàn)　144 任務(wù)1：美化課程播放頁(yè)面中的“視頻列表”列表　144 任務(wù)2：美化用戶(hù)登錄頁(yè)面　146 任務(wù)3：美化用戶(hù)注冊(cè)頁(yè)面　148 7.6　任務(wù)小結(jié)　150 7.7　知識(shí)鞏固　150 7.8　任務(wù)拓展　151 任務(wù)08　使用CSS3浮動(dòng)布局頁(yè)面　152 8.1　任務(wù)概述　152 8.2　任務(wù)目標(biāo)　152 8.3　知識(shí)圖譜　153 8.4　任務(wù)準(zhǔn)備　153 8.4.1　標(biāo)準(zhǔn)文檔流　153 8.4.2　display屬性　153 8.4.3　浮動(dòng)　154 8.4.4　清除浮動(dòng)　157 8.5　任務(wù)實(shí)戰(zhàn)　163 任務(wù)1：使用浮動(dòng)左右布局　163 任務(wù)2：使用浮動(dòng)單行布局　166 任務(wù)3：使用浮動(dòng)多行布局　168 8.6　任務(wù)小結(jié)　170 8.7　知識(shí)鞏固　170 8.8　任務(wù)拓展　171 任務(wù)09　使用CSS3定位布局頁(yè)面　173 9.1　任務(wù)概述　173 9.2　任務(wù)目標(biāo)　173 9.3　知識(shí)圖譜　174 9.4　任務(wù)準(zhǔn)備　174 9.4.1　定位概述　174 9.4.2　相對(duì)定位　175 9.4.3　絕對(duì)定位　176 9.4.4　固定定位　177 9.4.5　黏性定位　178 9.4.6　z-index　178 9.5　任務(wù)實(shí)戰(zhàn)　179 任務(wù)1：制作課程層疊角標(biāo)　179 任務(wù)2：使用絕對(duì)定位實(shí)現(xiàn)用戶(hù)登錄頁(yè)面居中　184 任務(wù)3：固定定位置頂按鈕　186 任務(wù)4：黏性定位頁(yè)面通用頭部　188 9.6　任務(wù)小結(jié)　189 9.7　知識(shí)鞏固　190 9.8　任務(wù)拓展　190 任務(wù)10　利用CSS3動(dòng)畫(huà)美化頁(yè)面　191 10.1　任務(wù)概述　191 10.2　任務(wù)目標(biāo)　191 10.3　知識(shí)圖譜　192 10.4　任務(wù)準(zhǔn)備　192 10.4.1　變形　192 10.4.2　過(guò)渡　198 10.4.3　動(dòng)畫(huà)　200 10.5　任務(wù)實(shí)戰(zhàn)　203 任務(wù)1：制作鼠標(biāo)指針懸浮過(guò)渡效果　203 任務(wù)2：使用動(dòng)畫(huà)制作輪播區(qū)域　205 10.6　任務(wù)小結(jié)　208 10.7　知識(shí)鞏固　208 10.8　任務(wù)拓展　208 任務(wù)11　使用CSS3彈性盒子布局頁(yè)面　210 11.1　任務(wù)概述　210 11.2　任務(wù)目標(biāo)　210 11.3　知識(shí)圖譜　211 11.4　任務(wù)準(zhǔn)備　211 11.4.1　彈性盒子　211 11.4.2　彈性盒子容器屬性　212 11.4.3　彈性盒子項(xiàng)目屬性　218 11.5　任務(wù)實(shí)戰(zhàn)　220 任務(wù)1：使用彈性盒子布局課程推薦頁(yè)面　220 任務(wù)2：使用彈性盒子布局課程播放頁(yè)面　224 11.6　任務(wù)小結(jié)　228 11.7　知識(shí)鞏固　228 11.8　任務(wù)拓展　228 任務(wù)12　使用CSS3媒體查詢(xún)實(shí)現(xiàn)頁(yè)面響應(yīng)式布局　230 12.1　任務(wù)概述　230 12.2　任務(wù)目標(biāo)　230 12.3　知識(shí)圖譜　231 12.4　任務(wù)準(zhǔn)備　231 12.4.1　媒體查詢(xún)與響應(yīng)式布局　231 12.4.2　媒體查詢(xún)語(yǔ)法　232 12.4.3　媒體查詢(xún)的引入方式　233 12.4.4　em與rem　235 12.5　任務(wù)實(shí)戰(zhàn)　235 任務(wù)1：為用戶(hù)登錄頁(yè)面應(yīng)用響應(yīng)式布局　235 任務(wù)2：為課程推薦頁(yè)面應(yīng)用響應(yīng)式布局　238 12.6　任務(wù)小結(jié)　243 12.7　知識(shí)鞏固　243 12.8　任務(wù)拓展　244