本书是面向Web前端开发学习者的一本入门教材，以通俗易懂的语言、丰富实用的案例，详细讲解了HTML5 + CSS3 + Bootstrap响应式开发技术。 全书共9章。第1～3章讲解HTML5和CSS3的基础内容；第4～6章讲解HTML5表单的应用、HTML5画布、HTML5视频和音频的内容；第7章讲解响应式Web设计的基础知识；第8～9章讲解Bootstrap，内容包括栅格系统、组件和样式等相关内容，以及如何利用Bootstrap相关技术开发PC端登录界面和后台管理系统。 本书既可作为高等教育本、专科院校计算机相关专业的Web前端开发课程的教材，也可作为广大IT技术人员和编程爱好者的参考书。

1.黑马程序员系列教材改版； 2.内容在第1版的基础上进行优化升级； 3.本书配套资源丰富，包括教学PPT、教学大纲、教学设计、题库、教学视频等资源。

黑马程序员，传智播客旗下高端IT教育品牌，它是由中国Java培训先行者张孝祥老师发起，联合全球最大的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今，我们一直坚守着“为千万人少走弯路而著书，为中华软件之崛起而讲课”的办学理念，坚持培养优秀软件应用工程师的宏伟目标，在累计培养的十万余名学员中，其中90%的学员均已在北、上、广等一线城市高薪就业，特别是“黑马程序员”的平均就业薪资已达到8K以上。为了迎合软件市场的需求，我们陆续开设了Java、网页平面、PHP、.Net、iOS、C/C++、Android等9个专业方向的课程，并且未来将逐渐开设其他专业方向的课程。随着传智播客的日益壮大，除了北京总部，我们在上海、广州、武汉、成都、深圳等地也创立了直营分支机构，传智播客俨然已成为了国内最具专业口碑的IT教育机构。

第 1章 HTML5+CSS3初体验 1 1.1　HTML5和CSS3的优势　1 1.1.1　HTML5的优势　1 1.1.2　CSS3的优势　2 1.2　HTML5的基本使用　2 1.2.1　HTML5的基本语法　3 1.2.2　HTML5语义化标签　3 1.3　CSS的基本使用　4 1.3.1　CSS的引入方式　5 1.3.2　选择器　5 1.3.3　盒子模型　8 1.3.4　浮动与定位　10 1.4　【项目1-1】三栏布局页面　11 1.4.1　项目分析　11 1.4.2　编写头部和底部区域　12 1.4.3　编写主体区域　13 1.4.4　实现左侧边栏效果　14 1.4.5　实现右侧边栏效果　14 1.4.6　项目总结　15 1.5　CSS3边框属性　15 1.5.1　圆角边框　15 1.5.2　特殊边框效果　16 1.6　CSS3背景设置　18 1.7　CSS3阴影和渐变　19 1.7.1　阴影　19 1.7.2　线性渐变　20 1.7.3　径向渐变　21 1.8　【项目1-2】许愿墙　22 1.8.1　项目分析　22 1.8.2　编写许愿墙页面结构　23 1.8.3　编写许愿墙页面样式　24 1.8.4　项目总结　24 课后练习　25 第　2章 CSS3文本与图标　26 2.1　HTML5中常用的文本标签　26 2.2　CSS3文本样式属性　27 2.2.1　字体样式属性　27 2.2.2　文本外观属性　27 2.2.3　链接属性　29 2.2.4　@font-face属性　29 2.3　font-awesome字体图标　31 2.3.1　下载font-awesome　31 2.3.2　使用font-awesome　31 2.4　CSS3用户界面属性　33 2.4.1　box-sizing属性　33 2.4.2　resize调整尺寸　34 2.4.3　outline-offset外形修饰　36 2.5　【项目2】软文推广页面　37 2.5.1　项目分析　37 2.5.2　编写头部页面效果　38 2.5.3　编写中间部分页面效果　38 2.5.4　编写底部页面效果　40 2.5.5　项目总结　40 课后练习　41 第3章　CSS3过渡、变形与动画　42 3.1　CSS3过渡　42 3.1.1　什么是过渡　42 3.1.2　transition的子属性　43 3.2　CSS3变形　44 3.2.1　2D转换　44 3.2.2　元素变形原点　45 3.2.3　3D转换　46 3.3　CSS3动画　49 3.3.1　@keyframes规则　49 3.3.2　animation属性　49 3.4　【项目3】摇晃的桃子　51 3.4.1　项目分析　51 3.4.2　编写摇晃桃子的基本页面效果　52 3.4.3　编写桃子的摇晃效果　54 3.4.4　项目总结　56 课后练习　56 第4章　HTML5表单的应用　57 4.1　介绍表单　57 4.1.1　

