《HTML5與CSS3權威指南》電子書,建議儲存下來

書籍簡介

《HTML5與CSS3權威指南》電子書,建議儲存下來

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