HTML 5+CSS 3網(wǎng)頁(yè)設(shè)計(jì)經(jīng)典范例

01 HTML 5概述 11.1  HTML 5介紹 1
1.2  HTML 5的發(fā)展歷程 2
1.3  認(rèn)識(shí)HTML 5 3
1.3.1  兼容性 3
1.3.2  用戶(hù)優(yōu)先和效率 3
1.3.3  化繁為簡(jiǎn) 4
1.3.4  通用訪問(wèn) 4
1.4  HTML 5的新增功能 5
1.4.1  字符集和DOCTYPE的改進(jìn) 5
1.4.2  新元素 5
1.4.3  標(biāo)準(zhǔn)改進(jìn) 6
1.4.4  使用Selectors API簡(jiǎn)化選取操作 6
1.4.5  window.JSON 8
1.5  使用HTML 5的優(yōu)勢(shì) 9
1.6  HTML 5的未來(lái)發(fā)展 9
1.6.1  Internet Explorer 8 9
1.6.2  眾多全新瀏覽器的支持 9
1.7  本章小結(jié) 10
02 HTML 5與HTML4的區(qū)別 11
2.1  語(yǔ)法上的差異 11
2.1.1  HTML 5的語(yǔ)法變化 11
2.1.2  HTML 5中的標(biāo)記方法 12
2.1.3  HTML 5與舊版本的兼容性 12
2.2  元素上的差異 13
2.2.1  HTML 5中新增加的元素 13
2.2.2  HTML 5中廢除的元素 19
2.3  屬性上的差異 19
2.3.1  HTML 5中新增加的屬性元素 19
2.3.2  HTML 5中廢除的屬性 20
2.3.3  全局屬性 20
2.4  本章小結(jié) 22
03 HTML 5的結(jié)構(gòu) 23
3.1  新的主體結(jié)構(gòu)元素 23
3.1.1  article元素 23
3.1.2  section元素 24
3.1.3  nav元素 25
3.1.4  aside元素 27
3.1.5  time元素與微格式 28
3.1.6  pubdate屬性 29
3.2  新的非主體結(jié)構(gòu)元素 30
3.2.1  header元素 30
3.2.2   hgroup元素 30
3.2.3   footer元素 31
3.2.4   address元素 32
3.3   HTML 5的結(jié)構(gòu)闡述 32
3.3.1  HTML 5大綱 33
3.3.2  對(duì)新的結(jié)構(gòu)元素使用樣式 35
3.4  本章小結(jié) 36
04 繪圖功能的實(shí)現(xiàn) 37
4.1  canvas API概述 37
4.1.1  canvas是什么 37
4.1.2  canvas的歷史 38
4.1.3   canvas坐標(biāo) 38
4.1.4  什么情況下不使用canvas 39
4.1.5  替代內(nèi)容 39
4.1.6  CSS和canvas 39
4.1.7  瀏覽器對(duì)canvas的支持 39
4.1.8  canvas的核心Context 40
4.2  如何使用canvas API 40
4.2.1  檢測(cè)瀏覽器是否支持 40
4.2.2  在頁(yè)面中加入canvas 41
4.2.3  上機(jī)操作——繪制矩形 41
4.3  應(yīng)用canvas API繪制曲線路徑 45
4.3.1  路徑 45
4.3.2  上機(jī)操作——描邊樣式 46
4.3.3  上機(jī)操作——對(duì)矩形填充樣式 47
4.3.4  上機(jī)操作——繪制曲線 48
4.4  應(yīng)用canvas API繪制圖像 49
4.4.1  上機(jī)操作——在canvas中插入圖像 49
4.4.2  上機(jī)操作——繪制漸變圖像 50
4.4.3  上機(jī)操作——縮放canvas對(duì)象 52
4.4.4  上機(jī)操作——canvas變換 53
4.5  canvas文本應(yīng)用 55
4.5.1  上機(jī)操作——canvas 文本繪制 55
4.5.2  上機(jī)操作——應(yīng)用陰影 56
4.5.3  上機(jī)操作——像素?cái)?shù)據(jù) 57
4.6  實(shí)例精講——?jiǎng)討B(tài)時(shí)鐘 58
4.7  本章小結(jié) 62
05 網(wǎng)絡(luò)上的視頻和音頻應(yīng)用 63
5.1  HTML 5 中audio和video概述 63
5.1.1  視頻容器 63
5.1.2  音頻和視頻編解碼器 65
5.1.3  HTML 5音視頻的問(wèn)題 67
5.1.4  哪些瀏覽器支持Audio和Video元素 67
5.1.5  HTML 5音視頻支持格式 68
5.2  HTML 5中audio和video元素的應(yīng)用 69
5.2.1  檢測(cè)瀏覽器是否支持 69
5.2.2  audio元素 70
5.2.3  上機(jī)操作——使用audio元素 72
5.2.4  video元素 72
5.2.5  上機(jī)操作——使用video元素 74
5.3  實(shí)例精講——在HTML 4中實(shí)現(xiàn)音頻和視頻的播放 75
5.4  實(shí)例精講——在HTML 5中實(shí)現(xiàn)音頻和視頻的播放 78
5.5  本章小結(jié) 82
06 表單的應(yīng)用 83
6.1  HTML 5 Forms概述  83
6.1.1  Forms和XForms 83
6.1.2  HTML 5 Forms的新特性 84
6.1.3  瀏覽器對(duì)HTML 5 Forms的支持情況 84
6.1.4  輸入型控件 86
6.2  表單新特性與函數(shù) 86
6.2.1  新增屬性 87
6.2.2  大幅度地增加與改良input元素的種類(lèi) 90
6.2.3  上機(jī)操作——對(duì)新的表單元素使用樣式 93
6.2.4  上機(jī)操作——追加output元素 95
6.3  驗(yàn)證表單 95
6.3.1  驗(yàn)證狀態(tài)對(duì)象 95
6.3.2  上機(jī)操作——自動(dòng)驗(yàn)證 96
6.3.3  上機(jī)操作——顯示驗(yàn)證 97
6.3.4  取消驗(yàn)證 98
6.3.5  上機(jī)操作——自定義錯(cuò)誤信息 98
6.4  實(shí)例精講——HTML 5中的Forms應(yīng)用 99
6.5  本章小結(jié) 102
07 全新的文件應(yīng)用 103
7.1  新增的頁(yè)面元素 103
7.1.1  上機(jī)操作——figure元素Forms 103
7.1.2  上機(jī)操作——figcaption元素Forms 104
7.1.3  上機(jī)操作——details元素Forms 104
7.1.4  上機(jī)操作——mark元素Forms 105
7.1.5  上機(jī)操作——progress元素Forms 105
7.1.6  上機(jī)操作——meter元素Forms 106
7.1.7  上機(jī)操作——menu元素Forms 107
7.1.8  上機(jī)操作——command元素Forms 108
7.2  增強(qiáng)的頁(yè)面元素 109
7.2.1  上機(jī)操作——ol列表 109
7.2.2  上機(jī)操作——dl列表 111
7.2.3  上機(jī)操作——cite元素 111
7.2.4  上機(jī)操作——small元素 112
7.3  文件API 112
7.3.1  filelist對(duì)象與file對(duì)象 112
7.3.2  blob對(duì)象 113
7.3.3  FileReader接口 113
7.4  拖放API 115
7.4.1  實(shí)現(xiàn)拖放API的過(guò)程 115
7.4.2  dataTransfer對(duì)象的屬性與方法 116
7.4.3  上機(jī)操作——設(shè)置拖放時(shí)的
         視覺(jué)效果 116
