HTML与CSS前台页面设计

实践性强 每个重要知识点都配有例题讲解，且在每章最后配有一个综合实例，使读者对每章知识点有一个全局性的把握。

课后习题丰富 每章均配有丰富的课后练习题，不仅包括对理论知识进行考察的习题，还包括对实践能力进行检验的实训练习，便于理论联系实际，进行综合考察。

丰富实用的资源 提供电子教案、实例源代码、素材图片、课后习题答案等。

内容设计面广 即可作为高职院校或大专院校相关专业教材，也可作为Web前端开发人员、网站建设人员的参考书，还可作为各类电脑职业培训教材。

HTML和CSS是网页制作的基础语言，是每个网页制作者必须掌握的内容。Web标准是所有网页前台技术的发展方向，本书针对Web开发系统，系统、全面地介绍了各种HTML网页制作标记、语法、说明和范例，强化CSS应用技巧讲解。应用CSS制作页面比传统的属性标签更漂亮，更便于与后台结合。

本书不仅包含了网页前台技术的各种概念和理论知识，而且对多种知识的综合运用进行了详细的讲解。知识点系统连贯，逻辑性强；重点难点突出，利于组织教学；在内容安排上注意承上启下，由简到繁，循序渐进地讲述网页前台技术，从基本概念到具体实践、从页面结构建设到页面布局都进行了详细阐述，并进行了细致的实例讲解。

本书共分为11章，分别介绍了：HTML、CSS网页设计概述；HTML基础，包括HTML代码的结构、HTML网页的构成；HTML网页头部标记；HTML网页主体与内容标记，包括标题与段落标记的使用、文本格式标记的使用；使用CSS样式，包括CSS样式代码编写规则、CSS样式选择器；HTML网页中的图片；创建超链接；创建表格，包括表格基础标记、创建高级表格；创建表单；对表格与表单应用CSS样式；使用CSS样式完成网页布局。

HTML与CSS前台页面设计是一门实践性较强的课程，需要通过大量的上机实践去熟悉HTML与CSS的各种标记，掌握这些标记的灵活应用，所以本书每个重要的知识点都配有例题讲解。在每章最后还有一个综合的实例讲解，该实例对本章的知识点进行了综合应用，使读者对每章知识点有一个全局性的把握。

各章后的练习不仅包括对理论知识进行考察的习题，还包括对实践能力进行检验的实训练习。这样便于理论联系实际，进行综合考察。

在HTML与CSS中涉及了大量的标记，为了让读者在需要的时候能够快速地查阅到相关标记的使用，本书提供了一组附录，其中可以查到HTML与CSS的一些标记的使用，以及网页设计中用到的单位和Web颜色。

本书由许莉任主编，李唯、汪晓青任副主编，王路群主审，参与本书编写的还有李汉桥、董宁、马力、谢日星、鲁娟、夏敏、肖静、侯自力等。对于在本书编写过程中提供了支持和帮助的所有人，在此表示衷心的感谢。

由于时间仓促及作者水平有限，书中不足之处在所难免，恳请广大读者、专家批评指正。

编 者

2010年10月

前言

