書籍簡介
HTML5與CSS3權威指南
作者
: 陸凌牛
出版社:
機械工業出版社華章公司
出版年:
2011-4-7
頁數:
416
定價:
69。00
叢書:
實戰系列
ISBN:
9787111336242
獲取方法
關注微信公眾號:
申霖
,傳送:
0913
目錄· · · · · ·
前言
第 1 章 Web時代的變遷 / 1
1。1 迎接新的Web時代 / 2
1。1。1 HTML 5時代即將來臨 / 2
1。1。2 HTML 5的目標 / 4
1。2 HTML 5會深受歡迎的理由 / 4
1。2。1 世界知名瀏覽器廠商對HTML 5的支援 / 4
1。2。2 第一個理由:時代的要求 / 5
1。2。3 第二個理由:Internet Explorer 8 / 6
1。3 可以放心使用HTML 5的三個理由 / 6
1。4 HTML 5要解決的三個問題 / 7
第 2 章 HTML 5與HTML 4的區別 / 9
2。1 語法的改變 / 10
2。1。1 HTML 5的語法變化 / 10
2。1。2 HTML 5中的標記方法 / 11
2。1。3 HTML 5確保了與之前HTML版本的相容性 / 11
2。1。4 標記示例 / 13
2。2 新增的元素和廢除的元素 / 13
2。2。1 新增的結構元素 / 13
2。2。2 新增的其他元素 / 15
2。2。3 新增的input元素的型別 / 19
2。2。4 廢除的元素 / 19
2。3 新增的屬性和廢除的屬性 / 20
2。3。1 新增的屬性 / 20
2。3。2 廢除的屬性 / 21
2。4 全域性屬性 / 23
2。4。1 contentEditable屬性 / 23
2。4。2 designMode屬性 / 24
2。4。3 hidden屬性 / 25
2。4。4 spellcheck屬性 / 25
2。4。5 tabindex屬性 / 25
第 3 章 HTML 5的結構 / 27
3。1 新增的主體結構元素 / 28
3。1。1 article元素 / 28
3。1。2 section元素 / 30
3。1。3 nav元素 / 32
3。1。4 aside元素 /33
3。1。5 time元素與微格式 / 35
3。1。6 pubdate屬性 / 36
3。2 新增的非主體結構元素 / 36
3。2。1 header元素 / 37
3。2。2 hgroup元素 / 38
3。2。3 footer元素 / 38
3。2。4 address元素 / 39
3。3 HTML 5結構 / 40
3。3。1 大綱 / 40
3。3。2 對新的結構元素使用樣式 / 43
3。3。3 article元素的樣式 / 44
第 4 章 表單與檔案 / 45
4。1 新增元素與屬性 / 46
4。1。1 新增屬性 / 46
4。1。2 大幅度地增加與改良了input元素的種類 / 49
4。1。3 對新的表單元素使用樣式 / 54
4。1。4 output元素的追加 / 55
4。2 表單驗證 / 55
4。2。1 自動驗證 / 55
4。2。2 顯式驗證 / 57
4。2。3 取消驗證 / 58
4。2。4 自定義錯誤資訊 / 58
4。3 增強的頁面元素 / 59
4。3。1 新增的figure元素與figcaption元素 / 60
4。3。2 新增的details元素 / 61
4。3。3 新增的mark元素 / 62
4。3。4 新增的progress元素 / 64
4。3。5 新增的meter元素 / 65
4。3。6 新增的menu元素與command元素 / 66
4。3。7 改良的ol列表 / 66
4。3。8 改良的dl列表 / 67
4。3。9 加以嚴格限制的cite元素 / 68
4。3。10 重新定義的small元素 / 69
4。4 檔案API / 69
4。4。1 FileList物件與file物件 / 69
4。4。2 Blob物件 / 70
4。4。3 FileReader介面 / 72
4。5 拖放API / 77
4。5。1 實現拖放的步驟 / 77
4。5。2 DataTransfer物件的屬性與方法 / 80
4。5。3 設定拖放時的視覺效果 / 80
4。5。4 自定義拖放圖示 / 81
第 5 章 繪製圖形 / 82
5。1 canvas元素的基礎知識 / 83
5。1。1 在頁面中放置canvas元素 / 83
5。1。2 繪製矩形 / 84
5。2 使用路徑 / 86
5。2。1 繪製圓形 / 86
5。2。2 如果沒有關閉路徑會怎麼樣 / 88
5。2。3 moveTo與lineTo / 90
5。2。4 使用bezierCurveTo繪製貝濟埃曲線 / 91
5。3 繪製漸變圖形 / 93
5。3。1 繪製線性漸變 / 93
5。3。2 繪製徑向漸變 / 95
5。4 繪製變形圖形 / 96
5。4。1 座標變換 / 96
5。4。2 座標變換與路徑的結合使用 / 98
5。4。3 矩陣變換 / 99
5。5 圖形組合 / 103
5。6 給圖形繪製陰影 / 105
5。7 使用影象 / 107
5。7。1 繪製圖像 / 107
5。7。2 影象平鋪 / 109
5。7。3 影象裁剪 / 111
5。7。4 畫素處理 / 113
5。8 繪製文字 / 115
5。9 補充知識 / 117
5。9。1 儲存與恢復狀態 / 117
5。9。2 儲存檔案 / 118
5。9。3 簡單動畫的製作 / 119
第 6 章 多媒體播放 / 122
6。1 video元素與audio元素的基礎知識 / 123
6。1。1 HTML 4頁面中播放影片或音訊的方法 / 123
6。1。2 HTML 5頁面中播放影片或音訊的方法 / 124
6。2 屬性 / 125
6。3 方法 / 129
6。4 事件 / 132
6。4。1 事件處理方式 / 132
6。4。2 事件介紹 / 132
6。4。3 事件捕捉示例 / 133
第 7 章 本地儲存 / 135
7。1 Web Storage / 136
7。1。1 Web Storage是什麼 / 136
7。1。2 簡單Web留言本 / 139
7。1。3 作為簡易資料庫來利用 / 141
7。2 本地資料庫 / 144
7。2。1 本地資料庫的基本概念 / 144
7。2。2 用executeSql來執行查詢 / 145
7。2。3 使用資料庫實現Web留言本 / 146
7。2。4 transaction方法中的處理 / 149
第 8 章 離線應用程式 / 151
8。1 離線Web應用程式詳解 / 152
8。1。1 新增的本地快取 / 152
8。1。2 本地快取與瀏覽器網頁快取的區別 / 152
8。2 manifest檔案 / 153
8。3 瀏覽器與伺服器的互動過程 / 155
8。4 applicationCache物件 / 156
8。4。1 swapCache方法 / 157
8。4。2 applicationCache物件的事件 / 158
第 9 章 通訊API / 162
9。1 跨文件訊息傳輸 / 163
9。1。1 跨文件訊息傳輸的基本知識 / 163
9。1。2 跨文件訊息傳輸示例 / 163
9。2 Web Sockets通訊 / 166
9。2。1 Web Sockets通訊的基本知識 / 166
9。2。2 使用Web Sockets API / 166
9。2。3 Web Sockets API使用示例 / 167
9。2。4 傳送物件 / 168
第10章 使用Web Workers處理執行緒 / 170
10。1 基礎知識 / 171
10。2 與執行緒進行資料的互動 / 174
10。3 執行緒巢狀 / 176
10。3。1 單層巢狀 / 176
10。3。2 在多個子執行緒中進行資料的互動 / 178
10。4 執行緒中可用的變數、函式與類 / 180
第11章 獲取地理位置資訊 / 181
11。1 Geolocation API的基本知識 / 182
11。1。1 取得當前地理位置 / 182
11。1。2 持續監視當前地理位置的資訊 / 184
11。1。3 停止獲取當前使用者的地理位置資訊 / 184
11。2 position物件 / 184
11。3 在頁面上使用google地圖 / 186
第12章 CSS 3概述 / 189
12。1 概要介紹 / 190
12。1。1 CSS 3是什麼 / 190
12。1。2 CSS 3的歷史 / 190
12。2 使用CSS 3能做什麼 / 191
12。2。1 模組與模組化結構 / 191
12。2。2 一個簡單的CSS 3示例 / 192
第13章 選擇器 / 195
13。1 選擇器概述 / 197
13。2 屬性選擇器 / 197
13。2。1 屬性選擇器是什麼 / 197
13。2。2 CSS 3中的屬性選擇器 / 199
13。2。3 靈活運用屬性選擇器 / 200
13。3 結構性偽類選擇器 / 201
13。3。1 CSS中的偽類選擇器及偽元素 / 201
13。3。2 選擇器root、not、empty和target / 205
13。3。3 選擇器:first-child、last-child、nth-child和nth-last-child / 210
13。3。4 選擇器:nth-of-type和nth-last-of-type / 214
13。3。5 迴圈使用樣式 / 216
13。3。6 only-child選擇器 / 218
13。4 UI元素狀態偽類選擇器 / 219
13。4。1 選擇器:E:hover、E:active和E:focus / 220
13。4。2 E:enabled偽類選擇器與E:disabled偽類選擇器 / 222
13。4。3 E: read-only偽類選擇器與E:read-write偽類選擇器 / 223
13。4。4 偽類選擇器:E:checked、E:default和E: indeterminate / 224
13。4。5 E::selection偽類選擇器 / 226
13。5 通用兄弟元素選擇器 / 228
第14章 使用選擇器在頁面中插入內容 / 230
14。1 使用選擇器來插入文字 / 231
14。1。1 使用選擇器來插入內容 / 231
14。1。2 指定個別元素不進行插入 / 232
14。2 插入影象檔案 / 234
14。2。1 在標題前插入影象檔案 / 234
14。2。2 插入影象檔案的好處 / 234
14。2。3 將alt屬性的值作為影象的標題來顯示 / 236
14。3 使用content屬性來插入專案編號 / 237
14。3。1 在多個標題前加上連續編號 / 237
14。3。2 在專案編號中追加文字 / 238
14。3。3 指定編號的樣式 / 238
14。3。4 指定編號的種類 / 238
14。3。5 編號巢狀 / 239
14。3。6 中編號中嵌入大編號 / 240
14。3。7 在字串兩邊新增巢狀文字元號 / 242
第15章 文字與字型相關樣式 / 244
15。1 給文字新增陰影—text-shadow屬性 / 245
15。1。1 text-shadow屬性的使用方法 / 245
15。1。2 位移距離 / 247
15。1。3 陰影的模糊半徑 / 247
15。1。4 陰影的顏色 / 248
15。1。5 指定多個陰影 / 248
15。2 讓文字自動換行—word-break屬性 / 249
15。2。1 依靠瀏覽器讓文字自動換行 / 249
15。2。2 指定自動換行的處理方法 / 249
15。3 讓長單詞與URL地址自動換行—word-wrap屬性 / 251
15。4 使用伺服器端字型—Web Font與@font-face屬性 / 251
15。4。1 在網頁上顯示伺服器端字型 / 252
15。4。2 定義斜體或粗體字型 / 253
15。4。3 顯示客戶端本地的字型 / 255
15。4。4 屬性值的指定 / 256
15。5 修改字型種類而保持字型尺寸不變—font-size-adjust屬性 / 257
15。5。1 字型不同導致文字大小的不同 / 257
15。5。2 font-size-adjust屬性的使用方法 / 259
15。5。3 瀏覽器對於aspect值的計算方法 / 259
15。5。4 font-size-adjust屬性的使用示例 / 260
第16章 盒相關樣式 / 262
16。1 盒的型別 / 263
16。1。1 盒的基本型別 / 263
16。1。2 inline-block型別 / 264
16。1。3 inline-table型別 / 270
16。1。4 list-item型別 / 272
16。1。5 run-in型別與compact型別 / 273
16。1。6 表格相關型別 / 274
16。1。7 none型別 / 276
16。1。8 各種瀏覽器對於各種盒型別的支援情況 / 277
16。2 對於盒中容納不下的內容的顯示 / 277
16。2。1 overflow屬性 / 278
16。2。2 overflow-x屬性與overflow-y屬性 / 281
16。2。3 text-overflow屬性 / 281
16。3 對盒使用陰影 / 283
16。3。1 box-shadow屬性的使用方法 / 283
16。3。2 將引數設定為0 / 284
16。3。3 對盒內子元素使用陰影 / 285
16。3。4 對第一個文字或第一行使用陰影 / 286
16。3。5 對錶格及單元格使用陰影 / 287
16。4 指定針對元素的寬度與高度的計算方法 / 288
16。4。1 box-sizing屬性 / 288
16。4。2 為什麼要使用box-sizing屬性 / 291
第17章 與背景和邊框相關樣式 / 293
17。1 與背景相關的新增屬性 / 294
17。1。1 指定背景的顯示範圍—background-clip屬性 / 294
17。1。2 指定繪製背景影象的繪製起點—background-origin屬性 / 296
17。1。3 指定背景影象的尺寸—background-size屬性 / 299
17。1。4 指定內聯元素背景影象進行平鋪時的迴圈方式—background-break屬性 / 301
17。2 在一個元素中顯示多個背景影象 / 302
17。3 圓角邊框的繪製 / 303
17。3。1 border-radius屬性 / 304
17。3。2 在border-radius屬性中指定兩個半徑 / 305
17。3。3 不顯示邊框的時候 / 306
17。3。4 修改邊框種類的時候 / 306
17。3。5 繪製四個角不同半徑的圓角邊框 / 306
17。4 使用影象邊框 / 307
17。4。1 border-image屬性 / 307
17。4。2 border-image屬性最簡單的使用方法 / 308
17。4。3 使用border-image屬性來指定邊框寬度 / 310
17。4。4 中央影象的自動拉伸 / 311
17。4。5 指定四條邊中影象的顯示方法 / 312
17。4。6 使用背景影象 / 315
第18章 CSS 3中的變形處理 / 317
18。1 transform功能的基礎知識 / 318
18。1。1 如何使用transform功能 / 318
18。1。2 transform功能的分類 / 319
18。2 對一個元素使用多種變形的方法 / 323
18。2。1 兩個變形示例 / 323
18。2。2 指定變形的基準點 / 325
第19章 CSS 3中的動畫功能 / 328
19。1 Transitions功能 / 329
19。1。1 Transitions功能的使用方法 / 329
19。1。2 使用Transitions功能同時平滑過渡多個屬性值 / 330
19。2 Animations功能 / 333
19。2。1 Animations功能的使用方法 / 333
19。2。2 實現多個屬性值同時改變的動畫 / 335
19。2。3 實現動畫的方法 / 337
19。2。4 實現網頁的淡入效果 / 339
第20章 佈局相關樣式 / 340
20。1 多欄佈局 / 341
20。1。1 使用float屬性或position屬性的缺點 / 341
20。1。2 使用多欄佈局方式 / 343
20。2 盒佈局 / 346
20。2。1 盒佈局的基礎知識 / 346
20。2。2 彈性盒佈局 / 350
第21章 Media Queries相關樣式 / 362
21。1 根據瀏覽器的視窗大小來選擇使用不同的樣式 / 363
21。2 在iPhone中的顯示 / 367
21。3 Media Queries的使用方法 / 368
第22章 CSS 3的其他重要樣式和屬性 / 371
22。1 顏色相關樣式 / 372
22。1。1 利用alpha通道來設定顏色 / 372
22。1。2 alpha通道與opacity屬性的區別 / 374
22。1。3 指定顏色值為transparent / 376
22。2 使用者介面相關樣式 / 377
22。2。1 輪廓相關樣式 / 377
22。2。2 resize屬性 / 380
22。3 取消對元素的樣式指定—initial屬性值 / 381
22。3。1 取消對元素的樣式指定 / 381
22。3。2 使用initial屬性值並不等於取消樣式設定的特例 / 383
第23章 綜合例項 / 385
23。1 例項1:使用HTML 5中新增結構元素來構建網頁 / 386
23。1。1 組織網頁結構 / 386
23。1。2 header元素中的內容 / 388
23。1。3 aside元素中的內容 / 395
23。1。4 section元素中的內容 / 398
23。1。5 footer元素中的內容 / 400
23。2 例項2:使用HTML 5+CSS 3來構建Web應用程式 / 401
23。2。1 HTML 5頁面程式碼分析 / 402
23。2。2 CSS 3樣式程式碼分析 / 405
23。2。3 JavaScript指令碼程式碼分析 / 409