HTML與CSS前臺頁面設(shè)計(jì)

實(shí)踐性強(qiáng) 每個重要知識點(diǎn)都配有例題講解，且在每章最后配有一個綜合實(shí)例，使讀者對每章知識點(diǎn)有一個全局性的把握。

課后習(xí)題豐富 每章均配有豐富的課后練習(xí)題，不僅包括對理論知識進(jìn)行考察的習(xí)題，還包括對實(shí)踐能力進(jìn)行檢驗(yàn)的實(shí)訓(xùn)練習(xí)，便于理論聯(lián)系實(shí)際，進(jìn)行綜合考察。

豐富實(shí)用的資源 提供電子教案、實(shí)例源代碼、素材圖片、課后習(xí)題答案等。

內(nèi)容設(shè)計(jì)面廣 即可作為高職院校或大專院校相關(guān)專業(yè)教材，也可作為Web前端開發(fā)人員、網(wǎng)站建設(shè)人員的參考書，還可作為各類電腦職業(yè)培訓(xùn)教材。

HTML和CSS是網(wǎng)頁制作的基礎(chǔ)語言，是每個網(wǎng)頁制作者必須掌握的內(nèi)容。Web標(biāo)準(zhǔn)是所有網(wǎng)頁前臺技術(shù)的發(fā)展方向，本書針對Web開發(fā)系統(tǒng)，系統(tǒng)、全面地介紹了各種HTML網(wǎng)頁制作標(biāo)記、語法、說明和范例，強(qiáng)化CSS應(yīng)用技巧講解。應(yīng)用CSS制作頁面比傳統(tǒng)的屬性標(biāo)簽更漂亮，更便于與后臺結(jié)合。

本書不僅包含了網(wǎng)頁前臺技術(shù)的各種概念和理論知識，而且對多種知識的綜合運(yùn)用進(jìn)行了詳細(xì)的講解。知識點(diǎn)系統(tǒng)連貫，邏輯性強(qiáng)；重點(diǎn)難點(diǎn)突出，利于組織教學(xué)；在內(nèi)容安排上注意承上啟下，由簡到繁，循序漸進(jìn)地講述網(wǎng)頁前臺技術(shù)，從基本概念到具體實(shí)踐、從頁面結(jié)構(gòu)建設(shè)到頁面布局都進(jìn)行了詳細(xì)闡述，并進(jìn)行了細(xì)致的實(shí)例講解。

本書共分為11章，分別介紹了：HTML、CSS網(wǎng)頁設(shè)計(jì)概述；HTML基礎(chǔ)，包括HTML代碼的結(jié)構(gòu)、HTML網(wǎng)頁的構(gòu)成；HTML網(wǎng)頁頭部標(biāo)記；HTML網(wǎng)頁主體與內(nèi)容標(biāo)記，包括標(biāo)題與段落標(biāo)記的使用、文本格式標(biāo)記的使用；使用CSS樣式，包括CSS樣式代碼編寫規(guī)則、CSS樣式選擇器；HTML網(wǎng)頁中的圖片；創(chuàng)建超鏈接；創(chuàng)建表格，包括表格基礎(chǔ)標(biāo)記、創(chuàng)建高級表格；創(chuàng)建表單；對表格與表單應(yīng)用CSS樣式；使用CSS樣式完成網(wǎng)頁布局。

HTML與CSS前臺頁面設(shè)計(jì)是一門實(shí)踐性較強(qiáng)的課程，需要通過大量的上機(jī)實(shí)踐去熟悉HTML與CSS的各種標(biāo)記，掌握這些標(biāo)記的靈活應(yīng)用，所以本書每個重要的知識點(diǎn)都配有例題講解。在每章最后還有一個綜合的實(shí)例講解，該實(shí)例對本章的知識點(diǎn)進(jìn)行了綜合應(yīng)用，使讀者對每章知識點(diǎn)有一個全局性的把握。

各章后的練習(xí)不僅包括對理論知識進(jìn)行考察的習(xí)題，還包括對實(shí)踐能力進(jìn)行檢驗(yàn)的實(shí)訓(xùn)練習(xí)。這樣便于理論聯(lián)系實(shí)際，進(jìn)行綜合考察。

