HTML5和CSS3實例教程

HTML5和CSS3實例教程

《HTML5和CSS3實例教程》是2012年人民郵電出版社出版的圖書,作者是霍根(BrianP.Hogan),譯者是李傑、劉曉娜、朱嵬。

內容簡介

《HTML5和CSS3實例教程》共分3部分,集中討論了HTML5和CSS3規範及其技術的使用方法。首先是規範概述,介紹了新的結構化標籤、表單域及其功能(包括自動聚焦功能和占位文本)和CSS3的新選擇器。接下來是HTML對視頻和音頻的支持,講述了畫布上的圖形繪製及CSS陰影、漸變和變換的使用方法。最後介紹使用HTML5的客戶端特性(包括WebStorage、WebSQLDatabases以及離線支持)建立客戶端套用,使用HTML5實現跨域訊息和數據傳送,以及操作瀏覽器歷史等的方法。《HTML5和CSS3實例教程》適合所有使用HTML和CSS的Web開發人員學習參考。

編輯推薦

《HTML5和CSS3實例教程》:HTML5和CSS3代表著Web開發的未來,雖然相關規範還未最終敲定,但最新版瀏覽器和移動設備都已支持HTML5和CSS3。《HTML5和CSS3實例教程》將帶你領略現今可用的HTML5元素和CSS3特性,並提供了對舊瀏覽器的向下兼容解決方案,使開發人員避免因此丟失用戶。

如果你還在為給按鈕添加不同樣式而大量添加標記,不妨拿起《HTML5和CSS3實例教程》,學習一下HTML5和CSS3新特性吧。HTML5新標記可以呈現更好的結構和表單界面,編寫出更為整潔易讀的代碼。

如果不想使用Flash,不妨看看《HTML5和CSS3實例教程》是如何在頁面中嵌入音頻、視頻和矢量圖的。此外,書中關於Web Sockets、客戶端存儲、離線快取和跨文檔訊息機制的內容將為你免去不少Web開發之苦。簡單的CSS3亦將豐富頁面區域的樣式。如果你作為Web設計師擔心舊瀏覽器的兼容問題,《HTML5和CSS3實例教程》中相應的解決方案將為你排憂解難。Web和移動開發必讀掌握技術走向,自信應對未來輕鬆實用、細緻入微。

作者簡介

作者:(美國)霍根 (Brian P. Hogan) 譯者:李傑 劉曉娜 朱嵬 合著者:柳靖

霍根,1995年起便開始以自由職業者的身份開發專業網站並提供諮詢服務,目前常使用Ruby、jQuery、HTML5和CSS3構建Web套用。他樂於講述並撰寫與Web設計和開發有關的內容,倡導為殘障人士(特別是視覺障礙者)研發輔助功能。

目錄

第1章 HTML5和CSS3概述 1

1.1 一個新的Web開發平台 1

1.1.1 更多的描述性標記 1

1.1.2 較少依賴於外掛程式的多媒體支持 1

1.1.3 更強大的Web套用 2

1.1.4 跨文檔訊息通信 2

1.1.5 Web Sockets 2

1.1.6 客戶端存儲 2

1.1.7 更精美的界面 2

1.1.8 更強大的表單 2

1.1.9 提升可訪問性 3

1.1.10 先進的選擇器 3

1.1.11 視覺效果 3

1.2 向後兼容 3

1.3 未來之路崎嶇不平 4

1.3.1 IE 5

1.3.2 可訪問性 5

1.3.3 廢棄的標籤 6

1.3.4 企業利益的競爭 7

1.3.5 HTML5和CSS3仍在改進 8

第一部分 改善用戶界面

第2章 新的結構標籤和屬性 10

2.1 實例1:用語義化標記重定義部落格 11

2.1.1 以正確的文檔類型聲明為基礎 13

2.1.2 頭部 13

2.1.3 尾部 14

2.1.4 導航 14

2.1.5 區段和文章 15

2.1.6 文章 16

2.1.7 旁白和側邊欄 17

2.1.8 旁白絕非頁面側邊欄 18

