本教材是一本全面介绍H5ML5和CSS3再网页设计应用中的活页式教材，不仅详细介绍了HTML5标签的使用、CSS样式的应用、DIV+CSS网页布局、响应式网页布局、流式网页布局等核心内容后以主流网站的内容为主线，通过工单设计，使学生了解企业行业的设计规范和要求，培养良好的Web前端开发职业素养；通过工单任务实现，使读者快速掌握HTML5和CSS3的实际应用技巧、跨浏览器兼容性、网页设计原则、网站优化等相关拓展主题，以适应不断发展的网页设计行业需求。
本教材的特色主要有以下几点：
（1）职教特色：教材编写遵循职教特点，教中学、学中做、做中学，教材注重实践性，提供大量的实例和案例，可以帮助学生将理论知识应用到实际项目中。通过实践，学生可以更好地理解和掌握HTML5网页设计的技巧和原理，培养实际操作能力。
（2）结合新技术、新标准：本教材关注移动设备网页优化的技术和策略，教授学生如何使用HTML5和CSS3等技术实现响应式布局、适配不同设备屏幕大小等，使学生能够设计出适用于各种终端的网页，提高学生就业的适应性能力。
（3）有机融入思政元素，强调企业要求，行业标准：在课程工单任务设计中明确企业要求、行业标准，在教材内容设计中强调职业道德和素养，与和行业专家、企业一线技术骨干合作编写，提供近期新的行业动态和实践经验。本教材可以包含丰富的行业案例、行业标准和很好实践等内容，帮助学生了解行业需求和要求，提前适应未来的就业或创业环境。
（4）新型态教材设计：本教材采用了模块化设计，每个模块的内容通过任务及子任务工单进行组织。将知识点和技能内容分割成不同的可更换的页面，便于根

目　录

任务一 设计博客文章内容页 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