內容介紹
如果你是一位有前瞻性的web前端工作者,那么你一定會從本書中受益,因為它就是專門為你打造的。《HTML 5與CSS 3權威指南》內容系統而全面,詳盡地講解了html 5和css 3的所有新功能和新特性;技術新穎,所有知識點都緊跟html 5與css 3的最新發展動態(html 5和css 3仍在不斷完善之中);實戰性強(包含246個示例頁面),不僅每個知識點都配有精心設計的小案例(便於動手實踐),而且還有兩個綜合性的案例(體現用 html 5與css 3開發web套用的思維和方法)。本書不僅能滿足你全面而系統地學習理論知識的需求,還能滿足你需要充分實踐的需求。
《HTML 5與CSS 3權威指南》共分為三大部分,第一部分詳盡地講解了html 5的相關知識,包括各主流瀏覽器對html 5的支持情況、html 5與html 4在語法上的區別、html 5的結構元素、表單與檔案、圖形繪製、多媒體播放、本地存儲、離線套用、通信api、web workers、地理位置信息獲取等內容;第二部分詳細地闡述了css 3的相關知識,涵蓋選擇器、文字與字型的相關樣式、顏色的相關樣式、盒的相關樣式、背景與框線的相關樣式、布局的相關樣式、ui的相關樣式、media queries的相關樣式、變形處理、多媒體和動畫等內容。第三部分以疊代的方式逐步展現了兩個完整的案例,旨在幫助讀者將理論知識貫穿於實踐中,迅速成為新一代web開發技術中的弄潮兒。
無論你是未入門或剛入門的前端新人,還是有多年工作經驗的資深前端工程師,這本書都會很適合你。
作者介紹
陸凌牛,資深Web開發工程師、軟體開發工程師和系統設計師。從事Web開發多年,對各種Web開發技術(包括前端和後端)都有非常深入的研究,經驗極其豐富。HTML 5和CSS 3等新技術的先驅者和布道者,不僅對HTML 5與CSS 3的理論知識有比較深入的認識,而且已經大量在實踐中付諸套用。此外,他還擅長微軟與Java的相關技術,在C#、VB.NET、ASP.NET、SQL Server 、Oracle、Java、Struts、Spring、Hibernate等方面也積累大量的實戰經驗。作品目錄
前言第 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 HTML4頁面中播放視頻或音頻的方法 / 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 GeolocationAPI的基本知識 / 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