标签　57 4.1.2　标签　58 4.1.3　其他表单标签　60 4.2　【项目4-1】调查问卷页面　65 4.2.1　项目分析　65 4.2.2　编写用户基本信息页面效果　66 4.2.3　编写上传文件和文本域页面
效果　68 4.2.4　项目总结　68 4.3　HTML5表单新特性　69 4.3.1　新特性　69 4.3.2　新特性　71 4.4　【项目4-2】登录注册页面　72 4.4.1　项目分析　72 4.4.2　编写登录页面效果　74 4.4.3　编写注册基本页面效果　76 4.4.4　实现注册信息验证页面效果　77 4.4.5　项目总结　78 课后练习　78 第5章　HTML5画布　80 5.1　JavaScript的基础知识　80 5.1.1　JavaScript引入方式　80 5.1.2　数据类型　81 5.1.3　变量　81 5.1.4　函数　82 5.1.5　对象　82 5.1.6　事件处理　82 5.1.7　DOM操作　84 5.1.8　getBoundingClientRect()方法　86 5.2　Canvas绘图基本步骤　87 5.2.1　创建画布　87 5.2.2　准备画笔　87 5.2.3　定义坐标和起始点　87 5.2.4　绘制线条图案　88 5.2.5　绘制三角形　90 5.3　Canvas常用方法　91 5.3.1　绘制几何图形　91 5.3.2　绘制笑脸　92 5.3.3　绘制图片　94 5.4　Canvas其他方法　95 5.5　【项目5-1】涂鸦板　96 5.5.1　项目分析　96 5.5.2　编写页面结构，定义画布　97 5.5.3　在JavaScript中绘制图形　97 5.5.4　实现鼠标涂鸦效果　98 5.5.5　项目总结　98 5.6　【项目5-2】发红包看照片　99 5.6.1　项目分析　99 5.6.2　编写页面结构　100 5.6.3　编写页面样式　101 5.6.4　绘制圆形图片　102 5.6.5　实现单击按钮图片显示效果　102 5.6.6　项目总结　103 课后练习　103 第6章　HTML5视频和音频　104 6.1　JavaScript编程基础　104 6.1.1　JavaScript运算符　104 6.1.2　分支结构　106 6.1.3　循环结构　107 6.2　视频和音频技术简介　108 6.3　视频的基本使用　108 6.3.1　在HTML5中嵌入视频　108 6.3.2　视频标签的常用属性　109 6.3.3　处理视频文件格式　110 6.4　音频的基本使用　110 6.4.1　在HTML5中嵌入音频　111 6.4.2　处理音频文件格式　111 6.5　视频和音频对象　112 6.5.1　视频和音频对象的常用方法　112 6.5.2　视频和音频对象的常用属性　112 6.5.3　视频和音频对象的常用事件　113 6.6　【项目6-1】视频播放器　114 6.6.1　项目分析　114 6.6.2　编写播放器页面结构　116 6.6.3　编写播放器页面样式　116 6.6.4　计算视频播放的总时长　119 6.6.5　实现视频播放和暂停效果　119 6.6.6　实现进度条显示效果　120 6.6.7　实现视频全屏显示效果　120 6.6.8　实现视频播放完成后的重置
操作　120 6.6.9　实现单击进度条视频跳转效果　120 6.6.10　使用Esc键退出全屏　121 6.6.11　使用按键控制视频的播放和
暂停　121 6.6.12　项目总结　122 6.7　【项目6-2】音乐播放器　122 6.7.1　项目分析　122 6.7.2　编写音乐播放器页面结构　124 6.7.3　编写音乐播放器页面样式　125 6.7.4　实现歌词控制栏效果　126 6.7.5　实现播放器样式效果　127 6.7.6　实现音频文件的播放功能　129 6.7.7　项目总结　130 课后练习　130 第7章　响应式Web设计　131 7.1　响应式Web设计基础　131 7.1.1　视口　131 7.1.2　媒体查询　132 7.1.3　百分比布局　134 7.1.4　栅格系统　136 7.2　响应式常见实现方式　136 7.2.1　媒体查询实现响应式布局　136 7.2.2　弹性盒布局　137 7.2.3　弹性盒常用属性　138 7.2.4　弹性盒属性的综合运用　142 7.3　【项目7-1】环保网站　144 7.3.1　项目分析　144 7.3.2　编写HTML结构代码　146 7.3.3　编写style.css公共样式代码　146 7.3.4　实现header响应式效果　147 7.3.5　实现banner响应式效果　149 7.3.6　实现中间区域效果　150 7.3.7　实现底部区域效果　153 7.3.8　项目总结　153 7.4　【项目7-2】学习教程库　154 7.4.1　项目分析　154 7.4.2　编写HTML结构代码　156 7.4.3　编写标题部分样式代码　156 7.4.4　编写免费教程资源部分样式
代码　157 7.4.5　编写媒体查询样式代码　158 7.4.6　项目总结　159 课后练习　160 第8章　Bootstrap（上）　161 8.1　Bootstrap简介　161 8.1.1　什么是Bootstrap　161 8.1.2　Bootstrap的优势　162 8.1.3　Bootstrap 4的新特性　162 8.2　Bootstrap的下载和环境安装　162 8.2.1　Bootstrap的下载方式　162 8.2.2　下载Bootstrap预编译文件　163 8.2.3　下载Bootstrap源文件手动
编译　164 8.2.4　使用CDN加载Bootstrap　165 8.2.5　在HTML中引入Bootstrap　166 8.3　Bootstrap布局容器　167 8.3.1　初识布局容器　167 8.3.2　栅格系统　167 8.3.3　栅格系统基本使用　168 8.3.4　响应式布局工具　168 8.4　Flex弹性布局　169 8.5　SVG矢量图的使用　170 8.6　Bootstrap常用组件　172 8.6.1　表单　172 8.6.2　输入框组　174 8.6.3　按钮　174 8.6.4　分页　176 8.7　辅助样式　177 8.7.1　文本颜色　177 8.7.2　背景颜色　177 8.7.3　设置元素间距　178 8.8　【项目8】PC端登录界面　179 8.8.1　项目分析　179 8.8.2　编写HTML结构代码　180 8.8.3　设置body和html样式　181 8.8.4　实现页面垂直居中显示　181 8.8.5　实现头部head部分　182 8.8.6　实现中间center部分　182 8.8.7　实现底部footer部分　183 8.8.8　项目总结　183 课后练习　183 第9章　Bootstrap（下）　185 9.1　导航　185 9.1.1　基础导航　185 9.1.2　标签式导航　186 9.1.3　pills导航　186 9.1.4　导航对齐方式　187 9.1.5　导航下拉菜单　187 9.1.6　标签页切换　188 9.2　导航栏　189 9.2.1　基础导航栏　189 9.2.2　设置导航栏的标题　190 9.2.3　导航栏折叠效果　190 9.3　卡片　191 9.3.1　卡片结构　191 9.3.2　卡片主体内容　192 9.3.3　设置带有图片的卡片　193 9.3.4　设置卡片背景图　193 9.4　【项目9】后台管理系统　194 9.4.1　项目展示　194 9.4.2　安装Node.js环境　196 9.4.3　使用Sass编写样式代码　197 9.4.4　安装Gulp　198 9.4.5　下载和安装Chart.js图表库　199 9.4.6　引入Feather图标库　200 9.4.7　搭建项目目录结构　200 9.4.8　创建模板文件　200 9.4.9　实现导航栏　201 9.4.10　实现网页中间部分布局　203 9.4.11　编写中间部分结构代码　205 9.4.12　实现侧边导航布局　205 9.4.13　实现右侧内容布局　206 9.4.14　实现侧边导航激活效果　207 9.4.15　解决iframe框架高度自适应　207 9.4.16　项目总结　207 课后练习　208