HTML5+CSS3 Web前端开发与实例教程：微课视频版》

本书内容

《HTML5+CSS3 Web前端开发与实例教程：微课视频版》秉承“思政引领，立德树人”的教育理念，自然融入多维度、深层次的思政元素，全面对标企业和行业需求；引入现代Web前端开发的核心技术，如Flex布局、Grid布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项目实战操作，体现育人、应用和创新三项能力。《HTML5+CSS3 Web前端开发与实例教程：微课视频版》配套提供课程思政元素、案例源代码、PPT课件、课后习题与答案、微课视频、教案、教学大纲、章节测试、云题库、实验报告、学习通在线课程、企业高频面试题、学科竞赛真题等丰富的教学资源，并设有QQ群提供线上学习跟踪和指导服务。

《HTML5+CSS3 Web前端开发与实例教程：微课视频版》共分14章，系统地讲解Web前端开发的核心技术，主要内容包括Web前端开发概述、HTML5基础、HTML5页面元素和属性、表单、CSS3基础、CSS3修饰页面元素、CSS3高级选择器、CSS3盒子模型、浮动与定位、CSS3高级应用、网页布局、Flex布局、Grid布局等，并提供“大学生参军入伍专题网站”和“文创商城”两个实战案例。

本书作者

卢欣欣，副教授。长期从事高校教学工作，专注Web应用开发，项目开发经验丰富。主讲《Web程序设计》《高级程序设计》《软件开发综合实践》等课程，先后主编教材2部，参编教材3部。在慕课网上线的《企业网站综合布局实战》课程学习人数超15万人。

崔仲远，副教授，毕业于北京交通大学。长期从事高校教学工作和软件项目开发工作，实战开发经验丰富。先后承担《网页特效设计》《Web前端基础》《跨平台脚本开发技术》等多门课程的教学任务，发表学术论文多篇，主编教材2部，参编教材3部、专著1部。主持省级教改项目1项、科研项目1项。

本书读者

《HTML5+CSS3 Web前端开发与实例教程：微课视频版》既可作为本专科院校计算机相关专业的Web程序设计、网页设计与制作等课程的教材，也可作为Web应用开发人员的自学手册和技术参考书。

本书目录

第1章 Web前端开发概述 1

1.1 Web前端开发职责 1

1.2 Web前端开发相关概念 2

1.3 Web前端开发相关技术 3

1.3.1 Web标准 3

1.3.2 HTML 4

1.3.3 CSS 4

1.3.4 JavaScript 5

1.4 Web前端开发工具 5

1.4.1 代码编辑工具：VSCode 6

1.4.2 代码运行工具：浏览器 8

1.4.3 开发者工具 9

1.4.4 人工智能辅助编程工具 10

1.5 网站设计与开发流程 11

1.6 实战案例：网页显示“社会主义核心价值观” 12

1.7 本章小结 13

第2章 HTML5基础 14

2.1 HTML5语法基础 14

2.1.1 HTML文档结构 14

2.1.2 HTML标签语法 17

2.1.3 HTML注释 18

2.2 文本控制标签 19

2.2.1 标题标签 19

2.2.2 段落标签 20

2.2.3 换行标签 20

2.2.4 文本格式化标签 21

2.2.5 特殊字符 22

2.3 图像标签 23

2.3.1 网页常用图像格式 23

2.3.2 图像标签的使用 24

2.3.3 相对路径与绝对路径 26

2.4 超链接标签 27

2.4.1 文本链接 27

2.4.2 图像链接 28

2.4.3 书签（锚点）链接 28

2.4.4 其他链接 30

2.5 列表 30

2.5.1 有序列表 31

2.5.2 无序列表 32

2.5.3 定义列表 34

2.5.4 嵌套列表 35

2.6 表格 36

2.6.1 表格结构 36

2.6.2 表格标签 37

2.7 视频和音频标签 41

2.7.1 视频标签 41

2.7.2 音频标签 42

2.8 其他标签 42

2.8.1 预格式化标签 42

2.8.2 水平线标签 43

2.8.3 行内容器标签 43

2.9 实战案例：“大学生参军网站”兵役登记页面 44

2.10 本章小结 46

第3章 HTML5页面元素和属性 47

3.1 文档结构标签 47

3.1.1标签 47

3.1.2标签 49

3.1.3标签 50

3.1.4标签 51

