HTML5基礎知識 核心技術與前沿案例

目錄

第 一部分 HTML5基礎

第 1章 初探HTML5：製作一份邀請函 010

1.1 開發前的準備工作 010

1.1.1 制定**學習目標 010

1.1.2 準備開發環境 011

1.2 製作HTML頁面 012

1.2.1 創建**HTML5頁面 012

1.2.2 增加必要的頁面元素 014

1.2.3 頁面中那些看不見的代碼 015

1.3 頁面的美化 015

1.3.1 製作邀請函的頁面背景 015

1.3.2 調整邀請函的內容區域位置 018

1.3.3 調整邀請函的文字字體與字號 020

1.3.4 製作邀請函的按鈕 021

1.3.5 創建一個外部CSS文件 022

1.4 為頁面創建交互 024

1.4.1 創建按鈕的JavaScript交互 024

1.4.2 製作還未結束：頁面的移動化 026

第 2章 HTML5新手詳解 028

2.1 HTML代碼基礎 028

2.1.1 HTML基礎語法 028

2.1.2 頁面根元素 029

2.1.3 文檔元數據 031

2.1.4 區塊元素 034

2.1.5 分組內容元素 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代碼基礎 052

3.1.1 CSS基礎語法 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 優先級 078

第4章 JavaScript新手詳解 080

4.1 JavaScript代碼基礎 080

4.1.1 如何調試JavaScript？ 080

4.1.2 為代碼添加註釋 081

4.1.3 創建一個簡單的變量 082

4.1.4 幾種常用的JavaScript運算符 083

4.1.5 JavaScript中的條件語句 085

4.1.6 JavaScript中的循環語句 087

4.2 JavaScript編程進階 089

4.2.1 數組及其操作 089

4.2.2 日期和時間 091

4.2.3 初涉函數 092

4.2.4 函數的變量作用域 094

4.2.5 Object簡介 095

4.2.6 JavaScript的DOM操作 097

4.2.7 DOM事件處理 100

4.2.8 利用JavaScript實現HTML5拖放 101

第5章 移動端HTML5開發詳解 103

5.1 桌面端開發概述 103

5.1.1 桌面端和移動端有何不同？ 103

5.1.2 響應式設計還是移動版網站？ 104

5.2 移動端開發技巧 105

5.2.1 Viewport設置 105

5.2.2 百分比佈局 106

5.2.3 Flexbox：輕松實現彈性佈局 111

5.2.4 Media Query 114

5.2.5 雪碧圖 116

5.2.6 圖標字體 119

5.2.7 移動端交互 121

5.2.8 移動端調試 122

5.2.9 移動端其他技巧 124

第6章 事半功倍：運用流行開源類庫 126

6.1 開源類庫jQuery介紹 126

6.1.1 強大的jQuery 126

6.1.2 jQuery選擇器 128

6.1.3 jQuery的屬性和DOM操作 130

6.1.4 jQuery動態效果 132

6.1.5 jQuery事件 134

6.1.6 jQuery的優缺點 136

6.2 其他開源類庫介紹 136

6.2.1 使用jQuery Mobile開發移動站點 136

6.2.2 Zepto——移動端的jQuery 137

6.2.3 前端開發框架BootStrap 138

6.2.4 設計工具包Flat UI 139

6.2.5 瀏覽器檢測工具Modernizr 140

6.2.6 數據可視化工具D3 141

6.2.7 使用Hammer輕松控制觸摸手勢 141

6.2.8 前端在線編輯工具 142

第7章 HTML5與周邊編程語言、軟件 143

7.1 HTML5與Flash 143

7.1.1 HTML5與Flash的結合 143

7.1.2 使用Google Swiffy進行Flash轉換 145

7.2 HTML5與其他周邊語言和軟件 146

7.2.1 HTML5與應用開發 146

7.2.2 HTML5與Illustrator的結合 148

7.2.3 HTML5與Photoshop的結合 149

7.2.4 HTML5開發桌面端應用 151

第 二部分 HTML5前沿經典應用篇

第8章 HTML5頁面元素與佈局 153

8.1 頁面元素與佈局核心技巧 153

8.2 HTML5佈局基礎 153

8.2.1 圖文混排與題圖文字佈局 154

8.2.2 Hero Unit圖標題文混排 156

8.2.3 兩列均分佈局 159

