HTML + CSS + JavaScript 入門經典, 3/e (HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself, 3/e)

Julie C. Meloni ,Jennifer Kyrnin

  • HTML + CSS + JavaScript 入門經典, 3/e (HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself, 3/e)-preview-1
  • HTML + CSS + JavaScript 入門經典, 3/e (HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself, 3/e)-preview-2
HTML + CSS + JavaScript 入門經典, 3/e (HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself, 3/e)-preview-1

買這商品的人也買了...

商品描述

本書是一本介紹HTML、CSS和JavaScript的入門圖書。全書分為6個部分,共28課。本書系統、全面地介紹了Web前端的基礎知識,並結合大量最佳實踐,幫助讀者循序漸進地學習Web前端設計及開發。

本書第Ⅰ部分包括第1課~第5課,主要介紹Web的基礎知識,涉及Web的基本工作原理,HTML、CSS以及JavaScript概述,基本驗證調試代碼的方法等內容。第Ⅱ部分包括第6課~第8課,主要介紹HTML網頁設計,詳細描述了HTML中的字體、文本、列表、表格、鏈接、顏色、圖像和多媒體資源等內容。第Ⅲ部分包括第9課~第15課,主要介紹CSS高級網頁設計,深入分析目前CSS的概念和使用方法,包括盒子模型、佈局、過渡及動畫等內容。第Ⅳ部分包括第16課~第18課,主要介紹響應式Web設計,著重講述了響應式Web設計、移動優先以及媒體查詢等知識。第Ⅴ部分包括第19課~第26課,主要介紹動態網站入門,從文檔對象入手,深入講解了JavaScript的相關知識。第Ⅵ部分包括第27課和第28課,主要介紹高級網站功能及管理,描述了Web中的表單以及如何更全面地組織和管理網站。

本書非常適合Web前端開發者,特別是那些想全面學習HTML、CSS和JavaScript的開發者閱讀。

作者簡介

珍妮弗.凱瑞恩是網頁設計和開發方面的專業顧問。
她建立並維護了各種規模的網站,從小型單頁網站到面向百萬級國際用戶的大型數據庫驅動網站。
她從1997年開始在線教授HTML、XML和Web設計,並且是Sams Teach Yourself HTML5 Mobile Application Development、Sams Teach Yourself Responsive Web Design和Sams Teach Yourself Bootstrap的作者。


朱莉.C.梅洛尼是一名軟件開發經理和技術顧問,生活在華盛頓特區。
她編寫過多本與Web編程語言和數據庫主題相關的圖書和若干篇文章,其中包括暢銷書Sams Teach Yourself PHP、MySQL and Apache All in One。

目錄大綱

第Ⅰ部分Web入門
第1課深入理解Web工作原理3
1.1 HTML和萬維網簡史4
1.2創建Web內容4
1.3理解Web內容傳遞5
1.4選擇Web託管提供商7
1.5使用多種Web瀏覽器和設備進行測試8
1.6創建示例文件9
1.7使用FTP傳輸文件10
1.7.1選擇FTP客戶端10
1.7.2使用FTP客戶端11
1.8 Web服務器放置文件的位置13
1.8.1基本文件管理13
1.8.2使用索引頁15
1.9在沒有Web服務器的情況下分發內容15
1.9.1在本地發佈內容16
1.9 .2在博客上發佈內容16
1.10測試Web內容的建議16
1.11總結17
1.12問與答17
1.13實踐18
1.13.1測驗18
1.13.2答案18
1. 14練習19

第2課構建HTML文檔20
2.1準備工作21
2.2簡單網頁入門21
2.3網頁必要的HTML標籤24
2.4用段落和換行符組織頁面26
2.5用標題組織內容28
2.6理解語義元素31
2.7多種方式使用35
2.8理解元素37
2.9使用38
2.10實現元素38
2.11何時使用39
2.12有效地使用40
2.13總結41
2.14問與答42
2.15實踐42
2.15.1測驗42
2.15.2答案43
2.16練習44

