Web前端開發技術

目    錄 

 

第1章　概述  1

1.1  Web概述  1

1.1.1  Web的起源  1

1.1.2  Web的特點  2

1.1.3  Web的工作原理  3

1.1.4  Web的相關概念  4

1.2  Web前端開發技術  5

1.2.1  HTML  6

1.2.2  CSS  7

1.2.3  JavaScript  7

1.2.4  AJAX  7

1.2.5  jQuery  8

1.3  Web前端開發工具  8

1.3.1  Visual Studio Code  8

1.3.2  HBuilder X  9

1.3.3  WebStorm  9

1.4  瀏覽器工具  10

1.4.1  Microsoft Edge  10

1.4.2  Google Chrome  11

1.4.3  Safari  12

1.5  習題  12

第2章　HTML基礎  14

2.1  HTML基本結構  14

2.2  頭部head  15

2.2.1  標題title標簽  15

2.2.2  元信息meta標簽  15

2.3  主體body  17

2.3.1  body標簽  17

2.3.2  body標簽的屬性  18

2.4  HTML基本語法  19

2.4.1  標簽的類型  19

2.4.2  HTML屬性  19

2.5  註釋  21

2.6  HTML文檔編寫規範  21

2.6.1  HTML代碼書寫規範  21

2.6.2  HTML文檔的命名規則  22

2.7  HTML文檔的類型  22

2.7.1  !doctype標簽  22

2.7.2  HTML5的DTD定義  23

2.8  綜合案例  23

2.9  習題  25

第3章　HTML格式化文本、段落和圖像  26

3.1  Web頁面初步設計  26

3.1.1  向Web頁面中添加文字信息  26

3.1.2  標題字標簽  26

3.1.3  添加空格與特殊符號  27

3.2  格式化文本標簽  28

3.2.1  文本修飾標簽  28

3.2.2  字體標簽  29

3.3  段落與排版標簽  30

3.3.1  段落標簽  30

3.3.2  換行標簽  31

3.3.3  水平分隔線標簽  31

3.3.4  段落縮進標簽  31

3.3.5  預格式化標簽  32

3.4  圖像  33

3.4.1  插入圖像  33

3.4.2  設置圖像的替代文本  33

3.4.3  設置圖像的高度和寬度  34

3.4.4  設置圖像的邊框  34

3.4.5  設置圖像的對齊方式  35

3.4.6  設置圖像的間距  35

3.5  綜合案例  37

3.6  習題  38

第4章　HTML超鏈接與框架  39

4.1  超鏈接概述  39

4.2  超鏈接的語法、路徑及分類  40

4.2.1  超鏈接的語法  40

4.2.2  超鏈接的路徑  41

4.2.3  超鏈接的分類  42

4.3  超鏈接的應用  44

4.3.1  創建HTTP文檔下載超鏈接  44

4.3.2  創建FTP站點訪問超鏈接  44

4.3.3  創建圖像超鏈接  44

4.3.4  創建電子郵件超鏈接  44

4.3.5  創建頁面書簽鏈接  46

4.4  HTML框架  48

4.4.1  框架標簽  48

4.4.2  內聯框架  49

4.5  綜合案例  50

4.6  習題  52

第5章　HTML列表  53

5.1  列表簡介  53

5.2  無序列表  53

5.3  有序列表  56

5.4  列表嵌套  58

5.5  自定義列表  59

5.6  綜合案例  61

5.7  習題  63

第6章　HTML表格  65

6.1  表格概述  65

6.2  表格標簽  66

6.3  表格屬性設置  68

6.3.1  表格屬性  69

6.3.2  表格邊框樣式屬性  71

6.3.3  表格的單元格間距、單元格邊距屬性  73

6.3.4  表格的水平對齊屬性  74

6.4  設置表格行的屬性  76

6.5  設置單元格的屬性  78

6.6  表格的嵌套  79

6.7  綜合案例  81

6.8  習題  85

第7章　HTML表單  87

7.1  表單概述  87

7.2  定義域和域標題  89

7.3  表單信息的輸入  90

7.3.1  單行文本輸入框、密碼文本框  91

7.3.2  復選框與單選按鈕  92

7.3.3  圖像按鈕  93

7.3.4  提交按鈕、重置按鈕和普通按鈕  94

7.3.5  文件選擇框及隱藏框  95

7.4  多行文本輸入框  97

7.5  下拉列表框  98

7.6  綜合案例  100

7.7  習題  103

第8章　CSS基礎知識  105

8.1  CSS簡介  105

8.1.1  CSS的基本概念  105

8.1.2  傳統HTML的缺點  105

8.1.3  CSS的特點  105

8.1.4  CSS的優勢  105

8.1.5  CSS的使用方式  106

8.2  使用CSS控制Web頁面  106

8.2.1  CSS基本語法  106

8.2.2  CSS選擇器類型  107

8.2.3  CSS選擇器聲明  110

8.2.4  CSS定義與引用  111

8.3  CSS繼承與層疊  114

8.4  CSS3新特性  115

8.5  綜合案例  123

8.6  習題  127

第9章　DIV與SPAN  129

9.1  DIV圖層  129

9.1.1  DIV定義  129

