論道HTML5

 
第1章   利用HTML5制作網(wǎng)站    1
1.1   大多數(shù)人不了解HTML5時(shí)代的網(wǎng)頁(yè)設(shè)計(jì)    1
1.2   HTML5帶來(lái)的網(wǎng)頁(yè)結(jié)構(gòu)、設(shè)計(jì)風(fēng)格及理念的變化    3
1.2.1   HTML 4時(shí)代的幾個(gè)特征    4
1.2.2   一個(gè)典型的HTML5頁(yè)面    4
1.2.3   小結(jié)    6
1.3   HTML5帶來(lái)的標(biāo)簽變化    6
1.3.1   什么是標(biāo)簽    6
1.3.2   標(biāo)簽的分類(lèi)    7
1.3.3   近十幾年來(lái)的HTML    9
1.3.4   Web的變化趨勢(shì)    9
1.4   HTML5帶來(lái)的表單數(shù)據(jù)內(nèi)容進(jìn)化    9
1.4.1   數(shù)據(jù)提交格式的變化    10
1.4.2   數(shù)據(jù)提交范圍的變化    11
1.4.3   表單數(shù)據(jù)類(lèi)型的增加    12
1.4.4   表單屬性和驗(yàn)證方式的進(jìn)化    13
1.4.5   文件上傳控件和重復(fù)模型的應(yīng)用    14
1.4.6   小結(jié)    14
1.5   HTML5與SEO    15
1.5.1   技術(shù)趨勢(shì)    15
1.5.2   搜索引擎服務(wù)商面臨的問(wèn)題    16
1.5.3   SEO從業(yè)人員面臨的問(wèn)題    17
1.5.4   SEO面臨的幾個(gè)社會(huì)問(wèn)題    18
1.6   HTML5的開(kāi)發(fā)環(huán)境與調(diào)試環(huán)境    18
1.6.1   HTML5編寫(xiě)工具    18
1.6.2   JavaScript開(kāi)發(fā)    19
1.6.3   HTTP監(jiān)控    19
1.6.4   調(diào)試環(huán)境    20
1.7   案例：HTML5網(wǎng)站建設(shè)    22
1.7.1   需求的提出    22
1.7.2   需求分析    22
1.7.3   系統(tǒng)分析    22
1.7.4   工程實(shí)現(xiàn)    23
1.7.5   小結(jié)    27
第2章   用CSS3完善網(wǎng)站    28
2.1   文字模塊    29
2.1.1   文字陰影：text-shadow    29
2.1.2   文字溢出：text-overflow    30
2.1.3   文字換行：word-wrap    30
2.2   顏色模塊    31
2.2.1   透明度：opacity    31
2.2.2   HSL    33
2.2.3   HSLA和RGBA    33
2.3   邊框模塊    34
2.3.1   邊框圓角：border-radius    34
2.3.2   邊框顏色：border-color    36
2.3.3   邊框圖像：border-image    37
2.3.4   盒陰影：box-shadow    40
2.4   用戶(hù)界面模塊    41
2.4.1   盒倒影：box-reflect    41
2.4.2   盒大?。篵ox-sizing    41
2.5   背景模塊    42
2.5.1   背景漸變    42
2.5.2   background-origin    45
2.5.3   background-clip    46
2.5.4   background-size    47
2.5.5   多背景    48
2.5.6   遮罩    49
2.6   動(dòng)畫(huà)模塊    51
2.6.1   transform    51
2.6.2   transition    53
2.6.3   animation    55
2.7   區(qū)域模塊    57
2.7.1   故事線(xiàn)    58
2.7.2   區(qū)域樣式    60
2.7.3   內(nèi)容形狀和環(huán)繞    60
2.7.4   小結(jié)    62
2.8   選擇器    62
2.8.1   結(jié)構(gòu)偽類(lèi)    63
2.8.2   否定偽類(lèi)    65
2.8.3   狀態(tài)偽類(lèi)    65
2.8.4   目標(biāo)偽類(lèi)    66
2.8.5   其他選擇器    66
2.9   其他模塊    68
2.9.1   多欄布局    68
2.9.2   彈性盒子布局    68
2.9.3   網(wǎng)絡(luò)字體    69
2.9.4   媒介查詢(xún)    70
2.9.5   濾鏡效果    70
2.9.6   著色器    70
2.10   使用CSS3美化網(wǎng)站    72
2.10.1   右上角文字    73
2.10.2   下載盒子    74
2.10.3   圖片格子    74
2.10.4   中間盒子    74
2.10.5   左右盒子    75
2.10.6   居中背景    76
2.10.7   載入效果    76
2.10.8   頁(yè)腳    77
2.11   小結(jié)    77
第3章   劃時(shí)代的Web API    79
3.1   傳統(tǒng)Web模型與Web OS架構(gòu)模型    79
3.2   Web API的概要介紹    81
3.3   Drag & Drop API    82
3.3.1   以前的解決方案    82
3.3.2   Drag & Drop API的優(yōu)點(diǎn)    83
3.3.3   如何檢測(cè)瀏覽器是否支持
Drag & Drop API    83
3.3.4   Drag & Drop API的主要操作   84
3.3.5   文件拖放上傳實(shí)例    86
3.4   History API    87
3.4.1   以前的解決方案    87
3.4.2   現(xiàn)在的History API    87
3.5   Communication API    89
3.5.1   以前解決跨源通信的方案    89
3.5.2   XMLHttpRequest Level 2    90
3.5.3   iframe和sandbox    91
3.5.4   跨文檔消息通信    92
3.6   Notification API    97
3.6.1   如何檢測(cè)瀏覽器是否支持Notification API   97
3.6.2   Web的Notification的狀態(tài)    97
3.6.3   讓你的Web App帶著Notification跑   97
3.7   audio標(biāo)簽和video標(biāo)簽    99
3.7.1   audio標(biāo)簽    100
3.7.2   video標(biāo)簽    102
3.8   Canvas API    108
3.8.1   以前的同類(lèi)解決方案    109
3.8.2   Canvas的優(yōu)點(diǎn)    109
3.8.3   檢測(cè)瀏覽器是否支持Canvas    109
3.8.4   Canvas主要操作    109
3.9   WebSocket API    110
3.10   Web Worker API    111
3.11   Web Storage API    111
3.12   MicroData和語(yǔ)義網(wǎng)絡(luò)    111
3.12.1   MicroData的常見(jiàn)屬性    112
3.12.2   MicroData的例子    112
3.12.3   MicroData與SEO——人類(lèi)需要有序的信息   113
3.12.4   語(yǔ)義網(wǎng)絡(luò)的基本概念    113
3.12.5   語(yǔ)義測(cè)試工具    114
3.13   通用Base64方法    114
3.13.1   編碼    114
3.13.2   解碼    115
3.13.3   應(yīng)用    115
3.14   Web Database API    117
3.14.1   Web SQL API    117
3.14.2   Indexed DB API    121
3.15   WebGL    124
3.16   Device API 系列    125
3.16.1   Geolocation API    125
3.16.2   File API    128
3.16.3   FileWriter API    132
3.16.4   Media Capture API    132
3.16.5   Contact API    133
3.16.6   System Information API   134
3.16.7   Calendar API    137
3.16.8   Messaging API    137
3.17   小結(jié)    138
第4章   Canvas 2D    139
4.1   什么是Canvas    139
4.2   Canvas 2D原理    140
4.2.1   坐標(biāo)系統(tǒng)說(shuō)明    141
4.2.2   屬性說(shuō)明    142
4.3   繪制    143
4.3.1   各類(lèi)線(xiàn)條    143
4.3.2   矩形    151
4.3.3   三角形    152
4.3.4   圓與扇形    153
4.3.5   圖片    155
4.3.6   文字    158
4.4   特效    160
4.4.1   漸變    160
4.4.2   陰影與透明    162
4.5   基礎(chǔ)操作中比較復(fù)雜的部分    162
4.5.1   保存和恢復(fù)    163
4.5.2   坐標(biāo)轉(zhuǎn)換    163
4.5.3   旋轉(zhuǎn)    164
4.5.4   縮放    164
4.5.5   變形    164
4.5.6   組合    166
4.5.7   裁剪    167
4.5.8   像素操作    170
4.6   動(dòng)畫(huà)    172
4.6.1   左右運(yùn)動(dòng)    172
4.6.2   上下運(yùn)動(dòng)    173
4.6.3   圓心旋轉(zhuǎn)運(yùn)動(dòng)    174
4.6.4   拋物線(xiàn)運(yùn)動(dòng)    175
4.6.5   漸變運(yùn)動(dòng)    175
4.7   事件感應(yīng)    176
4.8   關(guān)于Canvas的一些經(jīng)驗(yàn)    177
4.8.1   回答兩個(gè)問(wèn)題    177
4.8.2   避開(kāi)浮點(diǎn)運(yùn)算    178
4.8.3   資源載入與雙緩沖問(wèn)題    178
4.8.4   圖片抗鋸齒的原理及辦法    179
4.8.5   粒子系統(tǒng)的使用    181
4.9   Web開(kāi)發(fā)復(fù)古流    181
4.10   小結(jié)    182
第5章   HTML5和移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)    183
5.1   移動(dòng)互聯(lián)網(wǎng)的現(xiàn)狀與需求    183
5.1.1   市場(chǎng)容量    184
5.1.2   移動(dòng)設(shè)備的特點(diǎn)    184
5.1.3   移動(dòng)設(shè)備的現(xiàn)狀    185
5.1.4   開(kāi)發(fā)者生態(tài)圈    185
5.1.5   可供選擇的移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)平臺(tái)    185
5.2   HTML5在移動(dòng)互聯(lián)網(wǎng)上的開(kāi)發(fā)示例    187
5.2.1   一個(gè)HTML5開(kāi)發(fā)者的基本配置    187
5.2.2   歐朋瀏覽器H5版介紹    188
5.2.3   重力傳感設(shè)備    191
5.2.4   電子羅盤(pán)開(kāi)發(fā)    199
5.2.5   Geolocation與LBS應(yīng)用開(kāi)發(fā)    203
5.2.6   網(wǎng)頁(yè)攝像與網(wǎng)絡(luò)相冊(cè)    207
5.2.7   移動(dòng)設(shè)備中的離線(xiàn)存儲(chǔ)    214
5.3   小結(jié)    215
第6章   WebSocket開(kāi)發(fā)應(yīng)用    216
6.1   WebSocket的那些事兒    216
6.1.1   WebSocket的技術(shù)背景    217
6.1.2   WebSocket的定義    218
6.1.3   WebSocket通信模式解析    219
6.1.4   WebSocket檢測(cè)瀏覽器支持代碼    220
6.2   WebSocket API的內(nèi)容    220
6.2.1   屬性    220
6.2.2   URL    221
6.2.3   事件    221
6.3   客戶(hù)端樣例程序    222
6.4   服務(wù)器端樣例程序    222
6.5   Ajax、長(zhǎng)輪詢(xún)、Comet之間的那些事兒    223
6.5.1   Ajax    223
6.5.2   長(zhǎng)輪詢(xún)    225
6.5.3   Comet    226
6.5.4   Ajax與WebSocket的多角度對(duì)比    227
6.6   與WebSocket相關(guān)的幾個(gè)概念    227
6.6.1   SSJS    228
6.6.2   Node.js    228
6.7   開(kāi)發(fā)基于WebSocket的通信示例    235
6.7.1   聊天室    235
6.7.2   服務(wù)器監(jiān)控    239
6.7.3   聯(lián)機(jī)作圖    243
6.8   免費(fèi)的WebSocket資源    247
6.9   小結(jié)    248
第7章   瘦服務(wù)器戰(zhàn)略與云    249
7.1   戰(zhàn)略觀(guān)察與未來(lái)10年的思考    249
7.1.1   Web瘦服務(wù)器戰(zhàn)略    249
7.1.2   云    253
7.1.3   計(jì)算能的思考    254
7.2   Web Storage    255
7.2.1   Web Storage的概念    255
7.2.2   localStorage介紹與示例    255
7.2.3   sessionStorage的介紹與示例    258
7.2.4   瀏覽器端存儲(chǔ)的方案和局限性    260
7.3   離線(xiàn)應(yīng)用    265
7.3.1   判斷瀏覽器是否在線(xiàn)    266
7.3.2   離線(xiàn)應(yīng)用的屬性與方法    266
7.3.3   manifest文件    267
7.4   Web Worker    269
7.4.1   Worker    270
7.4.2   Shared Worker    273
7.4.3   Web Worker小結(jié)    275
7.5   一個(gè)云記事本的案例    276
7.5.1   客戶(hù)端邏輯分析    276
7.5.2   客戶(hù)端的實(shí)現(xiàn)    277
7.5.3   工程實(shí)現(xiàn)的聯(lián)想    279
7.6   小結(jié)    279
附錄A   HTML5標(biāo)簽、事件屬性及其
相關(guān)網(wǎng)站    281
附錄B   審慎對(duì)待各種框架    287
附錄C   統(tǒng)一開(kāi)發(fā)常用交流術(shù)語(yǔ)    289
附錄D   WebGL    294
附錄E   CSS3模塊列表    299