第3課理解層疊樣式表45
3. 1 CSS是如何工作的45
3.2基本樣式表47
3.3 CSS樣式入門52
3.3.1基本佈局屬性52
3.3.2基本格式屬性53
3.4使用樣式類56
3.5使用樣式ID 57
3.6內部樣式表和內聯樣式58
3.7總結60
3.8問與答61
3.9實踐61
3.9.1測驗61
3.9.2答案62
3.10練習62

第4課理解JavaScript 63
4.1 Web腳本基礎64
4.1.1腳本和編程64
4.1.2 JavaScript概述64
4.2 JavaScript如何應用於網頁65
4.2.1使用單獨的JavaScript文件66
4.2.2理解JavaScript事件67
4.3探索JavaScript的功能68
4.3.1改進導航68
4.3.2表單驗證68
4.3.3特殊效果68
4.3.4遠程腳本68
4.4使用JavaScript顯示時間69
4.4.1使用變量存儲數據69
4.4.2計算結果70
4.4.3創建輸出70
4.4.4將腳本添加到網頁71
4.5測試腳本71
4.5.1修改腳本72
4.5.2處理JavaScript錯誤73
4.6總結75
4.7問與答75
4.8實踐76
4.8.1測驗76
4.8.2答案77
4.9練習78

第5課驗證和調試代碼79
5.1驗證HTML和CSS代碼79
5. 2使用開發者工具調試HTML和CSS代碼81
5.2.1使用檢查器調試HTML代碼83
5.2.2使用檢查器調試CSS代碼88
5.3使用開發者工具調試JavaScript代碼92
5.4總結96
5.5問與答97
5.6實踐97
5.6.1測驗97
5.6 .2答案97
5.7練習98

第Ⅱ部分實用網頁設計的組成部分
第6課使用字體、文本塊、列表和表格101
6.1使用特殊字符102
6.2粗體、斜體和特殊文本格式105
6.3調整字體107
6.4使用Web字體111
6.5對齊頁面上的文本113
6.5.1使用樣式、類和ID屬性113
6.5.2對齊塊級元素113
6.6 3種類型的HTML列表115
6.7列表嵌套118
6.8創建簡單表格122
6.9控製表格大小126
6.10表格內的對齊和跨距128
6.11帶錶格的頁面佈局131
6.12使用CSS columns 132
6.13總結135
6.14問與答136
6.15實踐137
6.15.1測驗137
6.15.2答案137
6.16練習138

第7課使用外部和內部鏈接139
7.1使用網址139
7.2使用頁面內錨鏈接142
7.2.1用定位點標識頁面中的位置142
7.2.2鏈接到錨點142
7.3鏈接到自己的Web內容145
7.4鏈接到非HTML文件147
7.5鏈接到外部Web內容148
7.6鏈接到電子郵箱地址149
7.7在瀏覽器新窗口中打開鏈接150
7.8為鏈接賦予標題151
7.9使用CSS設置超鏈接樣式151
7.10有效地使用鏈接154
7.11總結155
7.12問與答156
7.13實踐157
7.13.1測驗157
7.13.2答案157
7.14練習158

第8課使用顏色、圖像和多媒體159
8.1選擇顏色的最佳實踐160
8.2了解網頁顏色161
8.3使用十六進制值表示顏色163
8.4使用RGB和RGBa值表示顏色164
8.5使用CSS設置背景、文本和邊框顏色165
8.6選擇圖像軟件167
8.7圖像必備知識168
8.8準備攝影圖像169
8.8.1裁剪圖像169
8.8.2調整圖像大小171
8.8.3調整圖像顏色172
8.8.4控制JPEG壓縮173
8.9創建橫幅和按鈕174
8.10減少或刪除顏色以優化圖像175
8.11創建平鋪背景圖像176
8.12在網頁上放置圖像177
8.13用文本描述圖像179
8.14指定圖像高度和寬度180
8.15對齊圖像181
8.15.1水平圖像對齊181
8.15.2垂直圖像對齊182
8.16將圖像轉換為鏈接184
8.17使用背景圖像187
8.18使用圖像映射188
8.18.1為什麼不總需要圖像映射188
8.18.2映射圖像中的區域189
8.18.3為圖像映射創建HTML代碼189
8.19鏈接多媒體文件190
8.20嵌入多媒體文件193
8.20.1使用元素在網頁上播放視頻193
8.20.2使用元素進行音頻播放195
8.21使用多媒體的附加提示197
8.22總結198
8.23問與答199
8.24實踐200
8.24.1測驗200
8.24.2答案201
8.25練習201