3.1.5标签 53

3.1.6标签 53

3.1.7和标签 54

3.1.8标签 55

3.2 交互元素 55

3.2.1 标签 55

3.2.2 标签 56

3.2.3标签 57

3.3 文本层次语义标签 58

3.3.1 标签 58

3.3.2 标签 59

3.3.3 标签 60

3.4 全局属性 61

3.5 实战案例：“大学生参军网站”页面结构 62

3.6 本章小结 64

第4章 表单 65

4.1 表单概述 65

4.2标签 67

4.3 标签 68

4.3.1 单行文本框 69

4.3.2 密码框 69

4.3.3 文件域 70

4.3.4 单选按钮和复选框 71

4.3.5 隐藏域 73

4.3.6 按钮 73

4.3.7 HTML5新增输入元素 76

4.4 标签 78

4.5 标签 79

4.6 选择列表标签 80

4.7 多行文本框标签 83

4.8 表单常用属性 84

4.9 实战案例：“大学生参军网站”网上咨询表单 86

4.10 本章小结 88

第5章 CSS3基础 89

5.1 CSS概述 89

5.2 CSS语法规则 90

5.3 CSS样式的引入方法 91

5.3.1 行内样式表 91

5.3.2 内部样式表 92

5.3.3 外部样式表 93

5.4 CSS基本选择器 94

5.4.1 标签选择器 94

5.4.2 ID选择器 95

5.4.3 类选择器 95

5.4.4 通用选择器 97

5.5 实战案例：“大学生参军网站”公共样式表制作 97

5.6 本章小结 98

第6章 CSS3修饰页面元素 99

6.1 CSS字体样式 99

6.1.1 字体粗细属性 99

6.1.2 字体风格属性 100

6.1.3 字体大小属性 101

6.1.4 字体族属性 103

6.1.5 字体属性 106

6.2 CSS文本样式 107

6.2.1 行高属性 107

6.2.2 颜色属性 109

6.2.3 文本水平对齐属性 110

6.2.4 首行缩进属性 111

6.2.5 文本修饰属性 111

6.2.6 字符间距属性 112

6.2.7 字间距属性 113

6.2.8 字母大小写属性 114

6.2.9 文本阴影效果属性 115

6.3 CSS表格样式 116

6.4 CSS表单样式 118

6.4.1 单行文本框美化 119

6.4.2 按钮美化 120

6.4.3 下拉列表美化 120

6.5 CSS列表样式 122

6.6 实战案例：“大学生参军网站”在线咨询页面 123

6.7 本章小结 126

第7章 CSS3高级选择器 127

7.1 组合选择器 127

7.1.1 交集选择器 127

7.1.2 并集选择器 128

7.1.3 后代选择器 129

7.1.4 子元素选择器 130

7.1.5 相邻兄弟选择器 131

7.1.6 通用兄弟选择器 132

7.2 属性选择器 133

7.3 伪类选择器 134

7.4 伪元素选择器 136

7.5 CSS三大特性 138

7.6 本章小结 141

第8章 CSS3盒子模型 142

8.1 盒子模型概述 142

8.1.1 认识盒子模型 142

8.1.2

标签 144

8.2 盒子模型的相关属性 144

8.2.1 内容区域的宽度和高度 144

8.2.2 边框 145

8.2.3 内边距 152

8.2.4 外边距 153

8.3 阴影 155

8.4 box-sizing 156

8.5 背景属性 158

8.5.1 背景颜色 158

8.5.2 背景图像 158

8.5.3 图像平铺方式 158

8.5.4 背景图像位置 160

8.5.5 背景图像固定 161

8.5.6 背景图像大小 161

8.5.7 背景裁剪 163

8.5.8 背景复合属性 164

8.5.9 CSS精灵图 165

8.6 实战案例：“大学生参军网站”登录页面 166

8.7 本章小结 169

第9章 浮动与定位 170

9.1 标准文档流 170

9.2 元素的分类 171

9.2.1 块级元素、行内元素与行内块元素 171

9.2.2 元素的类型转换 172

9.3 元素的浮动 173

9.3.1 设置浮动 174

9.3.2 清除浮动 176

9.4 元素的定位 180

9.4.1 定位的概念 180

9.4.2 定位属性 181

9.4.3 静态定位 181

9.4.4 相对定位 182

