零基礎學HTML+CSS

零基礎學HTML+CSS

《零基礎學HTML+CSS》分成四篇,第一篇主要講解了HTML語言的語法以及用法;第二篇主要講解了DIV+CSS布局,是HTML語言與CSS樣式關聯的關鍵部分,同時介紹了多種樣式表示形式,第三篇主要介紹CSS屬性,CSS主要由屬性組成,屬性後所接的值為屬性值,屬性值決定網頁表現的效果;第四篇為實踐部分,演示了三個不同的網站的布局用法,首先是遊戲類網站主頁的布局,其次是企業網站主布局,最後是部落格的個人頁面模組布局的演示,結合前面所學的知識點和實踐中常用的知識完成這三個網站的實踐布局。

基本信息

編輯推薦

勵志照亮人生,編程改變命運。
內容全面,由淺入深:介紹HTML語言和CSS的語法基礎。
結合實例,強化理解:以DIV+CSS布局為重點,提供300餘個實例進行講解。
教學靈活,關鍵提醒:部分特效給出詳細演示,並提供大量“注意”、“說明”和“技巧”。
綜合套用,實戰演練:提供3個案例全程布局遊戲類、企業類和部落格網站。

第一版目錄

HTML基礎知識

第1章認識HTML語言
1.1HLML簡介
1.2HLML由標記組成
1.2.1單標記
1.2.2雙標記
1.3創建第一張網頁
1.4瀏覽HLML的瀏覽器兼容
1.5編寫HLML的工具
1.5.1aptana代碼提示工具
1.5.2Dreamweaver網頁開發工具
1.6小結
第2章常用HTML標記和格式
2.1設定正文的標題
2.1.1標題設定的語法
2.1.2標題設定經典案例——字號由大到小
2.2設定段落
2.3強制換行
2.4給代碼注釋
2.5粗體與斜體
2.6下畫線與刪除線
2.7上標與下標
2.8HLML標記和格式實例
2.8.1標題用h1
2.8.2設定每一行為一段落
2.8.3粗體和刪除線
2.8.4加上化學元素和數學平方根
2.9小結
第3章字型標記
3.1設定字型大小
3.2設定字型顏色
3.3設定標題字型樣式
3.3.1標題的字型
3.3.2設定字型的大小和顏色
3.4物理字型
3.5邏輯字型
3.6字型實例
3.6.1插入字型
3.6.2字型顏色設為紅色
3.6.3把文字設為標題h1
3.6.4設為斜體並加刪除線
3.6.5設定字型為
3.7小結
第4章文字布局
4.1行的控制
4.1.1換行控制
4.1.2不換行控制
4.2文字對齊
4.3段落設定
4.4列表
4.4.1無序列表
4.4.2有序列表
4.5其他方式修飾文本
4.5.1欲格式化文本
4.5.2計算機輸出格式
4.6文字布局
4.6.1設定文字換行與不換行
4.6.2設定文字對齊
4.6.3顯示列表
4.6.4計算機代碼
4.7小結
第5章圖像
5.1圖像的基本語法
5.1.1在網頁中插入圖像
5.1.2圖像無法顯示時的提示信息
5.1.3控制圖像的大小
5.2圖像的連結
5.3圖像和文字對齊
5.4圖像的框線
5.5圖像映射圖
5.6圖像實例
5.6.1在網頁上引入圖像標記
5.6.2設定圖像參數alt
5.6.3給圖像做超連結
5.6.4設定圖像的框線
5.6.5設定文本與圖像對齊
5.6.6設定圖像的映射圖
5.7小結
第6章超級連結
6.1文字連結
6.1.1最簡單的文字超連結
6.1.2超鏈網頁的打開方式
6.1.3連結的注釋
6.2圖片連結
6.3錨點連結
6.4信箱地址連結
6.5相對路徑與絕對路徑
6.5.1相對路徑
6.5.2絕對路徑
6.6連結實例
6.6.1在網頁中做文字連結
6.6.2給圖片做超連結
6.6.3設定錨點連結
6.6.4信箱連結
6.7小結
第7章表單
7.1表單基本語法
7.2文本框和密碼框
7.2.1文本框
7.2.2密碼框
7.3單選框和複選框
7.3.1單選框
7.3.2複選框
7.4下拉列表與文本域
7.4.1下拉表
7.4.2文本域
7.5按鈕
7.6表單實例
7.6.1插入表單
7.6.2添加文本框和密碼框
7.6.3添加單選框和複選框
7.6.4添加下拉表和文本域
7.6.5在表單中添加提交按鈕
7.7小結
第8章表格
8.1表格基本語法
8.2跨多行、多列表元
8.2.1跨多行表元
8.2.2跨多列表元
8.3設定表格大小
8.3.1設定表格框線
8.3.2設定表格高度和寬度
8.4表格內文字對齊
8.5表格在網頁中對齊
8.6表格實例
8.6.1表格中嵌入表格
8.6.2設定跨行和跨列
8.7小結
第9章框架
第10章移動的字型和圖片
第11章網頁多媒體