第Ⅲ部分使用CSS進行高級網頁設計
第9課使用外邊距、內邊距、對齊和浮動205
9.1使用外邊距205
9.2內邊距元素212
9.3保持對齊215
9.4內容塊居中216
9.5理解float屬性216
9.6總結219
9.7問與答219
9.8實踐219
9.8.1測驗220
9.8.2答案220
9.9練習221

第10課理解CSS盒子模型和定位222
10.1 CSS盒子模型222
10.2更改盒子模型225
10.3整體定位226
10.4控制層疊順序230
10.5管理文本流232
10.6總結233
10.7問與答233
10.8實踐234
10.8.1測驗234
10.8.2答案234
10.9練習235

第11課使用CSS對列表、文本和導航進行更多操作236
11.1 HTML列表刷新器236
11.2 CSS盒子模型如何作用於列表237
11.3放置列表項指示符240
11.4使用列表項和CSS創建圖像映射241
11.5導航列表與常規列表的區別245
11.6使用CSS創建垂直導航245
11.6.1設置單層垂直導航的樣式248
11.6.2設置多級垂直導航的樣式250
11.7使用CSS創建水平導航253
11.8總結257
11.9問與答257
11.10實踐258
11.10.1測驗258
11.10.2答案258
11.11練習259

第12課使用現代CSS技術創建佈局260
12.1準備進行頁面佈局261
12.2移動設備優先的重要性261
12.3理解固定佈局262
12.4理解流式佈局264
12.5創建固定/流式混合佈局266
12.5.1從基本佈局結構開始266
12.5.2在固定/流式混合佈局中定義兩列267
12.5.3設置佈局的最小和最大寬度269
12.5.4處理固定/流式混合佈局中的列高270
12.6使用現代CSS佈局技術275
12.6.1如何使用CSS的display:table;屬性275
12.6.2理解CSS彈性盒子佈局模型278
12.6.3理解CSS網格佈局模型282
12.7總結286
12.8問與答286
12.9實踐287
12.9.1測驗287
12.9.2答案288
12.10練習288

第13課控制背景和邊框289
13.1了解背景和邊框289
13.2使用多個邊框和背景290
13.3使用被遺忘的背景屬性294
13.3.1選擇如何放置背景294
13.3.2更改背景大小295
13.3.3定位背景圖像295
13.3.4更改背景滾動296
13.3.5交替背景色298
13.4使用漸變作為背景299
13.4.1創建線性漸變299
13.4.2創建放射漸變300
13.5將HTML元素的邊角四捨五入304
13.6使用圖像作為邊框305
13.6.1定義邊框圖像:border-image-source 306
13.6.2裁剪邊框圖像:border-image-slice 306
13.6.3定義邊框圖像寬度307
13. 6.4將邊框圖像擴展到邊框邊緣之外308
13.6.5使圖像適應邊框308
13.7理解CSS輪廓309
13.8總結310
13.9問與答310
13.10實踐311
13.10 .1測驗311
13.10.2答案311
13.11練習312

