HTML5+CSS3+JavaScript Web開發案例教程

《HTML5+CSS3+JavaScript Web開發案例教程》由全棧工程師溫謙主編，2022年人民郵電出版社出版，是一本面向Web前端開發的實戰型教材。該書基於編者20年軟體開發經驗，圍繞現代Web標準與行業需求編寫，適用於高校教學及開發者參考。

全書分為基礎篇、樣式與布局篇和JavaScript開發篇，共14章，系統講解HTML5語言結構、CSS3選擇器與布局技術及JavaScript（ES6）語法套用。通過大量案例演示盒子模型、回響式布局、DOM編程等核心技術，強調“表現”與“內容”分離的規範化開發流程，配套章節習題與VS Code工具指南輔助實踐。書中內容覆蓋網頁設計與製作全流程，注重理論與工程化結合，並提供線上實訓平台資源強化學習效果。

基本介紹

• 中文名：HTML5+CSS3+JavaScript Web開發案例教程
• 作者：溫謙 
• 出版時間：2022年4月1日
• 出版社：人民郵電出版社
• ISBN：9787115577542
• 開本：16 開 
• 裝幀：平裝 

內容簡介

本書緊密圍繞前端開發工程師在工作中會遇到的實際問題和應該掌握的解決方法與技術，全面介紹了使用HTML5、CSS3和JavaScript（ES6）進行Web前端開發的知識內容與實戰技巧。

本書共14章，分三篇，遵循Web標準，強調“表現”與“內容”的分離，規範、全面、系統地介紹了網頁設計與製作的方法和技巧。書中給出了大量詳細的案例，並對案例進行了分析，便於讀者在理解的基礎上直接修改後使用。本書編者具備豐富的Web前端開發和教育培訓經驗，行文細膩，對每一個技術細節和實際工作中可能遇到的難點與錯誤都進行了詳細的說明和提示，大大降低了讀者的學習門檻。

本書可以作為高等院校相關專業的網頁設計與製作、Web前端開發等課程的教材，也可供網頁設計、製作與開發人員參考使用。讀者可以在學習並掌握本書所講的知識內容之後做出精美的網頁。

圖書目錄

章名目錄

【第 一篇】 基礎篇

第 1章 Web前端開發基礎知識

第 2章 HTML5語言基礎

第3章 CSS語言基礎

第4章 CSS3選擇器

【第二篇】 樣式與布局篇

第5章 用CSS設定文本樣式

第6章 用CSS設定圖片效果

第7章 盒子模型

第8章 用CSS設定常用元素樣式

第9章 經典DIV+CSS網頁布局方法

【第三篇】 JavaScript開發篇

第 10章 JavaScript基礎

第 11章 程式控制流與函式

第 12章 JavaScript中的對象

第 13章 以集合方式處理數據

第 14章 DOM

詳細目錄

【第 一篇】 基礎篇

第 1章 Web前端開發基礎知識

1．1 基礎概念 02

1．2 網頁與HTML語言 04

1．3 Web標準：結構、表現與行為 04

1．3．1 標準的重要性 05

1．3．2 “Web標準”概述 05

1．4 初步理解網站開發的過程 07

1．4．1 基本任務與角色 07

1．4．2 明確網站定位 08

1．4．3 收集信息和素材 08

1．4．4 策劃欄目內容 08

1．4．5 設計頁面方案 09

1．4．6 製作頁面 09

1．4．7 實現後台功能 09

1．4．8 整合與測試網站 09

1．4．9 頁面設計相關技術的基礎知識 10

本章小結 11

習題1 12

第 2章 HTML5語言基礎

2．1 HTML5基本知識 13

2．1．1 HTML檔案結構 14

2．1．2 簡單的HTML案例 15

2．1．3 網頁源檔案的獲取 19

2．2 實例：利用 VS Code 快速建立基本文檔 21

2．2．1 創建新的空白文檔 21

2．2．2 編寫基礎的HTML 21

2．3 文本標記 22

2．3．1 實現段落與段內換行（p和br） 22

2．3．2 設定標題（h1～h6） 25

2．3．3 使文字水平居中（center） 25

2．3．4 設定文欄位落的縮進（blockquote） 26

2．4 HTML標記與HTML屬性 27

2．4．1 用align屬性控制段落的水平位置 28

2．4．2 用bgcolor屬性設定背景顏色 29

2．4．3 設定文字的特殊樣式 30

2．4．4 設定文字的大小和顏色（font） 31

2．4．5 網頁中的特殊文字元號 32

2．5 在網頁中使用圖片（img） 34

2．5．1 網頁中的圖片格式 34

2．5．2 一個簡單的插入了圖片的網頁 34

