HTML5秘籍

第一部分 　認(rèn)識(shí)新語(yǔ)言
第1章 　HTML5簡(jiǎn)介　　2
1.1 　HTML5的故事　　2
1.1.1 　XHTML 1.0：更嚴(yán)格的標(biāo)準(zhǔn)　　2
1.1.2 　XHTML 2：意想不到的失敗　　3
1.1.3 　HTML5：起死回生　　3
1.1.4 　HTML：活著的語(yǔ)言　　5
1.2 　HTML5的三個(gè)主要原理　　6
1.2.1 　不破壞Web　　6
1.2.2 　修補(bǔ)牛蹄子路　　7
1.2.3 　實(shí)用至上　　8
1.3 　HTML5標(biāo)記初體驗(yàn)　　8
1.3.1 　HTML5文檔類型　　10
1.3.2 　字符編碼　　11
1.3.3 　頁(yè)面語(yǔ)言　　11
1.3.4 　添加樣式表　　12
1.3.5 　添加JavaScript　　12
1.3.6 　最終結(jié)果　　13
1.4 　HTML5語(yǔ)法　　13
1.4.1 　放松的規(guī)則　　14
1.4.2 　HTML5驗(yàn)證　　15
1.4.3 　XHTML的回歸　　17
1.5 　HTML5元素家族　　18
1.5.1 　新增的元素　　18
1.5.2 　刪除的元素　　18
1.5.3 　改變的元素　　19
1.5.4 　調(diào)整的元素　　20
1.5.5 　標(biāo)準(zhǔn)化的元素　　21
1.6 　今天開始用HTML5　　22
1.6.1 　了解瀏覽器支持情況　　23
1.6.2 　瀏覽器裝機(jī)情況統(tǒng)計(jì)　　24
1.6.3 　通過(guò)Modernizr檢測(cè)功能　　26
1.6.4 　使用“膩?zhàn)幽_本”填補(bǔ)功能
缺陷　　28
第2章 　構(gòu)造網(wǎng)頁(yè)的新方式　　30
2.1 　語(yǔ)義元素　　30
2.2 　改造傳統(tǒng)的HTML頁(yè)面　　32
2.2.1 　構(gòu)造頁(yè)面的老辦法　　32
2.2.2 　使用HTML5構(gòu)造頁(yè)面　　36
2.2.3 　用標(biāo)注副標(biāo)題　　39
2.2.4 　用添加插圖　　40
2.2.5 　用添加附注　　42
2.3 　瀏覽器對(duì)語(yǔ)義元素的支持情況　　43
2.4 　使用語(yǔ)義元素設(shè)計(jì)站點(diǎn)　　45
2.4.1 　理解 　　46
2.4.2 　用標(biāo)注導(dǎo)航鏈接　　48
2.4.3 　理解　　52
2.4.4 　理解區(qū)塊　　54
2.5 　HTML5綱要　　55
2.5.1 　如何查看綱要　　55
2.5.2 　基本綱要　　56
2.5.3 　分塊元素　　58
2.5.4 　解決一個(gè)綱要問(wèn)題　　60
第3章 　有意義的標(biāo)記　　64
3.1 　回顧語(yǔ)義元素　　64
3.1.1 　使用標(biāo)注日期和時(shí)間　　65
3.1.2 　使用標(biāo)注JavaScript返
回值　　66
3.1.3 　使用標(biāo)注突顯文本　　68
3.2 　其他語(yǔ)義標(biāo)準(zhǔn)　　69
3.2.1 　ARIA　　70
3.2.2 　RDFa　　71
3.2.3 　Microformats　　71
3.2.4 　Microdata　　76
3.3 　Google Rich Snippets　　79
3.3.1 　增強(qiáng)搜索結(jié)果　　79
3.3.2 　菜譜搜索引擎　　82
第二部分 　制作新網(wǎng)頁(yè)
第4章 　Web表單　　86
4.1 　理解表單　　86
4.2 　傳統(tǒng)表單翻新　　88
4.2.1 　通過(guò)占位符文本添加提示　　91
4.2.2 　焦點(diǎn)：挑選正確的起點(diǎn)　　93
4.3 　驗(yàn)證：阻止錯(cuò)誤　　93
4.3.1 　HTML5驗(yàn)證的原理　　94
4.3.2 　關(guān)閉驗(yàn)證　　95
4.3.3 　驗(yàn)證樣式掛鉤　　96
4.3.4 　使用正則表達(dá)式　　97
4.3.5 　自定義驗(yàn)證　　98
4.3.6 　瀏覽器對(duì)驗(yàn)證的支持　　99
4.4 　新的輸入控件　　102
4.4.1 　電子郵件地址　　104
4.4.2 　網(wǎng)址　　105
4.4.3 　搜索框　　105
4.4.4 　電話號(hào)碼　　105
4.4.5 　數(shù)值　　105
4.4.6 　滑動(dòng)條　　106
4.4.7 　日期和時(shí)間　　107
4.4.8 　顏色　　108
4.5 　新元素　　108
4.5.1 　使用顯示輸入建議　　109
4.5.2 　進(jìn)度條和計(jì)量條　　111
4.5.3 　使用和創(chuàng)建工具條和菜單　　113
4.6 　網(wǎng)頁(yè)中的HTML編輯器　　113
4.6.1 　使用contentEditable編輯
元素　　114
4.6.2 　使用designMode編輯頁(yè)面　　116
第5章 　音頻與視頻　　118
5.1 　理解今天的視頻　　118
5.2 　HTML5音頻與視頻　　119
5.2.1 　使用播放點(diǎn)噪音　　120
5.2.2 　了解　　122
5.3 　格式之爭(zhēng)與后備措施　　123
5.3.1 　談?wù)劯袷健　?24
5.3.2 　瀏覽器對(duì)媒體格式的支持
情況　　125
5.3.3 　多種格式：如何討好每一款瀏覽器　　127
5.3.4 　使用元素　　128
5.3.5 　以Flash作后備　　129
5.4 　使用JavaScript控制播放器　　132
5.4.1 　添加音效　　133
5.4.2 　創(chuàng)建自定義視頻播放器　　136
5.4.3 　JavaScript媒體播放器　　138
5.4.4 　字幕與無(wú)障礙性　　140
第6章 　基本Canvas繪圖　　142
6.1 　Canvas起步　　142
6.1.1 　畫直線　　145
6.1.2 　路徑與形狀　　148
6.1.3 　繪制曲線　　149
6.1.4 　變換　　152
6.1.5 　透明度　　155
6.2 　構(gòu)建基本的畫圖程序　　157
6.2.1 　準(zhǔn)備工作　　158
6.2.2 　在畫布上繪圖　　160
6.2.3 　將畫布保存為圖像　　161
6.3 　瀏覽器對(duì)Canvas的支持情況　　164
6.3.1 　填平補(bǔ)齊Canvas　　164
6.3.2 　Canvas后備及功能檢測(cè)　　166
第7章 　高級(jí)Canvas技術(shù)　　168
7.1 　高級(jí)Canvas繪圖　　168
7.1.1 　繪制圖像　　168
7.1.2 　裁剪、切割和伸縮圖片　　170
7.1.3 　繪制文本　　172
7.2 　陰影與填充　　173
7.2.1 　添加陰影　　173
7.2.2 　填充圖案　　175
7.2.3 　填充漸變　　176
7.2.4 　綜合示例：繪制圖解　　180
7.3 　賦予圖形交互能力　　184
7.3.1 　記錄繪制的內(nèi)容　　184
7.3.2 　基于坐標(biāo)的碰撞檢測(cè)　　187
7.4 　給Canvas添加動(dòng)畫　　189
7.4.1 　基本的動(dòng)畫　　190
7.4.2 　多物體動(dòng)畫　　191
7.5 　實(shí)例：迷宮游戲　　195
7.5.1 　布置迷宮　　196
7.5.2 　讓笑臉動(dòng)起來(lái)　　198
7.5.3 　基于像素顏色的碰撞檢測(cè)　　199
第8章 　使用CSS3　　203
8.1 　使用CSS3　　203
8.1.1 　選擇一：用能用的　　204
8.1.2 　選擇二：將CSS功能作為
增強(qiáng)　　204
8.1.3 　選擇三：Modernizr　　205
8.1.4 　特定于瀏覽器的樣式　　208
8.2 　Web排版　　209
8.2.1 　Web字體格式　　211
8.2.2 　使用字體包　　212
8.2.3 　使用谷歌的Web字體　　214
8.2.4 　使用自己的字體　　216
8.2.5 　多欄文本　　218
8.3 　適用不同的設(shè)備　　220
8.3.1 　媒體查詢　　220
8.3.2 　高級(jí)媒體查詢　　224
8.3.3 　替換整個(gè)樣式表　　225
8.3.4 　識(shí)別移動(dòng)設(shè)備　　226
8.4 　多變的盒子　　227
8.4.1 　透明盒子　　227
8.4.2 　圓角盒子　　229
8.4.3 　背景盒子　　230
8.4.4 　陰影盒子　　231
8.4.5 　漸變盒子　　232
8.5 　創(chuàng)建過(guò)渡效果　　234
8.5.1 　基本的顏色過(guò)渡　　235
8.5.2 　更多的過(guò)渡思路　　237
8.5.3 　變換　　237
第三部分 　構(gòu)建桌面式Web應(yīng)用
第9章 　數(shù)據(jù)存儲(chǔ)　　242
9.1 　Web存儲(chǔ)簡(jiǎn)介　　242
9.1.1 　存儲(chǔ)數(shù)據(jù)　　244
9.1.2 　實(shí)戰(zhàn)：保存游戲中的最后
位置　　246
9.1.3 　瀏覽器對(duì)Web存儲(chǔ)的支持
情況　　247
9.2 　深入Web存儲(chǔ)　　248
9.2.1 　刪除數(shù)據(jù)項(xiàng)　　248
9.2.2 　查找所有數(shù)據(jù)項(xiàng)　　248
9.2.3 　保存數(shù)值和日期　　249
9.2.4 　保存對(duì)象　　250
9.2.5 　響應(yīng)存儲(chǔ)變化　　251
9.3 　讀取文件　　253
9.3.1 　取得文件　　254
9.3.2 　瀏覽器對(duì)File API的支持
情況　　254
9.3.3 　讀取文本文件　　255
9.3.4 　替換標(biāo)準(zhǔn)上傳控件　　257
9.3.5 　一次讀取多個(gè)文件　　257
9.3.6 　讀取圖片文件　　258
第10章 　離線應(yīng)用　　261
10.1 　通過(guò)描述文件緩存資源　　262
10.1.1 　創(chuàng)建描述文件　　262
10.1.2 　使用描述文件　　264
10.1.3 　把描述文件放到Web
服務(wù)器　　265
10.1.4 　更新描述文件　　267
10.1.5 　瀏覽器對(duì)離線應(yīng)用的支持
情況　　269
10.2 　實(shí)用緩存技術(shù)　　270
10.2.1 　訪問(wèn)未緩存的文件　　270
10.2.2 　添加后備內(nèi)容　　271
10.2.3 　檢測(cè)連接　　273
10.2.4 　通過(guò)JavaScript指定更新　　274
第11章 　與Web服務(wù)器通信　　277
11.1 　向Web服務(wù)器發(fā)送消息　　277
11.1.1 　XMLHttpRequest對(duì)象　　278
11.1.2 　向Web服務(wù)器提問(wèn)　　279
11.1.3 　取得新內(nèi)容　　283
11.2 　服務(wù)器發(fā)送事件　　286
11.2.1 　消息格式　　287
11.2.2 　通過(guò)服務(wù)器腳本發(fā)送消息　　288
11.2.3 　在網(wǎng)頁(yè)中處理消息　　289
11.2.4 　輪詢服務(wù)器端事件　　291
11.3 　Web Socket　　292
11.3.1 　訪問(wèn)Web Socket　　293
11.3.2 　簡(jiǎn)單的Web Socket客戶端　　294
11.3.3 　使用現(xiàn)成的Web Socket
服務(wù)器　　295
第12章 　更酷的JavaScript技術(shù)　　298
12.1 　地理定位　　298
12.1.1 　地理定位的基本原理　　299
12.1.2 　查找訪客的坐標(biāo)　　301
12.1.3 　處理錯(cuò)誤　　303
12.1.4 　設(shè)置地理定位選項(xiàng)　　305
12.1.5 　顯示地圖　　306
12.1.6 　跟蹤訪客移動(dòng)　　309
12.2 　Web Workers　　309
12.2.1 　費(fèi)時(shí)的任務(wù)　　311
12.2.2 　把任務(wù)放在后臺(tái)　　313
12.2.3 　處理Worker錯(cuò)誤　　316
12.2.4 　取消后臺(tái)任務(wù)　　316
12.2.5 　傳遞復(fù)雜消息　　317
12.3 　歷史管理　　320
12.3.1 　URL問(wèn)題　　320
12.3.2 　以往的解決方案：Hashbang
URL　　321
12.3.3 　HTML5的方案：會(huì)話歷史　　322
12.3.4 　瀏覽器對(duì)會(huì)話歷史的支持
情況　　325
第四部分 　附錄
附錄A 　CSS簡(jiǎn)明教程　　328
附錄B 　JavaScript簡(jiǎn)明教程　　342