HTML5+CSS3+JavaScript从入门到精通（微课精编版）（第2版）

Web开发技术可以粗略划分为前台浏览器端技术和后台服务器端技术。当前，Web前端技术层出不穷，日新月异，但有一点基本确定，那就是HTML5负责页面结构，CSS3负责样式表现，JavaScript负责网页动态行为。因此，HTML5、CSS3和JavaScript技术是网页制作技术的基础和核心。本书全面讲解HTML5、CSS3和JavaScript从入门到项目开发的基本知识，选择当前面试、就业急需的内容进行深入剖析，同时配备了前端开发必备的10大资源库，以帮助读者快速掌握Web前端开发的技术精髓。

本书内容
全书分为上下两册，共31章。
上册（HTML5 CSS3篇）：HTML5基础、设计HTML5文档结构、设计HTML5文本、设计HTML5图像和多媒体、设计列表和超链接、设计表格、设计表单、CSS3基础、字体和文本样式、背景样式、列表和超链接样式、表格和表单样式、CSS3盒模型、网页布局基础、CSS3弹性布局、设计动画样式、媒体查询与页面自适应。
下册（JavaScript篇）：JavaScript基础、设计程序结构、处理字符串、使用正则表达式、使用数组、使用函数、使用对象、JavaScript高级编程、客户端操作、文档操作、事件处理、CSS样式操作、使用Ajax、项目实战。

本书特色
30万 读者体验，畅销书全新 ；10年开发教学经验，一线讲师半生心血。
系统详解：本书系统地讲解了HTML5 CSS3 JavaScript技术在Web前端开发各个方面应用的知识，从最基础的HTML5开始讲起，配合大量实例，循序渐进地全面展开，可帮助读者奠定坚实的Web前端开发理论基础，做到知其然也知其所以然。
入门容易：本书遵循学习规律，入门和实战相结合。采用“基础知识 中小案例 实战案例”的编写模式，内容由浅入深、循序渐进，从入门中学习实战应用，从实战应用中激发学习兴趣。
案例超多：通过例子学习是最好的学习方式，本书通过一个知识点、一个例子、一个结果、一段评析的模式，透彻详尽地讲述了使用HTML5 CSS3 JavaScript技术进行Web前端开发的各类知识，并且几乎每一章都配有综合应用的实战案例。实例、案例丰富详尽，跟着大量案例去学习，边学边做，从做中学，学习可以更深入、更高效。
体验超好：配套同步视频讲解，微信扫一扫，随时随地看视频；配套在线支持，知识拓展，专项练习，更多案例，在线预览网页设计效果，阅读或下载源代码，同样微信扫一扫即可学习。
技术新颖：本书全面、细致地讲解了Web前端开发的基础知识，同时讲解在未来Web时代中备受欢迎的各种新知识，让读者能够真正学习到最实用、最流行的Web新技术。
栏目贴心：本书根据需要在各章使用了很多“注意”“提示”等小栏目，让读者可以在学习过程中更轻松地理解相关知识点及概念，并轻松地掌握个别技术的应用技巧。
资源丰富：本书配套Web前端学习人员（尤其是零基础学员）最需要的10大资源库，包括同步讲解视频库、示例源码库、开发参考工具库、案例库、网页素材库、网页配色库、JavaScript分类网页特效库、网页模板库、网页欣赏库、面试题库。这些资源，不仅学习中需要，工作中更有用。
在线支持：顺应移动互联网时代知识获取途径变化的潮流，本书每一章均配有在线支持，提供与本章知识相关的知识拓展、专项练习、更多案例等优质在线学习资源，并且新知识、新题目、新案例不断更新中。这样一来，在有限的纸质图书中承载了更丰富的学习内容，让读者真实体验到以一倍的价格购买两倍的学习内容，更便捷，更超值。