2.1.9 添加樣式 19

2.1.10 回退 21

2.2 實例2:使用自定義數據屬性創建彈出視窗 22

2.2.1 行為與內容的分離,或者說為什麼設定onclick不好 22

2.2.2 提升可訪問性 23

2.2.3 廢棄onclick 23

2.2.4 自定義數據屬性來解圍 24

2.2.5 回退 25

2.2.6 未來展望 25

第3章 創建易用的Web表單 27

3.1 實例3:使用新的輸入域描述數據 28

3.1.1 改進AwesomeCo項目中的表單 28

3.1.2 創建基礎表單 29

3.1.3 使用range類型創建滑塊 29

3.1.4 使用選值框處理數字 30

3.1.5 日期控制項 30

3.1.6 email類型 31

3.1.7 url類型 31

3.1.8 color類型 32

3.1.9 回退 32

3.1.10 替換顏色選擇器 33

3.1.11 Modernizr 34

3.2 實例4:使用autofocus屬性定位第一個表單域元素 34

3.3 實例5:使用placeholder屬性進行提示 35

3.3.1 簡單的註冊表單 36

3.3.2 阻止自動完成 37

3.3.3 回退 38

3.4 實例6:基於contenteditable屬性實現在位編輯 42

3.4.1 賬戶表單 42

3.4.2 持久化數據 44

3.4.3 回退 44

3.4.4 創批建編輯頁面 44

3.4.5 未來展望 47

第4章 用CSS3打造更好的用戶界面 48

4.1 實例7:使用偽類渲染表格 49

4.1.1 最佳化付款清單樣式 49

4.1.2 使用:nth-of-type條紋化表格的行 51

4.1.3 使用:nth-child對齊列文本 52

4.1.4 使用:last-child加粗最後一行 53

4.1.5 使用:nth-last-child向前查找元素 54

4.1.6 回退 55

4.1.7 修改html代碼 55

4.1.8 使用JavaScript 56

4.2 實例8:使用:after和content支持列印頁面上的連結 57

4.2.1 使用CSS 57

4.2.2 回退 58

4.3 實例9:創建多列布局 60

4.3.1 分欄 60

4.3.2 回退 63

4.4 實例10:使用媒體查詢構建移動設備界面 65

4.4.1 回退 66

4.4.2 未來展望 66

第5章 增強可訪問性 67

5.1 實例11:使用ARIA角色提供導航提示 68

5.1.1 標誌角色 68

5.1.2 文檔結構角色 70

5.1.3 回退 71

5.2 實例12:創建可訪問的可更新區域 71

5.2.1 創建頁面 72

5.2.2 polite和assertive更新 74

5.2.3 atomic更新 74

5.2.4 隱藏區域 74

5.2.5 回退 76

5.2.6 未來展望 76

第二部分 新的影音解決方案

第6章 在canvas上繪圖 78

6.1 實例13:繪製logo 78

6.1.1 繪製logo 80

6.1.2 添加文字 81

6.1.3 繪製線條 81

6.1.4 移動原點 82

6.1.5 添加顏色 83

6.1.6 回退 84

6.2 實例14:使用RGraph繪製統計圖 84

6.2.1 使用HTML描述數據 85

6.2.2 將HTML內容轉換為條形圖 86

6.2.3 顯示備用內容 87

6.2.4 回退 88

6.2.5 未來展望 90

第7章 嵌入音頻和視頻 92

7.1 發展歷史 92

7.2 容器和編解碼器 93

7.2.1 視頻編解碼器 94

7.2.2 音頻編解碼器 95

7.2.3 容器和編解碼器協同工作 96

7.3 實例15:音頻 96

7.3.1 建立基本列表 97

7.3.2 回退 98

7.4 實例16:嵌入視頻 99

7.4.1 回退 101

7.4.2 HTML5視頻的限制 103

7.4.3 音頻、視頻和可訪問性 104

7.4.4 未來展望 105

第8章 柔化視覺體驗 106

8.1 實例17:創建圓角 106

8.1.1 圓角化登錄表單 107

