内 容 提 要
本书定位于零基础读者，较为详细地讲述了网页设计与制作的相关方法和技巧。全书理论与案例相结合，结构清晰，内容讲解循序渐进、由浅入深，并注意各个章节内容与案例之间的呼应和对照。全书共10章，内容包括HTML5入门、HTML5的常用标签、HTML5中的对象、JavaScript基础、CSS3基础、HTML5页面加载、JavaScript高级应用、使用前端框架以及两个综合实训，分别是HTML5扫雷游戏和开发通过二维码传输文件的应用。
本书可作为高等院校计算机、数字媒体技术、网络与新媒体、电子商务等专业相关课程的教材，还可作为相关行业从业人员的参考书。

第 1章　HTML5入门
1.1 HTML概述　1
1.1.1 HTML简介　1
1.1.2 HTML的发展　2
1.1.3 HTML5与CSS3　3
1.1.4 HTML5与JavaScript　3
1.1.5 HTML5标准和文档　4
1.2 搭建HTML5开发环境　4
1.2.1 安装浏览器　4
1.2.2 浏览器的配置　4
1.2.3 安装集成开发环境　6
1.2.4 安装文件传输客户端和版本控制工具　6
1.2.5 HTML5调试工具　7
1.3 第 一个HTML5页面　7
1.3.1 HTML5文档结构　7
1.3.2 打开HTML5页面　8
1.3.3 查看HTML5页面源代码　9
1.4 通过网络访问HTML5页面　9
1.4.1 浏览器如何发送和处理请求　9
1.4.2 搭建本地HTTP服务器　10
1.4.3 访问本地HTTP服务器上的页面　10
1.5 小结　10
1.6 课堂实战——使用HTML5创建自己的简历　11
1.6.1 创建文档　11
1.6.2 章节标题　11
1.6.3 段落　11
1.6.4 排版　12
1.7 课堂实战——在互联网上发布自己的页面　13
1.7.1 注册GitHub或Gitee账户　13
1.7.2 创建代码仓库　14
1.7.3 推送本地代码仓库内容到在线代码仓库　15
1.7.4 启动静态网站服务　15
课后习题　15
第 2章　HTML5的常用标签
2.1 HTML5中的标签　17
2.1.1 标签概述　17
2.1.2 标签分类　18
2.1.3 文档级标签　18
2.1.4 内容级标签　19
2.1.5 文本级标签　19
2.1.6 列表和表格标签　19
2.1.7 多媒体标签　20
2.1.8 链接标签　21
2.1.9 代码和资源标签　21
2.1.10 表单标签　22
2.1.11 交互标签　23
2.2 HTML5新增标签类型　24
2.2.1 HTML5的理念　25
2.2.2 内容结构标签　26
2.2.3 多媒体和交互标签　26
2.3 HTML5的标签属性　26
2.3.1 全局属性　27
2.3.2 尺寸相关属性　27
2.3.3 表单的属性　27
2.3.4 事件处理程序属性　28
2.4 HTML5标签与元素　28
2.4.1 标签的渲染　28
2.4.2 查看页面元素　29
2.4.3 动态修改HTML5文档　29
2.5 HTML5代码嵌入　30
2.5.1 JavaScript代码嵌入　30
2.5.2 CSS代码嵌入　30
2.6 小结　31
2.7 课堂实战——制作HTML5相册　31
2.7.1 页面布局　31
2.7.2 使用<img>标签显示图片　32
2.7.3 单击查看原图　33
课后习题　33
第3章　HTML5中的对象
3.1 DOM入门　35
3.1.1 DOM的概念　35
3.1.2 通过DOM访问元素　36
3.1.3 通过HTML选择器访问元素　36
3.2 window对象　37
3.2.1 通过window对象获取浏览器窗口大小　37
3.2.2 通过window对象获取浏览器窗口相对位置　38
3.2.3 通过window对象与用户交互　38
3.2.4 通过window对象滚动到指定位置　39
3.2.5 通过window对象打开和关闭浏览器窗口　40
3.2.6 通过window对象实现Base64编码解码　40
3.2.7 window对象的子对象　40
3.3 document对象　41
3.3.1 document对象的属性　41
3.3.2 通过document对象选择元素　41
3.3.3 选择元素　42
3.3.4 通过createElement和append修改页面　42
3.4 console对象　42
3.4.1 通过console输出日志　43
3.4.2 通过console调试　43
3.5 location对象　43
3.5.1 通过location对象跳转页面　43
3.5.2 通过location对象读取页面地址　44
3.5.3 通过location对象获取URL参数　44
3.6 navigator对象　44
3.6.1 通过navigator对象获取浏览器信息　44
3.6.2 navigator对象的应用　45
3.7 小结　45
3.8 课堂实战——开发显示浏览器信息的HTML5程序　45
3.8.1 背景介绍　45
3.8.2 获取信息　45
3.8.3 显示信息　46
3.9 课堂实战——2048小游戏：开发自动适应窗口大小的界面　46
3.9.1 游戏背景介绍　46
3.9.2 2048小游戏界面　47
3.9.3 获取窗口大小判断窗口比例　47
3.9.4 窗口大小与页面布局　48
3.9.5 设置svg元素的宽度、高度与背景　49
3.10 课堂实战——2048小游戏：绘制方格　51
3.10.1 绘制方格　51
3.10.2 通过hash参数实现方格数量的修改　52
课后习题　53
第4章　JavaScript基础
4.1 JavaScript的发展　55
4.1.1 JavaScript与Java　55
4.1.2 JavaScript的标准　56
4.1.3 ES6与非浏览器环境　57
4.1.4 JavaScript基本语法　57
4.2 JavaScript变量　58
4.2.1 变量的类型与声明　58
4.2.2 变量的作用域　60
4.2.3 数组　60
4.3 运算符　62
4.3.1 运算符的种类　62
4.3.2 算术运算符　62
4.3.3 逻辑运算符　62
4.3.4 关系运算符　62
4.3.5 位运算符　63
4.3.6 赋值运算符　63
4.3.7 其他运算符　63
4.3.8 运算符的优先级　64
4.4 函数　66
4.4.1 创建函数　66
4.4.2 调用函数　66
4.4.3 函数的返回值　67
4.5 流程控制　67
4.5.1 if...else语句　67
4.5.2 switch...case语句　68
4.5.3 循环语句　69
4.6 内置数据结构　72
4.6.1 字符串　72
4.6.2 Map　72
4.6.3 Set　73
4.6.4 Date　74
4.6.5 Number　74
4.6.6 正则表达式　75
4.7 内置对象　75
4.7.1 Math对象　75
4.7.2 JSON对象　76
4.7.3 全局函数　77
4.7.4 Web Storage　77
4.8 小结　78
4.9 课堂实战——开发HTML5计算器　78
4.9.1 创建计算器界面　78
4.9.2 输入按钮事件的处理　80
4.9.3 实现功能　81
4.10 课堂实战——实现2048小游戏逻辑　84
4.10.1 在方格内填入数字　84
4.10.2 在空白方格中随机填入数字　85
4.10.3 合并数字操作　87
4.10.4 处理用户输入　89
课后习题　90
第5章　CSS3基础
5.1 盒模型　92
5.1.1 盒模型概述　92
5.1.2 在浏览器中查看盒模型　93
5.2 CSS选择器　93
5.2.1 ID选择器　93
5.2.2 类选择器　94
5.2.3 标签名选择器　94
5.2.4 属性选择器　94
5.2.5 组合选择器　95
5.3 边距与边框　97
5.3.1 通过margin设置外边距　97
5.3.2 通过padding设置内边距　98
5.3.3 通过border设置边框　99
5.4 元素尺寸　99
5.4.1 原始尺寸　99
5.4.2 固定尺寸　100
5.4.3 适应元素内容　101
5.4.4 继承父元素　101
5.5 定位方式　102
5.5.1 相对定位　102
5.5.2 绝对定位　102
5.5.3 固定定位　103
5.6 小结　103
5.7 课堂实战——使用CSS3制作动态导航栏　103
5.7.1 静态导航栏　103
5.7.2 使用CSS3美化导航栏　104
5.7.3 使用CSS3实现动态效果　105
课后习题　107
第6章　HTML5页面加载
6.1 HTML5页面加载过程　108
6.1.1 页面加载过程概述　108
6.1.2 请求资源　108
6.1.3 加载过程耗时分析　109
6.2 浏览器缓存　110
6.2.1 浏览器缓存的作用　110
6.2.2 避免浏览器缓存的问题　111
6.3 动态加载　111
6.3.1 AJAX　112
6.3.2 使用fetch和服务器通信　113
6.3.3 根据滚动条的位置触发动态加载　113
6.3.4 根据时间触发动态加载　115
6.4 使用JavaScript监控页面加载和运行情况　115
6.4.1 页面加载过程中可能遇到的问题　115
6.4.2 页面加载过程中触发的事件　116
6.4.3 获取页面加载时间　116
6.4.4 捕获运行异常　117
6.5 小结　118
6.6 课堂实战——动态加载HTML5相册　118
6.6.1 使用JavaScript生成<img>标签　118
6.6.2 单击加载照片　119
课后习题　121
第7章　JavaScript高级应用
7.1 Node.js简介　122
7.1.1 Node.js的安装　122
7.1.2 Node.js和浏览器中JavaScript运行环境的异同　123
7.1.3 Node.js对HTML5应用开发的作用　124
7.2 使用npm包管理器　124
7.2.1 使用npm命令行工具　124
7.2.2 安装npm包　124
7.2.3 创建和发布npm包　125
7.3 JavaScript事件　125
7.3.1 什么是事件　125
7.3.2 JavaScript的事件模型　126
7.3.3 绑定事件　126
7.3.4 获取事件上下文　127
7.3.5 阻止事件默认行为　127
7.3.6 事件冒泡　128
7.4 JavaScript中的同步和异步　129
7.4.1 同步　129
7.4.2 异步　130
7.4.3 同步和异步结合　131
7.4.4 回调　132
7.4.5 Promise对象　132
7.5 小结　133
7.6 课堂实战——生成二维码的HTML5应用　134
7.6.1 创建npm包和安装webpack　134
7.6.2 安装和使用qrcode包　135
7.6.3 输出生产版本的前端代码　136
课后习题　136
第8章　使用前端框架
8.1 使用Bootstrap　138
8.1.1 Bootstrap概述　138
8.1.2 布局　140
8.1.3 导航栏　141
8.1.4 其他常用组件　143
8.2 使用ECharts　144
8.2.1 ECharts概述　144
8.2.2 常用二维图表　146
8.2.3 饼图　148
8.2.4 关系图　150
8.2.5 地图数据展示　152
8.3 使用Vue　154
8.3.1 Vue概述　154
8.3.2 Vite简介　155
8.3.3 组件　156
8.3.4 输出内容　156
8.3.5 属性绑定和事件绑定　157
8.3.6 条件渲染和列表渲染　157
8.3.7 表单输入绑定　158
8.4 小结　159
8.5 课堂实战——HTML5英汉词典　159
8.5.1 准备词典数据　159
8.5.2 创建项目　159
8.5.3 获取词典数据　160
8.5.4 实现查询逻辑　160
8.5.5 实现查询中文和英文单词模糊匹配　161
课后习题　163
第9章　综合实训——HTML5扫雷游戏
9.1 扫雷游戏说明　164
9.1.1 游戏界面呈现　164
9.1.2 游戏基本操作　165
9.1.3 游戏高级操作　165
9.1.4 游戏信息显示　165
9.1.5 游戏过关条件　165
9.2 绘制游戏界面　165
9.2.1 绘制背景和方格　166
9.2.2 绘制单击后的背景　166
9.2.3 绘制地雷、旗子和数字　167
9.3 记录游戏状态　168
9.3.1 设定地雷位置　168
9.3.2 计算提示数字　169
9.3.3 记录方格状态　169
9.4 处理玩家操作　169
9.4.1 处理单击事件　169
9.4.2 处理右击事件　171
9.4.3 判断是否过关　172
9.4.4 过关后禁止操作　173
9.5 使用类组织代码　173
9.5.1 类的构造函数　173
9.5.2 事件处理函数　174
9.5.3 确保第 一次不会单击地雷　174
9.6 小结　175
课后习题　175
第 10章　综合实训——开发通过二维码传输文件的应用
10.1 使用QR Code编码数据　176
10.1.1 QR Code简介　176
10.1.2 二进制数据　177
10.1.3 使用JavaScript处理二进制数据　177
10.2 在HTML5应用中打开和读取文件　178
10.2.1 使用<input>标签打开文件　178
10.2.2 以Base64格式读取文件　178
10.3 切块传输　179
10.3.1 数据切分　179
10.3.2 选择要传输的文件　179
10.3.3 生成包二维码　181
10.3.4 显示和播放二维码　181
10.4 扫描二维码　182
10.4.1 使用HTML5-QRCode库　183
10.4.2 拼接扫描结果　183
10.4.3 下载拼接后的文件　184
10.5 小结　185
课后习题　185