Web前端設(shè)計(jì)與開發(fā)：HTML+CSS基礎(chǔ)教程

第1章 HTML快速入門 1
1.1 簡(jiǎn)單的HTML 1
1.1.1 第一個(gè)網(wǎng)頁(yè) 1
1.1.2 標(biāo)簽與屬性 2
1.1.3 HTML簡(jiǎn)介 3
1.2 HTML文檔結(jié)構(gòu) 3
1.2.1 文檔類型 4
1.2.2 頭部標(biāo)簽 4
1.2.3 主體標(biāo)簽 5
1.3 路徑的概念 6
1.3.1 絕對(duì)路徑 7
1.3.2 相對(duì)路徑 7
1.4 Notepad++ 8
1.4.1 下載 8
1.4.2 安裝 9
1.4.3 導(dǎo)入Web項(xiàng)目 10
1.4.4 瀏覽網(wǎng)頁(yè) 10
1.5 Chrome開發(fā)者工具 11
1.5.1 打開Chrome開發(fā)者
工具 11
1.5.2 查看和修改HTML與
CSS代碼 12
1.6 組織文件 14
1.7 網(wǎng)頁(yè)發(fā)布 15
1.8 練習(xí)題 16
第2章 HTML基本元素 17
2.1 標(biāo)題 17
2.2 段落 18
2.3 文本 19
2.3.1 粗體和斜體 19
2.3.2 突出顯示文字 20
2.3.3 文本格式 21
2.4 轉(zhuǎn)義字符 21
2.5 水平線 22
2.6 換行 24
2.7 列表 25
2.7.1 列表基礎(chǔ) 25
2.7.2 編號(hào)和符號(hào) 26
2.7.3 嵌套列表 27
2.8 圖像 28
2.8.1 圖像格式 28
2.8.2 添加圖像 28
2.8.3 圖像屬性 29
2.9 編碼規(guī)范 31
2.10 標(biāo)簽和屬性總結(jié) 33
2.10.1 標(biāo)簽說(shuō)明 33
2.10.2 HTML5廢除的標(biāo)簽
和屬性 34
2.11 練習(xí)題 34
第3章 多媒體 35
3.1 視頻 35
3.1.1 添加視頻 35
3.1.2 ＜video＞標(biāo)簽的屬性 37
3.1.3 指定多個(gè)視頻文件 39
3.2 音頻 40
3.2.1 添加音頻 40
3.2.2 音頻屬性 41
3.3 嵌入多媒體 42
3.4 練習(xí)題 43
第4章 超鏈接 44
4.1 超鏈接入門 44
4.1.1 基本超鏈接 44
4.1.2 設(shè)置目標(biāo)窗口 46
4.1.3 圖像超鏈接 47
4.2 鏈接至錨點(diǎn) 48
4.2.1 創(chuàng)建錨點(diǎn) 48
4.2.2 鏈接至錨點(diǎn) 48
4.3 其他超鏈接 49
4.3.1 電子郵件 49
4.3.2 文檔鏈接 51
4.4 練習(xí)題 51
第5章 CSS快速入門 53
5.1 CSS預(yù)備知識(shí) 53
5.2 應(yīng)用CSS 54
5.2.1 內(nèi)聯(lián)樣式 54
5.2.2 內(nèi)部樣式 55
5.2.3 外部樣式 57
5.3 CSS語(yǔ)法基礎(chǔ) 58
5.4 選擇器 61
5.4.1 標(biāo)簽選擇器 61
5.4.2 class選擇器 62
5.4.3 id選擇器 64
5.4.4 通用選擇器 66
5.4.5 選擇器組合 67
5.4.6 包含選擇器 69
5.4.7 元素指定選擇器 71
5.5 CSS命名 73
5.5.1 駝峰式命名法 73
5.5.2 命名方法 73
5.5.3 代碼規(guī)范 75
5.6 優(yōu)先級(jí) 76
5.7 練習(xí)題 78
第6章 盒模型 80
6.1 從＜div＞標(biāo)簽說(shuō)起 80
6.1.1 定義＜div＞標(biāo)簽 80
6.1.2 應(yīng)用樣式 82
6.1.3 ＜div＞嵌套 83
6.2 盒模型的定義 86
6.2.1 基本概念 86
6.2.2 定義方法 87
6.2.3 外邊距：margin 88
6.2.4 邊框：border 91
6.2.5 內(nèi)邊距：padding 94
6.2.6 盒子的寬度與高度 96
6.3 常用屬性 98
6.3.1 圓角 98
6.3.2 盒陰影 99
6.3.3 visibility和display 101
6.3.4 溢出 103
6.4 元素類型和轉(zhuǎn)換 106
6.4.1 塊級(jí)元素 106
6.4.2 行內(nèi)元素 107
6.4.3 行內(nèi)塊級(jí)元素 108
6.4.4 類型轉(zhuǎn)換 110
6.5 練習(xí)題 110
第7章 布局模型與技術(shù) 112
7.1 包含塊 112
7.2 布局模型 114
7.3 流動(dòng)模型 114
7.4 定位 116
7.4.1 絕對(duì)定位 116
7.4.2 固定定位 119
7.4.3 相對(duì)定位 120
7.4.4 靜態(tài)定位 123
7.4.5 元素的居中 123
7.5 浮動(dòng)布局 125
7.5.1 浮動(dòng)的定義 125
7.5.2 清除浮動(dòng) 128
7.5.3 解決元素重疊 129
7.5.4 高度自適應(yīng) 131
7.6 z-index 133
7.7 常用布局 136
7.7.1 單列布局 136
7.7.2 兩列自適應(yīng)布局 138
7.7.3 三行兩列布局 140
7.8 布局技術(shù) 141
7.8.1 傳統(tǒng)布局方法 141
7.8.2 HTML5語(yǔ)義標(biāo)簽 142
7.8.3 HTML5布局方法 145
7.9 FlexBox布局 147
7.9.1 基本概念 148
7.9.2 flex容器 148
7.9.3 項(xiàng)目屬性 157
7.10 練習(xí)題 160
第8章 CSS與頁(yè)面排版 162
8.1 文本 162
8.1.1 字體 162
8.1.2 嵌入字體 164
8.1.3 文字大小 166
8.1.4 粗體和斜體 168
8.1.5 顏色 169
8.1.6 大寫和小寫 171
8.1.7 文本裝飾 172
8.1.8 文本陰影 173
8.2 行內(nèi)元素 175
8.3 段落 176
8.3.1 對(duì)齊方式 176
8.3.2 段落縮進(jìn) 177
8.3.3 間距 178
8.3.4 行高 179
8.3.5 邊框 180
8.3.6 分欄 181
8.4 列表 181
8.4.1 符號(hào)與位置 182
8.4.2 圖標(biāo)替換項(xiàng)目符號(hào) 183
8.4.3 列表項(xiàng)行內(nèi)顯示 184
8.4.4 列表綜合屬性 185
8.5 超鏈接 186
8.5.1 文字導(dǎo)航 186
8.5.2 按鈕導(dǎo)航 188
8.6 背景圖像 190
8.6.1 添加背景圖像 190
8.6.2 背景圖像重復(fù) 191
8.6.3 背景圖像定位 192
8.6.4 固定背景圖像 194
8.6.5 背景圖像自適應(yīng) 195
8.7 練習(xí)題 196
第9章 表格 198
9.1 創(chuàng)建表格 198
9.2 表格屬性 200
9.2.1 表格寬度和列寬 201
9.2.2 邊框 204
9.2.3 背景 206
9.2.4 單元格的間距和
內(nèi)邊距 207
9.2.5 合并單元格 208
9.3 表格相關(guān)標(biāo)簽 210
9.4 CSS與表格 211
9.4.1 邊框 212
9.4.2 文字顏色、背景顏色和
背景圖像 212
9.4.3 間距、內(nèi)邊距和
對(duì)齊方式 213
9.4.4 綜合實(shí)例 213
9.5 練習(xí)題 215
第10章 表單 216
10.1 創(chuàng)建表單 216
10.2 表單元素 217
10.3 輸入控件 218
10.3.1 文本框 219
10.3.2 密碼框 220
10.3.3 提交和重置按鈕 220
10.3.4 單選按鈕和復(fù)選框 220
10.4 列表：select 221
10.5 文本區(qū)域：textarea 223
10.6 CSS與表單 225
10.6.1 ＜label＞標(biāo)簽 225
10.6.2 分組標(biāo)簽 225
10.6.3 CSS格式化表單 226
10.7 練習(xí)題 230

第11章 綜合實(shí)例：構(gòu)建博客首頁(yè) 232
11.1 項(xiàng)目概述 232
11.2 設(shè)計(jì)分析 232
11.3 頁(yè)面設(shè)計(jì) 233
11.3.1 頁(yè)面布局 233
11.3.2 初始化CSS 234
11.4 頁(yè)面實(shí)現(xiàn) 235
11.4.1 header 235
11.4.2 footer 237
11.4.3 main 237
11.4.4 sidebar 239