目 錄
第1章 網(wǎng)頁開發(fā)起步...............1
1.1 HTML文檔的結(jié)構(gòu)...................................2
1.1.1 HTML的基本結(jié)構(gòu)...................2
1.1.2 使用記事本開發(fā)HTML頁面....3
【示例1.1】使用記事本開發(fā)HTML........3
1.1.3 使用VS Code開發(fā)網(wǎng)頁............4
1.1.4 設(shè)置頁面背景色和背景圖片....8
【示例1.2】設(shè)置網(wǎng)頁背景顏色...........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文檔注釋和特殊符號....15
【示例1.9】 在網(wǎng)頁底部添加
版權(quán)部分........................16
1.3 圖像標(biāo)簽........................................................17
1.3.1 圖像標(biāo)簽的使用......................17
【示例1.10】圖片的使用...................18
1.3.2 圖片的相對路徑與路徑..19
1.4 超鏈接標(biāo)簽..................................................20
1.4.1 頁面間鏈接..............................20
【示例1.11】超鏈接的使用...............21
【示例1.12】網(wǎng)站內(nèi)頁面間的鏈接....22
1.4.2 錨點(diǎn)鏈接..................................23
【示例1.13】錨點(diǎn)鏈接......................23
1.4.3 電子郵件鏈接..........................25
【示例1.14】郵箱鏈接的使用...........25
1.5 塊級標(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的基本語法.......................................32
2.1.1 CSS樣式表概述......................32
2.1.2 樣式表的基本語法..................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】 塊級元素和行內(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)頁內(nèi)容..............66
3.1 列表標(biāo)簽........................................................ 67
3.1.1 無序列表..................................67
【示例3.1】無序列表標(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 表格的高級用法......................82
【示例3.9】表格高級標(biāo)簽的應(yīng)用..... 83
3.3 表格的美化與布局.................................. 85
3.3.1 表格的美化..............................85
【示例3.10】 表格寬度、高度、.
邊框?qū)傩缘挠梅?.......... 85
【示例3.11】表格背景和對齊設(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 表單的基本語法....................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
【示例4.2】內(nèi)嵌框架的使用........... 114
4.4.2 超鏈接與內(nèi)嵌框架關(guān)聯(lián)........115
【示例4.3】內(nèi)嵌框架的使用........... 116
實(shí)踐任務(wù)................................................................. 117
小 結(jié)................................................................. 127
習(xí) 題................................................................. 128
第5 章 網(wǎng)頁布局設(shè)計(jì)............ 130
5.1 盒子的定位................................................ 131
5.1.1 標(biāo)準(zhǔn)文檔流............................131
【示例5.1】display 屬性的使用....... 132
【示例5.2】 行內(nèi)塊inline-block.
屬性值的使用............... 135
5.1.2 盒子的定位............................136
【示例5.3】固定定位的使用........... 142
5.2 盒子的浮動................................................ 144
5.2.1 float 屬性................................144
【示例5.4】 使用float 實(shí)現(xiàn)文字.
繞排圖片...................... 145
5.2.2 inline-block 與浮動的區(qū)別....153
5.3 頁面整體布局.......................................... 153
5.3.1 頁面布局概述........................153
5.3.2 布局案例分析........................155
實(shí)踐任務(wù)................................................................. 161
小 結(jié)................................................................. 168
習(xí) 題................................................................. 169
第6 章 CSS 樣式進(jìn)階........... 170
6.1 CSS 樣式選擇器.................................... 171
6.1.1 基本選擇器分類....................171
6.1.2 復(fù)合選擇器分類....................171
【示例6.1】層次選擇器的使用....... 173
6.1.3 偽類選擇器............................175
【示例6.2】 超鏈接偽類樣式的.
使用.............................. 175
【示例6.3】偽類選擇器的使用....... 177
6.1.4 屬性選擇器............................178