8.1.2 特定於瀏覽器的選擇器 108

8.1.3 回退 109

8.1.4 檢測對圓角的支持 109

8.1.5 jQuery Corners 110

8.1.6 自製表單圓角外掛程式 111

8.1.7 生成圓角 111

8.1.8 微調 112

8.2 實例18:使用陰影、漸變和變換 113

8.2.1 基礎結構 113

8.2.2 增加漸變 115

8.2.3 給標誌加上陰影 115

8.2.4 旋轉標誌 116

8.2.5 調節背景的透明度 117

8.2.6 回退 118

8.2.7 旋轉 119

8.2.8 漸變 119

8.2.9 透明度 120

8.2.10 整合 120

8.3 實例19:使用實用的字型 122

8.3.1 @font-face 122

8.3.2 字型格式 123

8.3.3 改變字型 124

8.3.4 回退 125

8.3.5 未來展望 126

第三部分 HTML5延伸

第9章 客戶端數據的使用 128

9.1 實例20:使用localStorage保存參數設定 129

9.1.1 創建參數表單 130

9.1.2 保存和載入設定 131

9.1.3 套用設定 132

9.1.4 回退 132

9.2 實例21:在客戶端關係資料庫中保存數據 135

9.2.1 瀏覽器中的CRUD 135

9.2.2 留言的前端展現 136

9.2.3 連線資料庫 138

9.2.4 創建留言表 139

9.2.5 載入留言 139

9.2.6 獲取指定記錄 140

9.2.7 插入、更新和刪除記錄 141

9.2.8 包裝 143

9.2.9 回退 144

9.3 實例22:離線運行 145

9.3.1 使用manifest定義快取 145

9.3.2 manifest和快取 146

9.3.3 未來展望 147

第10章 使用其他API錦上添花 148

10.1 實例23:維護歷史記錄 148

10.1.1 保存當前狀態 149

10.1.2 獲取先前狀態 149

10.1.3 默認狀態 150

10.1.4 回退 150

10.2 實例24:跨域對話 151

10.2.1 聯繫人列表 152

10.2.2 傳送訊息 153

10.2.3 支持頁面 153

10.2.4 接收訊息 155

10.2.5 回退 156

10.3 實例25:使用Web Sockets進行即時通信 157

10.3.1 即時通信界面 157

10.3.2 與伺服器互動 159

10.3.3 回退 160

10.3.4 什麼是Flash套接字策略 161

10.3.5 伺服器 162

10.4 實例26:Geolocation 162

10.4.1 定位Awesomeness 163

10.4.2 如何定位 163

10.4.3 回退 164

10.4.4 未來展望 166

第11章 未來的發展方向 167

11.1 CSS3變換 167

11.2 Web Workers 170

11.3 原生拖放支持 171

11.3.1 拖放事件 172

11.3.2 釋放元素 173

11.3.3 修改樣式 174

11.3.4 拖動檔案 175

11.3.5 並不完美 175

11.4 WebGL 176

11.5 Indexed Database API 176

11.6 客戶端表單驗證 176

11.7 前進! 177

附錄A 功能快速索引 178

A.1 新元素 178

A.2 屬性 178

A.3 表單 178

A.4 表單域屬性 179

A.5 可訪問性 179

A.6 多媒體 180

A.7 CSS3 180

A.8 客戶端存儲 181

A.9 其他API 181

附錄B jQuery入門 183

B.1 載入jQuery 183

B.2 jQuery基礎 183

B.3 修改內容的方法 184

B.3.1 hide和show 184

B.3.2 html、val和attr 184

B.3.3 append、prepend和wrap 185

B.3.4 CSS和類 185

B.3.5 鏈 186

B.4 創建元素 186

B.5 事件 187

B.5.1 綁定 187

B.5.2 原始事件 187

B.6 document.ready 188

附錄C 音頻和視頻編碼 189

C.1 音頻編碼 189

C.2 為Web進行視頻編碼 189

附錄D 資源 191

附錄E 參考書目 193

相關詞條

熱門詞條

聯絡我們