7.4.4  上機(jī)操作——自定義拖放圖標(biāo) 118
7.5  實(shí)例精講——在HTML 5中實(shí)現(xiàn)文件拖放 120
7.6  本章小結(jié) 123
08  地理位置信息處理 125
8.1  關(guān)于地理位置信息 125
8.1.1  經(jīng)度和緯度坐標(biāo) 125
8.1.2  IP地址定位數(shù)據(jù) 126
8.1.3  GPS地理定位數(shù)據(jù) 126
8.1.4  Wi-Fi地理定位數(shù)據(jù) 126
8.1.5  手機(jī)地理定位數(shù)據(jù) 126
8.1.6  用戶(hù)自定義的地理定位 127
8.2  瀏覽器對(duì)Geolocation的支持 127
8.2.1  Geolocation API概述 127
8.2.2  HTML 5 Geolocation的瀏覽器支持情況 130
8.3  隱私的處理 131
8.3.1  應(yīng)用隱私保護(hù)機(jī)制 131
8.3.2  處理位置信息 132
8.4  使用Geolocation API 132
8.4.1  檢測(cè)瀏覽器是否支持 132
8.4.2  位置請(qǐng)求 133
8.5  實(shí)例精講——在網(wǎng)頁(yè)中使用電子地圖 135
8.6  本章小結(jié) 13609 Web本地存儲(chǔ)應(yīng)用 137
9.1  Web Storage概述 137
9.1.1  Web Storage介紹 137
9.1.2  上機(jī)操作——簡(jiǎn)易的Web留言本 138
9.1.3  上機(jī)操作——簡(jiǎn)單的數(shù)據(jù)庫(kù)應(yīng)用 142
9.2  Web Storage的瀏覽器支持情況 145
9.3  使用Web Storage API 145
9.3.1  檢測(cè)瀏覽器的支持情況 145
9.3.2  上機(jī)操作——設(shè)置和獲取數(shù)據(jù) 147
9.3.3  封堵數(shù)據(jù)泄露 148
9.3.4  localStorage與sessionStorage 148
9.3.5  探索Web Storage 148
9.4  本地?cái)?shù)據(jù)庫(kù) 149
9.4.1  什么是本地?cái)?shù)據(jù)庫(kù) 149
9.4.2  用executesql來(lái)執(zhí)行查詢(xún)的實(shí)現(xiàn)方法 150
9.4.3  上機(jī)操作——使用數(shù)據(jù)庫(kù)實(shí)現(xiàn)網(wǎng)頁(yè)留言 150
9.4.4  transaction方法 155
9.5  本章小結(jié) 156
10 離線Web應(yīng)用 157
10.1  離線Web概述 157
10.1.1  離線Web介紹 157
10.1.2  離線Web應(yīng)用的瀏覽器支持情況   158
10.2  使用離線Web 158
10.2.1  構(gòu)建簡(jiǎn)單的離線應(yīng)用程序 158
10.2.2  支持離線行為 159
10.2.3  mannifest文件介紹   159
10.2.4  上機(jī)操作——applicationCache對(duì)象 161
10.3  實(shí)例精