9.4.5 绝对定位 183

9.4.6 固定定位 186

9.4.7 粘性定位 187

9.4.8 层叠等级属性 188

9.5 实战案例：“大学生参军网站”轮播图效果 190

9.6 本章小结 192

第10章 CSS3高级应用 193

10.1 变换 193

10.1.1 旋转 194

10.1.2 倾斜 195

10.1.3 缩放 196

10.1.4 平移 197

10.1.5 变换原点 198

10.2 过渡 200

10.3 动画 202

10.4 实战案例：“大学生参军网站”CSS3高级应用 205

10.5 本章小结 208

第11章 网页布局 209

11.1 网页布局概述 209

11.1.1 网页布局的概念 209

11.1.2 网页布局的流程 210

11.1.3 常见的网页布局方法 211

11.2 网页布局命名规范 211

11.3 常见布局的实现 212

11.3.1 单列布局 212

11.3.2 两列常规布局 214

11.3.3 三列常规布局 216

11.3.4 两列自适应等高布局 217

11.3.5 三列自适应布局 219

11.4 实战案例：“大学生参军网站”首页主体部分 223

11.5 本章小结 225

第12章 Flex布局 226

12.1 Flex布局概述 226

12.2 Flex布局相关概念 227

12.3 容器属性 227

12.3.1 display属性 228

12.3.2 flex-direction属性 228

12.3.3 flex-wrap属性 230

12.3.4 justify-content属性 232

12.3.5 align-items属性 233

12.3.6 align-content属性 235

12.4 项目属性 236

12.4.1 order属性 236

12.4.2 flex-grow属性 237

12.4.3 flex-shrink属性 239

12.4.4 flex-basis属性 240

12.4.5 flex属性 241

12.5 实战案例：“大学生参军网站”导航条 242

12.6 本章小结 244

第13章 Grid布局 245

13.1 Grid布局概述 245

13.2 Grid布局相关概念 246

13.3 容器属性 246

13.3.1 display属性 247

13.3.2 划分网格 248

13.3.3 行间隔和列间隔 252

13.3.4 项目对齐方式 253

13.4 项目属性 255

13.4.1 grid-column和grid-row属性 255

13.4.2 grid-area属性 257

13.5 实战案例：“大学生参军网站”视频展播列表 258

13.6 本章小结 260

第14章 Web前端项目综合实践——文创商城 261

14.1 项目概述 261

14.2 需求分析 262

14.3 原型设计 262

14.4 公共部分的设计与实现 265

14.4.1 重置样式 265

14.4.2 页面头部 265

14.4.3 页面底部 268

14.4.4 悬浮侧边栏 270

14.5 首页的设计与实现 271

14.5.1 甄选好物版块 271

14.5.2 国博文房版块 274

14.6 商品列表页的设计与实现 277

14.6.1 商品类型筛选 277

14.6.2 分页导航 278

14.7 商品详情页的设计与实现 279

14.8 本章小结 283

编辑推荐

1HTML5与CSS3是Web前端开发的两大核心技术，它们不仅是Web前端开发工程师必须掌握的技能，也是高校一门重要的Web前端课程内容

2《HTML5+CSS3 Web前端开发与实例教程：微课视频版》以“从项目中来到项目中去”为主旨，从Web前端开发的基本概念入手，系统介绍HTML5、CSS3网页编程技巧。

3《HTML5+CSS3 Web前端开发与实例教程：微课视频版》采取“知识点讲解+示例解析+案例详讲+高频面试题+实践操作+学科竞赛真题”的递进式教学模式，引导读者理解理论知识，掌握开发方法，学会复杂的网站设计技能，全面提升读者的Web前端开发能力。

4《HTML5+CSS3 Web前端开发与实例教程：微课视频版》配套资源非常丰富，包括思政元素、案例源代码、PPT课件、微课视频、习题与答案、教案、教学大纲、章节测试、云题库、实验报告、学习通在线课程，能帮助读者快速掌握HTML5与CSS3前端技术。

本文摘自《HTML5+CSS3 Web前端开发与实例教程：微课视频版》，获出版社和作者授权发布。

年来，教育信息化已成为国家在深化教育改革领域的重要目标，也是全行业及全社会关注的焦点。技术的推动已成为行业变革重要力量，同样，教育领域也是如此，教育技术的发展是深化教育改革的重要推动力量。党的十九大报告为国家深化教育改革指明了前进方向，教育信息化已成为全面推动教育现代化的有力支撑，因此，教育信息化已经是势在必行。

