"前端开发作为一门与时俱进的技术,对于构建高质量、用户体验友好的网站和应用程序起着至关重要的作用。《Web前端开发技术——HTML 5+CSS 3项目化教程(微课版)》是一本全面而深入的前端开发教程,通过一系列精心设计的项目,带领读者从入门到精通Web前端开发技术。
《Web前端开发技术——HTML 5+CSS 3项目化教程(微课版)》共包含6个项目和1个知识延伸内容。项目1介绍了前端开发的历史背景、在现代网页和应用程序开发中的重要性,以及前端开发的基础知识和工具。项目2介绍了如何使用HTML创建结构良好的网页,包括基本标签、属性和其他HTML元素的用法,这些都是构建任何网页或应用程序的基础。项目3介绍了CSS基础知识,帮助读者学习如何为网页添加样式。项目4介绍了CSS的高级应用技巧和方法。项目5介绍了如何利用CSS 3新特性进一步提升网页设计的效率。项目6介绍了如何利用前面所学的知识来开发可以适应各种移动设备的网页和应用。在扩展部分里,除了基础和进阶内容,还提供了一些前端开发的额外知识和资源,包括但不限于优化网页性能、提高网站可访问性、解决兼容性问题等的方法,以帮助学生全面了解前端开发的各项知识技能。
《Web前端开发技术——HTML 5+CSS 3项目化教程(微课版)》提供了丰富的数字化学习资源,包括微课视频、动画(扫描书中二维码即可观看),此外读者可通过扫描前言末尾左侧的二维码下载源代码、素材、习题答案等;针对教师,《Web前端开发技术——HTML 5+CSS 3项目化教程(微课版)》另赠教学课件、教师手册等资源。《Web前端开发技术——HTML 5+CSS 3项目
目 录
项目1 初识前端开发\t1
任务1.1 安装配置前端开发环境\t2
1.1.1 Web基础\t3
1.1.2 Web标准\t4
1.1.3 主流浏览器\t5
1.1.4 前端开发工具\t8
【实战记录活页手册】\t9
【学生活动手册】\t15
任务1.2 利用VSCode快速建立“我的第一个网页”\t16
1.2.1 认识网页\t17
1.2.2 规划网站目录\t17
【实战记录活页手册】\t18
【学生活动手册】\t22
思政引领\t23
项目2 网页框架HTML\t25
任务2.1 使用HTML搭建导航栏及banner结构\t27
2.1.1 HTML简介\t27
2.1.2 HTML发展历史\t28
2.1.3 HTML文档结构\t28
2.1.4 HTML语法\t30
2.1.5 标题标签\t32
2.1.6 段落标签\t32
2.1.7 图像标签\t33
2.1.8 超链接标签\t35
2.1.9
和标签\t36
【实战记录活页手册】\t36
【学生活动手册】\t39
【学生活动手册】\t40
任务2.2 网页进阶标签的使用\t41
2.2.1 文本格式化标签\t42
2.2.2 列表标签\t44
2.2.3 音频标签\t45
2.2.4 视频标签\t46
【实战记录活页手册】\t47
【学生活动手册】\t53
任务2.3 了解HTML表格\t54
2.3.1 表格的作用\t55
2.3.2 表格标签\t55
【实战记录活页手册】\t57
【学生活动手册】\t58
思政引领\t59
项目3 网页样式CSS\t61
任务3.1 认识CSS\t63
3.1.1 CSS简介\t63
3.1.2 CSS发展历史\t64
3.1.3 CSS的使用方式\t64
3.1.4 CSS基本语法\t65
【实战记录活页手册】\t68
【学生活动手册】\t69
任务3.2 修改网页文字样式\t70
3.2.1 文字大小\t70
3.2.2 文字加粗\t71
3.2.3 文字样式\t72
3.2.4 行高\t73
【实战记录活页手册】\t73
【学生活动手册】\t76
任务3.3 改变网页文本样式\t78
3.3.1 文本颜色\t78
3.3.2 文本对齐\t79
3.3.3 文本修饰\t80
3.3.4 文本缩进\t80
3.3.5 CSS 3新增文本属性\t81
【实战记录活页手册】\t85
【学生活动手册】\t89
思政引领\t90
项目4 网页样式CSS进阶\t93
任务4.1 CSS盒模型应用\t95
4.1.1 认识盒模型\t95
4.1.2 宽度属性和高度属性\t97
4.1.3 边框属性\t98
4.1.4 圆角属性\t100
4.1.5 内边距\t100
4.1.6 外边距\t101
4.1.7 背景\t102
【实战记录活页手册】\t107
【学生活动手册】\t115
任务4.2 清除浏览器默认样式\t116
4.2.1 浏览器常见默认样式\t116
4.2.2 清除浏览器默认样式的方法\t117
4.2.3 reset.css和normalize.css的区别\t118
【实战记录活页手册】\t118
【学生活动手册】\t119
任务4.3 定位技巧\t120
4.3.1 元素的定位属性\t120
4.3.2 相对定位\t122
4.3.3 绝对定位\t123
4.3.4 固定定位\t124
4.3.5 粘性定位\t125
【实战记录活页手册】\t127
【学生活动手册】\t128
任务4.4 登录页面布局\t130
4.4.1 表单的作用\t130
4.4.2 创建表单\t131
4.4.3 标签\t131
4.4.4 标签的不同类型\t133
4.4.5 下拉框\t135
4.4.6 文本域\t136
4.4.7 按钮\t137
4.4.8 伪类\t137
【实战记录活页手册】\t140
【学生活动手册】\t144
思政引领\t145
项目5 CSS 3高级应用\t147
任务5.1 网页布局\t149
5.1.1 常见的网页布局\t150
5.1.2 弹性盒子布局\t151
5.1.3 网格布局\t158
【实战记录活页手册】\t162
【学生活动手册】\t170
任务5.2 网页过渡和动画效果\t172
5.2.1 过渡属性\t173
5.2.2 转换属性\t174
5.2.3 动画属性\t177
【实战记录活页手册】\t180
【学生活动手册】\t180
思政引领\t182
项目6 移动端网页开发\t185
任务6.1 移动端布局\t186
6.1.1 移动端适配\t187
6.1.2 视口\t187
6.1.3 viewport方案\t188
【实战记录活页手册】\t188
【学生活动手册】\t189
任务6.2 移动端网站开发\t190
6.2.1 设备仿真模式\t190
6.2.2 进入设备仿真模式\t191
【实战记录活页手册】\t192
【学生活动手册】\t206
思政引领\t208
扩展 前端开发知识延伸\t211
知识点1 Web网页优化的基本原则\t212
知识点2 样式合并与压缩\t213
知识点3 兼容性解决方案\t214
知识点4 高效的开发设计协作平台\t215