在HTML與CSS中涉及了大量的標(biāo)記，為了讓讀者在需要的時候能夠快速地查閱到相關(guān)標(biāo)記的使用，本書提供了一組附錄，其中可以查到HTML與CSS的一些標(biāo)記的使用，以及網(wǎng)頁設(shè)計(jì)中用到的單位和Web顏色。

本書由許莉任主編，李唯、汪曉青任副主編，王路群主審，參與本書編寫的還有李漢橋、董寧、馬力、謝日星、魯娟、夏敏、肖靜、侯自力等。對于在本書編寫過程中提供了支持和幫助的所有人，在此表示衷心的感謝。

由于時間倉促及作者水平有限，書中不足之處在所難免，懇請廣大讀者、專家批評指正。

編 者

2010年10月

前言

第1章 HTML與CSS網(wǎng)頁設(shè)計(jì)概述 1
1.1 HTML的基本概念 1
1.1.1 什么是HTML 1
1.1.2 HTML的發(fā)展 1
1.1.3 HTML與XHTML 2
1.2 CSS的基本概念 2
1.2.1 什么是CSS 2
1.2.2 CSS在網(wǎng)頁設(shè)計(jì)中的作用 2
1.3 網(wǎng)頁與網(wǎng)站 3
1.3.1 網(wǎng)頁與網(wǎng)站的關(guān)系 3
1.3.2 建立網(wǎng)站 3
1.3.3 URL簡介 3
1.3.4 HTML與CSS網(wǎng)頁的開發(fā)環(huán)境 4
本章小結(jié) 6
習(xí)題一 6
第2章 HTML基礎(chǔ) 7
2.1 HTML代碼的結(jié)構(gòu) 7
2.1.1 HTML代碼的組成 7
2.1.2 注釋與空白符 8
2.1.3 標(biāo)記的嵌套 9
2.1.4 標(biāo)準(zhǔn)屬性 9
2.1.5 XHTML 9
2.2 HTML網(wǎng)頁的構(gòu)成 10
2.2.1 HTML網(wǎng)頁結(jié)構(gòu) 10
2.2.2 HTML標(biāo)記及其屬性 10
2.2.3 head標(biāo)記及其屬性 11
2.2.4 body標(biāo)記及其屬性 14
2.3 HTML網(wǎng)頁的瀏覽與測試 17
2.3.1 利用IE與Firefox瀏覽HTML網(wǎng)頁 17
2.3.2 利用Firebug測試HTML網(wǎng)頁 18
2.4 綜合實(shí)例 19
本章小結(jié) 20
習(xí)題二 20
實(shí)訓(xùn) 21
第3章 HTML網(wǎng)頁頭部標(biāo)記 22
3.1 title標(biāo)記及其屬性 22
3.2 base標(biāo)記及其屬性 23
3.3 meta標(biāo)記及其屬性 23
3.4 link標(biāo)記及其屬性 25
3.5 style標(biāo)記及其屬性 26
3.6 script標(biāo)記及其屬性 27
3.7 綜合實(shí)例 28
本章小結(jié) 28
習(xí)題三 29
實(shí)訓(xùn) 29
第4章 HTML網(wǎng)頁主體與內(nèi)容標(biāo)記 30
4.1 標(biāo)題與段落標(biāo)記的使用 30
4.1.1 h1、h2、h3、h4、h5與h6 30
4.1.2 p 31
4.1.3 blockquote 32
4.1.4 address 32
4.1.5 pre 33
4.2 文本格式標(biāo)記的使用 34
4.2.1 em 34
4.2.2 strong 34
4.2.3 cite 34
4.2.4 i與b 35
4.2.5 big與small 35
4.2.6 tt 35
4.2.7 sup與sub 36
4.2.8 q 36
4.2.9 dfn 37
4.2.10 abbr與acronym 37
4.2.11 del與ins 38
4.2.12 bdo 38
4.2.13 code、kbd、samp與var 39
4.2.14 hr 40
4.2.15 marquee 41
4.3 內(nèi)容（多用途）標(biāo)記 42
4.3.1 div 42
4.3.2 span 43
4.4 特殊字符 44
4.5 綜合實(shí)例 46
本章小結(jié) 48
習(xí)題四 48
實(shí)訓(xùn) 49
第5章 使用CSS樣式 50
5.1 對HTML文檔應(yīng)用樣式 50
5.1.1 應(yīng)用樣式的方法 50
5.1.2 應(yīng)用樣式的優(yōu)先級 52
5.2 CSS樣式代碼編寫規(guī)則 53
5.2.1 基本語法 53
5.2.2 規(guī)則的注釋 53
5.2.3 規(guī)則的標(biāo)記 54
5.2.4 規(guī)則的排版 54
5.2.5 樣式命名的通用規(guī)則 55
5.3 CSS樣式選擇器 55
5.3.1 HTML標(biāo)記選擇器 55
5.3.2 class選擇器 55
5.3.3 ID選擇器 58
5.3.4 高級選擇器 59
5.3.5 樣式的優(yōu)先級 66
5.4 綜合實(shí)例 67
本章小結(jié) 69
習(xí)題五 69
實(shí)訓(xùn) 70
第6章 HTML網(wǎng)頁中的圖片 71
6.1 在網(wǎng)頁中加入圖片 71
6.2 圖片與文字的排版 77
6.3 網(wǎng)頁背景圖片 79
6.4 利用CSS樣式在網(wǎng)頁中加入圖片 80
6.5 綜合實(shí)例 84
本章小結(jié) 86
習(xí)題六 86
實(shí)訓(xùn) 86
第7章 創(chuàng)建超鏈接 88
7.1 超鏈接概述 88
7.2 超鏈接標(biāo)記及其屬性 89
7.2.1 內(nèi)部鏈接 91
7.2.2 書簽鏈接 92
7.2.3 外部鏈接 95
7.2.4 文件（非HTML頁面）鏈接 99
7.3 利用CSS樣式設(shè)置書簽格式 100
7.4 圖片鏈接 102
7.5 圖片映射鏈接 104
7.6 綜合實(shí)例 107
本章小結(jié) 109
習(xí)題七 109
實(shí)訓(xùn) 109
第8章 創(chuàng)建表格 111
8.1 表格基礎(chǔ)標(biāo)記 111
8.2 創(chuàng)建簡單表格 111
8.3 表格的屬性 113
8.4 表格高級標(biāo)記 128
8.4.1 th 128
8.4.2 caption 129
8.4.3 thead、tbody、tfoot 130
8.4.4 colgroup 132
8.4.5 colspan和rowspan 133
8.5 創(chuàng)建高級表格 135
8.6 綜合實(shí)例 136
本章小結(jié) 138
習(xí)題八 138
實(shí)訓(xùn) 139
第9章 創(chuàng)建表單 140
9.1 表單的作用 140
9.2 表單標(biāo)記 140
9.2.1 form 140
9.2.2 input 142
9.2.3 textarea 149
9.2.4 select和option 150
9.2.5 optgroup 152
9.3 表單布局標(biāo)記 153
9.3.1 fieldset和legend 153
9.3.2 label 155
9.4 綜合實(shí)例 156
本章小結(jié) 157
習(xí)題九 158
實(shí)訓(xùn) 158
第10章 對表格與表單應(yīng)用CSS樣式 159
10.1 利用CSS樣式構(gòu)建美觀的數(shù)據(jù)表格 159
10.1.1 表格標(biāo)記 159
10.1.2 對表格應(yīng)用樣式 163
10.2 CSS樣式在表單中的應(yīng)用 174
10.2.1 表單標(biāo)記 174
10.2.2 表單布局 175
10.2.3 修飾表單 178
10.2.4 復(fù)雜的表單布局 181
10.3 綜合實(shí)例 185
本章小結(jié) 189
習(xí)題十 189
實(shí)訓(xùn) 190
第11章 使用CSS樣式完成網(wǎng)頁布局 191
11.1 CSS網(wǎng)頁布局介紹 191
11.1.1 CSS網(wǎng)頁布局的意義 191
11.1.2 CSS盒模型 192
11.1.3 CSS網(wǎng)頁布局的基本思路 193
11.2 網(wǎng)頁居中 194
11.2.1 自動空白邊居中設(shè)計(jì) 194
11.2.2 定位居中設(shè)計(jì) 196
11.3 基于float的網(wǎng)頁布局 197
11.3.1 兩列布局 197
11.3.2 多列布局 201
11.4 復(fù)雜布局 205
11.4.1 動態(tài)布局 205
11.4.2 彈性布局 207
11.4.3 動態(tài)－彈性混合布局 209
11.4.4 動態(tài)和彈性圖像 211
11.4.5 偽列布局 212
11.5 綜合實(shí)例 213
本章小結(jié) 216
習(xí)題十一 217
實(shí)訓(xùn) 217
附錄A 習(xí)題答案 218
附錄B HTML標(biāo)記 223
附錄C CSS屬性 227
附錄D CSS單位 239
附錄E Web顏色 240
參考文獻(xiàn) 242

1. HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目化教程 [范佳　胡卓舒　馮迎]
2. 網(wǎng)頁設(shè)計(jì)與制作實(shí)驗(yàn)指導(dǎo) [主編　鄧文鋒 利珊]
3. 網(wǎng)頁設(shè)計(jì)與制作 [主編　溫凱峰 葉仕通]
4. 網(wǎng)站前端技術(shù)案例教程（HTML+CSS+JavaScript）（第二版） [黃華升]
5. 網(wǎng)頁設(shè)計(jì)與制作 [主編 王瀟 章明珠]
6. 網(wǎng)頁設(shè)計(jì)與制作 [主編 李佼輝 聶樹成]
7. HTML5+CSS3前端開發(fā)項(xiàng)目式教程（微課版） [主編 譚衛(wèi) 徐文義]
8. Web前端開發(fā)從學(xué)到用完美實(shí)踐HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJS（第2版） [阮曉龍]
9. HTML5動畫創(chuàng)作技術(shù)—DragonBones [陳菲儀 劉枝秀 編著]
10. HTML5游戲開發(fā)技術(shù)—Egret Engine [辛子俊 林雪瑩]
11. 網(wǎng)站前端技術(shù)案例教程（HTML+CSS+JavaScript） [黃華升]
12. 網(wǎng)頁設(shè)計(jì)與制作 [主編 楊毅]
13. HTML5應(yīng)用開發(fā)與實(shí)戰(zhàn) [主編 肖睿 于繼武]
14. 網(wǎng)頁設(shè)計(jì)與制作 [主編 陳建國 項(xiàng)煒]
15. 16課學(xué)會網(wǎng)頁程序設(shè)計(jì)—— HTML5+CSS3+JavaScript+jQuery+ [施威銘研究室 著]
16. Web前端開發(fā)HTML5+CSS3+jQuery+AJAX從學(xué)到用完美實(shí)踐 [阮曉龍 耿方方 許成剛]
17. HTML5+CSS3前端技術(shù)——UI設(shè)計(jì)師與開發(fā)人員合作秘籍 [北京課工場教育科技有限公司Q]
18. 網(wǎng)頁設(shè)計(jì)與制作 [孫娜 蒲秋梅 南洋 編著]
19. CSS+DIV頁面布局技術(shù) [主編 朱翠苗]
20. 網(wǎng)頁設(shè)計(jì)與制作 [王鐵樁 聶衛(wèi)獻(xiàn)]
21. 網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程 [主編 張春英 李英文 鐘大偉]
22. 網(wǎng)頁設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)教程 [李云程]
23. 網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目化教程 [周觀民 梁雪梅]
24. CSS+DIV頁面布局技術(shù) [朱翠苗]
25. 網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目案例教程（Dreamweaver CS6） [楊麗芳 劉琳]
26. 腳本語言與動態(tài)網(wǎng)頁設(shè)計(jì)（第二版） [主 編 張景峰 王培軍]
27. 網(wǎng)頁設(shè)計(jì)實(shí)用技術(shù) [主 編 陳建國 李勤]
28. 網(wǎng)頁設(shè)計(jì)與制作（第二版） [馬占欣]
29. 動態(tài)網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程（第三版） [程偉淵 倪燃]
30. 網(wǎng)頁設(shè)計(jì)與制作實(shí)用技術(shù)（第二版） [齊建玲 楊艷杰]