2．5．3 使用路徑 35

2．5．4 用alt屬性為圖片設定替換文本 38

2．6 再談HTML5 39

2．6．1 追根溯源 39

2．6．2 HTML5的優勢與特點 40

2．6．3 HTML5的新增標記 41

2．7 實例：創建一個簡單的網頁 42

本章小結 44

習題2 44

第3章 CSS語言基礎

3．1 入門知識 46

3．1．1 CSS標準 47

3．1．2 傳統HTML的缺點 47

3．1．3 CSS的引入 48

3．1．4 如何編寫CSS 50

3．2 理解CSS規則 51

3．3 基本CSS選擇器 52

3．3．1 標記選擇器 52

3．3．2 類別選擇器 53

3．3．3 ID選擇器 56

3．4 在HTML中使用CSS的方法 57

3．4．1 行內樣式 58

3．4．2 內嵌式 58

3．4．3 連結式 59

3．4．4 導入樣式 60

3．4．5 各種方法的優先權問題 62

本章小結 65

習題3 65

第4章 CSS3選擇器

4．1 理解複合選擇器 66

4．1．1 交集選擇器 67

4．1．2 並集選擇器 68

4．1．3 後代選擇器 70

4．2 CSS的繼承和層疊特性 72

4．2．1 繼承關係 73

4．2．2 CSS繼承的運用 74

4．2．3 CSS的層疊特性 77

4．3 關係選擇器 79

4．3．1 後代選擇器 80

4．3．2 子元素選擇器 80

4．3．3 相鄰兄弟選擇器 81

4．3．4 相鄰兄弟組選擇器 81

4．4 屬性選擇器 82

4．4．1 “屬性存在”選擇器 83

4．4．2 “屬性等於”選擇器 83

4．4．3 “屬性包含”選擇器 84

4．5 結構偽類選擇器 85

4．6 偽元素選擇器 86

本章小結 88

習題4 88

【第二篇】 樣式與布局篇

第5章 用CSS設定文本樣式

5．1 長度單位 90

5．1．1 相對類型 91

5．1．2 絕對類型 91

5．2 顏色定義 92

5．3 實例：通過文字樣式美化一個頁面 93

5．3．1 準備頁面 93

5．3．2 設定文字的字型 93

5．3．3 設定文字的傾斜效果 94

5．3．4 設定文字的加粗效果 96

5．3．5 英文字母大小寫轉換 96

5．3．6 控制文字的大小 97

5．3．7 文字的裝飾效果 99

5．4 實例：通過段落樣式美化頁面 100

5．4．1 設定段落首行縮進 100

5．4．2 設定字詞間距 101

5．4．3 設定段落內部的文字行高 102

5．4．4 設定段落之間的距離 103

5．4．5 控制文本的水平位置 104

5．4．6 設定文字及其背景色 105

5．4．7 設定文字的特效 105

本章小結 106

習題5 107

第6章 用CSS設定圖片效果

6．1 設定圖片框線 108

6．1．1 基本屬性 109

6．1．2 為不同的框線分別設定樣式 110

6．2 圖片縮放 112

6．3 圖文混排 113

6．3．1 文字環繞 113

6．3．2 設定圖片與文字的間距 114

6．4 實例：八大行星科普網頁 115

6．5 設定圖片與文字的對齊方式 118

6．5．1 橫向對齊 118

6．5．2 縱向對齊 119

本章小結 120

習題6 121

第7章 盒子模型

7．1 “盒子”與“模型”的概念探究 123

7．2 框線（border） 124

7．2．1 設定框線樣式（border-style） 125

7．2．2 屬性值的簡寫形式 126

7．3 設定內邊距（padding） 128

7．4 設定外邊距（margin） 129

7．5 盒子之間的關係 130

7．5．1 HTML與DOM 130

7．5．2 標準文檔流 133

7．5．3 div標記與span標記 135

7．6 盒子在標準流中的定位原則 137

7．6．1 行內元素之間的水平margin 138

7．6．2 塊級元素之間的豎直margin 139

7．6．3 嵌套盒子之間的margin 140

7．6．4 margin屬性可以設定為負數 141

7．7 實例：盒子模型計算思考題 142

7．8 盒子模型相關的常用樣式 145

7．8．1 背景 145

7．8．2 圓角 152

7．8．3 陰影 154

7．8．4 漸變 155

本章小結 158

習題7 158

第8章 用CSS設定常用元素樣式

8．1 設定連結與導航選單 160

8．1．1 超連結標記 160

8．1．2 豐富的超連結特效 162

8．1．3 控制滑鼠指針 165

8．1．4 設定項目列表樣式 166

8．1．5 實例：創建簡單的導航選單 168

