●部分 HTML 基礎

章 HTML 簡介 3

1.1 前端技術簡介 3

1.1.1 從“網頁制作”到“前端開發” 3

1.1.2 從“前端開發”到“後端開發” 4

1.1.3 學習路線 6

1.2 什麼是HTML 6

1.3 常見問題 7

第2章 開發工具 9

2.1 開發工具 9

2.2 使用HBuilder 10

第3章 基本標簽 13

3.1 HTML 結構 13

3.2 head 標簽 15

3.2.1 title 標簽 15

3.2.2 meta 標簽 16

3.2.3 style 標簽 18

3.2.4 script 標簽 18

3.2.5 link 標簽 19

3.2.6 base 標簽 19

3.3 body 標簽 19

3.4 HTML 注釋 20

3.5 本章練習 21

第4章 文本 22

4.1 文本簡介 22

4.1.1 頁素 22

4.1.2 HTML 文本 23

4.2 標題標簽 24

4.3 段落標簽 26

4.3.1 段落標簽< p> 26

4.3.2 換行標簽27

4.4 文本標簽 29

4.4.1 粗體標簽 29

4.4.2 斜體標簽 30

4.4.3 上標標簽 31

4.4.4 下標標簽 31

4.4.5 中劃線標簽 32

4.4.6 下劃線標簽 33

4.4.7 大字號標簽和小字號標簽 33

4.5 水平線標簽 34

4.6 div 標簽 35

4.7 自閉合標簽 37

4.素素 38

4.8.素 38

4.8.2素 40

4.9 特殊符號 40

4.9.1 網頁中的“空格” 40

4.9.2 網頁中的“特殊符號” 42

4.10 本章練習 44

第5章 列表 45

5.1 列表簡介 45

5.2 有序列表 46

5.2.1 有序列表簡介 46

5.2.2 type 屬性 47

5.3 無序列表 48

5.3.1 無序列表簡介 48

5.3.2 type 屬性 49

5.3.3 深入無序列表 50

5.4 定義列表 53

5.5 HTML 語義化 54

5.6 本章練習 56

第6章 表格 57

6.1 表格簡介 57

6.2 基本結構 57

6.3 完整結構 59

6.3.1 表格標題：caption 59

6.3.2 格：th 60

6.4 語義化 62

6.5 合並行：rowspan 65

6.6 合並列：colspan 66

6.7 本章練習 67

第7章 圖片 68

7.1 圖片標簽 68

7.1.1 src 屬性 68

7.1.2 alt 屬性和title 屬性 69

7.2 圖片路徑 71

7.2.1 page1.html 引用圖片 72

7.2.2 page2.html 引用圖片 73

7.3 圖片格式 75

7.3.1 位圖 75

7.3.2 矢量圖 76

7.4 本章練習 78

第8章 超鏈接 79

8.1 超鏈接簡介 79

8.1.1 a 標簽 79

8.1.2 target 屬性 81

8.2 內部鏈接 82

8.3 錨點鏈接 83

8.4 本章練習 86

第9章 表單 87

9.1 表單簡介 87

9.1.1 表單是什麼 87

9.1.2 表單標簽 88

9.2 form 標簽 89

9.2.1 form 標簽簡介 89

9.2.2 form 標簽屬性 90

9.3 input 標簽 91

9.4 單行文本框 92

9.4.1 單行文本框簡介 92

9.4.2 單行文本框屬性 92

9.5 密碼文本框 94

9.5.1 密碼文本框簡介 94

9.5.2 密碼文本框屬性 96

9.6 單選框 97

9.6.1 單選框簡介 97

9.6.2 忽略點 98

9.7 復選框 101

9.8 按鈕 103

9.8.1 普通按鈕button 103

9.8.2 提交按鈕submit 104

9.8.3 重置按鈕reset 105

9.8.4 button 標簽 107

9.9 文件上傳 107

9.10 多行文本框 108

9.11 下拉列表 109

9.11.1 下拉列表簡介 109

9.11.2 select 標簽屬性 110

9.11.3 option 標簽屬性 112

9.12 本章練習 114

0章 框架 116

10.1 iframe 標簽 116

10.2 練習題 117

1章 CSS 簡介 121

11.1 CSS 簡介 121

