目　錄

第1章　網(wǎng)頁(yè)開發(fā)起步...............1

1.1　HTML文檔的結(jié)構(gòu)...................................2

1.1.1　HTML的基本結(jié)構(gòu)...................2

1.1.2　使用記事本開發(fā)HTML頁(yè)面....3

【示例1.1】使用記事本開發(fā)HTML........3

1.1.3　使用VS Code開發(fā)網(wǎng)頁(yè)............4

1.1.4　設(shè)置頁(yè)面背景色和背景圖片....8

【示例1.2】設(shè)置網(wǎng)頁(yè)背景顏色...........9

【示例1.3】設(shè)置背景圖片...................9

1.2　基礎(chǔ)標(biāo)簽........................................................10

1.2.1　文本類標(biāo)簽..............................10

【示例1.4】標(biāo)題標(biāo)簽的使用.............11

【示例1.5】 p標(biāo)簽的使用................12

【示例1.6】行內(nèi)標(biāo)簽的使用.............13

【示例1.7】換行標(biāo)簽的使用.............14

1.2.2　水平線標(biāo)簽..............................14

【示例1.8】水平線的使用.................15

1.2.3　HTML文檔注釋和特殊符號(hào)....15

【示例1.9】 在網(wǎng)頁(yè)底部添加

版權(quán)部分........................16

1.3　圖像標(biāo)簽........................................................17

1.3.1　圖像標(biāo)簽的使用......................17

【示例1.10】圖片的使用...................18

1.3.2　圖片的相對(duì)路徑與路徑..19

1.4　超鏈接標(biāo)簽..................................................20

1.4.1　頁(yè)面間鏈接..............................20

【示例1.11】超鏈接的使用...............21

【示例1.12】網(wǎng)站內(nèi)頁(yè)面間的鏈接....22

1.4.2　錨點(diǎn)鏈接..................................23

【示例1.13】錨點(diǎn)鏈接......................23

1.4.3　電子郵件鏈接..........................25

【示例1.14】郵箱鏈接的使用...........25

1.5　塊級(jí)標(biāo)簽與行內(nèi)標(biāo)簽.............................26

1.5.1　div標(biāo)簽和span標(biāo)簽...............26

【示例1.15】div標(biāo)簽的使用.............26

【示例1.16】span 標(biāo)簽的使用...........27

1.5.2　 HTML的標(biāo)簽分類................27

實(shí)踐任務(wù)....................................................................28

小　　結(jié)....................................................................29

習(xí)　　題....................................................................29

第2章　CSS樣式入門.............31

2.1　CSS的基本語(yǔ)法.......................................32

2.1.1　CSS樣式表概述......................32

2.1.2　樣式表的基本語(yǔ)法..................34

2.1.3　樣式表的選擇器......................34

【示例2.1】標(biāo)簽選擇器應(yīng)用.............35

【示例2.2】類樣式選擇器案例.........37

【示例2.3】ID樣式選擇器示例........38

2.2　常見的樣式屬性及其應(yīng)用..................39

2.2.1　文本及字體屬性......................39

【示例2.4】文本及字體樣式設(shè)置.....40

2.2.2　盒子模型..................................41

【示例2.5】邊框樣式設(shè)置.................44

【示例2.6】填充樣式設(shè)置.................45

【示例2.7】 塊級(jí)元素和行內(nèi)元素

設(shè)置寬與高....................47

2.2.3　背景屬性..................................49

【示例2.8】背景相關(guān)樣式設(shè)置.........50

2.3　樣式使用分類.............................................51

2.3.1　行內(nèi)樣式表..............................51

【示例2.9】行內(nèi)樣式設(shè)置................. 52

2.3.2　內(nèi)嵌樣式表..............................52

2.3.3　外部樣式表..............................52

實(shí)踐任務(wù).................................................................... 55

小　　結(jié).................................................................... 63

習(xí)　　題.................................................................... 64

第3 章　排列網(wǎng)頁(yè)內(nèi)容..............66

3.1　列表標(biāo)簽........................................................ 67

3.1.1　無(wú)序列表..................................67

【示例3.1】無(wú)序列表標(biāo)簽的使用..... 68

3.1.2　有序列表..................................69

【示例3.2】有序列表標(biāo)簽的使用..... 69

3.1.3　定義列表..................................70

【示例3.3】定義列表標(biāo)簽的使用..... 71

【示例3.4】定義列表混合布局......... 72

3.2　表格標(biāo)簽........................................................ 73

3.2.1　表格的基本結(jié)構(gòu)......................73

3.2.2　表格的使用..............................74

【示例3.5】表格標(biāo)簽的應(yīng)用............. 75

3.2.3　合并單元格..............................76

【示例3.6】colspan 屬性的用法........ 77

【示例3.7】rowspan 屬性的用法....... 79

【示例3.8】跨行與跨列的同時(shí)應(yīng)用.... 81

3.2.4　表格的高級(jí)用法......................82

【示例3.9】表格高級(jí)標(biāo)簽的應(yīng)用..... 83

3.3　表格的美化與布局.................................. 85

3.3.1　表格的美化..............................85

【示例3.10】 表格寬度、高度、.

邊框?qū)傩缘挠梅?.......... 85

【示例3.11】表格背景和對(duì)齊設(shè)置.... 87

【示例3.12】 設(shè)置表格單元格的.

間距與填充................... 89

3.3.2　表格布局..................................90

實(shí)踐任務(wù).................................................................... 94

小　　結(jié).................................................................... 95

習(xí)　　題.................................................................... 96

第4 章　表單與框架................98

4.1　表單................................................................... 99

4.1.1　表單概述..................................99

4.1.2　表單的基本語(yǔ)法....................100

【示例4.1】用戶登錄...................... 101

4.2　表單元素..................................................... 102

4.2.1　表單元素的基本格式............102

4.2.2　表單元素介紹........................103

4.3　表單的綜合應(yīng)用..................................... 110

4.4　內(nèi)嵌框架..................................................... 114

4.4.1