HTML5和CSS3實(shí)例教程

第1 章 HTML5 和CSS3 概述　　1
1.1  一個(gè)新的Web 開(kāi)發(fā)平臺(tái)　　1
1.1.1  更多的描述性標(biāo)記　　1
1.1.2  較少依賴(lài)于插件的多媒體支持　　1
1.1.3  更強(qiáng)大的Web 應(yīng)用　　2
1.1.4  跨文檔消息通信　　2
1.1.5  Web Sockets　　2
1.1.6  客戶(hù)端存儲(chǔ)　　2
1.1.7  更精美的界面　　2
1.1.8  更強(qiáng)大的表單　　2
1.1.9  提升可訪問(wèn)性　　3
1.1.10  先進(jìn)的選擇器　　3
1.1.11  視覺(jué)效果　　3
1.2  向后兼容　　3
1.3  未來(lái)之路崎嶇不平　　4
1.3.1  IE 　　5
1.3.2  可訪問(wèn)性　　5
1.3.3  廢棄的標(biāo)簽　　6
1.3.4  企業(yè)利益的競(jìng)爭(zhēng)　　7
1.3.5  HTML5 和CSS3 仍在改進(jìn)　　8
第一部分  改善用戶(hù)界面
第2 章  新的結(jié)構(gòu)標(biāo)簽和屬性　　10
2.1  實(shí)例1：用語(yǔ)義化標(biāo)記重定義博客　　11
2.1.1  以正確的文檔類(lèi)型聲明為基礎(chǔ)　　13
2.1.2  頭部　　13
2.1.3  尾部　　14
2.1.4  導(dǎo)航　　14
2.1.5  區(qū)段和文章　　15
2.1.6  文章　　16
2.1.7  旁白和側(cè)邊欄　　17
2.1.8  旁白絕非頁(yè)面?zhèn)冗厵凇　?8
2.1.9  添加樣式　　19
2.1.10  回退　　21
2.2  實(shí)例2：使用自定義數(shù)據(jù)屬性創(chuàng)建彈出窗口　　22
2.2.1  行為與內(nèi)容的分離，或者說(shuō)為什么設(shè)置onclick 不好　　22
2.2.2  提升可訪問(wèn)性　　23
2.2.3  廢棄onclick 　　23
2.2.4  自定義數(shù)據(jù)屬性來(lái)解圍　　24
2.2.5  回退　　25
2.2.6  未來(lái)展望　　25
第3 章  創(chuàng)建易用的Web 表單　　27
3.1  實(shí)例3：使用新的輸入域描述數(shù)據(jù)　　28
3.1.1  改進(jìn)AwesomeCo 項(xiàng)目中的表單　　28
3.1.2  創(chuàng)建基礎(chǔ)表單　　29
3.1.3  使用range 類(lèi)型創(chuàng)建滑塊　　29
3.1.4  使用選值框處理數(shù)字　　30
3.1.5  日期控件　　30
3.1.6  email 類(lèi)型　　31
3.1.7  url 類(lèi)型　　31
3.1.8  color 類(lèi)型　　32
3.1.9  回退　　32
3.1.10  替換顏色選擇器　　33
3.1.11  Modernizr 　　34
3.2  實(shí)例4：使用autofocus 屬性定位第一個(gè)表單域元素　　34
3.3  實(shí)例5：使用placeholder 屬性進(jìn)行提示　　35
3.3.1  簡(jiǎn)單的注冊(cè)表單　　 36
3.3.2  阻止自動(dòng)完成　　 37
3.3.3  回退　　 38
3.4  實(shí)例6：基于contenteditable屬性實(shí)現(xiàn)在位編輯　　 42
3.4.1  賬戶(hù)表單　　42
3.4.2  持久化數(shù)據(jù)　　 44
3.4.3  回退　　44
3.4.4  創(chuàng)批建編輯頁(yè)面　　 44
3.4.5  未來(lái)展望　　 47
第4 章  用CSS3 打造更好的用戶(hù)界面　　48
4.1  實(shí)例7：使用偽類(lèi)渲染表格　　 49
4.1.1  優(yōu)化付款清單樣式　　 49
4.1.2  使用:nth-of-type 條紋化表格的行　　 51
4.1.3  使用:nth-child 對(duì)齊列文本　　 52
4.1.4  使用:last-child 加粗最后一行　　 53
4.1.5  使用:nth-last-child 向前查找元素　　 54
4.1.6  回退　　 55
4.1.7  修改html 代碼　　 55
4.1.8  使用JavaScript 　　 56
4.2  實(shí)例8：使用:after 和content支持打印頁(yè)面上的鏈接　　 57
4.2.1  使用CSS 　　 57
4.2.2  回退　　 58
4.3  實(shí)例9：創(chuàng)建多列布局　　 60
4.3.1  分欄　　 60
4.3.2  回退　　 63
4.4  實(shí)例10：使用媒體查詢(xún)構(gòu)建移動(dòng)設(shè)備界面　　65
4.4.1  回退　　66
4.4.2  未來(lái)展望　　66
第5 章  增強(qiáng)可訪問(wèn)性　　 67
5.1  實(shí)例11：使用ARIA 角色提供導(dǎo)航提示　　68
5.1.1  標(biāo)志角色　　68
5.1.2  文檔結(jié)構(gòu)角色　　70
5.1.3  回退　　71
5.2  實(shí)例12：創(chuàng)建可訪問(wèn)的可更新區(qū)域　　 71
5.2.1  創(chuàng)建頁(yè)面　　 72
5.2.2  polite 和assertive 更新　　 74
5.2.3  atomic 更新　　74
5.2.4  隱藏區(qū)域　　 74
5.2.5  回退　　76
5.2.6  未來(lái)展望　　 76
第二部分  新的影音解決方案
第6 章  在canvas 上繪圖　　 78
6.1  實(shí)例13：繪制logo　　 78
6.1.1  繪制logo 　　 80
6.1.2  添加文字　　 81
6.1.3  繪制線條　　 81
6.1.4  移動(dòng)原點(diǎn)　　82
6.1.5  添加顏色　　83
6.1.6  回退　　 84
6.2  實(shí)例14：使用RGraph 繪制統(tǒng)計(jì)圖　　 84
6.2.1  使用HTML 描述數(shù)據(jù)　　85
6.2.2  將HTML 內(nèi)容轉(zhuǎn)換為條形圖　　 86
6.2.3  顯示備用內(nèi)容　　87
6.2.4  回退　　 88
6.2.5  未來(lái)展望　　 90
第7 章  嵌入音頻和視頻　　 92
7.1  發(fā)展歷史　　 92
7.2  容器和編解碼器　　 93
7.2.1  視頻編解碼器　　 94
7.2.2  音頻編解碼器　　 95
7.2.3  容器和編解碼器協(xié)同工作　　 96
7.3  實(shí)例15：音頻　　 96
7.3.1  建立基本列表　　 97
7.3.2  回退　　 98
7.4  實(shí)例16：嵌入視頻　　 99
7.4.1  回退　　 101
7.4.2  HTML5 視頻的限制　　103
7.4.3  音頻、視頻和可訪問(wèn)性　　 104
7.4.4  未來(lái)展望　　105
第8 章  柔化視覺(jué)體驗(yàn)　　 106
8.1  實(shí)例17：創(chuàng)建圓角　　 106
8.1.1  圓角化登錄表單　　107
8.1.2  特定于瀏覽器的選擇器　　108
8.1.3  回退　　109
8.1.4  檢測(cè)對(duì)圓角的支持　　109
8.1.5  jQuery Corners 　　110
8.1.6  自制表單圓角插件　　111
8.1.7  生成圓角　　111
8.1.8  微調(diào)　　112
8.2  實(shí)例18：使用陰影、漸變和變換　　113
8.2.1  基礎(chǔ)結(jié)構(gòu)　　113
8.2.2  增加漸變　　115
8.2.3  給標(biāo)志加上陰影　　115
8.2.4  旋轉(zhuǎn)標(biāo)志　　116
8.2.5  調(diào)節(jié)背景的透明度　　117
8.2.6  回退　　118
8.2.7  旋轉(zhuǎn)　　119
8.2.8  漸變　　119
8.2.9  透明度　　120
8.2.10  整合　　120
8.3  實(shí)例19：使用實(shí)用的字體　　122
8.3.1  @font-face 　　122
8.3.2  字體格式　　123
8.3.3  改變字體　　124
8.3.4  回退　　125
8.3.5  未來(lái)展望　　126
第三部分  HTML5 延伸
第9 章  客戶(hù)端數(shù)據(jù)的使用　　128
9.1  實(shí)例20：使用localStorage 保存參數(shù)設(shè)置　　129
9.1.1  創(chuàng)建參數(shù)表單　　130
9.1.2  保存和加載設(shè)置　　131
9.1.3  應(yīng)用設(shè)置　　132
9.1.4  回退　　132
9.2  實(shí)例21：在客戶(hù)端關(guān)系數(shù)據(jù)庫(kù)中保存數(shù)據(jù)　　135
9.2.1  瀏覽器中的CRUD 　　135
9.2.2  留言的前端展現(xiàn)　　136
9.2.3  連接數(shù)據(jù)庫(kù)　　138
9.2.4  創(chuàng)建留言表　　139
9.2.5  加載留言　　139
9.2.6  獲取指定記錄　　140
9.2.7  插入、更新和刪除記錄　　141
9.2.8  包裝　　143
9.2.9  回退　　144
9.3  實(shí)例22：離線運(yùn)行　　145
9.3.1  使用manifest 定義緩存　　145
9.3.2  manifest 和緩存　　146
9.3.3  未來(lái)展望　　147
第10 章  使用其他API 錦上添花　　148
10.1  實(shí)例23：維護(hù)歷史記錄　　148
10.1.1  保存當(dāng)前狀態(tài)　　149
10.1.2  獲取先前狀態(tài)　　149
10.1.3  默認(rèn)狀態(tài)　　150
10.1.4  回退　　150
10.2  實(shí)例24：跨域?qū)υ挕　?51
10.2.1  聯(lián)系人列表　　152
10.2.2  發(fā)送消息　　153
10.2.3  支持頁(yè)面　　153
10.2.4  接收消息　　155
10.2.5  回退　　156
10.3  實(shí)例25：使用Web Sockets 進(jìn)行即時(shí)通信　　157
10.3.1  即時(shí)通信界面　　157
10.3.2  與服務(wù)器交互　　159
10.3.3  回退　　160
10.3.4  什么是Flash 套接字策略　　161
10.3.5  服務(wù)器　　162
10.4  實(shí)例26：Geolocation 　　162
10.4.1  定位Awesomeness 　　163
10.4.2  如何定位　　163
10.4.3  回退　　164
10.4.4  未來(lái)展望　　166
第11 章  未來(lái)的發(fā)展方向　　167
11.1  CSS3 變換　　167
11.2  Web Workers 　　170
11.3  原生拖放支持　　171
11.3.1  拖放事件　　172
11.3.2  釋放元素　　173
11.3.3  修改樣式　　174
11.3.4  拖動(dòng)文件　　175
11.3.5  并不完美　　175
11.4  WebGL 　　176
11.5  Indexed Database API　　176
11.6  客戶(hù)端表單驗(yàn)證　　176
11.7  前進(jìn)！ 　　177
附錄A  功能快速索引　　178
A.1  新元素　　178
A.2  屬性　　178
A.3  表單　　178
A.4  表單域?qū)傩浴　?79
A.5  可訪問(wèn)性　　179
A.6  多媒體　　180
A.7  CSS3 　　180
A.8  客戶(hù)端存儲(chǔ)　　181
A.9  其他API 　　181
附錄B  jQuery 入門(mén)　　183
B.1  加載jQuery　　183
B.2  jQuery 基礎(chǔ)　　183
B.3 修改內(nèi)容的方法　　184
B.3.1  hide 和show　　 184
B.3.2  html、val 和attr　　 184
B.3.3  append、prepend 和wrap　　 185
B.3.4  CSS 和類(lèi)　　 185
B.3.5  鏈　　186
B.4  創(chuàng)建元素　　 186
B.5  事件　　 187
B.5.1  綁定　　 187
B.5.2  原始事件　　 187
B.6  document.ready　　 188
附錄C  音頻和視頻編碼　　189
C.1  音頻編碼　　 189
C.2  為Web 進(jìn)行視頻編碼　　189
附錄D  資源　　191
附錄E  參考書(shū)目　　193