目 錄
第1章 認識HTML 1
1.1HTML基本介紹 1
1.2HTML常用標簽 2
1.3HTML表單 3
1.4HTML和CSS的簡單交互 4
第2章 語義化標簽 5
2.1 什么是語義化標簽 5
2.2header標簽 6
2.3footer標簽 8
2.4nav標簽 9
2.5article標簽 10
2.6 section標簽 12
2.7aside標簽 13
第3章 視頻和音頻 15
3.1 音頻播放器——audio 15
3.1.1audio標簽的使用 15
3.1.2如何獲取音頻文件的URL 16
3.1.3autoplay屬性 17
3.1.4loop屬性 18
3.1.5preload屬性 18
3.1.6audio標簽支持的音頻文件 18
3.2 視頻播放器——video 19
3.2.1video標簽的使用 19
3.2.2video標簽的屬性 20
3.3Media事件 23
3.3.1HTML5中audio和video的方法 23
3.3.2HTML5中audio和video的屬性 26
3.3.3HTML5中audio和video的事件 36
第4章 存儲 38
4.1 本地存儲 39
4.2localStorage對象 39
4.2.1通過localStorage設置存儲元素 40
4.2.2獲取數據 43
4.2.3刪除數據 44
4.2.4清除數據 45
4.3sessionStorage 48
4.3.1存儲數據 48
4.3.2獲取數據 50
4.3.3刪除數據 51
4.3.4清除數據 51
4.4storage對象 52
4.5storage事件 53
4.6 應用程序緩存 54
4.7 本地數據庫 57
4.7.1創建/打開數據庫 57
4.7.2執行操作 58
第5章 即時通信 61
5.1 概述 61
5.1.1Web端即時通信技術 61
5.1.2實現Web端即時通信的方法 62
5.1.3四種Web即時通信技術比較 63
5.2 短輪詢原理與實現 63
5.2.1原理 63
5.2.2實現 63
5.3 長輪詢原理與實現 64
5.3.1原理 64
5.3.2實現 64
5.4 長連接的原理與實現 66
5.4.1原理 66
5.4.2實現 67
5.5WebSocket原理與前端API 68
5.5.1原理 68
5.5.2前端API 68
第6章 Canvas繪圖 69
6.1Canvas基礎 69
6.1.1基本Canvas創建 69
6.1.2開始在Canvas上繪制元素 71
6.1.3繪制一條直線 71
6.1.4為直線設定樣式 72
6.1.5繪制多條直線 73
6.2 使用Canvas繪制圖形 76
6.2.1繪制矩形 76
6.2.2繪制圓形 78
6.3 圖形變換 85
6.4 圖形的組合 89
6.4.1繪制兩個圖形 89
6.4.2新圖形和原圖形之間的關系 90
6.4.3加色處理 91
6.5 圖像處理 91
6.5.1加載圖像 92
6.5.2圖像剪裁 94
6.5.3像素處理 95
第7章 CSS選擇器 97
7.1 基本選擇器 97
7.1.1id選擇器 97
7.1.2class選擇器 98
7.1.3元素選擇器 103
7.2 基本選擇器綜合使用 104
7.2.1選擇器的嵌套 104
7.2.2基本選擇器優先級問題 109
7.2.3同時設定多個元素樣式 110
7.3 偽類選擇器 111
7.3.1狀態選擇器 111
7.3.2:before和:after 116
7.4 位置選擇器 120
7.4.1.:first-child 120
7.4.2:last-child 121
7.4.3:nth-child(n) 122
7.4.4:nth-of-type(n) 123
7.5 屬性選擇器 123
7.5.1[attribute] 123
7.5.2[attribute=value] 124
7.5.3[attribute~=value] 125
7.6 其他選擇器 126
第8章 元素定位 127
8.1static 127
8.2relative 129
8.3absolute 130
8.4fixed 132
8.5float浮動布局 133
第9章 移動元素單位 137
9.1px 137
9.1.1需求描述一 138
9.1.2需求描述二 140
9.2em 143
9.3rem 144
9.3.1需求描述一 145
9.3.2需求描述二 146
第10章 盒模型 148
10.1內容 149
10.1.1text-align 149
10.1.2line-height 150
10.1.3字體 152
10.1.4截斷 153
10.2內邊距邊界 155
10.3邊框邊界 156
10.4外邊距邊界 161
第11章 Flex布局——FlexBox 162
第12章 使用CSS3新特性 188
12.1transform屬性 188
12.2translate方法 189
12.3rotate方法 194
12.4scale()方法 196
12.5skew()方法 197
12.6transition方法 203
12.7幀動畫 212
第13章 DOM操作 229
13.1DOM是什么 229
13.2通過DOM獲取文檔元素 230
13.2.1getElementById()方法 230
13.2.2innerHTML方法 230
13.2.3getElementsByTagName()方法 233
13.2.4getElementsByClassName()方法 234
13.3DOM節點 236
13.3.1節點之間的關系 236
13.3.2節點的屬性 240
13.4DOM事件 245
13.4.1鼠標單擊事件onclick 246
13.4.2表單改變事件onchange() 247
13.4.3完成加載事件onload1 248
第14章 JavaScript對象 249
14.1數組 249
14.1.1Array對象的屬性 250
14.1.2Array對象的方法 250
14.1.3數組遍歷 254
14.2字符串對象 254
14.2.1String對象的屬性 254
14.2.2String對象的方法 255
14.3日期 257
14.3.1初始化一個日期 258
14.3.2獲取日期參數 258
第15章 JavaScript基本語法 261
15.1開始使用JavaScript 261
15.2變量 265
15.3基本數據類型 265
15.4基本語句 266
15.4.1if else語句 266
15.4.2循環語句 267
15.5函數 267
15.6對象 268
第16章 Window對象 270
16.1setInterval()方法和clearInterval()方法 270
16.2setTimeout()方法和clearTimeout()方法 274
16.3Location對象 277
第17章 函數 279
17.1函數的定義 279
17.1.1初識函數 279
17.1.2匿名函數 280
17.1.3自我調用函數 280
17.2函數調用 281
17.3函數的作用域 281
17.4函數的參數 283
第18章 jQuery中的選擇器 284
18.1選取所有元素 284
18.2基本選擇器 288
18.2.1id選擇器 288
18.2.2class選擇器 288
18.2.3元素選擇器 291
18.2.4組合使用基本選擇器 292
18.3位置選擇器 293
18.3.1選擇特殊位置 293
18.3.2任意位置選擇器 295
18.4屬性選擇器 297
18.5表單選擇器 299
18.5.1根據type選擇對應的input 299
18.5.2狀態選擇器 300
18.6靈活使用各種選擇器 301
第19章 jQuery中的DOM方法 303
19.1獲取上層元素 303
19.1.1parent()方法 303
19.1.2parents()方法 305
19.1.3parentsUntil() 方法 306
19.2獲取后代元素 307
19.2.1children()方法 307
19.2.2find()方法 309
19.3選擇兄弟節點 310
19.3.1siblings()方法 310
19.3.2next()方法、nextAll()方法和nextUntil()方法 312
19.4jQuery與JavaScript的DOM選擇對比 314
19.5jQuery中其他DOM節點選擇方法 315
19.5.1first()和last() 315
19.5.2eq() 315
19.5.3filter()方法和not()方法 316
第20章 jQuery操縱CSS樣式 318
20.1css()方法——直接控制元素樣式 318
20.1.1獲取某個元素的CSS屬性值 318
20.1.2設置元素的CSS屬性 319
20.2其他CSS方法 323
20.2.1和元素尺寸相關的方法 323
20.2.2和位置相關的方法 324
第21章 jQuery中的動畫效果 328
21.1基本動畫效果 328
21.1.1顯示和隱藏 328
21.1.2淡入和淡出 331
21.1.3滑動 333
21.2復雜動畫效果 335
21.3jQuery中的動畫隊列 342
21.4停止動畫 344
第22章 jQuery中的AJAX 348
22.1環境搭建 349
22.2load()方法 350
22.3$.get()方法和$.post()方法 352
22.3.1$.get()方法和$.post()方法的原理和使用 352
22.3.2實戰訓練 356
22.4ajax()方法 360
22.5ajaxStart()和ajaxComplete()方法 364
第23章 jQuery Mobile組件 367
23.1定義一個移動應用界面——page組件 367
23.1.1指定一個頁面 367
23.1.2為頁面劃分不同的區域 368
23.2添加功能按鈕——button組件 369
23.2.1按鈕組件的定義方式 369
23.2.2按鈕組件樣式設定 371
23.2.3按鈕組 373
23.3菜單欄 374
23.4定義可滑動的面板——panel組件 376
23.5彈框組件 379
23.5.1定義基本彈框 379
23.5.2裝飾彈窗 381
23.6在移動應用中添加響應式表格 385
23.6.1回流表格 385
23.6.2列切換表格 387
第24章 jQuery Mobile的觸摸事件 389
24.1開始使用jQuery Mobile 390
24.2jQuery Mobile事件 390
24.3觸摸事件 391
24.3.1tap——手指單擊一次 391
24.3.2taphold——手指長按事件 393
24.3.3swipe——滑動事件 394
24.3.4設備轉動事件 396
24.3.5屏幕滾動事件 398
24.3.6頁面事件 399
第25章 jQuery Mobile表單 401
25.1jQuery Mobile中表單的基本結構 401
25.2表單樣式 402
25.2.1隱藏標簽內容 402
25.2.2為輸入框添加小圖標 403
25.3表單的種類 404
25.3.1搜索框 405
25.3.2滑塊輸入 405
25.3.3單選框和復選框 407
第26章 jQuery Mobile列表 410
26.1簡單列表 410
26.2復雜樣式的列表 414
26.2.1氣泡數字 414
26.2.2列表圖標 417
26.2.3復雜結構的列表 418
26.2.4為列表添加功能 420
第27章 jQuery Mobile項目結構 425
27.1基本結構 425
27.2頁面間的過渡 427
27.2.1淡入過渡——fade 427
27.2.2翻轉過渡——flip 428
27.2.3拋出效果——flow 429
27.2.4滑動效果——slide 430
27.2.5彈窗效果——pop 432
第28章 項目實戰:聊天APP的開發 434
28.1移動界面編寫 434
28.1.1聊天列表頁面框架搭建 434
28.1.2聊天列表制作 435
28.1.3頁面頭部和底部的編寫 437
28.2聊天詳情頁面搭建 439