读前须知
本书从初学者的角度出发，结合大量的案例来讲解相关知识，使得学习不再枯燥、拘泥、教条，因此要求读者边学习边实践操作，避免学习的知识流于表面、限于理论。
作为入门书籍，本书知识点比较庞杂，所以不可能面面俱到。技术学习的关键是方法，本书在很多实例中体现了方法的重要性，读者只要掌握了各种技术的运用方法，在学习更深入的知识时便可大大提高自学的效率。
本书提供了大量示例，需要用到Edge、IE、Firefox、Chrome等主流浏览器进行测试和预览。为了方便示例测试，以及做浏览器兼容设计，读者需要安装上述类型的最新版本浏览器，各种浏览器在部分细节的表现上可能会稍有差异。
HTML5中部分API可能需要服务器端测试环境，本书部分章节所用的服务器端测试环境为Windows操作系统 Apache服务器 PHP开发语言。如果读者的本地系统没有搭建PHP虚拟服务器，建议先搭建该虚拟环境。
限于篇幅，本书示例没有提供完整的HTML代码，测试示例时读者应该先补充完整HTML代码结构，然后进行测试，或者直接参考本书提供的示例源码库，根据章节编号找到对应的示例源文件，边参考边练习，边学习边思考，努力做到举一反三。
为了给读者提供更多的学习资源，本书在配套资源库中提供了很多参考链接，许多本书无法详细介绍的问题都可以通过这些链接找到答案。由于这些链接地址会因时间而有所变动或调整，所以在此说明，这些链接地址仅供参考，本书无法保证所有的这些地址是长期有效的。

本书适用对象
?Web前端开发的初学者。
?Web前端开发初级工程师。
?Web前端设计师和UI设计师。
?Web前端项目管理人员。
?开设Web前端开发等相关专业的院校的师生。
?开设Web前端开发课程的培训机构的讲师及学员。
?Web前端开发爱好者。

关于作者
本书由前端科技团队负责编写，并提供在线支持和技术服务，由于作者水平有限，书中难免存在疏漏和不足之处，欢迎读者朋友不吝赐教。读者如有好的建议、意见，或在学习本书时遇到疑难问题，可以通过电子邮件（css148@163.com）的方式联系我们，我们会尽快为您解答。

编 者 
2022年8月

《 HTML5 CSS3 JavaScript从入门到精通（微课精编版）（第2版）》系统地讲解了HTML5、CSS3和JavaScript的基础理论和实际运用技术，结合大量实例进行深入浅出的讲解。全书分为上下两册，共31章。上册为HTML5 CSS3篇，内容包括HTML5基础、设计HTML5文档结构、设计HTML5文本、设计HTML5图像和多媒体、设计列表和超链接、设计表格、设计表单、CSS3基础、字体和文本样式、背景样式、列表和超链接样式、表格和表单样式、CSS3盒模型、网页布局基础、CSS3弹性布局、设计动画样式、媒体查询与页面自适应；下册为JavaScript篇，内容包括JavaScript基础、设计程序结构、处理字符串、使用正则表达式、使用数组、使用函数、使用对象、JavaScript高级编程、客户端操作、文档操作、事件处理、CSS样式操作、使用Ajax、项目实战。其中，项目实战为纯线上资源，更加实用。书中所有知识点均结合具体实例展开讲解，代码注释详尽，可使读者轻松掌握前端技术精髓，提升实际开发能力。

前端科技：前端科技是一个由热爱前端开发的教师和一线Web开发人员组成的团队，长期从事Web前端项目开发和教学资源建设，擅长网页开发、Web全栈开发、HTML5移动端开发、网页重构、前端大数据处理、智能前端开发等，具有丰富的Web前端教育培训经验和一线开发经验，在IT领域的初学者群体中获得了一定的认可度。

上册·HTML5 CSS3篇

