HTML5+CSS3從入門到精通

目  錄 
 
Chapter01   HTML5概述
1.1 什么是HTML5...................................................................................... 2
1.2 HTML5發(fā)展歷程.................................................................................. 2
1.3 認(rèn)識(shí)HTML5.......................................................................................... 3
1.3.1 兼容性 ............................................................................................. 3
1.3.2 用戶優(yōu)先和效率................................................................................. 4
1.3.3 化繁為簡.......................................................................................... 4
1.3.4 通用訪問........................................................................................... 5
1.4 HTML5新增功能.................................................................................. 5
1.4.1 字符集和DOCTYPE的改進(jìn)................................................................. 5
1.4.2 語義化的標(biāo)簽.................................................................................... 6
1.4.3 新元素............................................................................................. 6
1.4.4 頁面的交互性更加強(qiáng)大........................................................................ 7
1.4.5 標(biāo)準(zhǔn)改進(jìn).......................................................................................... 8
1.4.6 使用Selectors API簡化選取操作.......................................................... 8
1.5 使用HTML5的優(yōu)勢.............................................................................10
1.6 HTML5的發(fā)展趨勢.............................................................................12
本章小結(jié)............................................................................................... 13
 
 
Chapter02  HTML5的新增元素
2.1 語法差異................................................................................................15
2.1.1 HTML5的語法變化...........................................................................15
2.1.2 HTML5的標(biāo)記方法...........................................................................15
2.1.3 HTML5與舊版本的兼容性..................................................................16
2.2 元素和屬性差異....................................................................................17
2.2.1 HTML5中新增的元素.........................................................................17
2.2.2 HTML5中廢棄的元素....................................................................... 25
2.3 HTML5中新增的元素屬性................................................................. 26
2.3.1 表單相關(guān)屬性.................................................................................. 26
2.3.2 其他相關(guān)屬性.................................................................................. 26
2.3.3 HTML5中廢棄的屬性....................................................................... 27
2.3.4 全局屬性........................................................................................ 27
2.4 新的主體結(jié)構(gòu)元素................................................................................ 29
2.4.1 article元素...................................................................................... 29
2.4.2 section元素.................................................................................... 30
2.4.3 nav元素......................................................................................... 32
2.4.4 aside元素....................................................................................... 34
2.4.5 time元素與微格式............................................................................ 34
2.4.6 pubdate屬性.................................................................................. 35
2.5 新的非主體結(jié)構(gòu)元素............................................................................ 36
2.5.1 header元素.................................................................................... 36
2.5.2 hgroup元素.................................................................................... 37
2.5.3 footer元素...................................................................................... 39
2.5.4 address元素.................................................................................. 40
本章小結(jié)............................................................................................... 41
 
 
Chapter03  HTML5繪圖功能
3.1 canvas概述........................................................................................ 43
3.1.1 canvas是什么................................................................................. 43
3.1.2 canvas的主要應(yīng)用領(lǐng)域.................................................................... 43
3.1.3 canvas歷史.................................................................................... 43
3.1.4 canvas坐標(biāo).................................................................................... 44
3.1.5 CSS和canvas................................................................................ 45
3.2 使用canvas API................................................................................ 45
3.2.1 檢測瀏覽器是否支持......................................................................... 45
3.2.2 在頁面中加入canvas....................................................................... 46
3.2.3 繪制矩形與三角形............................................................................ 48
3.3 繪制曲線路徑........................................................................................51
3.3.1 路徑................................................................................................51
3.3.2 描邊樣式........................................................................................ 53
3.3.3 填充樣式........................................................................................ 54
3.3.4 繪制樹干........................................................................................ 55
3.3.5 繪制曲線......................................................................................... 56
3.4 繪制圖像............................................................................................... 57
3.4.1 插入圖像........................................................................................ 58
3.4.2 繪制漸變圖像.................................................................................. 59
3.4.3 縮放對(duì)象........................................................................................ 62
3.4.4 變換對(duì)象........................................................................................ 63
3.5 canvas文本應(yīng)用................................................................................ 64
3.5.1 文本繪制........................................................................................ 65
3.5.2 應(yīng)用陰影......................................................................................... 66
3.5.3 像素?cái)?shù)據(jù)........................................................................................ 67
實(shí)例精講動(dòng)態(tài)時(shí)鐘....................................................................................... 68
本章小結(jié)............................................................................................... 73
 
