HTML5+CSS3+JavaScript案例實戰

丁亞飛，大連海事大學計算機科學與技術專業碩士。本人主要從事網站建設、軟件工程，人工智能、物聯網方面的研究，出版過多本網頁開發與網站開發類專著。

目 錄

 

第一篇 HTML篇

 

第1章 HTML頁面概述 2

1.1 移動網頁和普通網頁的基本結構 2

1.2 HTML網頁類型（HTML 4、HTML 5） 3

1.3 定義中文網頁 4

1.4 網頁的標題 5

1.5 移動頁面的meta元素 6

1.6 文檔頭部 9

1.7 文檔主體 9

1.8 指定外部樣式表 10

1.9 利用資源的預加載提升用戶體驗 13

1.10 載入外部腳本庫 14

1.11 延遲腳本執行 15

1.12 異步執行腳本 16

 

第2章 頭部meta元素 21

2.1 定義頁面關鍵字 21

2.2 設置頁面描述 22

2.3 設置作者信息 23

2.4 限制搜索方式 24

2.5 網頁語言與文字 26

2.6 定時跳轉移動頁面 27

2.7 設置網頁緩存過期時間 28

2.8 禁止從緩存中調用 29

2.9 刪除過期的Cookie 31

 

第3章 標記文字 32

3.1 標題<hn></hn> 32

3.2 表示關鍵字和產品名稱<b></b> 36

3.3 強調<em></em> 37

3.4 表示外文詞語或科技術語<i></i> 39

3.5 表示重要的文字<strong></strong> 40

3.6 表示不正確或校正<s></s> 41

3.7 為文字添加下畫線<u></u> 42

3.8 添加小號字體內容<small></small> 43

3.9 添加上標和下標 44

3.10 強制換行<br/> 46

3.11 指明可以安全換行的建議位置<wbr> 47

3.12 表示輸入和輸出<code>、<var>、<samp>和<kbd> 48

3.13 突出顯示文本<mark></mark> 53

 

第4章 顯示圖像 55

4.1 頁面中圖像的格式 55

4.2 頁面中圖像的壓縮形式 56

4.3 常用的<img> 57

4.4 語義化帶標題的圖片 58

4.5 移動端提前載入圖片 60

4.6 圖像區域映射 61

4.7 移動網頁使用base64:URL格式的圖片 63

 

第5章 超鏈接 67

5.1 超鏈接的類型 68

5.2 相對路徑和絕對路徑 68

5.3 生成頁面內超鏈接 69

5.4 圖像鏈接 71

5.5 移動端電子郵件鏈接 72

 

第6章 組織文字內容 74

6.1 段落 74

6.2 頁面主題的結構化佈局 76

6.3 添加主題分隔線 79

6.4 輸出有順序關係的內容 80

6.5 使用無序列表輸出內容 81

6.6 使用自定義列表輸出內容 82

6.7 使用列表項 84

6.8 使用菜單列表 85

6.9 使用下拉列表 85

6.10 在頁面中輸出對話 87

 

第7章 劃分文檔結構 89

7.1 添加基本的標題 90

7.2 隱藏子標題hgroup 91

7.3 生成節<section> 92

7.4 為區域添加頭部和尾部 95

7.5 添加導航區域 97

7.6 在頁面中輸出文章 99

7.7 生成附註欄 100

7.8 在頁面輸出聯繫人信息 102

7.9 生成詳情區域 103

 

第8章 多媒體文件 105

8.1 使用多媒體打造豐富的視覺效果 105

8.2 全面兼容移動端的video 106

8.3 嵌入來自其他網頁的視頻 108

8.4 在移動端嵌入一個網頁 109

8.5 文字的滾動 111

8.6 為視頻添加字幕 111

8.7 獲取播放時長和當前播放時間 113

8.8 播放視頻時截屏 116

8.9 帶海報的視頻 117

 

第9章 表格 119

9.1 生成基本的表格 119

9.2 讓表格沒有凹凸感 123

9.3 添加表頭 125

9.4 為表格添加結構 126

9.5 製作不規則的表格 129

9.6 正確地設置表格列 131

9.7 設置表格邊框 134

9.8 其他表格設計 139

 

第10章 表單與文件 147

10.1 製作基本表單 147

10.2 禁用單個input元素 150

10.3 關閉輸入框的自動提示功能 151

10.4 定制input元素 151

10.5 生成隱藏的數據項 152

10.6 輸入驗證 153

10.7 生成按鈕 155

10.8 使用表單外的元素 156

10.9 顯示進度 156

10.10 密鑰對生成器 157

10.11 HTML 5調用手機拍照或相冊 157

 

第11章 網頁中的框架 159

11.1 在頁面中使用iframe 159

11.2 設置iframe透明背景色 161

11.3 移動瀏覽器下的iframe寬度自適應 161

11.4 在Safari瀏覽器中實現iframe滾動條 162