第1章 HTML5基础 1
视频讲解：28分钟
1.1 HTML5概述 1
1.1.1 HTML历史 1
1.1.2 HTML5起源 2
1.1.3 HTML5组织 3
1.1.4 HTML5规则 3
1.1.5 HTML5特性 3
1.1.6 浏览器支持 5
1.2 HTML5设计原则 5
1.2.1 避免不必要的复杂性 6
1.2.2 支持已有内容 6
1.2.3 解决实际问题 7
1.2.4 根据用户使用习惯设计规范 7
1.2.5 优雅地降级 7
1.2.6 支持优先级 8
1.3 HTML5语法特性 9
1.3.1 文档和标记 9
1.3.2 宽松的约定 9
1.4 HTML5基本结构 11
1.4.1 新建HTML5文档 11
1.4.2 标签 12
1.4.3 文本内容 13
1.4.4 超文本内容 14
1.5 案例实战 14
1.5.1 编写简洁的HTML5文档 14
1.5.2 比较HTML4与HTML5文档结构 15
1.6 在线支持 16
第2章 设计HTML5文档结构 17
视频讲解：54分钟
2.1 头部结构 17
2.1.1 定义网页标题 17
2.1.2 定义网页元信息 17
2.1.3 定义文档视口 18
2.2 主体基本结构 20
2.2.1 定义文档结构 20
2.2.2 定义内容标题 21
2.2.3 使用div 22
2.2.4 使用id和class 23
2.2.5 使用title 24
2.2.6 HTML注释 24
2.3 主体语义化结构 25
2.3.1 定义页眉 25
2.3.2 定义导航 26
2.3.3 定义主要区域 27
2.3.4 定义文章块 28
2.3.5 定义区块 29
2.3.6 定义附栏 30
2.3.7 定义页脚 31
2.3.8 使用role 32
2.4 案例实战 33
2.5 在线支持 35
第3章 设计HTML5文本 36
视频讲解：68分钟
3.1 通用文本 36
3.1.1 标题文本 36
3.1.2 段落文本 36
3.2 描述性文本 37
3.2.1 强调文本 37
3.2.2 标记细则 37
3.2.3 特殊格式 38
3.2.4 定义上标和下标 38
3.2.5 定义术语 40
3.2.6 标记代码 40
3.2.7 预定义格式 41
3.2.8 定义缩写词 42
3.2.9 标注编辑或不用文本 42
3.2.10 指明引用或参考 43
3.2.11 引述文本 44
3.2.12 换行显示 45
3.2.13 修饰文本 45
3.2.14 非文本注解 46
3.3 特殊用途文本 46
3.3.1 标记高亮显示 46
3.3.2 标记进度信息 47
3.3.3 标记刻度信息 48
3.3.4 标记时间信息 49
3.3.5 标记联系信息 50
3.3.6 标记显示方向 51
3.3.7 标记换行断点 51
3.3.8 标记旁注 52
3.3.9 标记展开/收缩详细信息 52
3.3.10 标记对话框信息 53
3.4 案例实战 54
3.5 在线支持 55
第4章 设计HTML5图像和多媒体 56
视频讲解：54分钟
4.1 认识HTML5图像 56
4.2 设计图像 56
4.2.1 使用img元素 57
4.2.2 定义流内容 57
4.2.3 插入图标 58
4.2.4 定义替代文本 59
4.2.5 定义Retina显示 59
4.2.6 使用picture元素 60
4.2.7 设计横屏和竖屏显示 60
4.2.8 根据分辨率显示不同图像 61
4.2.9 根据格式显示不同图像 61
4.2.10 自适应像素比 62
4.2.11 自适应视图宽 63
4.3 设计多媒体 63
4.3.1 使用embed元素 63
4.3.2 使用object元素 64
4.4 使用HTML5多媒体 65
4.4.1 使用audio元素 65
4.4.2 使用video元素 67
4.5 案例实战 70
4.5.1 设计MP3播放条 70
4.5.2 设计视频播放器 71
4.6 在线支持 73
第5章 设计列表和超链接 74
视频讲解：30分钟
5.1 定义列表 74
5.1.1 无序列表 74
5.1.2 有序列表 75
5.1.3 描述列表 76
5.2 定义超链接 78
5.2.1 普通链接 78
5.2.2 块链接 79
5.2.3 锚点链接 80
5.2.4 目标链接 80
5.2.5 下载链接 81
5.2.6 图像热点 81
5.2.7 框架链接 82
5.3 案例实战 83
5.3.1 设计栏目列表 83
5.3.2 设计图文列表 84
5.4 在线支持 86
第6章 设计表格 87
视频讲解：29分钟
6.1 新建表格 87
6.1.1 定义普通表格 87
6.1.2 定义列标题 87
6.1.3 定义表格标题 88
6.1.4 表格行分组 89
6.1.5 表格列分组 90
6.2 设置table属性 92
6.2.1 定义单线表格 93
6.2.2 定义分离单元格 93
6.2.3 定义细线边框 94
6.2.4 添加表格说明 94
6.3 设置td和th属性 95
6.3.1 定义跨单元格显示 95
6.3.2 定义表头单元格 96
6.3.3 为单元格指定表头 97
6.3.4 定义信息缩写 97
6.3.5 单元格分类 98
6.4 案例实战 98
6.5 在线支持 101
第7章 设计表单 102
视频讲解：70分钟
7.1 认识HTML5表单 102
7.2 定义表单 103
7.3 组织表单 104
7.4 常用表单控件 105
7.4.1 文本框 105
7.4.2 标签 105
7.4.3 密码框 106
7.4.4 单选按钮 106
7.4.5 复选框 106
7.4.6 文本区域 107
7.4.7 选择框 108
7.4.8 上传文件 108
7.4.9 隐藏字段 108
7.4.10 提交按钮 109
7.5 HTML5新型输入框 109
7.5.1 定义email框 109
7.5.2 定义URL框 110
7.5.3 定义数字框 110
7.5.4 定义范围框 111
7.5.5 定义日期选择器 112
7.5.6 定义搜索框 116
7.5.7 定义电话号码框 116
7.5.8 定义拾色器 116
7.6 HTML5输入属性 117
7.6.1 定义自动完成 117
7.6.2 定义自动获取焦点 118
7.6.3 定义所属表单 119
7.6.4 定义表单重写 120
7.6.5 定义高和宽 120
7.6.6 定义列表选项 120
7.6.7 定义最小值、最大值和步长 120
7.6.8 定义多选 121
7.6.9 定义匹配模式 121
7.6.10 定义替换文本 122
7.6.11 定义必填 122
7.6.12 定义复选框状态 123
7.6.13 获取文本选取方向 123
7.6.14 访问标签绑定的控件 124
7.6.15 访问控件的标签集 124
7.7 HTML5新表单元素 125
7.7.1 定义数据列表 125
7.7.2 定义密钥对生成器 125
7.7.3 定义输出结果 126
7.8 HTML5表单属性 127
7.8.1 定义自动完成 127
7.8.2 定义禁止验证 127
7.9 在线支持 128
第8章 CSS3基础 129
视频讲解：66分钟
8.1 初次使用CSS 129
8.1.1 CSS样式 129
8.1.2 引入CSS样式 130
8.1.3 CSS样式表 130
8.1.4 导入外部样式表 131
8.1.5 CSS注释 131
8.1.6 CSS属性 131
8.1.7 CSS继承性 131
8.1.8 CSS层叠性 132
8.1.9 CSS3选择器 133
8.2 元素选择器 133
8.2.1 标签选择器 134
8.2.2 类选择器 134
8.2.3 ID选择器 134
8.2.4 通配选择器 135
8.3 关系选择器 135
8.3.1 包含选择器 135
8.3.2 子选择器 136
8.3.3 相邻选择器 136
8.3.4 兄弟选择器 137
8.3.5 分组选择器 137
8.4 属性选择器 137
8.5 伪类选择器 139
8.5.1 伪选择器概述 139
8.5.2 结构伪类选择器 140
8.5.3 否定伪类选择器 141
8.5.4 状态伪类 141
8.5.5 目标伪类选择器 142
8.5.6 动态伪类选择器 142
8.6 伪对象选择器 143
8.7 在线支持 143
第9章 字体和文本样式 144
视频讲解：116分钟
9.1 字体样式 144
9.1.1 定义字体类型 144
9.1.2 定义字体大小 144
9.1.3 定义字体颜色 145
9.1.4 定义字体粗细 145
9.1.5 定义艺术字体 145
9.1.6 定义修饰线 146
9.1.7 定义字体的变体 146
9.1.8 定义大小写字体 147
9.2 文本样式 147
9.2.1 定义水平对齐 147
9.2.2 定义垂直对齐 148
9.2.3 定义文本间距 149
9.2.4 定义行高 149
9.2.5 定义首行缩进 150
9.2.6 书写模式 150
9.2.7 文本溢出 150
9.2.8 文本换行 151
9.3 特殊设置 152
9.3.1 initial值 152
9.3.2 inherit值 153
9.3.3 unset值 153
9.3.4 all属性 154
9.3.5 opacity属性 154
9.3.6 transparent值 155
9.3.7 currentColor值 155
9.3.8 rem值 156
9.3.9 font-size-adjust属性 156
9.4 色彩模式 157
9.4.1 rgba()函数 157
9.4.2 hsl()函数 158
9.4.3 hsla()函数 158
9.5 文本阴影 158
9.6 动态生成内容 159
9.7 自定义字体 160
9.8 案例实战 161
9.9 在线支持 162
第10章 背景样式 163
视频讲解：51分钟
10.1 设计背景图像 163
10.1.1 设置背景图像 163
10.1.2 设置显示方式 163
10.1.3 设置显示位置 164
10.1.4 设置固定背景 165
10.1.5 设置定位原点 165
10.1.6 设置裁剪区域 166
10.1.7 设置背景图像大小 166
10.1.8 设置多重背景图像 167
10.2 设计渐变背景 168
10.2.1 定义线性渐变 168
10.2.2 定义重复线性渐变 170
10.2.3 定义径向渐变 171
10.2.4 定义重复径向渐变 173
10.3 案例实战 174
10.3.1 设计网页渐变色 174
10.3.2 设计栏目折角效果 175
10.3.3 设计纹理背景 176
10.3.4 设计条纹背景 177
10.4 在线支持 177
第11章 列表和超链接样式 178
视频讲解：28分钟
11.1 超链接样式 178
11.1.1 动态伪类 178
11.1.2 定义下画线样式 178
11.1.3 定义特效样式 180
11.1.4 定义光标样式 180
11.2 列表样式 181
11.2.1 定义项目符号类型 181
11.2.2 定义项目符号图像 182
11.2.3 模拟项目符号 183
11.3 案例实战 183
11.3.1 设计背景自由滑动的菜单 183
11.3.2 设计Tab选项菜单 185
11.4 在线支持 187
第12章 表格和表单样式 188
视频讲解：46分钟
12.1 表格基本样式 188
12.1.1 设计表格边框线 188
12.1.2 定义单元格间距和空隙 189
12.1.3 隐藏空单元格 190
12.1.4 定义标题样式 190
12.2 设计表单样式 191
12.2.1 定义文本框样式 191
12.2.2 设计单选按钮和复选框样式 194
12.2.3 定义选择框样式 195
12.3 案例实战 197
12.3.1 设计数据分组表格 197
12.3.2 设计单线表格 199
12.3.3 设计表格自动布局 200
12.3.4 设计表格水平滚动显示 201
12.3.5 设计登录表单 202
12.4 在线支持 203
第13章 CSS3盒模型 204
视频讲解：61分钟
13.1 盒模型基础 204
13.2 大小 205
13.3 边框 206
13.4 边界 208
13.5 补白 209
13.6 界面 210
13.6.1 显示方式 210
13.6.2 调整大小 211
13.6.3 缩放比例 212
13.7 轮廓样式 212
13.8 圆角样式 213
13.9 阴影样式 215
13.10 案例实战 217
13.10.1 设计照片特效 217
13.10.2 设计栏目特效 218
13.11 在线支持 219
第14章 网页布局基础 220
视频讲解：57分钟
14.1 流动布局 220
14.2 浮动布局 221
14.2.1 定义浮动显示 221
14.2.2 清除浮动 222
14.2.3 案例：设计专题页