电子工业出版社-网上书店

本教材共分18课（章），每课根据实际情况需要3～8个学时，第1课到第10课，主要介绍了HTML基本框架，标签与属性，CSS样式基础，教会读者利用盒子模型，结合HTML5结构化标签，建立基本的页面框架，以及固定宽度布局的模板网页，第11～16课介绍了JavaScript特效应用、表单、响应式设计、弹性图像与弹性布局、flexbox伸缩盒等实际Web前端开发必备的知识点，并辅助以若干个对应知识点的网页实例；第17课~18课则介绍了网站建设的基本规范、API工具等，便于读者后续的学习与实践。读者在学习了第1～10课后，将初步掌握Web页面制作基础，然后继续学习后续的课程章节，学习实际Web前端开发应用必备的知识，通过涵盖各个知识点的案例进行实践，快速、高效地掌握实用网页制作的基本方法。另外，将另外提供教材中涉及的全部网页源代码网络资源，方便社会读者自学。

第1 课 Web 前端简介 1
1.1 Web 前端与HTML ............................2
1.1.1 什么是Web 前端 ..........................2
1.1.2 Web 是如何工作的 .......................2
1.1.3 网站与HTML 网页 ......................3
1.1.4 网站类型 ........................................3
1.2 HTML 文件结构 ................................5
1.3 网页三要素：结构、表现、行为 ....6
1.4 网页编码工具 ....................................8
1.4.1 使用记事本编写网页代码 ............8
1.4.2 浏览器的开发者工具 ....................8
1.4.3 IDE 简介 ......................................10
1.4.4 HBuilderX 环境 ...........................10
1.5 每课小练 ..........................................12
1.5.1 练一练： 制作带图像的简单网
页..................................................12
1.5.2 试一试：制作航天新闻网页 ......14
1.5.3 常见问题Q＆A ............................16
1.6 理论习题 ..........................................16
第2 课 常用的HTML 标签及其属性 18
2.1 常用的标签 ......................................19
2.1.1 什么是标签 ..................................19
2.1.2 标签的属性 ..................................21
2.2 特殊符号 ..........................................22
2.3 表格 ..................................................23
2.4 图像 ..................................................25
2.4.1 内容图像 ......................................25
2.4.2 背景图像 ......................................25
2.5 每课小练 ..........................................26
2.5.1 练一练：基本标签的应用 ..........26
2.5.2 试一试：图像与表格 ..................28
2.5.3 常见问题Q＆A ............................32
2.6 理论习题 ..........................................32
第3 课 超链接与路径 34
3.1 超链接 ..............................................35
3.1.1 超链接标签及其属性 ..................35
3.1.2 锚记 ..............................................35
3.2 路径 ..................................................36
3.2.1 绝对路径 ......................................36
3.2.2 相对路径 ......................................37
3.3 每课小练 ..........................................38
3.3.1 练一练：简单超链接 ..................38
3.3.2 学以致用：再别康桥网页 ..........39
3.3.3 常见问题Q＆A ............................41
3.4 理论习题 ..........................................42
第4 课 简单CSS 43
4.1 CSS 样式概述 ..................................44
4.1.1 CSS 样式的作用..........................44
4.1.2 什么是选择器 ..............................44
4.1.3 CSS 选择器类型............. 47
4.1.4 基本选择器命名规则 ..................49
4.2 颜色模型 ..........................................49
4.3 设置网页的文本颜色与背景颜色 ..52
4.3.1 设置文本颜色 ..............................52
4.3.2 设置背景颜色 ..............................52
4.3.3 使用拾色器 ..................................53
4.3.4 设置背景图像 ..............................53
4.4 每课小练 ..........................................55
4.4.1 练一练：标签选择器练习 ..........55
4.4.2 练一练：制作基本网页模板 ......58
4.4.3 学以致用：使用float 属性水平排列扑克牌.......................................60
4.4.4 常见问题Q＆A ............................64
4.5 理论习题 ..........................................65
第5 课 复合选择器与网页导航菜单 68
5.1 什么是复合选择器 ..........................69
5.1.1 复合选择器的种类 ......................69
5.1.2 后代选择器与子元素选择器的
区别..............................................70
5.1.3 毗邻兄弟选择器与同级兄弟选择
器的区别......................................70
5.1.4 结构化伪类选择器与伪元素
详解 ..............................................71
5.1.5 导航菜单超链接使用的选择器 ..73
5.2 无序列表导航菜单 ..........................74
5.2.1 只改变字体颜色 ..........................74
5.2.2 链接项呈现块级变化......... 77
5.3 常见的CSS1 ～ CSS3 选择器 ........79
5.4 每课小练 ..........................................80
5.4.1 练一练：后代选择器与横向导航
菜单...............................................80
5.4.2 学以致用：复合选择器与太阳系
网页..............................................81
5.4.3 常见问题Q＆A ............................87
5.5 理论习题 ..........................................87
第6 课 基本HTML5 框架与应用 90
6.1 什么是语义化结构标签 ..................91
6.2 语义化结构标签的应用 ..................92
6.3 ＜meta＞ 标签 .....................................93
6.3.1 ＜meta＞ 标签的基本用途 ............93
6.3.2 控制响应式设计中的视口 ..........93
6.3.3 设置网页的定时跳转 ..................93
6.4 每课小练 ..........................................94
6.4.1 练一练：使用＜section＞ 标签的上
下结构网页框架 .........................94
6.4.2 学以致用：使用CSS 实现个人简
历网页..........................................97
6.4.3 常见问题Q＆A ............................99
6.5 理论习题 ........................................100
第7 课 盒子模型与DOM 树 102
7.1 DOM 树与文件流 ..........................103
7.2 盒子模型 ........................................103
7.2.1 什么是盒子模型 ........................103
7.2.2 容器与元素关系 ........................104
7.2.3 块级元素与行内元素 ................105
7.3 float 与clear 属性 ..........................106
7.3.1 标准文件流 ................................106
7.3.2 使用float 属性使元素脱离标
准流 ............................................106
7.3.3 使用clear 属性清除浮动的
影响 ............................................107
7.4 每课小练 ........................................107
7.4.1 练一练：float 与clear 属性的
应用 ............................................107
7.4.2 学以致用：制作IPanda 网页...109
7.4.3 常见问题Q＆A .......................... 113
7.5 理论习题 ........................................ 113
第8 课 position 位置属性 115
8.1 叠放层与漂浮层 ............................ 116
8.1.1 position 位置属性 ...................... 116
8.1.2 z-index 属性 ............................... 116
8.2 relative 与absolute 的精确定位 .... 117
8.3 每课小练 ........................................ 118
8.3.1 练一练：通过四角定位扑
克牌 ............................................ 118
8.3.2 试一试：使用position 位置属性实
现叠放层的应用 .......................120
8.3.3 常见问题Q＆A ..........................121
8.4 理论习题 ........................................121
第9 课 CSS+DIV 固定宽度的页面
布局 123
9.1 float 左右布局 ................................124
9.2 float 左中右布局 ............................125
9.3 position 弹性左中右布局 ..............126
9.4 固定宽度的混合布局 ....................128
9.5 网页制作的“3O”原则 ...............129
9.6 每课小练 ........................................129
9.6.1 练一练：float 左右布局基本
框架 ............................................129
9.6.2 练一练：使用float 属性与position
位置属性进行固定宽度混合布局
....................................................131
9.6.3 学以致用：简化版杭州19 楼
网页 ............................................132
9.6.4 常见问题Q＆A ..........................133
9.7 理论习题 ........................................134
第10 课 表单基础 136
10.1 表单与表单对象 ..........................137
10.1.1 什么是表单............... 137
10.1.2 ＜form＞ 标签 ............................137
10.1.3 表单对象 ..................................138
10.2 注册登录表单实例 ......................141
10.3 每课小练 ......................................142
10.3.1 练一练：制作简单表单网页 .142
10.3.2 学以致用：表单应用实例 ......143
10.3.3 常见问题Q＆A ........................144
10.4 理论习题 ......................................144
第11 课 JavaScript 基本应用 146
11.1 什么是JavaScript.........................147
11.2 JavaScript 的应用方法.................147
11.2.1 JavaScript 基本语法 ................147
11.2.2 最简单的JavaScript 程序（Say
Hello!） ...................................149
11.2.3 表单数据验证 ..........................150
11.2.4 常用的JavaScript 对象与方法 151
11.2.5 定时器函数 ..............................154
11.3 每课小练 ......................................154
11.3.1 练一练：简单时钟网页实例 ..154
11.3.2 学以致用：制作考生登录
表单 ..........................................157
11.3.3 试一试：JavaScript 漂浮层的应用
实例..........................................158
11.3.4 常见问题Q＆A ........................160
11.4 理论习题 ......................................160
第12 课 jQuery 特效 162
12.1 jQuery 简介 ..................................163
12.1.1 什么是jQuery .........................163
12.1.2 jQuery 库文件的下载与引用..164
12.2 jQuery 文件就绪事件 .................165
12.3 jQuery 选择器及其操作 .............165
12.4 jQuery 常见特效 .........................166
12.4.1 最简单的例子——点一点就
消失 ..........................................166
12.4.2 使用slideToggle() 方法控制面板
展开或收起..............................167
12.4.3 使用animate() 动画实现页面上下
滚动 .........................................168
12.5 每课小练 ......................................169
12.5.1 练一练：鼠标悬停切换图像
特效 ...........................................170
12.5.2 学以致用：jQuery 轮播特效
实例 ..........................................172
12.5.3 常见问题Q＆A ........................177
12.6 理论习题 ......................................177
第13 课 固定宽度网页实例 179
13.1 IHangzhou 网页 ...........................180
13.2 杭州19 楼综合页面 ...................180
13.3 杭州亚运新闻网页 ......................181
13.4 每课小练 ......................................183
13.4.1 练一练：页面布局分析与
重现 ..........................................183
13.4.2 学以致用：开发创意网站 ......183
13.4.3 常见问题Q＆A ........................184
13.5 理论习题 ......................................184
第14 课 响应式设计基础 185
14.1 响应式网站概述 ..........................186
14.1.1 最简单的响应式设计CSS 样式
代码 ..........................................186
14.1.2 视口 ..........................................186
14.1.3 响应式技术支持 ......................187
14.2 媒体查询与断点 .........................187
14.2.1 媒体查询的语法规则 ..............187
14.2.2 断点与多段响应式 ..................188
14.2.3 断点取值 ..................................189
14.3 弹性布局 ......................................189
14.4 响应式左右布局 ..........................191
14.5 每课小练 ......................................192
14.5.1 练一练：两段响应式布局 ......192
14.5.2 学以致用：制作响应式IPanda
网页 ..........................................194
14.5.3 常见问题Q＆A ........................196
14.6 理论习题 ......................................196
第15 课 响应式设计特点及应用 198
15.1 响应式设计特点 .........................199
15.1.1 设计原则 ..................................199
15.1.2 响应式设计考虑要点 ..............199
15.1.3 弹性布局 ..................................200
15.2 多段响应式布局实例 ..................201
15.3 网页中的图像 ..............................204
15.3.1 弹性图像 ..................................204
15.3.2 常见的网页图像文件类型 ......205
15.3.3 图像拼合技术 ..........................207
15.3.4 字体图标 ..................................207
15.4 网页字体 ......................................208
15.4.1 衬线体与非衬线体 ..................208
15.4.2 使用@font-face 功能设置
字体 ..........................................208
15.5 每课小练 ......................................209
15.5.1 练一练：三段响应式布局
练习 ..........................................209
15.5.2 试一试：制作三段响应式Oscar
网页..........................................210
15.6 理论习题 .....................................214
第16 课 Flexbox 伸缩盒 216
16.1 什么是Flexbox 伸缩盒 ...............217
16.2 常用的Flexbox 伸缩盒属性 .......217
16.3 每课小练 ......................................219
16.3.1 练一练：Flexbox 伸缩盒网页
练习 ..........................................219
16.3.2 试一试：将Flexbox 伸缩盒用于
响应式布局..............................220
16.3.3 常见问题Q＆A ........................223
16.4 理论习题 ......................................223
第17 课 网站建设概述 225
17.1 网站建设过程与规范 ..................226
17.2 什么是自建站 ..............................226
17.3 网站重构 ......................................226
17.4 网站建设项目需求 ......................227
17.5 网站文件管理 ..............................227
17.6 每课小练 ......................................228
17.6.1 学以致用：网站建设实践 ......228
17.6.2 常见问题Q＆A ........................233
17.7 理论习题 ......................................234
第18 课 HTML5 的API 235
18.1 什么是API ...................................236
18.2 ＜canvas＞ 绘图 ..............................236
18.2.1 什么是网页Canvas 画布 ........236
18.2.2 Canvas 绘图实例 .....................237
18.3 音乐播放器 ..................................239
18.3.1 ＜audio＞ 标签 ...........................239
18.3.2 音乐播放器代码实现 ..............240
18.4 百度地图API 简介 ......................246
18.5 理论习题 ......................................250
附录 251