11.5 一個完整的響應式iframe 162

 

第12章 HTML 5 Canvas 164

12.1 在頁面中使用Canvas元素 164

12.2 使用路徑和坐標 165

12.3 繪製弧形和圓形 169

12.4 使用純色填充圖形 171

12.5 使用漸變色填充圖形 173

12.6 在畫布中繪製文本 175

12.7 將畫布輸出為PNG圖片文件 178

12.8 在復雜場景使用多層畫布 180

12.9 使用requestAnimationFrame製作遊戲或動畫 180

12.10 如何顯示滿屏Canvas 182

12.11 Canvas圓環進度條 183

 

第13章 HTML 5地理定位 186

13.1 使用navigator對象 186

13.2 獲取當前位置 189

13.3 使用騰訊地圖開放平台獲取當前位置 191

 

第14章 HTML 5本地存儲 193

14.1 在客戶端存儲數據 193

14.2 檢查HTML 5存儲支持 194

14.3 利用localStorage進行本地存儲 194

14.4 利用localStorage存儲JSON對象 197

14.5 利用localStorage記錄用戶表單輸入 197

14.6 在localStorage中存儲圖片 201

14.7 在localStorage中存儲文件 203

14.8 使用localForage進行離線存儲 205

14.9 利用sessionStorage進行本地存儲 206

 

第15章 HTML 5應用緩存 210

15.1 使用cache manifest創建頁面緩存 210

15.2 離線Web網頁或應用 213

15.3 刪除本地緩存 214

15.4 更新緩存文件 215

15.5 使用HTML 5離線應用程序緩存事件 216

 

第16章 HTML 5移動開發 221

16.1 在手機上打電話或發短信 221

16.2 設置iPhone書籤欄圖標 223

16.3 HTML 5相冊 226

 

第二篇 CSS篇

 

第17章 文字與字體 230

17.1 在網頁中使用自定義字體 230

17.2 文本縮進和首字符下沉 232

17.3 自定義文本被選中時的樣式 234

17.4 文本對齊 234

17.5 調整文字、字符的間距 235

17.6 文本的裝飾 236

17.7 文字陰影 237

17.8 文字毛玻璃效果 237

17.9 金屬質感文字 238

17.10 隱藏文本 238

17.11 文字旋轉 239

 

第18章 邊框和圖片 240

18.1 邊框新屬性 240

18.2 搜索框 247

18.3 微博發布框 250

18.4 拍立得效果框 255

18.5 CSS 3動畫邊框 256

18.6 邊框移動特效 261

18.7 Banner圖片的標籤 263

18.8 黑白圖片 264

18.9 圖片水印 265

18.10 圖片細節放大展示 266

18.11 圖片的瀑布流 271

18.12 圖片牆 274

18.13 圖片輪播圖 277

18.14 幻燈片 287

18.15 手風琴效果 291

18.16 圖片自適應 292

18.17 使用純CSS繪製圖像 293

18.18 圖片原地放大 297

18.19 圖片翻轉 299

 

第19章 按鈕和鏈接 300

19.1 圓角按鈕 300

19.2 簡單導航欄 304

19.3 二級導航欄 306

19.4 三級導航欄 308

19.5 滑動菜單 310

19.6 網頁右鍵菜單 312

19.7 下拉菜單 315

19.8 CSS 3圓形導航菜單 318

19.9 標籤雲 322

19.10 TAB標籤頁 322

19.11 選中文字分享 325

19.12 鏈接百葉窗效果 326

19.13 iPhone開關 328

19.14 按鈕式單選框與復選框 330

19.15 文字變鏈接 332

19.16 根據文件格式設置鏈接圖標 333

 

第20章 背景和顏色 334

20.1 顏色和漸變的基礎 334

20.2 高光效果 338

20.3 多背景 339

20.4 全屏背景 340

20.5 斑馬線背景 341

20.6 棋盤背景 342

20.7 易拉罐效果 345

20.8 頁面頂部陰影 347

 

第21章 變換與動畫 348

21.1 CSS 3變換與動畫的基礎 348

21.2 紙張邊角動畫效果 356

21.3 氣泡式提示 364

21.4 對聯廣告 365

21.5 頁面loading效果 367

21.6 進度條 368

21.7 蘋果系統的Stack特效 372

21.8 扇形展開 375

 

第22章 盒子與3D 381

22.1 CSS 3盒模型 381

22.2 內層CSS 3盒陰影 383

22.3 外層CSS 3盒陰影 384

22.4 3D文字 385

22.5 3D圖片 387

22.6 3D下拉菜單 393

22.7 3D旋轉動畫 398

 

第三篇 JavaScript篇

 

第23章 JavaScript入門必知 402

23.1 如何在HTML中調用JavaScript代碼 402

23.1.1 <script>標籤的定義 402

23.1.2 兩種嵌入JavaScript代碼的方式 403