8.2.4 格子佈局 164

8.2.5 多列等高佈局 168

8.3 HTML5佈局進階 170

8.3.1 兩列自適應佈局 171

8.3.2 三列自適應佈局 175

8.3.3 瀑布流佈局 179

第9章 HTML5動畫與動效 182

9.1 動畫與動效核心技巧 182

9.2 CSS3動畫與動效 182

9.2.1 按鈕元素動畫效果 183

9.2.2 圖標元素動畫效果 186

9.2.3 頁面切換動畫效果 192

9.2.4 加載動畫效果 198

9.2.5 逐幀動畫效果 204

9.2.6 3D翻頁動畫效果 208

9.3 JavaScript動畫與動效 211

9.3.1 Canvas粒子動畫效果 211

9.3.2 GSAP類庫動畫效果 214

第 10章 HTML5圖形與圖像 217

10.1 圖形與圖像核心技巧 217

10.2 CSS3圖形與圖像繪制 218

10.2.1 關閉按鈕繪制 218

10.2.2 菜單圖標繪制 219

10.2.3 三角圖標繪制 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 滾動類交互 244

11.2.1 頁面固定背景 244

11.2.2 選區控制 246

11.2.3 局部滾動 248

11.2.4 滾動監聽 252

11.2.5 視差滾動 256

11.2.6 滾動觸發動畫 261

11.3 鍵盤和鼠標類交互 267

11.3.1 滑塊拖動 267

11.3.2 Canvas鍵盤操作 271

11.4 移動端交互 274

11.4.1 觸摸操作 274

11.4.2 運動與重力感應 276

11.5 其他交互操作 279

11.5.1 本地數據文件加載 279

11.5.2 本地文件操作 281

11.5.3 Geolocation操作 284

11.5.4 localStorage操作 287

第 12章 HTML5頁面組件 290

12.1 頁面組件開發核心技巧 290

12.2 圖層類頁面組件 290

12.2.1 懸浮圖層 290

12.2.2 彈出圖層 293

12.3 區域類頁面組件 297

12.3.1 Tab切換 297

12.3.2 折疊區域 300

12.4 導航類頁面組件 303

12.4.1 下拉菜單 303

12.4.2 頂部固定菜單 306

12.4.3 滑動導航 308

12.5 其他頁面組件 311

12.5.1 時間軸 311

12.5.2 圖像輪播 313

12.5.3 日歷組件 317

第 13章 HTML5音頻與視頻 322

13.1 音頻、視頻核心開發技巧 322

13.2 音頻類開發 322

13.2.1 音頻播放 322

13.2.2 麥克風操作 327

13.3 視頻類開發 330

13.3.1 視頻播放 330

13.3.2 視頻背景 331

13.3.3 攝像頭操作 333

第 14章 HTML5響應式設計 336

14.1 響應式設計核心技巧 336

14.2 響應式設計案例 338

14.2.1 響應式列表 338

14.2.2 響應式內容圖片 341

14.2.3 響應式背景 343

14.2.4 響應式圖像輪播 346

14.2.5 響應式菜單 347

第三部分 HTML5綜合案例篇

第 15章 HTML5微信游戲 354

15.1 製作思路 354

15.1.1 微信游戲開發基礎知識 354

15.1.2 微信“520”小游戲策劃 355

15.2 基礎頁面的開發 356

15.2.1 游戲界面設計 356

15.2.2 創建HTML頁面 357

15.2.3 創建CSS樣式 359

15.3 交互界面的開發 364

15.3.1 製作loading界面交互 364

15.3.2 製作初始界面交互 364

15.3.3 製作音樂控制器 366

15.3.4 獲取點陣坐標 367

15.3.5 製作交互界面 368

15.3.6 製作結果界面 371

15.4 尾聲 371

第 16章 HTML5創意網站 379

16.1 製作思路與基礎頁面開發 379

16.1.1 站點規劃與設計 379

16.1.2 創建站點DOM結構 380

16.2 頁面的美化和交互功能創建 382

16.2.1 創建首頁樣式 382

16.2.2 創建次級頁面樣式 385

16.2.3 頁面切換效果 389

16.3 頁面細節處理 391

16.3.1 製作作品集內容頁面 391

16.3.2 兼容性提示 394

16.4 小結 395

後記：Web設計變遷及經驗談 403