第1章 HTML与CSS网页设计概述 1
1.1 HTML的基本概念 1
1.1.1 什么是HTML 1
1.1.2 HTML的发展 1
1.1.3 HTML与XHTML 2
1.2 CSS的基本概念 2
1.2.1 什么是CSS 2
1.2.2 CSS在网页设计中的作用 2
1.3 网页与网站 3
1.3.1 网页与网站的关系 3
1.3.2 建立网站 3
1.3.3 URL简介 3
1.3.4 HTML与CSS网页的开发环境 4
本章小结 6
习题一 6
第2章 HTML基础 7
2.1 HTML代码的结构 7
2.1.1 HTML代码的组成 7
2.1.2 注释与空白符 8
2.1.3 标记的嵌套 9
2.1.4 标准属性 9
2.1.5 XHTML 9
2.2 HTML网页的构成 10
2.2.1 HTML网页结构 10
2.2.2 HTML标记及其属性 10
2.2.3 head标记及其属性 11
2.2.4 body标记及其属性 14
2.3 HTML网页的浏览与测试 17
2.3.1 利用IE与Firefox浏览HTML网页 17
2.3.2 利用Firebug测试HTML网页 18
2.4 综合实例 19
本章小结 20
习题二 20
实训 21
第3章 HTML网页头部标记 22
3.1 title标记及其属性 22
3.2 base标记及其属性 23
3.3 meta标记及其属性 23
3.4 link标记及其属性 25
3.5 style标记及其属性 26
3.6 script标记及其属性 27
3.7 综合实例 28
本章小结 28
习题三 29
实训 29
第4章 HTML网页主体与内容标记 30
4.1 标题与段落标记的使用 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 文本格式标记的使用 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 内容（多用途）标记 42
4.3.1 div 42
4.3.2 span 43
4.4 特殊字符 44
4.5 综合实例 46
本章小结 48
习题四 48
实训 49
第5章 使用CSS样式 50
5.1 对HTML文档应用样式 50
5.1.1 应用样式的方法 50
5.1.2 应用样式的优先级 52
5.2 CSS样式代码编写规则 53
5.2.1 基本语法 53
5.2.2 规则的注释 53
5.2.3 规则的标记 54
5.2.4 规则的排版 54
5.2.5 样式命名的通用规则 55
5.3 CSS样式选择器 55
5.3.1 HTML标记选择器 55
5.3.2 class选择器 55
5.3.3 ID选择器 58
5.3.4 高级选择器 59
5.3.5 样式的优先级 66
5.4 综合实例 67
本章小结 69
习题五 69
实训 70
第6章 HTML网页中的图片 71
6.1 在网页中加入图片 71
6.2 图片与文字的排版 77
6.3 网页背景图片 79
6.4 利用CSS样式在网页中加入图片 80
6.5 综合实例 84
本章小结 86
习题六 86
实训 86
第7章 创建超链接 88
7.1 超链接概述 88
7.2 超链接标记及其属性 89
7.2.1 内部链接 91
7.2.2 书签链接 92
7.2.3 外部链接 95
7.2.4 文件（非HTML页面）链接 99
7.3 利用CSS样式设置书签格式 100
7.4 图片链接 102
7.5 图片映射链接 104
7.6 综合实例 107
本章小结 109
习题七 109
实训 109
第8章 创建表格 111
8.1 表格基础标记 111
8.2 创建简单表格 111
8.3 表格的属性 113
8.4 表格高级标记 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 创建高级表格 135
8.6 综合实例 136
本章小结 138
习题八 138
实训 139
第9章 创建表单 140
9.1 表单的作用 140
9.2 表单标记 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 表单布局标记 153
9.3.1 fieldset和legend 153
9.3.2 label 155
9.4 综合实例 156
本章小结 157
习题九 158
实训 158
第10章 对表格与表单应用CSS样式 159
10.1 利用CSS样式构建美观的数据表格 159
10.1.1 表格标记 159
10.1.2 对表格应用样式 163
10.2 CSS样式在表单中的应用 174
10.2.1 表单标记 174
10.2.2 表单布局 175
10.2.3 修饰表单 178
10.2.4 复杂的表单布局 181
10.3 综合实例 185
本章小结 189
习题十 189
实训 190
第11章 使用CSS样式完成网页布局 191
11.1 CSS网页布局介绍 191
11.1.1 CSS网页布局的意义 191
11.1.2 CSS盒模型 192
11.1.3 CSS网页布局的基本思路 193
11.2 网页居中 194
11.2.1 自动空白边居中设计 194
11.2.2 定位居中设计 196
11.3 基于float的网页布局 197
11.3.1 两列布局 197
11.3.2 多列布局 201
11.4 复杂布局 205
11.4.1 动态布局 205
11.4.2 弹性布局 207
11.4.3 动态－弹性混合布局 209
11.4.4 动态和弹性图像 211
11.4.5 伪列布局 212
11.5 综合实例 213
本章小结 216
习题十一 217
实训 217
附录A 习题答案 218
附录B HTML标记 223
附录C CSS属性 227
附录D CSS单位 239
附录E Web颜色 240
参考文献 242

1. 网页设计与制作实验指导 [主编　邓文锋 利珊]
2. 网页设计与制作 [主编　温凯峰 叶仕通]
3. 网站前端技术案例教程（HTML+CSS+JavaScript）（第二版） [黄华升]
4. 网页设计与制作 [主编 王潇 章明珠]
5. 网页设计与制作 [主编 李佼辉 聂树成]
6. HTML5+CSS3前端开发项目式教程（微课版） [主编 谭卫 徐文义]
7. Web前端开发从学到用完美实践HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJS（第2版） [阮晓龙]
8. HTML5动画创作技术—DragonBones [陈菲仪 刘枝秀 编著]
9. HTML5游戏开发技术—Egret Engine [辛子俊 林雪莹]
10. 网站前端技术案例教程（HTML+CSS+JavaScript） [黄华升]
11. 网页设计与制作 [主编 杨毅]
12. HTML5应用开发与实战 [主编 肖睿 于继武]
13. 网页设计与制作 [主编 陈建国 项炜]
14. 16课学会网页程序设计—— HTML5+CSS3+JavaScript+jQuery+ [施威铭研究室 著]
15. Web前端开发HTML5+CSS3+jQuery+AJAX从学到用完美实践 [阮晓龙 耿方方 许成刚]
16. HTML5+CSS3前端技术——UI设计师与开发人员合作秘籍 [北京课工场教育科技有限公司Q]
17. 网页设计与制作 [孙娜 蒲秋梅 南洋 编著]
18. CSS+DIV页面布局技术 [主编 朱翠苗]
19. 网页设计与制作 [王铁桩 聂卫献]
20. 网页设计实训教程 [主编 张春英 李英文 钟大伟]
21. 网页设计与开发实战教程 [李云程]
22. 网页设计与制作项目化教程 [周观民 梁雪梅]
23. CSS+DIV页面布局技术 [朱翠苗]
24. 网页设计与制作项目案例教程（Dreamweaver CS6） [杨丽芳 刘琳]
25. 脚本语言与动态网页设计（第二版） [主 编 张景峰 王培军]
26. 网页设计实用技术 [主 编 陈建国 李勤]
27. 网页设计与制作（第二版） [马占欣]
28. 动态网页设计与制作实用教程（第三版） [程伟渊 倪燃]
29. 网页设计与制作实用技术（第二版） [齐建玲 杨艳杰]
30. 多媒体网页设计教程 [主编 朱国华 齐晖 李枫]