本書內(nèi)容主要分為三大部分。第一部分介紹了HTML5的相關(guān)開發(fā)技術(shù), 包括HTML的發(fā)展, HTML5與之前版本的區(qū)別, HTML5的表單元素應(yīng)用, HTML5的多媒體元素應(yīng)用, HTML5的圖像及動(dòng)畫應(yīng)用, HTML5的元素拖曳技術(shù), HTML5的數(shù)據(jù)存儲(chǔ)技術(shù), HTML5的離線應(yīng)用及地理位置應(yīng)用。第二部分介紹了CSS3的相關(guān)知識(shí)。第三部分為HTML5與CSS3的綜合應(yīng)用實(shí)例。
范立鋒,畢業(yè)于吉林大學(xué),長(zhǎng)期從事web開發(fā),數(shù)據(jù)庫(kù)培訓(xùn)工作。 開發(fā)過(guò)吉林省多家醫(yī)院管理系統(tǒng)、吉林省地方水利水電管理系統(tǒng)、吉林省移動(dòng)的內(nèi)部管理系統(tǒng) 電子工業(yè)出版社<<開發(fā)者突擊:Struts 2核心技術(shù)與Java EE框架整合開發(fā)實(shí)戰(zhàn)>>的作者,開卷月監(jiān)控銷量405冊(cè)。
第1章 初識(shí)HTML5 1
1.1 HTML發(fā)展史 1
1.2 為什么要學(xué)習(xí)HTML5 2
1.3 HTML5的開發(fā)環(huán)境 2
1.4 瀏覽器對(duì)HTML5支持性檢測(cè) 3
小結(jié) 6
習(xí)題 6
第2章 HTML5——全新的HTML 7
2.1 新的語(yǔ)法結(jié)構(gòu) 7
2.2 新的頁(yè)面架構(gòu) 8
2.3 元素的改變 10
2.3.1 新增的元素 10
2.3.2 停止使用的元素 14
2.4 屬性的改變 15
2.4.1 新增的屬性 15
2.4.2 停止使用的屬性 16
2.4.3 全局屬性 16
小結(jié) 18
習(xí)題 18
第3章 HTML5的表單 19
3.1 新的input輸入類型及屬性 19
3.1.1 新的input輸入類型 19
3.1.2 新的input公用屬性 25
3.2 表單的驗(yàn)證方式 30
3.2.1 自動(dòng)驗(yàn)證方式 30
3.2.2 調(diào)用checkValidity()方法實(shí)現(xiàn)驗(yàn)證 32
3.2.3 自定義提示信息 33
3.2.4 設(shè)置不驗(yàn)證 33
3.3 上機(jī)實(shí)踐——設(shè)計(jì)注冊(cè)頁(yè)面 34
3.3.1 實(shí)踐目的 34
3.3.2 設(shè)計(jì)思路 34
3.3.3 實(shí)現(xiàn)過(guò)程 34
3.3.4 演示效果 36
小結(jié) 37
習(xí)題 37
第4章 HTML5的多媒體 38
4.1 HTML5的多媒體元素 38
4.2 多媒體元素的屬性 38
4.2.1 autoplay屬性 38
4.2.2 controls屬性 39
4.2.3 error屬性 39
4.2.4 poster屬性 41
4.2.5 networkState屬性 41
4.2.6 width與height屬性 43
4.2.7 readyState屬性 43
4.2.8 其他屬性 45
4.3 多媒體元素的方法 45
4.3.1 多媒體支持性檢測(cè)方法 46
4.3.2 多媒體播放方法 49
4.4 多媒體元素的事件 50
4.4.1 事件捕捉方法 50
4.4.2 支持的事件類型 51
4.4.3 播放事件的應(yīng)用 52
4.5 上機(jī)實(shí)踐——DIY視頻播放器 53
4.5.1 實(shí)踐目的 53
4.5.2 設(shè)計(jì)思路 53
4.5.3 實(shí)現(xiàn)過(guò)程 53
4.5.4 演示效果 56
小結(jié) 57
習(xí)題 57
第5章 HTML5的圖像及動(dòng)畫 58
5.1 了解canvas元素 58
5.1.1 canvas的用法 58
5.1.2 一個(gè)簡(jiǎn)單的canvas畫圖實(shí)例 59
5.2 使用路徑畫圖 59
5.2.1 理解canvas的坐標(biāo)系 60
5.2.2 使用moveTo、lineTo畫線 60
5.2.3 使用arc方法畫弧 61
5.2.4 繪制貝塞爾圖形 64
5.3 圖形操作 65
5.3.1 圖形樣式設(shè)置 65
5.3.2 漸變圖形 66
5.3.3 圖形坐標(biāo)變換 69
5.3.4 圖形組合處理 72
5.3.5 圖形陰影 74
5.4 圖像操作 75
5.4.1 繪制圖像 76
5.4.2 圖像平鋪 77
5.4.3 圖像剪裁 79
5.4.4 像素處理 81
5.5 canvas其他操作 82
5.5.1 繪制文字 83
5.5.2 保存、恢復(fù)圖形 84
5.6 制作動(dòng)畫 86
5.7 上機(jī)實(shí)踐——繪制時(shí)鐘 87
5.7.1 實(shí)踐目的 87
5.7.2 設(shè)計(jì)思路 88
5.7.3 實(shí)現(xiàn)過(guò)程 88
5.7.4 演示效果 89
小結(jié) 90
習(xí)題 90
第6章 HTML5的元素拖曳 91
6.1 曾經(jīng)的拖曳解決方案 91
6.2 HTML5中拖曳的實(shí)現(xiàn)方法 91
6.3 dataTransfer對(duì)象 94
6.4 文件拖曳操作 95
6.5 上機(jī)實(shí)踐——拖曳式點(diǎn)菜界面 97
6.5.1 實(shí)踐目的 97
6.5.2 設(shè)計(jì)思路 97
6.5.3 實(shí)現(xiàn)過(guò)程 97
6.5.4 演示效果 99
小結(jié) 100
習(xí)題 101
第7章 HTML5的數(shù)據(jù)存儲(chǔ) 102
7.1 為什么需要數(shù)據(jù)存儲(chǔ) 102
7.2 Web Storage 102
7.2.1 Web Storage與Cookie的比較 103
7.2.2 Web Storage的兩種存儲(chǔ)方式 103
7.2.3 localStorage的多數(shù)據(jù)操作 105
7.3 Web SQL數(shù)據(jù)庫(kù) 107
7.3.1 創(chuàng)建數(shù)據(jù)庫(kù) 107
7.3.2 Web SQL的增刪改查 108
7.4 上機(jī)實(shí)踐——注冊(cè)與登錄 113
7.4.1 實(shí)踐目的 113
7.4.2 設(shè)計(jì)思路 113
7.4.3 實(shí)現(xiàn)過(guò)程 113
7.4.4 演示效果 116
小結(jié) 118
習(xí)題 118
第8章 HTML5離線應(yīng)用及地理位置應(yīng)用 119
8.1 離線應(yīng)用 119
8.1.1 離線應(yīng)用的工作原理 119
8.1.2 管理本地緩存 119
8.1.3 applicationCache檢測(cè)及更新緩存 120
8.1.4 檢測(cè)在線狀態(tài) 121
8.2 地理位置應(yīng)用 121
8.2.1 Geolocation的工作原理 121
8.2.2 獲取當(dāng)前地理位置 122
8.2.3 監(jiān)視地理位置信息 123
8.2.4 停止獲取當(dāng)前地理位置信息 123
8.3 上機(jī)實(shí)踐——在搜狗地圖中定位 123
8.3.1 實(shí)踐目的 123
8.3.2 設(shè)計(jì)思路 123
8.3.3 實(shí)現(xiàn)過(guò)程 123
8.3.4 演示效果 125
小結(jié) 126
習(xí)題 126
第9章 文件系統(tǒng) 127
9.1 FileAPI用途 127
9.2 FileAPI數(shù)據(jù)結(jié)構(gòu)及接口標(biāo)準(zhǔn) 128
9.3 核心代碼示例 129
9.3.1 判斷瀏覽器是否支持 129
9.3.2 獲取本地文件 129
9.3.3 Blob對(duì)象 132
9.4 瀏覽器對(duì)File API的支持情況 133
小結(jié) 133
習(xí)題 133
第10章 Web Worker 134
10.1 Web Worker應(yīng)用場(chǎng)景 134
10.2 如何使用Web Worker 134
10.3 核心代碼示例 136
10.4 Web Worker訪問(wèn)對(duì)象的限制 137
10.5 Web Worker傳遞JSON 137
10.6 瀏覽器對(duì)Web Worker的支持情況 139
小結(jié) 139
習(xí)題 139
第11章 SSE和WebSoceket 140
11.1 關(guān)于數(shù)據(jù)推送 140
11.2 SSE示例 141
11.2.1 SSE工作原理——客戶端 141
11.2.2 SSE工作原理——服務(wù)端 143
11.3 WebSocket工作原理 143
11.3.1 WebSocket工作原理——客戶端 144
11.3.2 WebSocket工作原理——服務(wù)端 145
11.4 上機(jī)實(shí)踐——使用WebSocket實(shí)現(xiàn)聊天室 146
11.4.1 實(shí)踐目的 146
11.4.2 設(shè)計(jì)思路 146
11.4.3 實(shí)現(xiàn)過(guò)程 146
11.4.4 演示效果 151
小結(jié) 151
習(xí)題 152
第12章 CSS3入門與基礎(chǔ) 153
12.1 CSS3是什么 153
12.2 CSS3的一個(gè)簡(jiǎn)單應(yīng)用 153
12.3 CSS3的常用選擇器 157
12.3.1 為什么要使用選擇器 157
12.3.2 屬性選擇器 158
12.3.3 類選擇器 160
12.3.4 偽類選擇器 162
12.4 控制頁(yè)面樣式 165
12.4.1 控制圓角邊框樣式 166
12.4.2 控制背景樣式 168
12.4.3 控制顏色樣式 173
12.4.4 控制頁(yè)面布局 176
12.5 上機(jī)實(shí)踐——購(gòu)物車結(jié)算界面 179
12.5.1 實(shí)踐目的 179
12.5.2 設(shè)計(jì)思路 179
12.5.3 實(shí)現(xiàn)過(guò)程 179
12.5.4 顯示效果 181
小結(jié) 181
習(xí)題 181
第13章 CSS3高級(jí)應(yīng)用 182
13.1 在頁(yè)面中插入內(nèi)容 182
13.1.1 插入文字 182
13.1.2 插入圖像 184
13.1.3 插入項(xiàng)目編號(hào) 185
13.2 文字樣式控制 186
13.2.1 為文字增加陰影效果 187
13.2.2 設(shè)置單詞及網(wǎng)址自動(dòng)換行 188
13.2.3 使用服務(wù)器端字體 189
13.3 元素變形處理 189
13.3.1 縮放效果 190
13.3.2 旋轉(zhuǎn)效果 190
13.3.3 移動(dòng)效果 191
13.3.4 傾斜效果 192
13.4 樣式過(guò)渡 193
13.5 更為復(fù)雜的樣式過(guò)渡 194
13.6 上機(jī)實(shí)踐——個(gè)性留言板 195
13.6.1 實(shí)踐目的 195
13.6.2 設(shè)計(jì)思路 195
13.6.3 實(shí)現(xiàn)過(guò)程 195
13.6.4 顯示效果 198
小結(jié) 199
習(xí)題 199
第14章 綜合案例 200
14.1 馬里奧大逃亡游戲 200
14.1.1 游戲介紹 200
14.1.2 需求分析 200
14.1.3 詳細(xì)設(shè)計(jì) 201
14.1.4 游戲效果 204
14.2 歐美風(fēng)格企業(yè)網(wǎng)站 205
14.2.1 需求分析 205
14.2.2 概要設(shè)計(jì) 206
14.2.3 詳細(xì)設(shè)計(jì) 207
14.2.4 網(wǎng)站效果 226
第15章 移動(dòng)應(yīng)用前端開發(fā) 230
15.1 引導(dǎo)頁(yè)的設(shè)計(jì) 230
15.2 登錄頁(yè)的設(shè)計(jì) 231
15.3 注冊(cè)頁(yè)的設(shè)計(jì) 234
15.4 首頁(yè)的設(shè)計(jì) 237
15.5 我的頁(yè)面設(shè)計(jì) 241
15.6 新房源列表頁(yè)的設(shè)計(jì) 243
15.7 新房?jī)?nèi)容頁(yè)的設(shè)計(jì) 251