《零基礎學HTML5+CSS3》是針對零基礎編程學習者全新研發的HTML5+CSS3入門教程。從初學者角度出發，通過通俗易懂的語言、流行有趣的實例，詳細地介紹了使用HTML5+CSS3進行程式開發需要掌握的知識和技術。全書共分20章，包括HTML基礎、文本、圖像和超連結、CSS3概述、CSS3高級套用、表格與<div>標記、列表、表單、多媒體、HTML5新特性、離線Web應用程式、回響式網頁設計以及51購商城等。書中所有知識都結合具體實例進行講解，設計的程式代碼給出了詳細的注釋，可以使讀者輕鬆領會HTML5+CSS3程式開發的精髓，快速提高開發技能。
基本介紹
- 書名：零基礎學HTML5+CSS3
- 作者：明日科技
- ISBN：ISBN 978-7-5692-1270-9
- 頁數：400
- 定價：79.80
- 出版社：吉林大學出版社
- 出版時間：2017-12
- 開本：16
主要內容,目錄,
主要內容
本書通過大量實例及一個完整項目案例，幫助讀者更好地鞏固所學知識，提升能力；隨書附贈的《小白實戰手冊》中給出了3個流行且實用的案例的詳細開發流程，力求讓學習者能學以致用，真正獲得開發經驗；附贈的光碟中給出視頻講解、實例及項目源碼、代碼查錯器、練一練和動手糾錯答案等，方便讀者學習；書中設定了170多個二維碼，掃描二維碼觀看視頻講解，解決學習疑難；不易理解的專業術語、代碼難點只需手機掃描文字下方的e學碼獲得更多擴展解釋，隨時掃除學習障礙。
圖書與《小白實戰手冊》+光碟+二維碼+e學碼+明日學院等內容，實現立體化、全方位的教學模式，降低編程門檻，讓零基礎者輕鬆跨入編程領域。
目錄
第1章HTML基礎 2
1.1 HTML概述 3
1.1.1 什麼是HTML 3
1.1.2 HTML的發展歷程 3
1.2 HTML檔案的基本結構 4
1.2.1 HTML的基本結構 4
1.2.2 HTML的基本標記 5
1.3 編寫第一個HTML檔案 9
1.3.1 HTML檔案的編寫方法 9
1.3.2 手工編寫頁面 9
1.3.3 使用可視化軟體WebStorm
製作頁面 10
1.4 難點解答 19
1.4.1 HTML檔案中注釋的種類 19
1.4.2 topmargin屬性和margin-top屬性的
區別 19
1.5 小結 19
1.6 動手糾錯 20
第2章文本 21
2.1 標題 22
2.1.1 標題標記 22
2.1.2 標題的對齊方式 24
2.2 文字 26
2.2.1 文字的斜體、下劃線、刪除線 26
2.2.2 文字的上標與下標 28
2.2.3 特殊文字元號 29
2.3 段落 31
2.3.1 段落標記 31
2.3.2 段落的換行標記 32
2.3.3 段落的原格式標記 34
2.4 水平線 35
2.4.1 水平線標記 35
2.4.2 水平線標記的寬度 37
2.5難點解答 39
2.5.1 可以使用<font>標記設定文字的
字型和顏色嗎？ 39
2.5.2 大寫的<H1>標記和小寫的<h1>標記
有區別嗎？ 39
2.6小結 39
2.7動手糾錯 39
第3章圖像與超連結 41
3.1 添加圖像 42
3.1.1 圖像的基本格式 42
3.1.2 添加圖像 42
3.2 設定圖像屬性 44
3.2.1 圖像大小與框線 44
3.2.2 圖像間距與對齊方式 46
3.2.3 替換文本與提示文字 47
3.3 連結標記 49
3.3.1 文本連結 49
3.3.2 書籤連結 51
3.4 圖像的超連結 53
3.4.1 圖像的超連結 53
3.4.2 圖像熱區連結 55
3.5 難點解答 57
3.5.1 單擊超連結時，頁面顯示
找不到頁面 57
3.5.2 為圖片添加了熱區連結，但是單擊
連結位置並沒有跳轉頁面 57
3.6 小結 58
3.7 動手糾錯 58
第4章CSS3概述 59
4.1 CSS3概述 60
4.1.1 CSS的發展史 60
4.1.2 一個簡單的CSS示例 60
4.2 CSS3中的選擇器 64
4.2.1 屬性選擇器 64
4.2.2 類和ID選擇器 67
4.2.3 偽類和偽元素選擇器 69
4.2.4 其他選擇器 72
4.3 常用屬性 75
4.3.1 文本相關屬性 75
4.3.2 背景相關屬性 78
4.3.3 列表相關屬性 81
4.5 難點解答 84
4.5.1 類和ID選擇器是不是用的
越多越好 84
4.5.2 背景圖片無法正常顯示 84
4.6 小結 84
4.7 動手糾錯 84
第5章CSS3高級套用 85
5.1 框模型 86
5.1.1 外邊距margin 86
5.1.2 內邊距padding 89
5.1.3 框線border 92
5.2 布局常用屬性 96
5.2.1 浮動 96
5.2.2 定位相關屬性 98
5.3 動畫與特效 100
5.3.1 變換（transform） 100
5.3.2 過渡（transition） 103
5.3.3 動畫（animation） 105
5.4 難點解答 109
5.4.1 設定了浮動效果，可是元素
“巋然不動”？ 109
5.4.2 動畫無法正常播放 109
5.5 小結 110
5.6 動手糾錯 110
第6章表格與<div>標記 111
6.1 簡單表格 112
6.1.1 簡單表格的製作 112
6.1.2 表頭的設定 115
6.2 表格的高級套用 117
6.2.1 表格的樣式 117
6.2.2 表格的合併 119
6.2.3 表格的分組 121
6.3 <div>標記 123
6.3.1 <div>標記的介紹 123
6.3.2 <div>標記的套用 125
6.4 <span>標記 126
6.4.1 <span>標記的介紹 127
6.4.2 <span>標記的套用 128
6.5難點解答 129
6.5.1 有必要使用<th>表格標記嗎？
用<tr>標記替換不也一樣嗎？ 129
6.5.2 <div>標記和<span>標記
有什麼區別？ 130
6.6小結 130
6.7動手糾錯 130
第7章列表 131
7.1 列表的標記 132
7.2 無序列表 132
7.2.1 無序列表標記 133
7.2.2 無序列表屬性 134
7.3 有序列表 136
7.3.1 有序列表標記 136
7.3.2 有序列表屬性 137
7.4 列表的嵌套 139
7.4.1 定義列表的嵌套 140
7.4.2 無序列表和有序列表的嵌套 141
7.5 小結 144
7.6 動手糾錯 144
第8章表單 145
8.1 表單概述 146
8.1.1 概述 146
8.1.2 表單標記<form> 146
8.2 輸入標記 149
8.2.1 文本框 149
8.2.2 單選按鈕和複選框 151
8.2.3 按鈕 154
8.2.4 檔案域和圖像域 156
8.3 文本域和列表 158
8.3.1 文本域 159
8.3.2 列表/選單 160
8.4 難點解答 163
8.4.1 單行文本框與文本域的區別？ 163
8.4.2 檔案域控制項上顯示的文字“選擇
檔案”能否更改為其他文字？ 163
8.5 小結 163
8.6 動手糾錯 163
第9章多媒體 165
9.1 HTML5多媒體的簡述 166
9.1.1 HTML4中多媒體的套用 166
9.1.2 HTML5頁面中的多媒體 166
9.2 多媒體元素基本屬性 168
9.3 多媒體元素常用方法 171
9.3.1 媒體播放時的方法 171
9.3.2 canPlayType(type)方法 174
9.4 多媒體元素重要事件 175
9.4.1 事件處理方式 175
9.4.2 事件介紹 175
9.4.3 事件實例 176
9.5 難點解答 179
9.5.1 <source>標記有哪些重要屬性？ 179
9.5.2 如何運用controls屬性、width屬性
和height屬性？ 179
9.6 小結 179
9.7 動手糾錯 180
第10章HTML5新特性 182
10.1 誰在開發HTML5 183
10.2 HTML5的新特性 183
10.3 HTML5和HTML4的區別 185
10.3.1 HTML5的語法變化 185
10.3.2 HTML5中的標記方法 185
10.3.3 HTML5語法中需要掌握的
幾個要點 186
10.4 新增和廢除的元素 190
10.4.1 新增的結構元素 190
10.4.2 新增的塊級（block）的
語義元素 193
10.4.3 新增的行內（inline）的
語義元素 195
10.4.4 新增的嵌入多媒體元素與
互動性元素 197
10.4.5 新增的input元素的類型 198
10.4.6 廢除的元素 199
10.5 新增的屬性和廢除的屬性 199
10.5.1 新增的屬性 199
10.5.2 廢除的屬性 202
10.6難點解答 203
10.6.1 在HTML5中設定字元編碼
注意事項？ 203
10.6.2 可以省略標記的元素有哪些？ 204
10.7 小結 204
10.8動手糾錯 204
第11章JavaScript基礎 205
11.1 JavaScript概述 206
11.1.1 JavaScript的發展史 206
11.1.2 JavaScript在HTML中的使用 208
11.2 JavaScript語言基礎 210
11.2.1 數據類型 210
11.2.2 運算符與表達式 214
11.2.3 流程控制 217
11.3 JavaScript對象編程 220
11.3.1 Window視窗對象 221
11.3.2 Document文檔對象 223
11.4 JavaScript事件處理 226
11.4.1 滑鼠鍵盤事件 226
11.4.2 頁面事件 229
11.5難點解答 232
11.5.1 如何分別在JavaScript中和
HTML中調用事件處理程式？ 232
11.5.2 如何在JavaScript中驗證
表單數據？ 232
11.6小結 232
11.7動手糾錯 232
第12章繪製圖形 233
12.1 認識HTML5中的畫布Canvas 234
12.1.1 Canvas概述 234
12.1.2 使用Canvas繪製矩形 234
12.2 繪製基本圖形 236
12.2.1 繪製直線 236
12.2.2 繪製曲線 239
12.2.3 繪製圓形 242
12.3 繪製變形圖形 244
12.3.1 繪製平移效果的圖形 244
12.3.2 繪製縮放效果的圖形 245
12.3.3 繪製旋轉效果的圖形 247
12.4 繪製文字 248
12.4.1 繪製輪廓文字 248
12.4.2 繪製填充文字 250
12.4.3 文字相關屬性 251
12.5 疑難解答 253
12.5.1 beginPath()和closePath()的
使用？ 253
12.5.2 繪製平移縮放和旋轉效果圖形時
需要注意什麼？ 253
12.6 小結 253
12.7 動手糾錯 254
第13章檔案與拖放 255
13.1 選擇檔案 256
13.1.1 通過file對象選擇檔案 256
13.1.2 使用BIob接口獲取檔案的
類型與大小 257
13.2 讀取檔案 259
13.2.1 FileReader接口的方法
以及事件 259
13.2.2 使用readAsDataURL方法
預覽圖片 260
13.2.3 使用readAsText方法讀取
文本檔案 263
13.3 拖放檔案 264
13.3.1 拖放頁面元素 264
13.3.2 DataTransfer對象的屬性
與方法 266
13.3.3 使用effectAllowed和dropEffect屬性
設定拖放效果 267
13.4 疑難解答 268
13.4.1 FileReader接口中的事件執行時
有順序嗎？ 268
13.4.2 實現拖放功能時，每個拖放相關的
事件都要編寫嗎 268
13.5 小結 269
13.6 動手糾錯 269
第14章離線Web應用程式 272
14.1 離線Web套用介紹 273
14.1.1 離線Web套用 273
14.1.2 套用快取技術 274
14.2 創建離線套用 275
14.2.1 快取清單 275
14.2.2 applicationCache對象 277
14.2.3 applicationCache對象的事件 278
14.3難點解答 280
14.3.1 本地快取與瀏覽器
網頁快取的區別？ 280
14.3.2 Internet臨時保存功能可以指定
保存特定類型的檔案嗎？ 280
14.4小結 280
14.5動手糾錯 280
第15章使用Web Worker
處理執行緒 281
15.1 Web Worker概述 282
15.1.1 創建和使用Worker 282
15.1.2 Worker對象處理執行緒 283
15.2 執行緒中可用的對象和方法 286
15.3 多個JavaScript檔案的載入與執行 287
15.4 執行緒嵌套 287
15.4.1 使用執行緒的單層嵌套 287
15.4.2 使用執行緒嵌套互動數據 290
15.5難點解答 294
15.5.1 如何使用API創建Worker，如何實現
多個子執行緒之間的互動？ 294
15.5.2 Worker對象的onmessage事件
有什麼作用？ 294
15.6小結 294
15.7動手糾錯 294
第16章Web伺服器通信 295
16.1 WebSocket通信 296
16.1.1 WebSocket API介紹 296
16.1.2 HTTP通信和WebSocket通信比較 297
16.2 跨文檔訊息傳輸 298
16.2.1 使用postMessageAPI 298
16.2.2 跨文檔訊息傳輸流程 298
16.3小結 300
第17章本地存儲數據 301
17.1 初識Web Storage 302
17.1.1 Web Storage概述 302
17.1.2 Web Storage中API的使用 302
17.2 本地資料庫 306
17.2.1 Web SQL資料庫概述 306
17.2.2 Web SQL Database中API的使用 306
17.3 疑難解答 311
17.3.1 sessionStorage、localStorage
與web SQL的異同？ 311
17.3.2 本地存儲等於離線快取嗎？ 311
17.4 小結 312
17.5 動手糾錯 312
第18章回響式網頁設計 313
18.1 概述 314
18.1.1 回響式網頁設計的概念 314
18.1.2 回響式網頁設計的優缺點和
技術原理 315
18.2 像素和螢幕解析度 315
18.2.1 像素和螢幕解析度 316
18.2.2 設備像素和CSS像素 317
18.3 視口 317
18.3.1 視口 318
18.3.2 視口常用屬性 318
18.3.3 媒體查詢 319
18.4 回響式網頁的布局設計 320
18.4.1 常用布局類型 321
18.4.2 布局的實現方式 321
18.4.3 回響式布局的設計與實現 323
18.5小結 324
第19章回響式組件 325
19.1 回響式圖片 326
19.1.1 方法1：使用<picture>標記 326
19.1.2 方法2：使用CSS圖片 328
19.2 回響式視頻 330
19.2.1 方法1：使用<meta>標記 330
19.2.2 方法2：使用HTML5手機播放器 332
19.3 回響式導航選單 334
19.3.1 方法1：CSS3回響式選單 335
19.3.2 方法2：JavaScript回響式選單 337
19.4 回響式表格 340
19.4.1 方法1：隱藏表格中的列 340
19.4.2 方法2：滾動表格中的列 343
19.4.3 方法3：轉換表格中的列 345
19.5小結 347
19.6動手糾錯 347
第20章51購商城 350
20.1 項目的設計思路 351
20.1.1 項目概述 351
20.1.2 界面預覽 351
20.1.3 功能結構 353
20.1.4 資料夾組織結構 353
20.2 主頁的設計與實現 354
20.2.1 主頁的設計 354
20.2.2 頂部區和底部區功能的實現 355
20.2.3 商品分類導航功能的實現 357
20.2.4 輪播圖功能的實現 359
20.2.5 商品推薦功能的實現 361
20.2.6 適配移動端的實現 362
20.3 商品列表頁面的設計與實現 363
20.3.1 商品列表頁面的設計 363
20.3.2 分類選項功能的實現 364
20.3.3 商品列表區的實現 365
20.4 商品詳情頁面的設計與實現 367
20.4.1 商品詳情頁面的設計 368
20.4.2 商品概要功能的實現 369
20.4.3 商品評價功能的實現 371
20.4.4 猜你喜歡功能的實現 373
20.5 購物車頁面的設計與實現 374
20.5.1 購物車頁面的設計 375
20.5.2 購物車頁面的實現 375
20.6 付款頁面的設計與實現 376
20.6.1 付款頁面的設計 377
20.6.2 付款頁面的實現 377
20.7 登錄註冊頁面的設計與實現 379
20.7.1 登錄註冊頁面的設計 380
20.7.2 登錄頁面的實現 381
20.7.3 註冊頁面的實現 382
20.8小結 385
實例索引 386
