HTML5+CSS3+JavaScript案例實戰

購買商店

HTML5+CSS3+JavaScript案例實戰

$714.00

馬上購買

內容描述

無論是網頁的前端還是移動App的前端都離不開HTML+CSS+JavaScript，而學習這3門技術的基本要求就是多動手操作和多練習頁面實例。本書通過實例的方式講解前端基礎，旨在幫助讀者從一位網頁開發初學者躍升為真正的前端開發人員。 本書分為30章，內容包括網頁前端開發和移動端開發的一些必備知識，涵蓋常用的表單、圖片、按鈕、鏈接、背景、動畫、佈局、3D、移動開發、觸屏開發等技術，涉及HTML、HTML 5、CSS 2、CSS 3、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 標題 32
3.2 表示關鍵字和產品名稱 36
3.3 強調 37
3.4 表示外文詞語或科技術語 39
3.5 表示重要的文字 40
3.6 表示不正確或校正 41
3.7 為文字添加下畫線 42
3.8 添加小號字體內容 43
3.9 添加上標和下標 44
3.10 強制換行
46
3.11 指明可以安全換行的建議位置 47
3.12 表示輸入和輸出、、和 48
3.13 突出顯示文本 53
 
第4章 顯示圖像 55
4.1 頁面中圖像的格式 55
4.2 頁面中圖像的壓縮形式 56
4.3 常用的 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 生成節 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 標籤的定義 402
23.1.2 兩種嵌入JavaScript代碼的方式 403
23.1.3 XHTML與HTML對JavaScript解析的不同之處 404
23.1.4 的使用 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

作者介紹

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