8．2 設定表格樣式 171

8．2．1 表格中的標記 171

8．2．2 設定表格的框線 173

8．2．3 確定表格的寬度 174

8．2．4 合併單元格 174

8．2．5 其他與表格相關的標記 177

8．2．6 實例：美化表格 178

8．3 設定表單樣式 182

8．3．1 表單的用途和原理 182

8．3．2 表單輸入類型 183

8．3．3 實例：美化表單 188

本章小結 190

習題8 190

第9章 經典DIV&CSS網頁布局方法

9．1 向報紙學習排版思想 193

9．2 CSS排版觀念 195

9．2．1 兩列布局 195

9．2．2 三列布局 195

9．2．3 多列布局 196

9．3 元素的浮動 197

9．3．1 浮動的方式 198

9．3．2 使用clear屬性清除浮動的影響 201

9．3．3 擴展盒子的高度 202

9．4 元素的定位 204

9．4．1 靜態定位（static） 204

9．4．2 相對定位（relative） 205

9．4．3 絕對定位（absolute） 208

9．4．4 固定定位（fixed） 210

9．5 z-index空間位置 210

9．6 經典兩列布局 211

9．6．1 準備工作 211

9．6．2 絕對定位法 214

9．6．3 浮動定位法 216

9．7 Grid和Flexbox布局 218

本章小結 219

習題9 219

【第三篇】 JavaScript開發篇

第 10章 JavaScript基礎

10．1 JavaScript簡介 223

10．1．1 JavaScript的起源、發展與標準化 223

10．1．2 JavaScript的組成 224

10．2 JavaScript的基本語法 226

10．3 使用VS Code編寫第 一個包含JavaScript的頁面 227

10．3．1 創建基礎的HTML文檔 227

10．3．2 編寫JavaScript 228

10．3．3 在瀏覽器中查看與調試 229

10．4 關鍵字與保留字 230

10．5 變數 231

10．6 數據類型 233

10．6．1 數值類型 233

10．6．2 字元型 234

10．6．3 布爾型 238

10．6．4 類型轉換 238

10．6．5 數組 240

本章小結 244

習題10 245

第 11章 程式控制流與函式

11．1 順序結構：賦值語句與表達式 247

11．2 分支結構：條件語句 247

11．2．1 比較運算符 248

11．2．2 邏輯運算符 248

11．2．3 if語句 249

11．2．4 switch語句 250

11．3 循環語句 252

11．3．1 while語句 252

11．3．2 do…while語句 252

11．3．3 for語句 254

11．3．4 break和continue語句 255

11．3．5 實例：九九乘法表 257

11．3．6 for…of語句 259

11．3．7 for…in語句 259

11．4 函式 260

11．4．1 定義函式的基本方法 260

11．4．2 arguments對象 262

11．4．3 實例：楊輝三角形 264

11．4．4 變數的作用域 266

11．4．5 函式作為函式的參數 268

11．4．6 箭頭函式 269

11．5 異常處理 270

本章小結 273

習題11 273

第 12章 JavaScript中的對象

12．1 理解對象的含義 274

12．1．1 理解常見的“類-對象”結構 275

12．1．2 理解JavaScript中的對象 276

12．1．3 使用ES6的class語法創建類和對象 277

12．2 時間日期：Date對象 279

12．3 數學計算：Math對象 283

12．4 原始類型與裝箱 285

12．4．1 Boolean 286

12．4．2 Number 287

12．4．3 String 288

12．5 BOM對象 289

12．5．1 window對象 289

12．5．2 location對象 292

12．5．3 navigator對象 293

12．5．4 screen對象 295

12．5．5 history對象 295

本章小結 298

習題12 298

第 13章 以集合方式處理數據

13．1 數組 300

13．1．1 數組的基本操作 300

13．1．2 作為不同數據結構的數組 302

13．2 對象 306

13．3 集合類型 307

13．3．1 Map集合 307

13．3．2 Set集合 309

本章小結 310

習題13 311

第 14章 DOM

14．1 網頁中的DOM框架 312

14．2 DOM中的節點 313

14．2．1 元素節點 313

14．2．2 文本節點 314

14．2．3 屬性節點 314

14．3 通過JavaScript訪問DOM 314

14．3．1 訪問節點 315

14．3．2 檢測節點類型 317

14．3．3 父子兄關係 317

14．3．4 節點屬性 320

14．3．5 創建和操作節點 321

14．4 DOM與CSS 325

14．4．1 HTML、CSS、JavaScript三位一體 325

14．4．2 className屬性 326

14．5 事件 326

14．5．1 事件與事件流 327

14．5．2 事件監聽 328

14．5．3 事件對象 330

本章小結 331

習題14 332