9.1.2  DIV應用  130

9.2  圖層嵌套與層疊  131

9.2.1  DIV嵌套  131

9.2.2  DIV層疊  133

9.3  span標簽  134

9.4  綜合案例  136

9.5  習題  138

第10章　CSS樣式屬性  140

10.1  CSS屬性值中的單位  140

10.1.1  絕對單位  140

10.1.2  相對單位  141

10.2  CSS字體樣式  143

10.2.1  font-size屬性  143

10.2.2  font-style屬性  146

10.2.3  font-family屬性  147

10.2.4  font-variant屬性  149

10.2.5  font-weight屬性  149

10.2.6  font屬性  149

10.3  CSS文本樣式  150

10.3.1  行距、首行縮進與字符間距屬性  150

10.3.2  字符裝飾、英文大小寫轉換屬性  151

10.3.3  水平對齊、垂直對齊屬性  153

10.4  CSS顏色與背景  154

10.4.1  color屬性  154

10.4.2  background屬性  156

10.5  CSS列表樣式  158

10.6  CSS盒模型  160

10.6.1  CSS盒模型結構  160

10.6.2  邊界屬性設置  162

10.6.3  邊框屬性設置  164

10.6.4  填充屬性設置  166

10.7  綜合案例  169

10.8  習題  174

第11章　DIV+CSS頁面布局  176

11.1  頁面布局設計  176

11.1.1  “三行模式”和“三列模式”  176

11.1.2  “三行二列模式”和“三行三列模式”  180

11.2  導航菜單設計  185

11.2.1  對象的顯示與隱藏  185

11.2.2  一級水平導航菜單  187

11.2.3  二級水平導航菜單  188

11.3  綜合案例  191

11.4  習題  193

第12章　HTML5基礎  195

12.1  HTML5概述  195

12.2  HTML5文檔結構  195

12.2.1  HTML5頁面結構  195

12.2.2  HTML5新增的結構元素  198

12.3  HTML5表單  198

12.3.1  HTML5新增的表單屬性  198

12.3.2  HTML5新增的表單元素  199

12.3.3  HTML5新增的input類型元素  200

12.4  HTML5視頻與音頻  201

12.4.1  video標簽及屬性  202

12.4.2  audio標簽及屬性  203

12.5  綜合案例  204

12.6  習題  205

第13章　JavaScript基礎  207

13.1  JavaScript概述  207

13.1.1  JavaScript簡介  207

13.1.2  第一個JavaScript程序  208

13.1.3  JavaScript放置的位置  209

13.2  JavaScript基本語法規則  210

13.2.1  JavaScript語句  210

13.2.2  JavaScript語句塊  211

13.2.3  JavaScript註釋  211

13.3  標識符和變量  212

13.3.1  命名規範  212

13.3.2  數據類型  212

13.3.3  變量  214

13.3.4  常量  216

13.3.5  轉義字符  216

13.4  運算符和表達式  217

13.4.1  算術運算符和表達式  217

13.4.2  關系運算符和表達式  218

13.4.3  邏輯運算符和表達式  219

13.4.4  賦值運算符和表達式  221

13.4.5  位運算符和表達式  222

13.4.6  條件運算符和表達式  224

13.4.7  其他運算符和表達式  225

13.5  JavaScript程序控制結構  226

13.5.1  順序結構  226

13.5.2  分支結構  226

13.5.3  循環結構  229

13.6  JavaScript函數  232

13.6.1  常用系統函數  232

13.6.2  自定義函數  234

13.6.3  帶參數返回的return語句  235

13.6.4  函數變量的作用域  237

13.7  綜合案例  238

13.8  習題  240

第14章　JavaScript事件概述  242

14.1  JavaScript事件概述  242

14.1.1  事件類型  242

14.1.2  事件句柄  242

14.1.3  事件處理  243

14.1.4  事件處理程序的返回值  249

14.2  表單事件  251

14.2.1  獲得焦點與失去焦點事件  251

14.2.2  提交及重置事件  256

14.2.3  改變及選擇事件  258

14.3  鼠標事件  260

14.3.1  鼠標單擊和雙擊事件  260

14.3.2  鼠標移動相關事件  263

14.4  鍵盤事件  265

14.5  窗口事件  267

14.6  綜合案例  270

14.7  習題  273

第15章　JavaScript對象簡介  275

15.1  JavaScript對象概述  275

15.2  JavaScript常用基本對象  276

15.2.1  String對象  276

15.2.2  Number對象  278

15.2.3  Boolean對象  280

15.2.4  Array對象  281

15.2.5  Math對象  284

15.2.6  Object對象  286

15.2.7  Date對象  287

15.3  DOM對象  289

15.3.1  DOM對象簡介  289

15.3.2  DOM節點樹  290

15.3.3  DOM節點  290

15.3.4  DOM節點的訪問  292

15.3.5  DOM節點操作  296

15.4  BOM對象  302

15.4.1  BOM對象簡介  302

15.4.2  window對象  303

15.4.3  navigator對象  305

15.4.4  screen對象  307

15.4.5  history對象  309

15.4.6  location對象  310

15.5  綜合案例  312

15.6  習題  319