11.1.1 CSS 是什麼 121

11.1.2 CSS 和CSS3 121

11.2 CSS 引入方式 122

11.2.1 外部樣式表 122

11.2.2 內部樣式表 123

11.2.3 行內樣式表 124

11.3 本章練習 125

2章 CSS 選擇器 126

12素的id 和class 126

12.1.1 id 屬性 126

12.1.2 class 屬性 127

12.2 選擇器是什麼 127

12.3 CSS 選擇器 129

12.3素選擇器 129

12.3.2 id 選擇器 130

12.3.3 class 選擇器 132

12.3.4 後代選擇器 134

12.3.5 群組選擇器 135

12.4 本章練習 138

3章 字體樣式 139

13.1 字體樣式簡介 139

13.2 字體類型：font-family 140

13.3 字體大小：font-size 141

13.3.1 px 是什麼 142

13.3.2 采用px 為單位 142

13.4 字體粗細：font-weight 143

13.5 字體風格：font-style 145

13.6 字體顏色：color 146

13.6.1 關鍵字 146

13.6.2 十六進制RGB 值 147

13.7 CSS 注釋 148

13.8 本章練習 150

4章 文本樣式 152

14.1 文本樣式簡介 152

14.2 首行縮進：text-indent 152

14.3 水平對齊：text-align 154

14.4 文本修飾：text-decoration 155

14.4.1 text-decoration 屬性 155

14.4.2 3 種劃線的用途分析 157

14.5 大小寫：text-transform 157

14.6 行高：line-height 158

14.7 間距：letter-spacing、word-spacing 160

14.7.1 字間距 160

14.7.2 詞間距 161

14.8 本章練習 162

5章 邊框樣式 163

15.1 邊框樣式簡介 163

15.2 整體樣式 164

15.2.1 邊框的屬性 164

15.2.2 簡寫形式 166

15.3 局部樣式 167

15.4 本章練習 170

6章 列表樣式 171

16.1 列表項符號：list-style-type 171

16.1.1 定義列表項符號 171

16.1.2 去除列表項符號 173

16.2 列表項圖片：list-style-image 174

16.3 本章練習 176

第二部分 CSS 基礎

7章 表格樣式 177

17.1 表格標題位置：caption-side 177

17.2 表格邊框合並：border-collapse 179

17.3 表格邊框間距：border-spacing 180

17.4 本章練習 182

8章 圖片樣式 183

18.1 圖片大小 183

18.2 圖片邊框 184

18.3 圖片對齊 185

18.3.1 水平對齊 185

18.3.2 垂直對齊 187

18.4 文字環繞：float 189

18.5 本章練習 191

9章 背景樣式 192

19.1 背景樣式簡介 192

19.2 背景顏色：background-color 192

19.3 背景圖片樣式：background-image 194

19.4 背景圖片重復：background-repeat 196

19.5 背景圖片位置：background-position 198

19.5.1 像素值 198

19.5.2 關鍵字 199

19.6 背景圖片固定：background-attachment 201

19.7 本章練習 202

第20章 超鏈接樣式 203

20.1 超鏈接偽類 203

20.1.1 超鏈接偽類簡介 203

20.1.2 深入了解超鏈接偽類 205

20.2 深入了解：hover 206

20.3 鼠標樣式 208

20.3.1 瀏覽器鼠標樣式 208

20.3.2 自定義鼠標樣式 209

20.4 本章練習 210

第21章 盒子模型 212

21.1 CSS 盒子模型 212

21.2 寬高：width、height 215

21.3 邊框：border 218

21.4 內邊距：padding 219

21.4.1 padding 局部樣式 219

21.4.2 padding 簡寫形式 220

21.5 外邊距：margin 222

21.5.1 margin 局部樣式 222

21.5.2 margin 簡寫形式 226

21.5.3 瀏覽素 227

21.6 本章練習 228

第22章 浮動布局 230

22.1 文檔流簡介 230

22.1.1 正常文檔流 230

22.1.2 脫離文檔流 231

22.2 浮動 233

22.3 清除浮動 236

22.4 本章練習 238

第23章 定位布局 240

23.1 定位布局簡介 240

23.2 固定定位：fixed 240

23.3 相對定位：relative 243

23.4 絕對定位：absolute 245

