HTML5應(yīng)用開(kāi)發(fā)案例教程（微課版）

第 1章HTML5應(yīng)用開(kāi)發(fā)概述\t001
1．1網(wǎng)頁(yè)工作原理　001
1．1．1瀏覽器軟件　001
1．1．2網(wǎng)頁(yè)工作過(guò)程　002
1．2HTML5概述　003
1．3響應(yīng)式設(shè)計(jì)　006
1．4運(yùn)行環(huán)境和開(kāi)發(fā)工具　011
1．4．1運(yùn)行環(huán)境　011
1．4．2開(kāi)發(fā)工具　012
課后練習(xí)　017
第　2章靜態(tài)網(wǎng)頁(yè)制作　018
2．1HTML5頁(yè)面的構(gòu)建　018
2．1．1HTML5基本結(jié)構(gòu)　018
2．1．2HTML5新增的結(jié)構(gòu)標(biāo)簽　020
2．1．3CSS3技術(shù)　021
2．1．4實(shí)例2-1：編寫(xiě)一個(gè)簡(jiǎn)單的
HTML5頁(yè)面　023
2．2文本標(biāo)簽的應(yīng)用　026
2．2．1文本標(biāo)簽　026
2．2．2實(shí)例2-2：旅游網(wǎng)站介紹文字的
制作　028
2．3表格標(biāo)簽的應(yīng)用　029
2．3．1表格標(biāo)簽　029
2．3．2實(shí)例2-3：旅游網(wǎng)站機(jī)票預(yù)訂
頁(yè)面制作　030
2．4表單標(biāo)簽的應(yīng)用　032
2．4．1表單標(biāo)簽　032
2．4．2實(shí)例2-4：旅游網(wǎng)站登錄和
注冊(cè)頁(yè)面制作　035
2．5分組標(biāo)簽的應(yīng)用　036
2．5．1分組標(biāo)簽　036
2．5．2實(shí)例2-5：旅游網(wǎng)站首頁(yè)
制作（一）　039
2．6嵌入標(biāo)簽的應(yīng)用　045
2．6．1嵌入標(biāo)簽　045
2．6．2實(shí)例2-6：旅游網(wǎng)站首頁(yè)
制作（二）　047
課后練習(xí)　048
第3章結(jié)合JavaScript的交互式
網(wǎng)頁(yè)制作　049
3．1初識(shí)JavaScript　049
3．1．1什么是JavaScript　049
3．1．2JavaScript的特點(diǎn)　049
3．2JavaScript基本語(yǔ)法　050
3．2．1JavaScript的應(yīng)用方法　050
3．2．2標(biāo)識(shí)符、數(shù)據(jù)類(lèi)型和運(yùn)算符　051
3．2．3實(shí)例3-1：貨幣匯率兌換器　053
3．3JavaScript程序構(gòu)成　055
3．3．1流程控制語(yǔ)句　055
3．3．2函數(shù)　055
3．3．3對(duì)象　056
3．3．4實(shí)例3-2：旅游網(wǎng)站用戶注冊(cè)的
合法性驗(yàn)證　058
3．4JavaScript訪問(wèn)DOM節(jié)點(diǎn)　061
3．4．1文檔對(duì)象模型　062
3．4．2DOM節(jié)點(diǎn)的基本操作　063
3．4．3DOM事件機(jī)制　065
3．4．4實(shí)例3-3：旅游網(wǎng)站的景點(diǎn)查詢
動(dòng)態(tài)生成頁(yè)面制作　067
3．4．5JavaScript事件處理模型　072
課后練習(xí)　072
第4章CSS3界面美化　073
4．1CSS3選擇器　073
4．1．1CSS3選擇器的用法　073
4．1．2實(shí)例4-1：旅游網(wǎng)站的后臺(tái)訂單
管理頁(yè)面制作　081
4．2CSS3邊框和背景　087
4．2．1CSS3邊框　088
4．2．2CSS3背景　093
4．2．3實(shí)例4-2：旅游網(wǎng)站的旅游線路
推廣頁(yè)制作　095
4．3CSS3文本和字體　098
4．3．1文本和服務(wù)器字體　098
4．3．2實(shí)例4-3：旅游網(wǎng)站的機(jī)票預(yù)訂
頁(yè)面制作　101
4．4CSS3盒式與多欄布局　110
4．4．1彈性盒布局　110
4．4．2實(shí)例4-4：使用Flex布局構(gòu)建
網(wǎng)站首頁(yè)　114
4．4．3多欄布局　121
4．4．4實(shí)例4-5：旅游網(wǎng)站的游記頁(yè)面
制作　122
4．5CSS3　2D變換與動(dòng)畫(huà)　127
4．5．1CSS3　2D變換　127
4．5．2實(shí)例4-6：升級(jí)改版旅游網(wǎng)站的
首頁(yè)（一）　129
4．5．3CSS3過(guò)渡動(dòng)畫(huà)　132
4．5．4實(shí)例4-7：升級(jí)改版旅游網(wǎng)站的
首頁(yè)（二）　133
4．5．5CSS3　動(dòng)畫(huà)　135
4．5．6實(shí)例4-8：升級(jí)改版旅游網(wǎng)站的
首頁(yè)（三）　137
課后練習(xí)　140
第5章音頻/視頻特效網(wǎng)頁(yè)制作　141
5．1HTML5音頻　142
5．1．1音頻格式　142
5．1．2音頻播放的簡(jiǎn)單應(yīng)用　142
5．1．3音頻播放的高級(jí)應(yīng)用　143
5．1．4實(shí)例5-1：帶iPod播放器的旅游
網(wǎng)站首頁(yè)制作　148
5．2HTML5視頻　155
5．2．1視頻格式　156
5．2．2視頻播放的簡(jiǎn)單應(yīng)用　156
5．2．3視頻播放的高級(jí)應(yīng)用　157
5．2．4實(shí)例5-2：隨頁(yè)面滾動(dòng)自動(dòng)切換
視頻的旅游廣告頁(yè)制作　161
5．2．5實(shí)例5-3：全視頻背景下的時(shí)尚
主頁(yè)設(shè)計(jì)　164
課后練習(xí)　174
第6章Canvas動(dòng)畫(huà)制作　175
6．1Canvas的相關(guān)概念　175
6．1．1標(biāo)簽　175
6．1．2渲染上下文　176
6．1．3實(shí)例6-1：在HTML頁(yè)面上
繪制矩形　176
6．2Canvas繪制簡(jiǎn)單圖形　177
6．2．1繪制線條　178
6．2．2繪制/填充矩形　179
6．2．3繪制/填充圓弧和曲線　180
6．2．4Canvas狀態(tài)保存和恢復(fù)　182
6．2．5實(shí)例6-2：簡(jiǎn)易畫(huà)板制作　183
6．3Canvas繪制圖像和文本　187
6．3．1繪制圖像　188
6．3．2繪制文本　191
6．3．3實(shí)例6-3：在線廣告圖插件
制作　193
6．4Canvas變形和動(dòng)畫(huà)　198
6．4．1繪制變形　199
6．4．2繪制漸變　201
6．4．3繪制陰影　202
6．4．4實(shí)例6-4：滑動(dòng)驗(yàn)證碼制作　204
課后練習(xí)　207
第7章HTML5游戲開(kāi)發(fā)　208
7．1游戲開(kāi)發(fā)前的技術(shù)準(zhǔn)備　208
7．1．1Canvas動(dòng)畫(huà)的實(shí)現(xiàn)　208
7．1．2元素碰撞檢測(cè)和自由落體　209
7．1．3鼠標(biāo)鍵盤(pán)事件　214
7．2實(shí)例7-1：小黃人吃泡泡游戲　217
7．2．1游戲需求　217
7．2．2關(guān)鍵技術(shù)的實(shí)現(xiàn)　217
7．2．3完整代碼　219
7．3實(shí)例7-2：經(jīng)典俄羅斯方塊
游戲　223
7．3．1游戲需求與邏輯　224
7．3．2關(guān)鍵技術(shù)的實(shí)現(xiàn)　224
7．3．3完整代碼　227
課后練習(xí)　233
第8章響應(yīng)式網(wǎng)頁(yè)制作　234
8．1響應(yīng)式設(shè)計(jì)核心技巧　234
8．1．1媒體查詢　234
8．1．2響應(yīng)式頁(yè)面的設(shè)計(jì)流程　239
8．2響應(yīng)式設(shè)計(jì)應(yīng)用　240
8．2．1實(shí)例8-1：響應(yīng)式企業(yè)網(wǎng)站
首頁(yè)制作　240
8．2．2實(shí)例8-2：響應(yīng)式旅游網(wǎng)站頁(yè)面
制作　247
課后練習(xí)　251