随着信息技术的迅猛发展，微课应运而生，微课的出现不仅顺应了时代发展的趋势，而且在很大程度上满足了学生和老师的教育需求。如今，移动端不仅是学生群体娱乐、社交的平台，更是他们最主流的阅读工具和学习平台，老师可以把上课讲授的关键内容制作成微视频，学生可以随时随地拿出自己的智能终端设备来学习，还可以反复学习。

“微课”既有别于传统单一资源类型的教学课例、教学课件、教学设计、教学反思等教学资源，又是在其基础上继承和发展起来的一种新型教学资源，以时间短、主题多样、反馈及时等特点而受到了很多老师和学生的喜爱。

那么，微课如何制作和实现的呢？毫无疑问，融合多种媒体形式的HTML5教学内容无疑是微课制作的最好的路径。HTML5融合了图片、文字、视频、音频、图表、动画、全景等媒体形式，可以让学习内容变得更加生动，让学习更具有互动性、娱乐性。

1.童心读世界认知卡片抢先看

这款H5分为8个场景，每一个场景里有不同的认知卡片，儿童可以自由选择卡片进行识读，图文结合的交互方式可以有效的达到儿童认知的效果。

（可识别二维码预览）

2.点石成金

这款H5由三首古文组成，古文中有空白的地方需要用户补充完整，用户可以通过选择文字将古文填充完整，填入完全正确则出现下一页的提示。作品设有时间，可以激励用户更快更好的完成。

（可识别二维码预览）

3.小蚂蚁

这款H5讲述了小蚂蚁的故事，作品通过多个画面的转换，给小朋友带来很强的视觉感。同时，作品还配有歌曲，给作品增添了很多的趣味性，是儿童读故事的好伴侣。

（可识别二维码预览）

4.童心读世界有声认知卡片

这款H5是儿童认知的卡片动画，作品将图、文、声三种认知方式有效的结合起来，从视觉、听觉、触觉三个层面为用户呈现，非常具有趣味性。

（可识别二维码预览）

5.会说话的英语报

这款H5将英语报用生动的声音向用户呈现出来，学生可以通过听英语提高自己的听力能力，还可以听故事，可以说是一举两得。

（可识别二维码预览）

6.认五官学英语

这款H5是儿童认五官学英语的作品，儿童可以通过点击不同的五官，获取相应的英语读音，边看边听边读。同时，作品不同的表情变化，可以增加趣味性。

（可识别二维码预览）

7.动画绘本《三只小猪》

这款H5是根据《三只小猪》改编的动画绘本，作品通过小猪们生活的生动场景向用户讲述了三只小猪的不同性格，作品配有讲故事的声音，非常具有趣味性和吸引力。

（可识别二维码预览）

8. 数十亿年前的地球竟然是这样的

这款H5展示的是地球成长史，用户通过交互可以清楚的看到地球是如何形成的，整体上来说，这款作品既具有趣味性，又具有科普性。

（可识别二维码预览）

9. 和聆歌海一起学拼音

这款H5是教儿童学拼音的作品，儿童通过点击声调和发音两个按钮学习拼音的发声，能够有效调动儿童的学习兴趣。

（可识别二维码预览）

在移动融媒体时代的优秀交互融媒体内容制作技术平台，木疙瘩具有在移动学习、互动学习微课件制作方面的技术优势，如拥有类Flash习惯的专业版和类ppt习惯的简约版充分满足不同微课件创作需求等，已经得到了教育管理部门和教育工作者们的广泛关注，相关内容创作和行业应用已经迅速增长，未来的发展前景也是值得期待的。

作为H5技术平台在教育行业的先行者，木疙瘩很早关注并布局移动教育领域。中央党校、人教社、新东方、北京四中、黄冈中学等著名教育机构都采用了木疙瘩技术或教育行业解决方案，成功实现了数字资源移动化转型。木疙瘩还与教育行业知名机构合作，积累了丰富的教学素材，为教学资源的创作提供了自由的平台。未来，木疙瘩将一如既往地关注移动学习的发展趋势，加强H5融媒体技术与教育学习的深度融合，为包括特殊教育在内的中国教育改革与发展贡献力量。（作者：王志）