23.1.3 XHTML與HTML對JavaScript解析的不同之處 404

23.1.4 <noscript>的使用 404

23.2 使用什麼工具開發JavaScript 405

23.2.1 Adob​​e Dreamweaver軟件，推薦指數：3 405

23.2.2 Sublime Text，推薦指數：4 405

23.2.3 Aptana Studio，推薦指數：4 406

23.2.4 WebStorm，推薦指數： 5 406

23.3 如何調試移動JavaScript代碼 407

23.3.1 Web Inspector調試工具 407

23.3.2 Web開發者工具（DevTools） 409

23.3.3 JavaScript調試器 410

23.3.4 控制台 412

23.3.5 HTTP分析 412

23.3.6 性能檢測 413

23.4 PC端鼠標操作與移動端觸屏操作 414

23.4.1 PC端鼠標單擊操作處理 414

23.4.2 移動端觸屏操作 415

23.4.3 兼容PC端鼠標和移動端觸屏事件處理 417

 

第24章 表單控制 419

24.1 去除字符串左右兩邊的空格 419

24.2 驗證用戶是否輸入 420

24.3 禁止輸入 422

24.4 關閉輸入法 424

24.5 禁止複制與粘貼 425

24.6 限制只能輸入數字 426

24.7 限制只能輸入中文 427

24.8 限製字符串長度 428

24.9 限製字符串長度（區分中英文） 429

24.10 實時提示可輸入字符（區分中英文） 432

24.11 密碼強度實時驗證 435

24.12 光標停留在文字最後 437

24.13 自動選定文本內容 438

24.14 獲取和失去焦點時改變樣式 439

24.15 常見的驗證規則 440

24.16 對文本內容進行關鍵詞過濾 443

24.17 從字符串中剔除所有HTML代碼 445

24.18 檢測是否為數值型 446

24.19 TextArea自適應文字行數 448

24.20 判斷單選框是否被選中 448

24.21 判斷複選框至少選中一項 449

24.22 限制複選框最多選擇幾項 450

24.23 Checkbox全選、取消全選、反選 451

24.24 獲取選中的複選框值 453

24.25 判斷下拉框中的值是否被選中 454

 

第25章 圖片控制 456

25.1 動畫管理模塊 456

25.2 實時預覽上傳的圖片 461

25.3 鼠標移入/移出時改變圖片樣式 465

25.4 圖片放大鏡效果 466

25.5 水中倒影效果 472

25.6 橫向圖片輪播 477

25.7 圖片層疊輪播 482

25.8 單擊圖片逐漸放大 487

25.9 圖片旋轉 489

25.10 在觸屏上拖曳圖片 491

 

第26章 內容展示 494

26.1 表格光棒效果 494

26.2 讓表單沒有凹凸感 496

26.3 動態插入和刪除單元行 497

26.4 表格內容的展開和折疊 498

26.5 表格內容拖曳效果 500

26.6 表格分頁 506

26.7 英文字符串自動換行 509

26.8 內容超過元素寬度顯示省略號 511

26.9 調整字體大小 513

 

第27章 日期處理 515

27.1 獲取日期的指定部分 515

27.2 顯示當前時間 516

27.3 顯示最後修改時間 517

27.4 實時顯示當前時間 518

27.5 將日期格式化成字符串 520

27.6 獲取短日期格式 521

27.7 獲取指定日期所在月份的天數 523

27.8 獲取指定日期是第幾週 525

27.9 倒計時 526

27.10 比較兩個日期相差多少秒 527

27.11 日期比較大小 528

27.12 對指定日期進行加減 530

27.13 將字符串轉換成日期格式 532

27.14 判斷是閏年還是平年 533

27.15 日期合法性驗證 535

 

第28章 頁面特效 537

28.1 頁面懸浮導航 537

28.2 下拉式導航菜單 538

28.3 滑動門導航 542

28.4 樹形菜單導航 544

28.5 仿QQ菜單 548

28.6 漂浮廣告 554

 

第29章 JavaScript移動開發 556

29.1 判斷PC端或移動端 556

29.2 判斷移動端平台類型 558

29.3 判斷設備方向變更 560

29.4 移除移動瀏覽器地址欄 561

29.5 判斷當前瀏覽器是否為移動瀏覽器 562

29.6 判斷用戶是否在使用微信瀏覽器 563

 

第30章 JavaScript觸屏開發常用代碼 565

30.1 獲取手機屏幕的用戶觸點坐標 565

30.2 平板電腦觸屏提示信息 566

30.3 觸屏時長 568

30.4 長觸屏操作實現 570

30.5 雙擊觸屏操作實現 572

30.6 點擊穿透現象 574

30.7 觸屏事件流程 576

30.8 獲取手機觸屏移動軌跡 577

30.9 模擬觸屏畫筆功能 579

30.10 觸屏滑動功能 581

30.11 觸屏手勢操作 583