Chapter04  視頻和音頻應(yīng)用
4.1 audio和video概述............................................................................. 75
4.1.1 HTML5中音視頻的問題.................................................................... 75
4.1.2 瀏覽器支持情況............................................................................... 75
4.2 使用audio和video元素..................................................................... 76
4.2.1 檢測瀏覽器是否支持......................................................................... 76
4.2.2 audio元素....................................................................................... 77
4.2.3 使用audio元素................................................................................ 79
4.2.4 video元素....................................................................................... 80
4.2.5 使用video元素................................................................................ 80
本章小結(jié)............................................................................................... 81
 
Chapter05   表單應(yīng)用
5.1 HTML5 form概述............................................................................. 83
5.1.1 HTML5 form的新特性...................................................................... 83
5.1.2 瀏覽器支持情況............................................................................... 83
5.1.3 輸入型控件..................................................................................... 85
5.2 新的表單元素....................................................................................... 87
5.3 表單新屬性........................................................................................... 89
實(shí)例精講form應(yīng)用..................................................................................... 92
本章小結(jié)...............................................................................................95
 
 
Chapter06   HTML5拖放
6.1 拖放API............................................................................................... 97
6.1.1 實(shí)現(xiàn)拖放API的過程.......................................................................... 97
6.1.2 dataTransfer對(duì)象的屬性與方法........................................................ 97
6.1.3 拖放列表....................................................................................... 100
實(shí)例精講重現(xiàn)郵箱附件拖拽上傳............................................................... 103
本章小結(jié)............................................................................................. 106
 
 
Chapter07  地理位置信息處理
7.1 關(guān)于地理位置信息.............................................................................. 108
7.1.1 經(jīng)度和緯度坐標(biāo).............................................................................. 108
7.1.2 IP地址定位數(shù)據(jù).............................................................................. 108
7.1.3 GPS地理定位數(shù)據(jù).......................................................................... 108
7.1.4 Wi-Fi地理定位數(shù)據(jù)......................................................................... 109
7.1.5 用戶自定義的地理定位..................................................................... 109
7.2 瀏覽器支持情況.................................................................................. 109
7.2.1 Gerlocation API概述...................................................................... 109
7.2.2 HTML5 Geolocation的瀏覽器支持情況............................................. 112
7.3 隱私的處理.......................................................................................... 112
7.3.1 應(yīng)用隱私保護(hù)機(jī)制........................................................................... 112
7.3.2 處理位置信息................................................................................. 113
7.4 使用Geolocation API..................................................................... 113
7.4.1 檢測瀏覽器是否支持........................................................................ 113
7.4.2 位置請(qǐng)求....................................................................................... 114
實(shí)例精講在地圖上顯示你的位置............................................................... 117
本章小結(jié)............................................................................................. 120
 
Chapter08   本地儲(chǔ)存應(yīng)用
8.1 webStorage概述............................................................................ 122
8.1.1 webStorage簡介........................................................................... 122
8.1.2 簡單的數(shù)據(jù)庫應(yīng)用........................................................................... 122
8.2 瀏覽器支持情況.................................................................................. 124
8.3 使用webstorage API..................................................................... 124
8.3.1 存儲(chǔ)和獲取數(shù)據(jù).............................................................................. 125
8.3.2 localstorage和sessionstorage....................................................... 126
8.3.3 Web Storage事件機(jī)制................................................................... 126
8.4 本地?cái)?shù)據(jù)庫.......................................................................................... 127
8.4.1 什么是本地?cái)?shù)據(jù)庫........................................................................... 127
8.4.2 用executesql執(zhí)行查詢.................................................................... 128
8.4.3 使用數(shù)據(jù)庫實(shí)現(xiàn)網(wǎng)頁留言.................................................................. 131
本章小結(jié)....................................................................................... 135
 
