HTML5基礎(chǔ)知識(shí)：核心技術(shù)與前沿案例

第一部分 HTML5基礎(chǔ)
第1章 初探HTML5：制作一份邀請(qǐng)函 010
1．1 開(kāi)發(fā)前的準(zhǔn)備工作 010
1．1．1 制定首個(gè)學(xué)習(xí)目標(biāo) 010
1．1．2 準(zhǔn)備開(kāi)發(fā)環(huán)境 011
1．2 制作HTML頁(yè)面 012
1．2．1 創(chuàng)建首個(gè)HTML5頁(yè)面 012
1．2．2 增加必要的頁(yè)面元素 014
1．2．3 頁(yè)面中那些看不見(jiàn)的代碼 015
1．3 頁(yè)面的美化 015
1．3．1 制作邀請(qǐng)函的頁(yè)面背景 015
1．3．2 調(diào)整邀請(qǐng)函的內(nèi)容區(qū)域位置 018
1．3．3 調(diào)整邀請(qǐng)函的文字字體與字號(hào) 020
1．3．4 制作邀請(qǐng)函的按鈕 021
1．3．5 創(chuàng)建一個(gè)外部CSS文件 022
1．4 為頁(yè)面創(chuàng)建交互 024
1．4．1 創(chuàng)建按鈕的JavaScript交互 024
1．4．2 制作還未結(jié)束：頁(yè)面的移動(dòng)化 026
第2章 HTML5新手詳解 028
2．1 HTML代碼基礎(chǔ) 028
2．1．1 HTML基礎(chǔ)語(yǔ)法 028
2．1．2 頁(yè)面根元素 029
2．1．3 文檔元數(shù)據(jù) 031
2．1．4 區(qū)塊元素 034
2．1．5 分組內(nèi)容元素 039
2．2 HTML常用元素 042
2．2．1 文本 042
2．2．2 表單 043
2．2．3 表格 047
2．2．4 WAI-ARIA 050
第3章 CSS3新手詳解 052
3．1 CSS代碼基礎(chǔ) 052
3．1．1 CSS基礎(chǔ)語(yǔ)法 052
3．1．2 繼承 054
3．1．3 選擇器 057
3．2 CSS3常用屬性 059
3．2．1 文本和字體 059
3．2．2 邊框與背景 062
3．2．3元素定位 065
3．2．4 框模型 068
3．2．5 列表 071
3．3 CSS3常用效果與技巧 075
3．3．1 陰影效果 075
3．3．2 2D與3D效果 077
3．3．3 優(yōu)先級(jí) 078
第4章 JavaScript新手詳解 080
4．1 JavaScript代碼基礎(chǔ) 080
4．1．1 如何調(diào)試JavaScript？ 080
4．1．2 為代碼添加注釋 081
4．1．3 創(chuàng)建一個(gè)簡(jiǎn)單的變量 082
4．1．4 幾種常用的JavaScript運(yùn)算符 083
4．1．5 JavaScript中的條件語(yǔ)句 085
4．1．6 JavaScript中的循環(huán)語(yǔ)句 087
4．2 JavaScript編程進(jìn)階 089
4．2．1 數(shù)組及其操作 089
4．2．2 日期和時(shí)間 091
4．2．3 初涉函數(shù) 092
4．2．4 函數(shù)的變量作用域 094
4．2．5 Object簡(jiǎn)介 095
4．2．6 JavaScript的DOM操作 097
4．2．7 DOM事件處理 100
4．2．8 利用JavaScript實(shí)現(xiàn)HTML5拖放 101
第5章 移動(dòng)端HTML5開(kāi)發(fā)詳解 103
5．1 桌面端開(kāi)發(fā)概述 103
5．1．1 桌面端和移動(dòng)端有何不同？ 103
5．1．2 響應(yīng)式設(shè)計(jì)還是移動(dòng)版網(wǎng)站？ 104
5．2 移動(dòng)端開(kāi)發(fā)技巧 105
5．2．1 Viewport設(shè)置 105
5．2．2 百分比布局 106
5．2．3 Flexbox：輕松實(shí)現(xiàn)彈性布局 111
5．2．4 Media Query 114
5．2．5 雪碧圖 116
5．2．6 圖標(biāo)字體 119
5．2．7 移動(dòng)端交互 121
5．2．8 移動(dòng)端調(diào)試 122
5．2．9 移動(dòng)端其他技巧 124
第6章 事半功倍：運(yùn)用流行開(kāi)源類庫(kù) 126
6．1 開(kāi)源類庫(kù)jQuery介紹 126
6．1．1 強(qiáng)大的jQuery 126
6．1．2 jQuery選擇器 128
6．1．3 jQuery的屬性和DOM操作 130
6．1．4 jQuery動(dòng)態(tài)效果 132
6．1．5 jQuery事件 134
6．1．6 jQuery的優(yōu)缺點(diǎn) 136
6．2 其他開(kāi)源類庫(kù)介紹 136
6．2．1 使用jQuery Mobile開(kāi)發(fā)移動(dòng)站點(diǎn) 136
6．2．2 Zepto——移動(dòng)端的jQuery 137
6．2．3 前端開(kāi)發(fā)框架BootStrap 138
6．2．4 設(shè)計(jì)工具包Flat UI 139
6．2．5 瀏覽器檢測(cè)工具M(jìn)odernizr 140
6．2．6 數(shù)據(jù)可視化工具D3 141
6．2．7 使用Hammer輕松控制觸摸手勢(shì) 141
6．2．8 前端在線編輯工具 142
第7章 HTML5與周邊編程語(yǔ)言、軟件 143
7．1 HTML5與Flash 143
7．1．1 HTML5與Flash的結(jié)合 143
7．1．2 使用Google Swiffy進(jìn)行Flash轉(zhuǎn)換 145
7．2 HTML5與其他周邊語(yǔ)言和軟件 146
7．2．1 HTML5與應(yīng)用開(kāi)發(fā) 146
7．2．2 HTML5與Illustrator的結(jié)合 148
7．2．3 HTML5與Photoshop的結(jié)合 149
7．2．4 HTML5開(kāi)發(fā)桌面端應(yīng)用 151
第二部分?HTML5前沿經(jīng)典應(yīng)用篇
第8章 HTML5頁(yè)面元素與布局 153
8．1 頁(yè)面元素與布局核心技巧 153
8．2 HTML5布局基礎(chǔ) 153
8．2．1 圖文混排與題圖文字布局 154
8．2．2 Hero Unit圖標(biāo)題文混排 156
8．2．3 兩列均分布局 159
8．2．4 格子布局 164
8．2．5 多列等高布局 168
8．3 HTML5布局進(jìn)階 170
8．3．1 兩列自適應(yīng)布局 171
8．3．2 三列自適應(yīng)布局 175
8．3．3 瀑布流布局 179
第9章 HTML5動(dòng)畫(huà)與動(dòng)效 182
9．1 動(dòng)畫(huà)與動(dòng)效核心技巧 182
9．2 CSS3動(dòng)畫(huà)與動(dòng)效 182
9．2．1 按鈕元素動(dòng)畫(huà)效果 183
9．2．2 圖標(biāo)元素動(dòng)畫(huà)效果 186
9．2．3 頁(yè)面切換動(dòng)畫(huà)效果 192
9．2．4 加載動(dòng)畫(huà)效果 198
9．2．5 逐幀動(dòng)畫(huà)效果 204
9．2．6 3D翻頁(yè)動(dòng)畫(huà)效果 208
9．3 JavaScript動(dòng)畫(huà)與動(dòng)效 211
9．3．1 Canvas粒子動(dòng)畫(huà)效果 211
9．3．2 GSAP類庫(kù)動(dòng)畫(huà)效果 214
第10章 HTML5圖形與圖像 217
10．1 圖形與圖像核心技巧 217
10．2 CSS3圖形與圖像繪制 218
10．2．1 關(guān)閉按鈕繪制 218
10．2．2 菜單圖標(biāo)繪制 219
10．2．3 三角圖標(biāo)繪制 221
10．2．4 漸變色繪制 225
10．2．5 Pattern圖案繪制 227
10．2．6 鋸齒圖形繪制 229
10．3 Canvas圖形與圖像繪制 231
10．3．1 Canvas圖形繪制 231
10．3．2 Canvas像素控制 235
10．4 SVG圖形與圖像繪制 237
10．4．1 SVG圖形繪制 237
10．4．2 SVG圖像遮罩 242
第11章 HTML5交互操作 244
11．1 交互操作核心技巧 244
11．2 滾動(dòng)類交互 244
11．2．1 頁(yè)面固定背景 244
11．2．2 選區(qū)控制 246
11．2．3 局部滾動(dòng) 248
11．2．4 滾動(dòng)監(jiān)聽(tīng) 252
11．2．5 視差滾動(dòng) 256
11．2．6 滾動(dòng)觸發(fā)動(dòng)畫(huà) 261
11．3 鍵盤(pán)和鼠標(biāo)類交互 267
11．3．1 滑塊拖動(dòng) 267
11．3．2 Canvas鍵盤(pán)操作 271
11．4 移動(dòng)端交互 274
11．4．1 觸摸操作 274
11．4．2 運(yùn)動(dòng)與重力感應(yīng) 276
11．5 其他交互操作 279
11．5．1 本地?cái)?shù)據(jù)文件加載 279
11．5．2 本地文件操作 281
11．5．3 Geolocation操作 284
11．5．4 localStorage操作 287
第12章 HTML5頁(yè)面組件 290
12．1 頁(yè)面組件開(kāi)發(fā)核心技巧 290
12．2 圖層類頁(yè)面組件 290
12．2．1 懸浮圖層 290
12．2．2 彈出圖層 293
12．3 區(qū)域類頁(yè)面組件 297
12．3．1 Tab切換 297
12．3．2 折疊區(qū)域 300
12．4 導(dǎo)航類頁(yè)面組件 303
12．4．1 下拉菜單 303
12．4．2 頂部固定菜單 306
12．4．3 滑動(dòng)導(dǎo)航 308
12．5 其他頁(yè)面組件 311
12．5．1 時(shí)間軸 311
12．5．2 圖像輪播 313
12．5．3 日歷組件 317
第13章 HTML5音頻與視頻 322
13．1 音頻、視頻核心開(kāi)發(fā)技巧 322
13．2 音頻類開(kāi)發(fā) 322
13．2．1 音頻播放 322
13．2．2 麥克風(fēng)操作 327
13．3 視頻類開(kāi)發(fā) 330
13．3．1 視頻播放 330
13．3．2 視頻背景 331
13．3．3 攝像頭操作 333
第14章 HTML5響應(yīng)式設(shè)計(jì) 336
14．1 響應(yīng)式設(shè)計(jì)核心技巧 336
14．2 響應(yīng)式設(shè)計(jì)案例 338
14．2．1 響應(yīng)式列表 338
14．2．2 響應(yīng)式內(nèi)容圖片 341
14．2．3 響應(yīng)式背景 343
14．2．4 響應(yīng)式圖像輪播 346
14．2．5 響應(yīng)式菜單 347
第三部分?HTML5綜合案例篇
第15章 HTML5微信游戲 354
15．1 制作思路 354
15．1．1 微信游戲開(kāi)發(fā)基礎(chǔ)知識(shí) 354
15．1．2 微信“520”小游戲策劃 355
15．2 基礎(chǔ)頁(yè)面的開(kāi)發(fā) 356
15．2．1 游戲界面設(shè)計(jì) 356
15．2．2 創(chuàng)建HTML頁(yè)面 357
15．2．3 創(chuàng)建CSS樣式 359
15．3 交互界面的開(kāi)發(fā) 364
15．3．1 制作loading界面交互 364
15．3．2 制作初始界面交互 364
15．3．3 制作音樂(lè)控制器 366
15．3．4 獲取點(diǎn)陣坐標(biāo) 367
15．3．5 制作交互界面 368
15．3．6 制作結(jié)果界面 371
15．4 尾聲 371
第16章 HTML5創(chuàng)意網(wǎng)站 379
16．1 制作思路與基礎(chǔ)頁(yè)面開(kāi)發(fā) 379
16．1．1 站點(diǎn)規(guī)劃與設(shè)計(jì) 379
16．1．2 創(chuàng)建站點(diǎn)DOM結(jié)構(gòu) 380
16．2 頁(yè)面的美化和交互功能創(chuàng)建 382
16．2．1 創(chuàng)建首頁(yè)樣式 382
16．2．2 創(chuàng)建次級(jí)頁(yè)面樣式 385
16．2．3 頁(yè)面切換效果 389
16．3 頁(yè)面細(xì)節(jié)處理 391
16．3．1 制作作品集內(nèi)容頁(yè)面 391
16．3．2 兼容性提示 394
16．4 小結(jié) 395
后記：Web設(shè)計(jì)變遷及經(jīng)驗(yàn)談 403