HTML5+CSS3+JavaScript項(xiàng)目開發(fā)

目錄
咖啡商城項(xiàng)目導(dǎo)引1
學(xué)習(xí)目標(biāo)1
內(nèi)容安排2
項(xiàng)目背景2
項(xiàng)目構(gòu)思3第1章開發(fā)工具HBuilder5
1.1飛速編碼的極客工具6
1.2安裝HBuilder6
1.3認(rèn)識(shí)界面8
1.4新建項(xiàng)目9
1.5Web項(xiàng)目的運(yùn)行11
1.6移動(dòng)App的運(yùn)行12第2章HTML基礎(chǔ)15
2.1認(rèn)識(shí)HTML16
2.1.1HTML基本語(yǔ)法16
2.1.2HTML文檔的基本結(jié)構(gòu)17
2.1.3項(xiàng)目： 第一個(gè)HTML頁(yè)面18
2.2HTML常用標(biāo)簽19
2.2.1文本與標(biāo)簽19
2.2.2項(xiàng)目： 介紹我的學(xué)校123
2.3表格元素24
2.3.1表格標(biāo)簽25
2.3.2項(xiàng)目： 圖書統(tǒng)計(jì)表26
2.4表單元素27
2.4.1常用表單元素27
2.4.2項(xiàng)目： 個(gè)人信息統(tǒng)計(jì)表31
2.5咖啡商城——商品分類模塊33
2.5.1項(xiàng)目說(shuō)明34
2.5.2項(xiàng)目設(shè)計(jì)34
2.5.3項(xiàng)目實(shí)施34
習(xí)題36第3章HTML5新增元素和屬性37
3.1新增文檔結(jié)構(gòu)元素38
3.1.1認(rèn)識(shí)HTML538
3.1.2HTML5頁(yè)面結(jié)構(gòu)39
3.1.3HTML5主體結(jié)構(gòu)元素39
3.1.4HTML5非主體結(jié)構(gòu)元素42
3.1.5項(xiàng)目： 新聞評(píng)論網(wǎng)43
3.2新增表單元素45
3.2.1HTML5表單新功能45
3.2.2HTML5表單新的輸入類型46
3.2.3HTML5表單新的屬性47
3.2.4項(xiàng)目： 訂貨人個(gè)人信息頁(yè)49
3.3咖啡商城——用戶注冊(cè)模塊實(shí)現(xiàn)51
3.3.1項(xiàng)目說(shuō)明51
3.3.2項(xiàng)目設(shè)計(jì)52
3.3.3項(xiàng)目實(shí)施52
習(xí)題54第4章CSS基礎(chǔ)56
4.1CSS基本語(yǔ)法57
4.1.1CSS語(yǔ)句格式57
4.1.2CSS選擇符58
4.1.3項(xiàng)目： 世界杯勝負(fù)榜64
4.2文本和字體相關(guān)屬性66
4.2.1字體屬性66
4.2.2文本屬性69
4.2.3項(xiàng)目： 介紹我的學(xué)校270
4.3背景和邊框相關(guān)屬性72
4.3.1邊框72
4.3.2邊框陰影75
4.3.3圓角邊框76
4.3.4圖形邊框76
4.3.5背景77
4.3.6項(xiàng)目： 校訓(xùn)Logo80
4.4咖啡商城——網(wǎng)站頁(yè)腳模塊實(shí)現(xiàn)82
4.4.1項(xiàng)目說(shuō)明82
4.4.2項(xiàng)目設(shè)計(jì)82
4.4.3項(xiàng)目實(shí)施82
習(xí)題84第5章CSS盒子模型87
5.1盒子相關(guān)屬性88
5.1.1內(nèi)邊距和外邊距88
5.1.2塊級(jí)元素與行內(nèi)元素90
5.1.3項(xiàng)目： 盒子模型92
5.2浮動(dòng)定位93
5.2.1float屬性93
5.2.2clear屬性95
5.2.3項(xiàng)目： 3個(gè)相框95
5.3位置定位97
5.3.1position屬性97
5.3.2項(xiàng)目： 照片墻99
5.4隱藏與顯示101
5.4.1visibility屬性101
5.4.2zindex屬性102
5.4.3display屬性103
5.4.4項(xiàng)目： 懸浮菜單103
5.5咖啡商城——商品分類模塊美化效果實(shí)現(xiàn)105
5.5.1項(xiàng)目說(shuō)明105
5.5.2項(xiàng)目設(shè)計(jì)106
5.5.3項(xiàng)目實(shí)施106
習(xí)題109第6章CSS3動(dòng)畫113
6.1Animation動(dòng)畫114
6.1.1定義關(guān)鍵幀114
6.1.2綁定動(dòng)畫115
6.1.3項(xiàng)目： 跑動(dòng)的汽車116
6.2Transition動(dòng)畫118
6.2.1Transition過(guò)渡118
6.2.2項(xiàng)目： 頁(yè)面切換效果119
6.3咖啡商城——商品介紹模塊實(shí)現(xiàn)122
6.3.1項(xiàng)目說(shuō)明122
6.3.2項(xiàng)目設(shè)計(jì)123
6.3.3項(xiàng)目實(shí)施123
習(xí)題125第7章JavaScript基礎(chǔ)126
7.1JavaScript簡(jiǎn)介127
7.2在HTML頁(yè)面中嵌入JavaScript的方法128
7.3JavaScript的語(yǔ)法規(guī)則129
7.3.1語(yǔ)法129
7.3.2標(biāo)識(shí)符130
7.3.3注釋131
7.3.4項(xiàng)目： 第一個(gè)JavaScript程序131
7.4數(shù)據(jù)類型133
7.4.1常用數(shù)據(jù)類型133
7.4.2typeof運(yùn)算符133
7.4.3Undefined類型134
7.4.4Null類型134
7.4.5Object類型135
7.5變量136
7.6運(yùn)算符137
7.7流程控制語(yǔ)句138
7.8JavaScript函數(shù)140
7.8.1JavaScript函數(shù)定義140
7.8.2項(xiàng)目： 單擊我142
7.9事件和事件處理144
7.9.1JavaScript常用事件144
7.9.2項(xiàng)目： 敏感的兔子145
習(xí)題148第8章JavaScript對(duì)象151
8.1內(nèi)置對(duì)象152
8.1.1認(rèn)識(shí)JavaScript內(nèi)置對(duì)象152
8.1.2Math對(duì)象153
8.1.3Date對(duì)象154
8.1.4String對(duì)象156
8.1.5Number對(duì)象158
8.1.6Array對(duì)象160
8.1.7項(xiàng)目： 數(shù)字電子時(shí)鐘162
8.2BOM對(duì)象164
8.2.1認(rèn)識(shí)BOM對(duì)象164
8.2.2window對(duì)象166
8.2.3history對(duì)象168
8.2.4location對(duì)象169
8.2.5screen對(duì)象169
8.2.6document對(duì)象170
8.2.7項(xiàng)目： 打開新窗口170
習(xí)題172第9章DOM文檔對(duì)象模型175
9.1認(rèn)識(shí)DOM對(duì)象176
9.2HTML DOM Document對(duì)象176
9.3HTML DOM Event對(duì)象181
9.4HTML DOM Element對(duì)象183
9.5HTML DOM attribute對(duì)象184
9.6DOM與事件185
9.6.1事件綁定的方式185
9.6.2事件處理函數(shù)的執(zhí)行順序187
9.6.3事件冒泡和事件捕獲187
9.7項(xiàng)目： 詩(shī)詞鑒賞189
9.8咖啡商城——購(gòu)物車模塊實(shí)現(xiàn)192
9.8.1項(xiàng)目說(shuō)明192
9.8.2項(xiàng)目設(shè)計(jì)193
9.8.3項(xiàng)目實(shí)施194
習(xí)題195第10章Canvas畫布200
10.1繪制基本圖形201
10.1.1認(rèn)識(shí)Canvas201
10.1.2Canvas的常用屬性和方法201
10.1.3使用Canvas繪圖對(duì)象繪制基本圖形202
10.1.4項(xiàng)目： 來(lái)自星星的它209
10.2繪制圖像213
10.2.1使用Canvas繪圖對(duì)象裁剪圖像213
10.2.2項(xiàng)目： 放大鏡216
10.2.3項(xiàng)目： 跳動(dòng)的心218
10.2.4項(xiàng)目： 鼠標(biāo)畫板220
10.3咖啡商城——商品詳情模塊實(shí)現(xiàn)223
10.3.1項(xiàng)目說(shuō)明223
10.3.2項(xiàng)目設(shè)計(jì)223
10.3.3項(xiàng)目實(shí)施224
習(xí)題226第11章本地存儲(chǔ)229
11.1Web Storage230
11.1.1Web Storage的常用屬性和方法230
11.1.2項(xiàng)目： 簡(jiǎn)易購(gòu)物車231
11.2本地?cái)?shù)據(jù)庫(kù)236
11.2.1本地?cái)?shù)據(jù)庫(kù)訪問(wèn)237
11.2.2項(xiàng)目： 簡(jiǎn)易留言本239
11.3咖啡商城——購(gòu)物車本地存儲(chǔ)模塊實(shí)現(xiàn)245
11.3.1項(xiàng)目說(shuō)明245
11.3.2項(xiàng)目設(shè)計(jì)246
11.3.3項(xiàng)目實(shí)施247
習(xí)題251第12章jQuery基礎(chǔ)253
12.1jQuery的由來(lái)及簡(jiǎn)介254
12.1.1向頁(yè)面添加jQuery庫(kù)254
12.1.2項(xiàng)目： 第一個(gè)jQuery程序255
12.2jQuery選擇器256
12.2.1基本選擇器256
12.2.2層次選擇器256
12.2.3過(guò)濾選擇器257
12.2.4表單元素選擇器259
12.3jQuery常用方法259
12.4jQuery對(duì)象與DOM對(duì)象263
12.5jQuery事件264
12.5.1常見(jiàn)的DOM事件264
12.5.2事件綁定/移除267
12.6jQuery動(dòng)畫269
12.6.1隱藏和顯示269
12.6.2淡入和淡出270
12.6.3animate動(dòng)畫270
12.7咖啡商城——圖片輪播271
12.7.1項(xiàng)目說(shuō)明271
12.7.2項(xiàng)目設(shè)計(jì)272
12.7.3項(xiàng)目實(shí)施272
12.8JSON273
12.8.1JSON語(yǔ)法規(guī)則273
12.8.2常用類型274
12.8.3基礎(chǔ)示例274
12.9Ajax275
12.9.1Ajax如何工作275
12.9.2jQuery中的Ajax277
12.10咖啡商城——查看商品詳情279
12.10.1項(xiàng)目說(shuō)明279
12.10.2項(xiàng)目設(shè)計(jì)279
12.10.3項(xiàng)目實(shí)施280
習(xí)題281第13章跨平臺(tái)移動(dòng)App開發(fā)285
13.1HTML5 Plus規(guī)范286
13.2HTML5+ App286
13.3HelloMUI示例287
13.4建立MUI項(xiàng)目289
13.5咖啡商城——移動(dòng)App291
13.5.1項(xiàng)目說(shuō)明291
13.5.2項(xiàng)目設(shè)計(jì)292
13.5.3項(xiàng)目實(shí)施292
13.6Hello H5+ 示例294
13.7創(chuàng)建Hello H5+ 項(xiàng)目296
13.8項(xiàng)目： 語(yǔ)音答題App301
13.8.1項(xiàng)目說(shuō)明301
13.8.2項(xiàng)目設(shè)計(jì)302
13.8.3項(xiàng)目實(shí)施302第14章網(wǎng)站綜合設(shè)計(jì)305
14.1項(xiàng)目構(gòu)思306
14.2UI設(shè)計(jì)309
14.3網(wǎng)頁(yè)制作314附錄A學(xué)習(xí)知識(shí)點(diǎn)及能力要點(diǎn)324
A.1教材的知識(shí)要點(diǎn)及掌握程度324
A.2教材的能力要點(diǎn)及重要程度325附錄BRGB顏色對(duì)照表326附錄C部分習(xí)題參考答案331參考文獻(xiàn)335