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

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