HTML 与 CSS 是网页制作技术的核心和基础，也是每个网页制作者必须要掌握的基本知识，两者在网页设计中不可或缺。本书从初学者的角度，以实用的案例、通俗易懂的语言详细介绍了使用HTML 与 CSS（包括 HTML5 和 CSS3）进行网页设计与制作的各方面内容和技巧。
全书共 11 章。第 1～3 章主要讲解 HTML 与 CSS 的基础知识，包括 Web 基本概念、 HTML 与CSS 简介、 Dreamweaver 工具的使用、 HTML 文本与图像标签、 CSS 选择器、 CSS 文本样式属性、CSS 的继承性/优先级；第 4～9 章分别讲解盒子模型、列表与超链接、表格与表单、标签的浮动与定位、音频与视频的嵌入、过渡、变形、动画等，它们是学习网页制作的核心；第 10 章主要讲解 CSS的高级技巧、布局与常见的兼容性，掌握这些实用的技巧，可以使初学者在制作网页时得心应手；第11 章为实战开发，结合前面学习的基础知识，带领初学者开发一个电商网站的首页。
本书附有配套视频、源代码、习题、教学课件等资源，为了帮助初学者更好地学习本书讲解的内容，还提供在线答疑，希望得到更多读者的关注。
本书适合作为高等院校相关专业网页设计与制作课程的教材，也可作为网页平面设计的培训教材，还可作为网页制作、美工设计、网站开发、网页编程等行业人员的参考用书。

？

HTML与CSS是网页制作技术的核心和基础，也是每个网页制作者必须要掌握的基本知识，两者在网页设计中不可或缺。本书从初学者的角度，以实用的案例、通俗易懂的语言详
细介绍了使用HTML与CSS进行网页设计与制作的各方面内容和技巧。
本书是在第一版《网页设计与制作（HTML+CSS）》的基础上修订而成。关于本书的修订工作说明如下：
（1）增加了HTML5部分基础标签和CSS3新属性的讲解和应用。
（2）增加了网页视听技术的应用，主要包括音频、视频的嵌入和动画效果。
（3）全面审核并修改第一版中的不妥之处，并替换了原书中较为陈旧的案例和图片。
为什么学习本书
在互联网技术高速发展和激烈竞争的大背景下，HTML5和CSS3技术一直受到各方的高度重视。市面上也有许多关于HTML5和CSS3技术的图书。但大多数图书知识的讲解生涩难
懂，不注重实践练习。其实作为一种技术的入门教程，最重要也最难的是要将一些非常复杂、难以理解的问题简单化，能够让读者轻松理解，并通过练习快速掌握。本书采用通俗易懂的
语言对每个知识点进行深入的分析，并针对每个知识点精心设计相关案例，然后模拟这些知识点在实际工作中的运用，真正做到了由浅入深、由易到难，有助于读者快速入门。
如何使用本书
本书针对网页设计与制作的初学者，以理论+案例式的编写体例规划理论知识点，并用实际的操作展示学习过程，通过实际的操作让学生掌握项目中的技能点。
全书共分11章，下面分别对每章进行简单的介绍：
第1章主要介绍网页制作的基础知识。通过本章的学习，初学者可简单地认识网页，了解HTML与CSS语言，熟练地使用Dreamweaver工具创建一个简单的网页。
第2、3章为HTML入门与CSS入门，要求初学者掌握HTML5与CSS3语言的基本语法，熟悉常用的HTML文本标签、图像标签，能够熟练地使用CSS控制网页中的字体和文本外观样式。
第4~7章是学习网页制作的核心，分别讲解盒子模型、列表和超链接、表格和表单、网页布局。读者只有掌握好这部分内容，才能在以后的网页制作中随意地控制各种网页元素。
第8、9章主要讲解网页音频、视频、动画的制作技巧。掌握这部分内容能够让读者制作出更加绚丽的网页效果。
第10章主要讲解CSS高级技巧，包括CSS精灵技术、滑动门技术、margin负值设置压线效果。掌握这些实用的技巧，可以使初学者在制作网页时得心应手。
第11章为实战开发，结合前面学习的基础知识，带领读者开发一个电商网站首页。初学者应按照书中的思路和步骤动手实践，以更好地掌握开发一个网站项目的流程。
在上面所提到的11个章节中，第2~9章主要是针对HTML与CSS基础（包括HTML5和CSS3的新内容）进行的讲解，每一章的最后一个小节均为本章的阶段案例，在学习这些章节时，初学者可以通过阶段案例加深对本章知识点的理解。第10章比较特殊，是对CSS高级技巧和布局与常见的兼容性的介绍，主要通过案例的形式进行讲解，学习这个章节时，读者需要多思考，认真地分析书中的每个案例。
在学习过程中，读者一定要亲自实践书中的案例代码。如果不能完全理解书中所讲知识，读者可以登录博学谷平台，通过平台中的教学视频进行深入学习。学习完一个知识点后，要
及时在博学谷平台上进行测试，以巩固学习内容。
另外，如果读者在理解知识点的过程中遇到困难，建议不要纠结于某个地方，可以先往后学习。通常来讲，通过逐步的学习，前面不懂和疑惑的知识也能够理解了。在学习本书时
多动手实践是必要的，如果在实践的过程中遇到问题，建议多思考，理清思路，认真分析问题发生的原因，并在问题解决后总结出经验。
致谢
本书的编写和整理工作由传智播客教育科技有限公司高教产品研发部完成，主要参与人员有王哲、孟方思等，全体人员在近一年的编写过程中付出了很多辛勤的汗水，在此一并表
示衷心的感谢。
意见反馈
尽管我们尽了最大的努力，但书中仍难免会有不妥之处，欢迎各界专家和读者朋友们来信给予宝贵意见，我们将不胜感激。您在阅读本书时，如发现任何问题或有不认同之处，可
以通过电子邮件与我们取得联系。
请发送电子邮件至：itcast_book@vip.sina.com
黑马程序员
2021年5月？