23.5 靜態定位：static 247

23.6 本章練習 247

第24章 JavaScript 簡介 251

24.1 JavaScript 是什麼 251

24.1.1 JavaScript 簡介 251

24.1.2 教程介紹 252

24.2 JavaScript 開發工具 253

24.3 JavaScript 引入方式 255

24.3.1 外部JavaScript 255

24.3.2 內部JavaScript 256

24.3素屬性JavaScript 258

24.4 一個簡單的JavaScript 程序 259

24.5 本章練習 261

第25章 語法基礎 262

25.1 語法簡介 262

25.2 變量與常量 263

25.2.1 變量 263

25.2.2 常量 268

25.3 數據類型 268

25.3.1 數字 269

25.3.2 字符串 269

25.3.3 布爾值 272

25.3.4 未定義值 273

25.3.5 空值 274

25.4 運算符 274

25.4.1 算術運算符 275

25.4.2 賦值運算符 279

25.4.3 比較運算符 281

25.4.4 邏輯運算符 282

25.4.5 條件運算符 285

25.5 表達式與語句 286

25.6 類型轉換 287

25.6.1 “字符串”轉換為“數字” 287

25.6.2 “數字”轉換為“字符串” 291

25.7 轉義字符 293

25.8 注釋 295

25.8.1 單行注釋 295

25.8.2 多行注釋 296

25.9 本章練習 297

第26章 流程控制 299

26.1 流程控制簡介 299

26.1.1 順序結構 299

26.1.2 選擇結構 300

26.1.3 循環結構 301

26.2 選擇結構：if 301

26.2.1 單向選擇：if... 302

26.2.2 雙向選擇：if...else... 303

26.2.3 多向選擇：if...else if...else... 305

26.2.4 if 語句的嵌套 306

26.3 選擇結構：switch 309

26.4 循環結構：while 313

26.5 循環結構：do...while 317

26.6 循環結構：for 318

26.7 實戰題：判斷一個數是整數，還是小數 321

26.8 實戰題：找出“水仙花數” 322

26.9 本章練習 323

第27章 初識函數 325

27.1 函數是什麼 325

27.2 函數的定義 327

27.2.1 沒有返回值的函數 327

27.2.2 有返回值的函數 330

27.2.3 全局變量與局部變量 331

27.3 函數的調用 333

第三部分 JavaScript 基礎

27.3.1 直接調用 334

27.3.2 在表達式中調用 335

27.3.3 在超鏈接中調用 336

27.3.4 在事件中調用 337

27.4 嵌套函數 338

27.5 內置函數 339

27.6 實戰題：判斷某一年是否是閏年 340

27.7 實戰題：求出任意5 個數的優選值 341

27.8 本章練習 342

第28章 字符串對像 344

28.1 內置對像簡介 344

28.2 獲取字符串長度 344

28.3 大小寫轉換 346

28.4 獲取某一個字符 347

28.5 截取字符串 349

28.6 替換字符串 351

28.7 分割字符串 353

28.8 檢索字符串的位置 357

28.9 實戰題：統計某一個字符的個數 359

28.10 實戰題：統計字符串中有多少個數字 360

28.11 本章練習 361

第29章 數組對像 362

29.1 數組是什麼 362

29.2 數組的創建 363

29.3 數組的獲取 363

29.4 數組的賦值 364

29.5 獲取數組長度 366

29.6 截取數組某部分 369

29.7 添素 371

29.7.1 在數組開素：unshift() 371

29.7.2 在數組結素：push() 372

29.8 刪素 374

29.8.1 刪除數素：shift() 374

29.8.2 刪除數組最素：pop() 375

29.9 比較數組大小 377

29.10 顛倒數組順序 378

29.11 素連接成字符串 379

29.12 實戰題：數組與字符串的轉換操作 381

29.13 實戰題：計算面積與體積，返回一個數組 382

29.14 本章練習 383

第30章 時間對像 385

30.1 時間對像簡介 385

30.2 操作年、月、日 387

30.2.1 獲取年、月、日 387

30.2.2 設置年、月、日 389

30.3 操作時、分、秒 391

30.3.1 獲取時、分、秒 391

30.3.2 設置時、分、秒 392

30.4 獲取星期幾 393

