任務(wù)01　搭建項(xiàng)目開發(fā)環(huán)境　1 1.1　任務(wù)概述　1 1.2　任務(wù)目標(biāo)　2 1.3　知識圖譜　2 1.4　任務(wù)準(zhǔn)備　2 1.4.1　Web概述　2 1.4.2　主流Web瀏覽器　3 1.4.3　常用Web開發(fā)工具　4 1.4.4　Web標(biāo)準(zhǔn)　5 1.4.5　HTML5的優(yōu)勢　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　知識鞏固　15 1.8　任務(wù)拓展　15 任務(wù)02　制作課程基礎(chǔ)頁面　16 2.1　任務(wù)概述　16 2.2　任務(wù)目標(biāo)　16 2.3　知識圖譜　17 2.4　任務(wù)準(zhǔn)備　17 2.4.1　HTML5基礎(chǔ)語法　17 2.4.2　HTML5語義化結(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元素分類　29 2.5　任務(wù)實(shí)戰(zhàn)　29 任務(wù)1：制作頁面通用尾部　29 任務(wù)2：制作頁面通用頭部　30 任務(wù)3：制作課程說明頁面　31 2.6　任務(wù)小結(jié)　32 2.7　知識鞏固　32 2.8　任務(wù)拓展　33 任務(wù)03　制作課程播放頁面　34 3.1　任務(wù)概述　34 3.2　任務(wù)目標(biāo)　34 3.3　知識圖譜　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：制作課程播放頁面“視頻列表”列表　42 任務(wù)2：制作課程推薦頁面“成長路線”列表　43 任務(wù)3：制作課程播放頁面“課程資料”表格　44 任務(wù)4：制作課程播放頁面播放區(qū)域　45 3.6　任務(wù)小結(jié)　46 3.7　知識鞏固　47 3.8　任務(wù)拓展　47 任務(wù)04　使用表單制作頁面　50 4.1　任務(wù)概述　50 4.2　任務(wù)目標(biāo)　50 4.3　知識圖譜　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：制作信息登記頁面　71 任務(wù)2：制作用戶登錄頁面　72 任務(wù)3：制作用戶注冊頁面　73 4.6　任務(wù)小結(jié)　74 4.7　知識鞏固　75 4.8　任務(wù)拓展　75 任務(wù)05　在項(xiàng)目中引入CSS　77 5.1　任務(wù)概述　77 5.2　任務(wù)目標(biāo)　77 5.3　知識圖譜　78 5.4　任務(wù)準(zhǔn)備　78 5.4.1　CSS3概述　78 5.4.2　CSS3基礎(chǔ)語法　79 5.4.3　CSS3引入方式　79 5.4.4　CSS3基礎(chǔ)選擇器　83 5.4.5　CSS3高級選擇器　85 5.4.6　CSS3選擇器權(quán)重問題　90 5.5　任務(wù)實(shí)戰(zhàn)　92 任務(wù)1：美化課程說明頁面　92 任務(wù)2：美化課程播放頁面　93 5.6　任務(wù)小結(jié)　96 5.7　知識鞏固　96 5.8　任務(wù)拓展　96 任務(wù)06　使用CSS3美化頁面　97 6.1　任務(wù)概述　97 6.2　任務(wù)目標(biāo)　97 6.3　知識圖譜　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：美化頁面通用尾部　120 任務(wù)2：美化頁面通用頭部　121 任務(wù)3：美化課程播放頁面中的“課程資料”表格　123 任務(wù)4：制作課程推薦頁面“更多好課”部分　125 6.6　任務(wù)小結(jié)　126 6.7　知識鞏固　126 6.8　任務(wù)拓展　127 任務(wù)07　使用盒子模型布局頁面　129 7.1　任務(wù)概述　129 7.2　任務(wù)目標(biāo)　129 7.3　知識圖譜　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：美化課程播放頁面中的“視頻列表”列表　144 任務(wù)2：美化用戶登錄頁面　146 任務(wù)3：美化用戶注冊頁面　148 7.6　任務(wù)小結(jié)　150 7.7　知識鞏固　150 7.8　任務(wù)拓展　151 任務(wù)08　使用CSS3浮動(dòng)布局頁面　152 8.1　任務(wù)概述　152 8.2　任務(wù)目標(biāo)　152 8.3　知識圖譜　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　知識鞏固　170 8.8　任務(wù)拓展　171 任務(wù)09　使用CSS3定位布局頁面　173 9.1　任務(wù)概述　173 9.2　任務(wù)目標(biāo)　173 9.3　知識圖譜　174 9.4　任務(wù)準(zhǔn)備　174 9.4.1　定位概述　174 9.4.2　相對定位　175 9.4.3　絕對定位　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：使用絕對定位實(shí)現(xiàn)用戶登錄頁面居中　184 任務(wù)3：固定定位置頂按鈕　186 任務(wù)4：黏性定位頁面通用頭部　188 9.6　任務(wù)小結(jié)　189 9.7　知識鞏固　190 9.8　任務(wù)拓展　190 任務(wù)10　利用CSS3動(dòng)畫美化頁面　191 10.1　任務(wù)概述　191 10.2　任務(wù)目標(biāo)　191 10.3　知識圖譜　192 10.4　任務(wù)準(zhǔn)備　192 10.4.1　變形　192 10.4.2　過渡　198 10.4.3　動(dòng)畫　200 10.5　任務(wù)實(shí)戰(zhàn)　203 任務(wù)1：制作鼠標(biāo)指針懸浮過渡效果　203 任務(wù)2：使用動(dòng)畫制作輪播區(qū)域　205 10.6　任務(wù)小結(jié)　208 10.7　知識鞏固　208 10.8　任務(wù)拓展　208 任務(wù)11　使用CSS3彈性盒子布局頁面　210 11.1　任務(wù)概述　210 11.2　任務(wù)目標(biāo)　210 11.3　知識圖譜　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：使用彈性盒子布局課程推薦頁面　220 任務(wù)2：使用彈性盒子布局課程播放頁面　224 11.6　任務(wù)小結(jié)　228 11.7　知識鞏固　228 11.8　任務(wù)拓展　228 任務(wù)12　使用CSS3媒體查詢實(shí)現(xiàn)頁面響應(yīng)式布局　230 12.1　任務(wù)概述　230 12.2　任務(wù)目標(biāo)　230 12.3　知識圖譜　231 12.4　任務(wù)準(zhǔn)備　231 12.4.1　媒體查詢與響應(yīng)式布局　231 12.4.2　媒體查詢語法　232 12.4.3　媒體查詢的引入方式　233 12.4.4　em與rem　235 12.5　任務(wù)實(shí)戰(zhàn)　235 任務(wù)1：為用戶登錄頁面應(yīng)用響應(yīng)式布局　235 任務(wù)2：為課程推薦頁面應(yīng)用響應(yīng)式布局　238 12.6　任務(wù)小結(jié)　243 12.7　知識鞏固　243 12.8　任務(wù)拓展　244