第1章 HTML和CSS网页制作概述 ...1
1.1 网页概述 .......................................................... 1
1.1.1 网页的构成 ............................... 1
1.1.2 网页相关名词 ........................... 3
1.1.3 Web标准 ................................... 4
1.2 网页制作技术 ................................................6
1.2.1 HTML简介 ............................... 6
1.2.2 CSS简介 .................................... 7
1.3 网页展示平台 ................................................8
1.4 网页代码编辑工具 ..................................11
1.4.1 Dreamweaver操作界面............ 11
1.4.2 Dreamweaver初始化设置 ........ 16
1.4.3 创建第一个网页 ..................... 18
小结 .............................................................................. 20
第2章 HTML入门 .............. 21
2.1 HTML概述 ..................................................21
2.1.1 HTML文档格式...................... 21
2.1.2 HTML标签 ............................. 22
2.2 HTML文本控制标签 ............................26
2.2.1 页面格式化标签 ..................... 26
2.2.2 文本样式标签 ......................... 32
2.2.3 文本格式化标签 ..................... 33
2.2.4 特殊字符 ................................. 34
2.3 HTML图像应用 .......................................35
2.3.1 常用图像格式 ......................... 35
2.3.2 图像标签................... 36
2.3.3 绝对路径和相对路径.............. 39
2.4 阶段案例——制作图文混排
页面 .................................................................. 40
2.4.1 分析效果图 ............................. 40
2.4.2 制作页面结构 ......................... 40
2.4.3 控制图像 ................................. 41
2.4.4 控制文本................................. 42
小结............................................................................... 43
第3章 CSS入门................. 44
3.1 CSS核心基础 ............................................. 44
3.1.1 CSS样式规则 .......................... 44
3.1.2 CSS样式引入 .......................... 46
3.1.3 CSS基础选择器 ...................... 52
3.2 CSS文本样式属性 .................................. 55
3.2.1 CSS字体样式属性 .................. 55
3.2.2 CSS文本外观属性 .................... 59
3.3 CSS高级特性 ............................................. 68
3.3.1 CSS复合选择器 ...................... 68
3.3.2 CSS层叠性和继承性 .............. 71
3.3.3 CSS优先级 .............................. 73
3.4 阶段案例—制作新闻页面 ........... 76
3.4.1 分析效果图 ............................. 76
3.4.2 制作页面结构 ......................... 77
3.4.3 定义CSS样式 .......................... 78
小结............................................................................... 79
第4章 盒子模型................. 80
4.1 认识盒子模型 ............................................ 80
4.2 盒子模型的相关属性 ............................ 82
4.2.1 边框属性................................. 82
4.2.2 内边距属性 ............................. 89
4.2.3 外边距属性 ............................. 91
4.2.4 背景属性................................. 92
4.2.5 盒子的宽与高 ......................... 98
4.3 CSS3新增盒子模型属性 .................... 99
4.3.1 颜色透明度 ............................. 99
4.3.2 圆角 .......................................100
4.3.3 图片边框................................103
4.3.4 阴影 .......................................106
4.3.5 渐变 .......................................108
4.3.6 多背景图像 ............................114
4.3.7 修剪背景图像 ........................115
4.4 元素的类型和转换 .............................. 116
4.4.1 元素的类型 ............................116
4.4.2 div和span ................................118
4.4.3 元素类型的转换 ................... 121
4.5 块元素垂直外边距的合并...............123
4.5.1 相邻块元素垂直外边距的
合并....................................... 123
4.5.2 嵌套块元素垂直外边距的
合并....................................... 125
4.6 阶段案例——制作音乐
排行榜 ...........................................................127
4.6.1 分析效果图 ........................... 127
4.6.2 制作页面结构 ....................... 128
4.6.3 定义CSS样式 ........................ 129
小结 ........................................................................... 130
第5章 列表和超链接 ........... 131
5.1 列表标签 .....................................................131
5.1.1 无序列表 ............................... 131
5.1.2 有序列表 ............................... 133
5.1.3 定义列表 ............................... 134
5.1.4 列表的嵌套应用 ................... 136
5.2 CSS控制列表样式 ................................137
5.2.1 list-style-type属性 ................ 137
5.2.2 list-style-image属性.............. 139
5.2.3 list-style-position属性 .......... 140
5.2.4 list-style属性 ......................... 141
5.3 超链接标签 .............................................. 143
5.3.1 创建超链接 ........................... 144
5.3.2 锚点链接 ............................... 146
5.4 链接伪类控制超链接......................... 148
5.5 阶段案例—制作新闻列表 ........ 150
5.5.1 分析效果图 ........................... 150
5.5.2 制作页面结构 ....................... 151
5.5.3 定义CSS样式 ........................ 152
5.6 小结 ............................................................... 154
第6章 表格和表单 ............. 155
6.1 表格 ................................................................155
6.1.1 创建表格 ............................... 155
6.1.2标签的属性 ............... 157
6.1.3标签的属性 ................... 162
6.1.4标签的属性 ................... 164
6.1.5标签及其属性 ...............167
6.1.6 表格的结构 ............................167
6.2 CSS控制表格样式 ............................... 169
6.2.1 CSS控制表格边框 .................169
6.2.2 CSS控制单元格边距 .............172
6.2.3 CSS控制单元格的宽高 .........174
6.3 表单 ............................................................... 175
6.3.1 表单的构成 ............................175
6.3.2 创建表单................................175
6.4 表单控件 ....................................................177
6.4.1 input控件 ...............................177
6.4.2 textarea控件 ...........................181
6.4.3 select控件 ...............................182
6.5 HTML5表单新属性 ........................... 186
6.5.1 全新的form属性 ....................186
6.5.2 全新的表单控件 ....................187
6.5.3 全新的input控件类型 ............188
6.5.4 全新的input属性....................194
6.6 CSS控制表单样式 ............................... 202
6.7 阶段案例—制作表单注册
页面................................................................ 205
6.7.1 效果分析................................206
6.7.2 搭建结构................................206
6.7.3 定义样式................................209
小结............................................................................ 212
第7章 网页布局................213
7.1 网页布局概述 ......................................... 213
7.2 网页布局常用属性 .............................. 215
7.2.1 标签的浮动属性 ....................215
7.2.2 标签的定位属性 ....................225
7.3 网页布局其他属性 .............................. 231
7.3.1 overflow属性 ..........................231
7.3.2 Z-index标签层叠 ...................234
7.4 布局类型 ....................................................234
7.4.1 单列布局................................234
7.4.2 两列布局................................235
7.4.3 三列布局................................237
7.4.4 全新的HTML5结构元素 .......241
7.4.5 网页模块命名规范 ................244
7.5 阶段案例——制作通栏
banner ......................................................... 246
7.5.1 分析效果图 ........................... 246
7.5.2 制作页面结构 ....................... 247
7.5.3 定义CSS样式 ........................ 248
小结 ............................................................................251
第8章 视频和音频 ............. 252
8.1 视频音频嵌入技术概述 ....................252
8.2 视频文件和音频文件的格式 ........ 254
8.3 嵌入视频和音频.....................................255
8.3.1 在HTML5中嵌入视频 .......... 255
8.3.2 在HTML5中嵌入音频 .......... 257
8.3.3 视频音频文件的兼容性
问题....................................... 258
8.3.4 调用网络音频视频文件 ........ 260
8.4 CSS控制视频的宽高 ......................... 260
8.5 阶段案例——制作音乐播放
界面 ................................................................263
8.5.1 分析效果图 ........................... 263
8.5.2 制作页面结构 ....................... 264
8.5.3 定义CSS样式 ........................ 265
小结 ............................................................................267
第9章 过渡、变形和动画 ....... 268
9.1 过渡 ................................................................268
9.1.1 transition-property属性 ......... 268
9.1.2 transition-duration属性 ......... 270
9.1.3 transition-timing-function
属性......................................... 271
9.1.4 transition-delay属性 .............. 272
9.1.5 transition属性 ........................ 273
9.2 变形 ................................................................273
9.2.1 认识transform ........................ 273
9.2.2 2D变形 .................................. 273
9.2.3 3D变形 .................................. 280
9.3 动画 ................................................................285
9.3.1 @keyframes ............................ 285
9.3.2 animation-name属性............. 286
9.3.3 animation-duration属性 ........ 286
9.3.4 animation-timing-function
属性 ........................................288
9.3.5 animation-delay属性..............288
9.3.6 animation-iteration-count
属性 ........................................288
9.3.7 animation-direction属性 ........289
9.3.8 animation属性 ........................290
9.4 阶段案例——制作表情图片 ........ 290
9.4.1 分析效果图 ............................291
9.4.2 制作页面结构 ........................292
9.4.3 定义CSS样式 .........................292
小结............................................................................ 295
第10章 网页制作应用技巧.......296
10.1 CSS精灵技术 ....................................... 296
10.1.1 认识CSS精灵 .......................296
10.1.2 应用CSS精灵 ...................... 297
10.2 滑动门技术 ........................................... 301
10.2.1 认识滑动门 ......................... 302
10.2.2 应用滑动门 ......................... 303
10.3 margin负值设置技巧 .................... 306
10.3.1 margin负值的应用 .............. 306
10.3.2 利用margin负值制作压线
效果 ...................................... 308
小结 ............................................................................311
第11章 实战开发——电商网站
首页.................. 312
11.1 准备工作 ..................................................313
11.2 首页面详细制作..................................317
小结 ........................................................................... 342？

江苏传智播客教育科技股份有珢公司（简称传智播客）是一家专门致力于高素质软件开发人才培养的高科技公司。传智播客致力于为企业优选一流的人才的培训理念，经过多年的教学探索及战略布局，已向着综合型职业教育集团发展。“黑马程序员”是传智播客旗下高端IT教育品牌。

？

特色1：知识全面，讲解清晰

针对HTML与CSS基础（包括HTML5和CSS3的新内容）进行讲解，采用通俗易懂的语言对每个知识点进行深入的分析。

特色2：案例实用，实践性强

通过阶段案例加深读者对知识点的理解和掌握，并通过电商网站开发帮助读者更好地掌握开发一个网站项目的流程。

？