在信息社会，Web 技术的应用无处不在。传统的互联网网站及各种社交媒体大多数是跨平台的，通过台式计算机、笔记本电脑、平板电脑、手机等网络设施访问。了解并掌握Web应用技术不再仅限于专业开发技术人员，大多数普通用户也需要掌握一定的Web 应用技术，就像几乎每个人都需要掌握一些计算机知识一样。
在信息资讯发达的时代，人们的学习方式有了很大变化。随着网速的快速提升，人们的学习途径已经从纯书本转移到了各种网站，通过搜索引擎或各个学习论坛找到所需资源，学习途径多样，资源丰富。因此，学习者不一定需要全面的教材，而是希望有一本能引导他们入门，帮助他们轻松地找到学习资源的书籍。
与大部分专业书籍不同，本书是一本相对精简、篇幅较短的专业基础类书籍，旨在让读者快速了解Web 前端基础知识，把Web 前端开发涉及的技术拆分为若干个小主题，引导读者循序渐进地学习网页设计与制作的入门知识。本书还融入了思政元素，希望读者特别是年轻一代能励志有为、勤学苦练、自信自强、守正创新，为建设社会主义现代化强国贡献自己的聪明才智。
本书将带领读者学习最基础的Web 前端开发知识。
读者在完成本书知识点的学习与网页制作实践练习后，可以掌握基本的Web 前端开发知识，也可以设计制作较为精美的、实用的中小型企业网站，还可以在网站中实现响应式设计，JavaScript 与jQuery 基本特效。本书配备完整的网页源码，同时提供关键知识点与案例的学习或操作视频，以便读者自学。
本书的知识重点如下。
? HTML5 文件结构。
? HTML 标签。
? CSS/CSS3。
? JavaScript 交互与特效。
? 固定宽度布局。
? 流动布局与响应式设计。
? 网站开发基本规则。
? 简单API。
本书的适用人员如下。
? 对网页设计开发感兴趣的新手。
? 希望了解Web 前端应用技术的学生。
? 希望快速掌握Web 前端开发基本方法的人员。
? 希望在无专人帮助下有效而快速地制作实用网页的人员。
本书配套学习资料的说明如下。
? 扫描书中的二维码，即可观看对应网页制作过程的操作演示视频。
? 提供每一课对应的课件。
? 提供本书内容所涉及的全部网页源代码。
请有需要的教师和学生登录华信教育资源网（https://www.hxedu.com.cn/）下载本书的配套学习资料。
另外，读者在阅读本书中的代码时，需要了解以下几点。
? 网页HTML 代码注释方式为＜!-- 注释文本--＞。
? CSS 样式代码与JavaScript 代码的注释有两种方式：“/* 可换行注释文本*/ ”和“//单行注释文本”，二者没有特别规定，不会影响程序运行。
? 为节约篇幅，在不影响阅读的情况下，部分语句不单独成行，部分代码不按标准缩进。
编著者编写本书历时两年多，同时授课和整理修改，以尽量满足学生或初学者的学习习惯与需求，但难免存在考虑不周之处，敬请各位读者包涵与批评指正。另外，对于需要英文资料的读者，可以直接联系编著者以获取电子资料，邮箱地址：anne_zh@163.com。

本书配套资源下载

对不起，暂无音视频资源！

Web前端开发必知必会