第14課使用CSS轉換和過渡313
14.1理解CSS二維轉換313
14.1.1使用transform:rotate();旋轉元素314
14 .1.2使用transform:scale();使元素變大/變小315
14.1.3使用transform:translate();移動元素316
14.1.4使用transform:skew();傾斜元素318
14 .1.5使用多重轉換320
14.2三維轉換元素321
14.3使用CSS轉換322
14.4使用JavaScript觸發轉換324
14.5總結325
14.6問與答326
14.7實踐326
14.7.1測驗326
14.7.2答案327
14.8練習327

第15課使用CSS和Canvas製作動畫328
15.1理解CSS動畫328
15.1.1定義關鍵幀329
15.1.2調整動畫331
15.2使用CSS Canvas 335
15.2.1如何使用Canvas 336
15.2.2在Canvas上繪製形狀336
15.2.3將圖像添加到Canvas 341
15.2.4設置Canvas動畫344
15.3在CSS動畫和Canvas動畫之間選擇347
15.4總結347
15.5問與答348
15.6實踐348
15.6.1測驗348
15.6.2答案348
15.7練習349

第Ⅳ部分響應式Web設計
第16課理解響應式Web設計的重要性353
16.1響應式Web設計353
16.1.1 RWD簡史354
16.1.2為什麼我們需要響應式Web設計354
16.1.3為什麼響應式Web設計對移動用戶很重要355
16.2漸進式增強356
16.2.1如何在網站上使用漸進式增強356
16.2.2漸進式增強的好處358
16.3為響應式Web設計編寫HTML代碼359
16.3.1使用每個頁面應使用的標籤359
16.3.2為Web內容編寫標籤360
16.3.3了解基本屬性360
16.4驗證HTML、CSS和JavaScript代碼361
16.5總結362
16.6問與答362
16.7實踐363
16.7.1測驗363
16.7.2答案363
16.8練習364

第17課為移動設備設計365
17.1移動設備網頁設計365
17.1.1理解為什麼移動設備網頁設計很重要366
17.1.2設計有效的移動接口367
17.2理解移動優先設計372
17.2.1在為計算機設計之前為移動設備設計372
17.2.2如何使用移動優先372
17.2.3為什麼移動優先有用373
17.2.4移動優先為何失效374
17.2.5只使用移動設備網頁設計或構建應用程序374
17.3使用響應式表格和圖像375
17.3.1如何使表格響應375
17.3.2如何使圖像響應380
17.4無須媒體查詢即可創建響應式佈局382
17.5除響應式Web設計外的其他移動設計方案384
17.5.1為什麼響應式Web設計可能不是答案384
17.5.2自適應設計和動態服務385
17.5.3使用單獨的URL或域名385
17.6總結386
17.7問與答386
17.8實踐386
17.8.1測驗386
17.8.2答案387
17.9練習387

第18課使用媒體查詢和斷點388
18.1什麼是媒體查詢388
18.1.1使用媒體類型389
18.1.2使用媒體功能391
18.2使用媒體查詢表達式392
18.3什麼是斷點393
18.4如何在CSS中定義斷點393
18.4.1為每個設備定義統一的樣式395
18.4.2為小屏幕添加特定樣式396
18.4.3為大屏幕添加媒體查詢397
18.5最佳斷點398
18.5.1斷點的最佳實踐398
18.5.2視網膜設備的媒體查詢398
18.6總結398
18.7問與答399
18.8實踐399
18.8.1測驗399
18.8.2答案400
18.9練習400

第Ⅴ部分動態網站入門
第19課理解動態網站和HTML5應用程序403
19.1了解不同類型的腳本403
19.2在HTML文件中引入JavaScript代碼404
19.3顯示隨機內容406
19.4理解文檔對像模型409
19.4.1什麼是不引人注目的JavaScript 410
19.4.2用DOM使腳本不引人注目410
19.5基於用戶交互更改圖像412
19.6關於開發HTML5應用程序的思考414
19.7總結415
19.8問與答415
19.9實踐415
19.9.1測驗415
19.9.2答案418
19.10練習419