Chapter09   Web與Web Workers API應(yīng)用
9.1 離線Web概述..................................................................................... 137
9.1.1 離線Web簡介................................................................................ 137
9.1.2 離線Web應(yīng)用的瀏覽器支持情況........................................................ 137
9.2 使用離線Web..................................................................................... 137
9.2.1 構(gòu)建簡單的離線應(yīng)用程序.................................................................. 138
9.2.2 支持離線行為................................................................................. 139
9.2.3 mannifest文件............................................................................... 140
9.2.4 applicationCache對(duì)象.................................................................... 142
9.4 Web Workers概述.......................................................................... 143
9.4.1 Web Workers簡介.........................................................................144
9.4.2 Web Workers的簡單應(yīng)用...............................................................144
9.5 使用Web Workers API.................................................................. 147
9.5.1 檢測瀏覽器是否支持........................................................................ 147
9.5.2 創(chuàng)建Web Workers.........................................................................148
9.5.3 多線程文件的加載與執(zhí)行.................................................................. 148
9.5.4 與Web Workers通信......................................................................148
實(shí)例精講離線Web的具體應(yīng)用................................................................. 151
本章小結(jié)............................................................................................. 155
 
 
Chapter10   CSS基礎(chǔ)
10.1 CSS概述........................................................................................... 157
10.1.1 CSS簡介................................................................................... 157
10.1.2 CSS的特點(diǎn)及優(yōu)點(diǎn)....................................................................... 157
10.1.3 CSS的基本語法.......................................................................... 158
10.1.4 引入CSS的方法.......................................................................... 158
10.2 CSS選擇器....................................................................................... 161
10.2.1 三大基礎(chǔ)選擇器.......................................................................... 161
10.2.2 集體選擇器................................................................................. 164
10.2.3 屬性選擇器................................................................................. 165
10.2.4 后代選擇器................................................................................. 167
10.2.5 子元素選擇器.............................................................................. 170
10.2.6 相鄰兄弟選擇器........................................................................... 171
10.2.7 偽類.......................................................................................... 173
10.2.8 偽元素....................................................................................... 175
10.3 CSS的繼承....................................................................................... 181
10.3.1 繼承關(guān)系.................................................................................... 181
10.3.2 CSS繼承的局限性....................................................................... 182
10.4 CSS數(shù)值單位...........................................................................184
10.5 CSS相對(duì)數(shù)值單位...........................................................................184
本章小結(jié)............................................................................................. 185
 
Chapter11   CSS樣式
11.1 字體樣式............................................................................................ 187
11.2 段落樣式............................................................................................ 197
11.3 邊框.................................................................................................. 205
11.4 外輪廓.............................................................................................. 209
11.5 列表樣式簡介.................................................................................... 214
11.6 列表相關(guān)屬性.................................................................................... 217
本章小結(jié)............................................................................................. 223
 
Chapter12   CSS背景屬性與寬/高
12.1 設(shè)置背景內(nèi)容................................................................................... 225
12.2 設(shè)置背景平鋪................................................................................... 229
12.3 設(shè)置背景固定/滾動(dòng).......................................................................... 233
12.4 設(shè)置背景的位置............................................................................... 235
12.5 背景簡寫屬性................................................................................... 239
12.6 寬/高屬性.......................................................................................... 239
本章小結(jié)............................................................................................. 242
Chapter13   CSS顯示相關(guān)
13.1 設(shè)置可見性....................................................................................... 244
13.1.1 元素隱藏................................................................................... 244
13.2 內(nèi)容溢出與隱藏................................................................................ 249
本章小結(jié)............................................................................................. 252
Chapter14  CSS盒子模型
14.1 盒子模型簡介................................................................................... 254
14.2 設(shè)置內(nèi)/外邊距.................................................................................. 254
本章小結(jié)............................................................................................. 265
Chapter15   CSS定位機(jī)制
15.1 CSS定位機(jī)制簡介.......................................................................... 267
15.2 常規(guī)定位與浮動(dòng)定位........................................................................ 268
15.2.1 常規(guī)定位................................................................................... 268
15.2.2 浮動(dòng)定位................................................................................... 268
15.3 position屬性................................................................................... 272
15.3.1 定位................................................................................... 272
15.3.2 相對(duì)定位................................................................................... 275
15.3.3 固定定位................................................................................... 277
15.4 Z軸索引的優(yōu)先級(jí)設(shè)置..................................................................... 278
實(shí)例精講導(dǎo)航欄....................................................................................... 281
本章小結(jié)............................................................................................. 290
Chapter16   光標(biāo)和濾鏡
16.1 光標(biāo)屬性........................................................................................... 292
16.2 濾鏡屬性........................................................................................... 293
本章小結(jié)............................................................................................. 295
Chapter17   CSS3概述及新增功能
17.1 CSS3簡介....................................................................................... 297
17.2 新增長度單位................................................................................... 297
17.3 新增結(jié)構(gòu)性偽類............................................................................... 299
17.4 新增UI元素狀態(tài)偽類....................................................................... 306
17.5 新增屬性和目標(biāo)偽類........................................................................ 308
本章小結(jié)............................................................................................. 313
Chapter18   CSS3文本與邊框樣式
18.1 文本陰影text-shadow................................................................. 315
18.2 文本溢出text-overflow............................................................... 316
18.3 文本換行word-wrap..................................................................... 318
18.4 單詞拆分word-break................................................................... 319
18.5 圓角邊框border-radius............................................................... 320
18.6 盒子陰影box-shadow................................................................. 322
18.7 邊界邊框border-image............................................................... 324
本章小結(jié)................................................................................. 326
 