第二篇DIV+CSS布局

第12章為什麼用DIV布局
第13章DIV與SPAN
第14章DIV與CSS結合

第三篇CSS部分

第15章CSS基礎知識
第16章字型設定
第17章文本設定
第18章設定背景
第19章設定尺寸
第20章設定外補丁
第21章設定內補丁
第22章設定對象框線
第23章定位
第24章列表
第25章用CSS控制表格
第26章CSS設定滾動條
第27章CSS布局
第28章選擇符
第29章偽類
第30章單位

第四篇實踐部分

第31章遊戲網站布局
第32章企業網站布局
附錄IE7對CSS的支持

第二版基本信息

作 者:張熠 等編著
出 版 社:機械工業出版社
出版時間:2012-3-1
版 次:2
頁 數:430
開 本:16開

第二版目錄

前言
第一篇 HTML基礎知識
第1章 認識HTML語言 1
1.1 HTML簡介 1
1.2 HTML的標記組成 2
1.2.1 單標記 2
1.2.2 雙標記 2
1.3 創建第一張網頁 4
1.4 瀏覽HTML的瀏覽器兼容 6
1.5 編寫HTML的工具 7
1.5.1 Aptana代碼提示工具 7
1.5.2 Dreamweaver網頁開發工具 10
1.6 小結 12
1.7 上機實踐 13
第2章 常用HTML標記和格式 14
2.1 設定正文的標題 14
2.1.1 標題設定的語法 14
2.1.2 標題設定經典案例—字號由大到小 14
2.2 設定段落 16
2.3 強制換行 17
2.4 給代碼添加注釋 18
2.5 粗體與斜體 19
2.6 下劃線與刪除線 20
2.7 上標與下標 21
2.8 HTML標記和格式實例 22
2.8.1 標題用h1 22
2.8.2 設定每一行為一段落 23
2.8.3 粗體和刪除線 24
2.8.4 加上化學元素和數學平方根 24
2.9 小結 26
2.10 上機實踐 26
第3章 字型標記 27
3.1 設定字型大小 27
3.2 設定字型顏色 28
3.3 設定標題字型樣式 29
3.3.1 標題的字型 29
3.3.2 設定字型的大小和顏色 30
3.4 字型標記 32
3.4.1 物理字型 32
3.4.2 邏輯字型 33
3.5 字型實例 34
3.5.1 插入字型34
3.5.2 字型顏色設為紅色 35
3.5.3 把文字設為標題h1 35
3.5.4 設為斜體並加刪除線 36
3.5.5 設定字型為36
3.6 小結 37
3.7 上機實踐 37
第4章 文字布局 38
4.1 行的控制 38
4.1.1 換行控制 38
4.1.2 不換行控制 39
4.2 文字對齊 40
4.3 段落設定 42
4.4 列表 43
4.4.1 無序列表 43
4.4.2 有序列表 43
4.5 其他方式修飾文本 44
4.5.1 欲格式化文本 44
4.5.2 計算機輸出格式 47
4.6 文字布局實例 48
4.6.1 設定文字換行與不換行 48
4.6.2 設定文字對齊 49
4.6.3 顯示列表 49
4.6.4 在網頁中顯示計算機原始碼 50
4.7 小結 52
4.8 上機實踐 52
第5章 圖像 53
5.1 圖像的基本語法 53
5.1.1 在網頁中插入圖像 53
5.1.2 圖像無法顯示時的提示信息 54
5.1.3 控制圖像的大小 55
5.2 圖像的連結 56
5.3 圖像和文字對齊 56
5.4 圖像的框線 57
5.5 圖像映射圖 58
5.6 圖像實例 58
5.6.1 在網頁上引入圖像標記 58
5.6.2 設定圖像參數alt 59
5.6.3 給圖像做超連結 59
5.6.4 設定圖像的框線 59
5.6.5 設定文本與圖像對齊 60
5.6.6 設定圖像的映射圖 60
5.7 小結 61
5.8 上機實踐 61
第6章 超級連結 62
6.1 文字連結 62
6.1.1 最簡單的文字超連結 62
6.1.2 超連結網頁的打開方式 63
6.1.3 連結的注釋 64
6.2 圖片連結 64
6.3 錨點連結 65
6.4 信箱地址連結 66
6.5 相對路徑與絕對路徑 67
6.5.1 相對路徑 67
6.5.2 絕對路徑 68
6.6 連結實例 68
6.6.1 在網頁中做文字連結 69
6.6.2 給圖片設定超連結 69
6.6.3 設定錨點連結 70
6.6.4 信箱連結 72
6.7 小結 73
6.8 上機實踐 73
第7章 表單 74
7.1 表單基本語法 74
7.2 文本框和密碼框 76
7.2.1 文本框 76
7.2.2 密碼框 76
7.3 單選框和複選框 77
7.3.1 單選框 77
7.3.2 複選框 78
7.4 下拉列表與文本域 79
7.4.1 下拉列表 79
7.4.2 文本域 80
7.5 按鈕 82
7.6 表單實例 83
7.6.1 插入表單 83
7.6.2 添加文本框和密碼框 84
7.6.3 添加單選框和複選框 84
7.6.4 添加下拉列表和文本域 85
7.6.5 在表單中添加提交按鈕 87
7.7 小結 89
7.8 上機實踐 89
第8章 表格 90
8.1 表格基本語法 90
8.2 跨多行、多列表元 91
8.2.1 跨多行表元 91
8.2.2 跨多列表元 92
8.3 設定表格大小 93
8.3.1 設定表格框線 93
8.3.2 設定表格高度和寬度 94
8.4 表格內文字對齊 95
8.5 表格在網頁中對齊 96
8.6 表格實例 97
8.6.1 表格中嵌入表格 97
8.6.2 設定跨行和跨列 99
8.7 小結 100
8.8 上機實踐 100
第9章 框架 101
9.1 框架基本語法 101
9.2 框架分欄 102
9.2.1 框架垂直分欄 102
9.2.2 框架水平分欄 104
9.3 框架的常用屬性 105
9.3.1 設定不可調節框架大小 105
9.3.2 瀏覽器不支持框架 106
9.3.3 設定框架框線 107
9.3.4 設定滾動條 108
9.4 框架連結 109
9.4.1 導航框架 109
9.4.2 內聯框架 110
9.5 框架實例 111
9.5.1 在網頁中插入框架 111
9.5.2 設定框架的滾動條和框線 112
9.5.3 設定不支持框架文字 113
9.5.4 設定框架導航連結 114
9.6 小結 115
9.7 上機實踐 115
第10章 移動的字型和圖片 117
10.1 移動屬性基本語法 117
10.2 文字的移動 118
10.3 圖片的移動 120
10.4 如何設定對象移動 121
10.4.1 文本移動的方向 121
10.4.2 文本的滾動循環 121
10.4.3 文本的移動速度 121
10.4.4 套用文本的全部移動標記 121
10.5 移動實例—電影結束效果 123
10.6 小結 125
10.7 上機實踐 125
第11章 網頁多媒體 126
11.1 網頁多媒體的基本語法 126
11.2 設定自動播放 127
11.3 設定多媒體循環播放 128
11.4 隱藏面板的設定 130
11.5 設定面板大小 131
11.6 對齊方式 132
11.7 網頁多媒體實例—在網頁中播放視頻 133
11.7.1 引入視頻檔案 134
11.7.2 設定多媒體為非自動播放 134
11.7.3 設定多媒體無循環播放 134
11.7.4 設定控制臺的大小 135
11.8 小結 136
11.9 上機實踐 136
第二篇 DIV+CSS布局
第12章 為什麼用DIV布局 137
12.1 DIV與TABLE布局比較 137
12.1.1 什麼是DIV 137
12.1.2 DIV與TABLE的區別 138
12.2 如何用DIV布局 142
12.2.1 設定DIV選擇符 142
12.2.2 設定CSS修飾DIV效果 143
12.2.3 設定DIV的背景顏色 145
12.3 使用DIV注意事項 146
12.4 小結 146
12.5 上機實踐 147
第13章 DIV與SPAN 148
13.1 解讀SPAN 148
13.2 何時用SPAN 149
13.3 DIV與SPAN的區別 150
13.3.1 默認寬度不同 150
13.3.2 塊元素與行內元素 151
13.4 DIV與SPAN實例—多層布局 152
13.5 小結 154
13.6 上機實踐 154
第14章 DIV與CSS結合 156
14.1 用CSS控制DIV 156
14.2 CSS檔案連結 157
14.2.1 內聯定義 157
14.2.2 鏈入內部CSS 158
14.2.3 連結外部CSS 160
14.3 DIV+CSS布局實例 161
14.3.1 確定布局 162
14.3.2 定義body樣式 162
14.3.3 定義主要的DIV 163
14.3.4 設定層居中 165
14.4 小結 166
14.5 上機實踐 166
第三篇 CSS部分
第15章 CSS基礎知識 167
15.1 CSS簡介 167
15.2 CSS檔案連結方式 168
15.3 選擇符 168
15.4 偽類 169
15.5 註解 170
15.6 單位 170
15.7 用編寫CSS工具演示 171
15.7.1 打開CSS工具軟體 171
15.7.2 新建CSS檔案 171
15.7.3 保存為CSS後綴檔案 172
15.7.4 打開Aptana工具 173
15.7.5 在選單欄中新建CSS檔案 173
15.8 CSS與瀏覽器兼容性 174
15.9 CSS基礎實例 174
15.9.1 在Aptana中新建網頁 175
15.9.2 在Aptana中新建CSS檔案 175
15.9.3 連結CSS檔案到HTML頁面中 176
15.9.4 用不同的瀏覽器測試頁面 176
15.10 小結 177
15.11 上機實踐 177
第16章 字型設定 178
16.1 字型的複合屬性 178
16.2 字型顏色 180
16.3 字型大小 181
16.4 字型重量 183
16.5 字型類型 185
16.6 行距 186
16.7 如何設定文本間距與間隔 187
16.7.1 文本間距 187
16.7.2 文本間隔 187
16.8 字型實例—字型花樣 189
16.8.1 加入字型名字 190
16.8.2 加入CSS控制字型 190
16.8.3 設定行距 191
16.8.4 設定文本間隔 192
16.9 小結 194
16.10 上機實踐 194
第17章 文本設定 195
17.1 字母大小寫轉換 195
17.2 文本修飾 197
17.3 空格處理方式 199
17.4 設定文本的垂直與水平對齊 201
17.4.1 文本垂直對齊 201
17.4.2 文本水平對齊 204
17.5 文本縮進 205
17.6 文本設定—給段落設定縮進 207
17.6.1 對DIV布局 207
17.6.2 設定文本首行縮進 207
17.7 小結 208
17.8 上機實踐 209
第18章 設定背景 210
18.1 背景語法 210
18.2 設定背景顏色 211
18.3 設定背景圖像 213
18.3.1 設定背景圖像滾動 214
18.3.2 設定背景圖像位置 215
18.3.3 設定背景圖像如何鋪排 217
18.4 背景實例 219
18.4.1 設定層背景為綠色 219
18.4.2 設定層背景圖像 220
18.4.3 設定背景為不鋪排 220
18.4.4 設定背景圖像位置 221
18.5 小結 222
18.6 上機實踐 223
第19章 設定尺寸 224
19.1 設定寬度 224
19.2 設定高度 226
19.3 尺寸實例—設定層居中 227
19.3.1 尺寸實例手把手 227
19.3.2 設定層居中 231
19.4 小結 233
19.5 上機實踐 234
第20章 設定外補丁 235
20.1 外補丁基本語法 235
20.2 外補丁的四邊設定 237
20.2.1 頂端外補丁用法 237
20.2.2 右端外補丁用法 238
20.2.3 底端外補丁用法 239
20.2.4 左端外補丁用法 241
20.3 外補丁實例—設定層與層的距離 242
20.3.1 層與層的距離效果 242
20.3.2 對層布局 245
20.3.3 設定層的尺寸 246
20.3.4 設定層漂移 247
20.3.5 設定層與層之間的間隔 249
20.4 小結 251
20.5 上機實踐 251
第21章 設定內補丁 252
21.1 內補丁基本語法 252
21.2 內補丁的四邊屬性 253
21.2.1 頂端內補丁用法 253
21.2.2 右端內補丁用法 254
21.2.3 底端內補丁用法 255
21.2.4 左端內補丁用法 256
21.3 內補丁實例 258
21.3.1 設定頂部內補丁 258
21.3.2 設定其他位置的內補丁 259
21.3.3 用複合屬性padding設定內補丁 261
21.4 小結 262
21.5 上機實踐 262
第22章 設定對象框線 264
22.1 框線的基本語法 264
22.2 框線顏色 266
22.3 框線樣式 267
22.4 框線寬度 270
22.5 對象的四個框線 273
22.5.1 設定頂端框線的屬性 273
22.5.2 設定右端框線的屬性 274
22.5.3 設定底端框線的屬性 275
22.5.4 設定左端框線的屬性 276
22.6 框線實例—雙框線 277
22.6.1 實例手把手 278
22.6.2 設定多層框線 281
22.7 小結 283
22.8 上機實踐 283
第23章 定位 284
23.1 定位的基本語法 284
23.2 設定對象層疊順序 286
23.3 設定對象的框線位置 288
23.4 定位實例—圓角製作 289
23.4.1 相對定位實例 290
23.4.2 絕對定位實例 291
23.4.3 實例—圓角製作 293
23.5 小結 299
22.6 上機實踐 299
第24章 列表 300
24.1 列表的基本語法 300
24.2 設定列表的圖像 302
24.3 設定列表的文本排列 303
24.4 列表的預設標記 304
24.5 列表實例 307
24.5.1 設定列表圖像文字內顯示 307
24.5.2 設定列表樣式為空心圓 308
24.5.3 設定文本外自定義列表圖像 309
24.6 小結 310
24.7 上機實踐 310
第25章 用CSS控制表格 312
25.1 控制表格的基本語法 312
25.2 設定表格框線獨立或合併 314
25.3 設定表格布局的算法 316
25.4 CSS控制表格實例 318
25.4.1 布局好表格 318
25.4.2 表格框線獨立和合併 319
25.4.3 設定表格算法為自動和固定 321
25.5 小結 322
25.6 上機實踐 322
第26章 CSS設定滾動條 323
26.1 滾動條的基本語法 323
26.2 設定滾動條亮框線顏色 324
26.3 設定3D界面亮邊顏色和表面顏色 325
26.4 設定滾動條方向箭頭顏色 326
26.5 設定滾動條3D界面暗邊顏色和暗框線顏色 327
26.6 設定滾動條基準顏色和拖動區域顏色 329
26.7 小結 331
26.8 上機實踐 331
第27章 CSS布局 332
27.1 設定層的漂移 332
27.2 清除層的漂移範圍 334
27.3 設定層的可視區域 337
27.4 內容超過層大小時 338
27.5 滑鼠指針的不同表示 340
27.6 設定對象可見性 343
27.6.1 設定對象是否隱藏 344
27.6.2 設定對象是否顯示 346
27.7 小結 348
27.8 上機實踐 348
第28章 選擇符 349
28.1 通配選擇符 349
28.2 類型選擇符 350
28.3 包含選擇符 352
28.4 布局常用選擇符 353
28.4.1 ID選擇符 353
28.4.2 類選擇符 355
28.5 分組選擇符 356
28.6 小結 358
28.7 上機實踐 358
第29章 偽類 360
29.1 偽類概念 360
29.2 偽類的四種狀態 362
29.2.1 訪問連結的狀態 362
29.2.2 滑鼠游標置於其上的狀態 363
29.2.3 獲得焦點的狀態 364
29.2.4 訪問過後的狀態 365
29.3 小結 367
29.4 上機實踐 367
第30章 單位 368
30.1 長度單位 368
30.2 顏色單位 370
30.3 小結 372
30.4 上機實踐 372
第四篇 實 踐 部 分
第31章 遊戲網站布局 375
31.1 網站主頁規劃 375
31.2 用DIV+CSS布局 377
31.2.1 實現頁面頭部 377
31.2.2 實現中間部分 379
31.2.3 實現頁面底部 386
31.3 加入文字 388
31.4 調整全頁面的兼容性 391
31.5 小結 391
第32章 企業網站布局 393
32.1 企業主頁規劃 393
32.2 對網頁布局 394
32.2.1 將頁面用DIV布局出框圖 395
32.2.2 用CSS實現頁面頭部 397
32.2.3 用CSS實現頁面體 398
32.3 添加文本等信息 403
32.4 調整全頁面和瀏覽器兼容 404
32.5 其他二級頁面模組製作 405
32.6 小結 406
第33章 部落格主要頁面布局 407
33.1 部落格網站主頁規劃 407
33.1.1 分析主頁需求 408
33.1.2 確定內容模組 408
33.1.3 畫出效果圖 408
33.2 用DIV布局框圖 409
33.2.1 頁眉 409
33.2.2 實現內容模組 410
33.2.3 頁腳 413
33.3 CSS實現框圖 414
33.3.1 實現內容模組 414
33.3.2 實現整頁效果 419
33.4 添加圖片 420
33.5 加入文字 422
33.6 調整全頁面 423
33.7 其他頁面的布局 423
33.8 小結 423
第34章 面試題 424
面試題1 DIV與SPAN的區別 424
面試題2 HTML的框架是什麼 424
面試題3 CSS引入的方式有哪些 425
面試題4 前端頁面由哪三層構成,各層的作用是什麼 425
面試題5 瀏覽器的核心有哪些?常用的瀏覽器都是什麼核心 425
面試題6 img元素的alt text屬性和title屬性有什麼不同 426
面試題7 document.body和document.documentElement有什麼不同 426
面試題8 XHTML 和 DHTML 有什麼區別 426
面試題9 寫出實現效果所需的CSS代碼 426
面試題10 寫出一段左邊固定、右邊隨電腦螢幕浮動而變動的HTML+CSS代碼 427
面試題11 寫一段兩個DIV交叉重疊的CSS樣式 427
面試題12 怎樣使一個層垂直居中於瀏覽器中 428
面試題13 Firefox嵌套DIV標籤居中問題的處理方法 428
面試題14 用純CSS實現帶下拉的二級橫嚮導航選單 428
面試題15 在網頁製作中為什麼要使用CSS技術 430
面試題16 CSS+DIV開發Web頁面的優勢有哪些 430
面試題17 實現兩列高度自適應的CSS代碼 430

相關詞條

相關搜尋

熱門詞條

聯絡我們