第20課JavaScript編程入門420
20.1基本概念420
20 .1.1語句420
20.1.2使用函數與任務結合421
20.1.3變量422
20.1.4理解對象422
20.1.5條件423
20.1.6循環423
20.1. 7事件句柄423
20.1.8哪個腳本先運行425
20.2 JavaScript語法規則426
20.2.1大小寫敏感426
20.2.2變量、對象和函數名426
20.2.3保留字426
20.2.4空白426
20.3使用註釋426
20.4 JavaScript的最佳實踐427
20.5了解JSON 428
20.6總結428
20.7問與答429
20.8實踐429
20.8.1測驗429
20.8.2答案431
20.9練習431

第21課使用文檔對像模型432
21.1理解文檔對像模型432
21.2使用window對象433
21.3使用document對象433
21.3.1獲取文檔信息434
21.3.2在文檔中寫入文本435
21.3.3使用鏈接和錨點435
21.4使用history對象436
21.5使用location對象438
21.6有關DOM結構的詳細信息439
21.6.1節點440
21.6.2父節點和子節點440
21.6.3兄弟節點440
21.7使用DOM節點440
21.7.1節點基本屬性441
21.7.2節點關係屬性441
21.7.3文檔方法441
21.7.4節點方法442
21.8創建可定位元素/層442
21.9隱藏和顯示對象447
21.10修改頁面中的文本448
21.11向頁面添加文本449
21.12總結451
21.13問與答451
21 .14實踐452
21.14.1測驗452
21.14.2答案453
21.15練習454

第22課使用JavaScript變量、字符串和數組455
22.1使用變量456
22.1.1選擇變量名456
22.1.2使用局部變量和全局變量456
22.1.3對變量賦值457
22. 2理解表達式和運算符458
22.2.1使用JavaScript運算符458
22.2.2運算符優先級459
22.3 JavaScript中的數據類型459
22.4在數據類型之間轉換460
22.5使用字符串對象461
22.5.1創建一個字符串對象461
22.5.2賦值461
22.5.3計算字符串的長度463
22.5.4轉換字符串的大小寫463
22.6使用子字符串463
22.6.1使用字符串的一部分464
22.6.2獲得單個字符464
22.6.3查找子字符串465
22.7使用數值數組465
22.7.1創建數值數組465
22.7.2理解數組長度466
22.7.3訪問數組元素466
22.8使用字符串數組467
22.8.1創建字符串數組467
22.8.2拆分字符串467
22.8.3對字符串數組排序468
22.9對數值數組排序468
22.10使用函數470
22.10.1定義函數470
22.10.2調用函數472
22.10.3返回值473
22 .11介紹對象475
22.11.1創建對象475
22.11.2理解方法476
22.12使用對像簡化腳本476
22.12.1定義對象476
22.12.2定義對象方法477
22.12. 3創建對象實例478
22.13擴展內置對象480
22.14使用Math對象482
22.14.1舍入482
22.14.2生成隨機數482
22.14.3其他Math方法483
22.15使用Math方法483
22.16使用日期485
22.16.1創建Date對象485
22.16.2設置Date值486
22.16.3讀取Date值486
22.16.4使用時區486
22.16.5在日期格式之間轉換487
22.17總結487
22.18問與答487
22.19實踐488
22.19.1測驗488
22.19.2答案490
22.20練習490

第23課用條件和循環控制流491
23.1 if語句492
23.1.1條件運算符492
23.1.2條件與邏輯運算符組合493
23.1.3 else關鍵字494
23.2使用簡寫條件表達式494
23.3使用if和else測試多個條件495
23.3.1 HTML文件496
23.3.2 JavaScript文件496
23.4使用switch表示多個條件497
23.5使用for循環499
23.6使用while循環501
23.7使用do…while循環501
23.8使用循環502
23.8.1創建無限循環502
23.8.2從循環中退出502
23.8.3繼續循環503
23.9通過對象屬性循環503
23.10總結506
23.11問與答506
23.12實踐506
23.12.1測驗506
23.12.2答案508
23.13練習508

