作者：陈玲、程实、黄达、彭英 著
页数：300
出版社：清华大学出版社
出版日期：2025
ISBN：9787302678694
电子书格式：pdf/epub/txt
网盘下载地址：下载HTML5+CSS3网页设计任务教程
内容简介
本教材是一本全面介绍H5ML5和CSS3再网页设计应用中的活页式教材，不仅详细介绍了HTML5标签的使用、CSS样式的应用、DIV+CSS网页布局、响应式网页布局、流式网页布局等核心内容后以主流网站的内容为主线，通过工单设计，使学生了解企业行业的设计规范和要求，培养良好的Web前端开发职业素养；通过工单任务实现，使读者快速掌握HTML5和CSS3的实际应用技巧、跨浏览器兼容性、网页设计原则、网站优化等相关拓展主题，以适应不断发展的网页设计行业需求。
本教材的特色主要有以下几点：
（1）职教特色：教材编写遵循职教特点，教中学、学中做、做中学，教材注重实践性，提供大量的实例和案例，可以帮助学生将理论知识应用到实际项目中。通过实践，学生可以更好地理解和掌握HTML5网页设计的技巧和原理，培养实际操作能力。
（2）结合新技术、新标准：本教材关注移动设备网页优化的技术和策略，教授学生如何使用HTML5和CSS3等技术实现响应式布局、适配不同设备屏幕大小等，使学生能够设计出适用于各种终端的网页，提高学生就业的适应性能力。
（3）有机融入思政元素，强调企业要求，行业标准：在课程工单任务设计中明确企业要求、行业标准，在教材内容设计中强调职业道德和素养，与和行业专家、企业一线技术骨干合作编写，提供最新的行业动态和实践经验。本教材可以包含丰富的行业案例、行业标准和最佳实践等内容，帮助学生了解行业需求和要求，提前适应未来的就业或创业环境。
（4）新型态教材设计：本教材采用了模块化设计，每个模块的内容通过任务及子任务工单进行组织。将知识点和技能内容分割成不同的可更换的页面，便于根据技术的更新和发展，方便及时更新和替换部分内容，保持教材的时效性和准确性。教材中通过二维码嵌入了视频、高清图、代码演示、文档、脑图等多媒体内容，让学生可以更直观地理解和掌握HTML5网页设计的概念和技术。同时，教材还可以添加任务讨论、活页笔记、思维导图等，帮助学生巩固知识，提升学习效果。此外，学生可以按照自己的需求和兴趣选择具体的模块进行学习；教师也可以根据自己的教学计划和学生的特点，选择和组合教材中的不同模块，构建适合自己教学的内容，提升学习效果和教学质量。
本教材可以作为高职院校的软件技术专业、计算机或相关专业学生学习网页设计的教材或参考书，也可以作为读者自学网页设计知识的教材或参考书。
本书特色
1. 具有鲜明的职教特色
本书的编写遵循职教特点，教中学、学中做、做中学，注重实践性，提供大量的实用案例，帮助学生将理论知识应用到实际项目中。通过实践，学生可以更好地理解和掌握HTML5网页设计的原理和技能，培养实际操作能力。
2. 引入思政元素与行业标准
在课程工单任务设计中，深入对接企业需求和行业标准，确保学生能够充分掌握行业新技术、新标准、新规范和实践经验。通过与行业专家、企业技术骨干的紧密合作，使得本书不仅强调职业道德和素养，还融入了丰富的行业案例、行业标准和最佳实践。这些内容将帮助读者更好地了解行业需求，为未来的就业或创业做好准备。
3. 新形态设计
本书采用了模块化设计，每个模块的内容通过任务及子任务工单进行组织，便于根据技术的迭代和发展，方便及时地更新部分内容，保持书中内容的时效性和准确性。书中通过二维码嵌入了视频、高清图、代码演示、文档、思维导图等多媒体内容，让读者可以更直观地理解和掌握HTML5网页设计的概念和技术。同时，书中还添加了任务讨论、学习笔记、思维导图等，帮助读者巩固知识，提升学习效果。
4. 校企合作，双元开发
本书立足于培养具备应用、复合与创新能力的IT行业高素质技能型人才，以学生为中心，深化教育与产业的融合。本书由岳阳职业技术学院的专业骨干教师与湖南厚溥数字科技有限公司的行业专家共同策划与编撰。
目录
任务一 设计博客文章内容页 1
任务需求说明 1
课程工单 2
工单任务分解 3
思政元素 4
1.1 HTML5简介 4
1.1.1 HTML的基本概念 5
1.1.2 HTML的发展历史 7
1.1.3 W3C和W3C标准 7
1.1.4 HTML的开发工具 8
1.2 HTML5文档结构 9
1.2.1 HTML5文档基本结构 9
1.2.2 HTML5基本语法 10
1.2.3 使用浏览器查看HTML5网页文件 11
1.3 HTML5文本类标签 11
1.3.1 标题标签 11
1.3.2 段落标签 12
1.3.3 换行标签 13
1.3.4 水平线标签 14
1.3.5 注释标签 15
1.3.6 其他文本类标签 15
1.3.7 HTML5转义字符串 16
1.4 HTML5图片和超链接标签 16
1.4.1 图片标签 17
1.4.2 相对路径和绝对路径 17
1.4.3 图片标签的应用——简单的图文混排 18
1.4.4 超链接标签 19
工作训练 21
拓展训练 31
功能插页 33
任务二 设计博客内容列表页 37
任务需求说明 37
课程工单 38
工单任务分解 39
思政元素 41
2.1 列表标签 41
2.1.1 无序列表 41
2.1.2 有序列表 42
2.1.3 定义列表 43
2.2 容器标签 43
2.2.1 div标签 43
2.2.2 span标签 45
2.3 HTML5标签分类 46
2.3.1 块级标签 46
2.3.2 行级标签 46
2.3.3 行内块标签 46
2.3.4 块级元素与行内元素的嵌套关系 47
2.3.5 块级标签和行内元素的转换 48
2.4 表格标签 48
2.4.1 表格 48
2.4.2 表格的嵌套应用 56
工作训练 57
拓展训练 62
功能插页 63
任务三 设计博客登录和注册页面 67
任务需求说明 67
课程工单 68
工单任务分解 69
思政元素 70
3.1 表单及表单元素 70
3.1.1 表单标签 71
3.1.2 表单元素之input标签 72
3.1.3 表单元素之select标签 77
3.1.4 表单元素之textarea标签 79
3.1.5 表单元素的其他属性说明 80
3.2 表单验证 81
3.2.1 类型验证 81
3.2.2 必填验证 83
3.2.3 长度或范围验证 83
3.2.4 正则表达式验证 85
3.2.5 自定义验证 86
工作训练 86
拓展训练 89
功能插页 90
任务四 设计博客内容列表页 95
任务需求说明 95
课程工单 96
工单任务分解 97
思政元素 98
4.1 CSS简介 98
4.1.1 CSS基本语法 100
4.1.2 CSS样式种类 101
4.2 CSS选择器 103
4.2.1 CSS通配符选择器 103
4.2.2 CSS基本选择器 103
4.2.3 CSS关系选择器 108
4.2.4 CSS伪类选择器 112
4.3 CSS特性 114
4.3.1 层叠性 114
4.3.2 继承性 116
4.3.3 优先级 117
工作训练 117
拓展训练 121
功能插页 122
任务五 美化博客博主个人主页 125
任务需求说明 125
课程工单 126
工单任务分解 127
思政元素 128
5.1 CSS字体属性 128
5.1.1 font-family属性 128
5.1.2 font-weight属性 129
5.1.3 font-size属性 129
5.1.4 font-style属性 130
5.1.5 font复合属性 130
5.1.6 字体属性案例 130
5.2 CSS文本属性 132
5.2.1 color属性 132
5.2.2 text-align属性 133
5.2.3 line-height属性 133
5.2.4 text-decoration属性 134
5.2.5 text-shadow属性 135
5.2.6 text-overflow属性 136
5.3 CSS边框属性 137
5.3.1 border-style属性 138
5.3.2 border-width属性 139
5.3.3 border-color属性 140
5.3.4 border属性 141
5.3.5 border-radius属性 142
5.4 CSS列表属性 145
5.4.1 list-style-type属性 145
5.4.2 list-style-image属性 146
5.4.3 list-style-position属性 147
5.4.4 list-style属性 147
5.5 CSS背景属性 148
5.5.1 background-color属性 148
5.5.2 background-image属性 149
5.5.3 background-repeat属性 150
5.5.4 background-position属性 151
5.5.5 background-size属性 156
5.6 CSS表格属性 159
5.6.1 border-collapse属性 159
5.6.2 border-spacing属性 160
5.6.3 caption-side属性 161
5.6.4 empty-cells属性 162
工作训练 162
拓展训练 165
功能插页 166
任务六 设计博客网站的首页 169
任务需求说明 169
课程工单 170
工单任务分解 171
思政元素 172
6.1 盒子模型 172
6.1.1 标准文档流 173
6.1.2 盒子模型原理 175
6.2 盒子浮动 180
6.2.1 float属性 180
6.2.2 浮动塌陷及清除 181
6.2.3 浮动应用 183
6.3 盒子定位 185
6.3.1 定位属性position 185
6.3.2 位置偏移属性 186
6.3.3 盒子定位的五种方式 186
6.3.4 元素的层叠顺序 196
工作训练 197
拓展训练 200
功能插页 201
任务七 网页布局设计 205
任务需求说明 205
课程工单 206
工单任务分解 207
思政元素 208
7.1 DIV CSS布局 208
7.1.1 常见网页布局 208
7.1.2 列表布局 216
7.1.3 表格布局 222
7.2 浮动布局 223
7.2.1 图文环绕 224
7.2.2 等分宫格 225
7.2.3 两行定宽排列 226
7.2.4 圣杯布局 227
7.3 流动布局 229
7.3.1 max-width 229
7.3.2 min-width 230
7.3.3 流动布局示例 230
工作训练 231
拓展训练 235
功能插页 237
任务八 网页高级布局设计 241
任务需求说明 241
课程工单 242
工单任务分解 243
思政元素 244
8.1 弹性布局 244
8.1.1 基本概念 245
8.1.2 CSS属性 245
8.1.3 flex容器相关属性 246
8.1.4 flex项目相关属性 253
8.1.5 弹性布局的应用 256
8.2 响应式布局 258
8.2.1 视口 259
8.2.2 媒体查询 263
8.2.3 常用单位 267
8.2.4 响应式布局应用 269
8.3 多列布局 270
8.3.1 多列布局相关属性 271
8.3.2 多列布局应用 277
工作训练 278
拓展训练 282
功能插页 284
附录 引用网站相关信息 287
前言
党的二十大报告明确指出，“教育、科技、人才是全面建设社会主义现代化国家的基础性、战略性支撑”。在此基础上，报告对全面建设高质量教育体系、办好人民满意的教育进行了全面的战略部署，并首次强调“加强教材建设和管理”的重要性。这一重要论述为本书的编写提供了明确的指导方向。本书把“坚持社会主义核心价值观，以学生为中心”作为指导思想，注重培养学生的实践能力、创新精神和综合素质，以满足新时代对人才培养的需求。同时，帮助学生树立正确的世界观、人生观和价值观也是我们编写本书的重要使命。
随着互联网行业的迅猛发展，社会对网页设计人才的需求日益增长。在信息化时代，网络作为人们获取信息的重要途径，其网页的设计质量对于信息传递的效果至关重要。优秀的网页设计能将信息更加直观、生动地呈现给用户，提升用户体验。
【本书内容】