Chapter19   CSS3背景
19.1 多重背景圖片................................................................................... 328
19.2 背景尺寸........................................................................................... 329
19.3 背景的繪制區(qū)域................................................................................ 330
本章小結(jié)............................................................................................. 332
 
Chapter20   CSS3漸變
20.1 漸變簡介........................................................................................... 334
20.2 瀏覽器支持情況............................................................................... 334
20.3 線性漸變........................................................................................... 335
20.4 徑向漸變........................................................................................... 339
本章小結(jié)............................................................................................. 341
Chapter21   CSS3轉(zhuǎn)換
21.1 CSS3轉(zhuǎn)換及瀏覽器支持................................................................ 343
21.2 2D轉(zhuǎn)換............................................................................................. 343
21.3 3D轉(zhuǎn)換............................................................................................. 353
本章小結(jié)............................................................................................. 360
 
Chapter22   CSS3過渡
22.1 過渡簡介........................................................................................... 362
22.2 瀏覽器支持情況............................................................................... 362
22.3 實(shí)現(xiàn)過渡........................................................................................... 363
22.4 過渡屬性........................................................................................... 367
實(shí)例精講模擬蘋果桌面............................................................................. 368
本章小結(jié)............................................................................................. 370
Chapter23   CSS3動(dòng)畫
23.1 動(dòng)畫簡介........................................................................................... 372
23.2 瀏覽器支持情況............................................................................... 372
23.3 實(shí)現(xiàn)動(dòng)畫........................................................................................... 373
23.4 動(dòng)畫屬性........................................................................................... 376
實(shí)例精講太陽系星球運(yùn)轉(zhuǎn)圖...................................................................... 378
本章小結(jié)............................................................................................. 383
Chapter24   CSS3多列布局
24.1 多列布局簡介................................................................................... 385
24.2 瀏覽器支持情況............................................................................... 385
24.3 多列布局屬性................................................................................... 386
本章小結(jié)............................................................................................. 390
Chapter25   CSS3用戶界面
25.1 用戶界面簡介................................................................................... 392
25.2 瀏覽器支持情況............................................................................... 392
25.3 用戶界面屬性................................................................................... 393
本章小結(jié)............................................................................................. 400
Chapter26   CSS3彈性盒子
26.1 彈性盒子簡介................................................................................... 402
26.2 瀏覽器支持情況............................................................................... 402
26.3 設(shè)置彈性盒子................................................................................... 403
本章小結(jié)............................................................................................. 422
Chapter27  CSS3多媒體查詢
27.1 多媒體查詢簡介............................................................................... 424
27.2 瀏覽器支持情況............................................................................... 424
27.3 多媒體查詢的應(yīng)用............................................................................ 424
實(shí)例精講自適應(yīng)導(dǎo)航欄............................................................................. 428
本章小結(jié)............................................................................................. 434
 
Appendix   附錄
附錄A HTML5標(biāo)簽................................................................................ 436
附錄B HTML事件屬性........................................................................... 450
附錄C CSS屬性一覽.............................................................................. 453
附錄D CSS3選擇器............................................................................... 463
附錄E JavaScript對(duì)象參考手冊(cè)......................................................... 464
附錄F jQuery參考手冊(cè).......................................................................... 471
附錄G HTML支持的符號(hào)....................................................................... 479