第24課響應事件和使用window對象509
24.1理解事件處理程序510
24.1.1對象和事件510
24.1.2創建事件處理程序510
24.1.3用JavaScript定義事件處理程序511
24.1.4支持多個事件處理程序511
24.1.5利用event對象513
24.2使用鼠標事件514
24.2.1 mouseover和mouseout 514
24.2.2 mouseup、mousedown和click 514
24.3使用鍵盤事件517
24.4使用load和unload事件519
24.5使用click事件更改元素的樣式520
24.6用對象控制窗口526
24.6.1 window對象的屬性526
24.6.2創建新窗口527
24.6.3打開和關閉窗口528
24.7移動和調整窗口大小530
24.8使用超時531
24.9顯示對話框533
24.10總結535
24.11問與答535
24.12實踐536
24.12.1測驗536
24 .12.2答案537
24.13練習538

第25課JavaScript最佳實踐539
25.1編寫最佳實踐腳本539
25.1.1避免過度使用JavaScript 540
25.1.2內容、呈現和行為540
25.1.3網頁加載速度541
25.1.4優雅降級541
25.1.5漸進式增強542
25.1.6添加事件處理程序542
25.1.7 Web標準:避免指定瀏覽器544
25.1.8正確處理錯誤544
25.1.9註釋代碼545
25.1.10確保可用性546
25.1.11確保可訪問性546
25.1.12從設計模式中獲益547
25.1.13盡可能複用代碼547
25.2獲取瀏覽器信息548
25.2.1顯示瀏覽器信息548
25.2.2處理“不誠實”的瀏覽器550
25.3跨瀏覽器腳本551
25.3.1功能感知551
25. 3.2處理瀏覽器錯誤552
25.4支持禁用JavaScript的瀏覽器552
25.4.1使用標籤553
25.4.2保持JavaScript可選553
25.4.3避免錯誤554
25.5創建一個不引人注目的腳本554
25.6總結556
25.7問與答557
25.8實踐557
25.8.1測驗557
25.8.2答案559
25.9練習559

第26課使用第三方JavaScript庫和框架560
26.1使用第三方JavaScript庫560
26.1.1 jQuery 561
26.1.2 Prototype 563
26.1.3 script.aculo.us 563
26.1.4其他流行的第三方JavaScript庫564
26.2使用第三方庫添加JavaScript效果564
26.3使用JavaScript框架566
26.4總結567
26.5問與答568
26.6實踐568
26.6.1測驗568
26.6.2答案570
26.7練習570

第Ⅵ部分高級網站功能及管理
第27課使用基於Web的表單573
27.1 HTML表單如何工作573
27.2創建表單574
27.3接受文本輸入579
27.4表單數據580
27.5標記表單數據580
27.6分組表單元素581
27.7瀏覽表單輸入控件582
27.7.1複選框582
27.7.2單選按鈕584
27.7. 3選擇列表585
27.7.4文本字段、文本區域和其他輸入類型587
27.7.5向文本字段添加數據588
27.8使用HTML5表單驗證589
27.9提交表單數據591
27.9.1理解元素592
27.9.2使用JavaScript處理表單事件593
27.10使用JavaScript訪問表單元素593
27.11總結595
27.12問與答597
27.13實踐597
27.13.1測驗597
27.13 .2答案599
27.14練習600

第28課組織和管理網站601
28.1單個頁面602
28.2組織一個簡單的網站603
28.3組織更大的網站604
28.4為搜索引擎優化網站606
28.4.1創建有趣的內容607
28.4.2保持導航可用607
28.4.3為移動設備編碼607
28.5編寫可維護代碼608
28.5.1用註釋記錄代碼608
28.5.2為了清晰,縮進代碼610
28 .6關於版本控制的思考610
28.7使用HTML和CSS框架612
28.8總結612
28.9問與答613
28.10實踐613
28.10.1測驗613
28.10.2答案615
28. 11練習615