30.5 本章練習 395

第31章 數學對像 396

31.1 數學對像簡介 396

31.2 Math 對像的屬性 396

31.3 Math 對像的方法 398

31.4 優選值與最小值 398

31.5 取整運算 399

31.5.1 向下取整：floor() 399

31.5.2 向上取整：ceil() 401

31.6 三角函數 402

31.7 生成隨機數 403

31.7.1 隨機生成某個範圍內的“任意數” 404

31.7.2 隨機生成某個範圍內的“整數” 404

31.8 實戰題：生成隨機驗證碼 405

31.9 實戰題：生成隨機顏色值 406

31.10 本章練習 407

第32章 DOM 基礎 408

32.1 核心技術簡介 408

32.2 DOM 是什麼 408

32.2.1 DOM 對像 408

32.2.2 DOM 結構 409

32.3 節點類型 410

32.4素 411

32.4.1 getElementById() 411

32.4.2 getElementsByTagName() 413

32.4.3 getElementsByClassName() 418

32.4.4 querySelector()和querySelectorAll() 419

32.4.5 getElementsByName() 422

32.4.6 document.title和document.body 424

32.5素 424

32.6素 430

32.6.1 appendChild() 430

32.6.2 insertBefore() 432

32.7素 434

32.8素 436

32.9素 438

32.10 本章練習 439

第33章 DOM 進階 441

33.1 HTML 屬性操作（對像屬性） 441

33.1.1 獲取HTML 屬性值 441

33.1.2 設置HTML 屬性值 448

33.2 HTML 屬性操作（對像方法） 450

33.2.1 getAttribute() 450

33.2.2 setAttribute() 453

33.2.3 removeAttribute() 454

33.2.4 hasAttribute() 456

33.3 CSS 屬性操作 458

33.3.1 獲取CSS 屬性值 458

33.3.2 設置CSS 屬性值 459

33.3.3 最後一個問題 466

33.4 DOM 遍歷 469

33.4.1 素 469

33.4.2 素 471

33.4.3 查素 475

33.5 innerHTML 和innerText 477

33.6 本章練習 480

第34章 事件基礎 482

34.1 事件是什麼 482

34.2 事件調用方式 483

34.2.1 在script 標簽中調用 483

34.2.素中調用事件 484

34.3 鼠標事件 486

34.3.1 鼠標單擊 486

34.3.2 鼠標移入和鼠標移出 488

34.3.3 鼠標按下和鼠標松開 490

34.4 鍵盤事件 491

34.5 表單事件 493

34.5.1 onfocus 和onblur 493

34.5.2 onselect 496

34.5.3 onchange 498

34.6 編輯事件 501

34.6.1 oncopy 501

34.6.2 onselectstart 502

34.6.3 oncontextmenu 503

34.7 頁面事件 504

34.7.1 onload 504

34.7.2 onbeforeunload 507

34.8 本章練習 508

第35章 事件進階 509

35.1 事件監聽器 509

35.1.1 事件處理器 509

35.1.2 事件監聽器 510

35.2 event 對像 518

35.2.1 type 519

35.2.2 keyCode 520

35.3 this 522

35.4 本章練習 526

第36章 window 對像 527

36.1 window 對像簡介 527

36.2 窗口操作 528

36.2.1 打開窗口 529

36.2.2 關閉窗口 534

36.3 對話框 536

36.3.1 alert() 536

36.3.2 confirm() 537

36.3.3 prompt() 538

36.4 定時器 540

36.4.1 setTimeout()和clearTimeout() 541

36.4.2 setInterval()和clearInterval() 545

36.5 location 對像 549

36.5.1 window.location.href 550

36.5.2 window.location.search 551

36.5.3 window.location.hash 552

36.6 navigator 對像 553

36.7 本章練習 556

第37章 document 對像 557

37.1 document 對像簡介 557

37.2 document 對像屬性 557

37.2.1 document.URL 558

37.2.2 document.referrer 559

37.3 document 對像方法 559

37.3.1 document.write() 560

37.3.2 document.writeln() 561

37.4 本章練習 563

附錄A HTML 常用標簽 564

附錄B CSS 常用屬性 566

附錄C JavaScript 常用方法 568

附錄D 常用的隨機數 570<br / >