目 录
项目1 初识前端开发 1
任务1.1 安装配置前端开发环境 2
1.1.1 Web基础 3
1.1.2 Web标准 4
1.1.3 主流浏览器 5
1.1.4 前端开发工具 8
【实战记录活页手册】 9
【学生活动手册】 15
任务1.2 利用VSCode快速建立“我的第一个网页” 16
1.2.1 认识网页 17
1.2.2 规划网站目录 17
【实战记录活页手册】 18
【学生活动手册】 22
思政引领 23
项目2 网页框架HTML 25
任务2.1 使用HTML搭建导航栏及banner结构 27
2.1.1 HTML简介 27
2.1.2 HTML发展历史 28
2.1.3 HTML文档结构 28
2.1.4 HTML语法 30
2.1.5 标题标签 32
2.1.6 段落标签 32
2.1.7 图像标签 33
2.1.8 超链接标签 35
2.1.9 <div>和<span>标签 36
【实战记录活页手册】 36
【学生活动手册】 39
【学生活动手册】 40
任务2.2 网页进阶标签的使用 41
2.2.1 文本格式化标签 42
2.2.2 列表标签 44
2.2.3 音频标签 45
2.2.4 视频标签 46
【实战记录活页手册】 47
【学生活动手册】 53
任务2.3 了解HTML表格 54
2.3.1 表格的作用 55
2.3.2 表格标签 55
【实战记录活页手册】 57
【学生活动手册】 58
思政引领 59
项目3 网页样式CSS 61
任务3.1 认识CSS 63
3.1.1 CSS简介 63
3.1.2 CSS发展历史 64
3.1.3 CSS的使用方式 64
3.1.4 CSS基本语法 65
【实战记录活页手册】 68
【学生活动手册】 69
任务3.2 修改网页文字样式 70
3.2.1 文字大小 70
3.2.2 文字加粗 71
3.2.3 文字样式 72
3.2.4 行高 73
【实战记录活页手册】 73
【学生活动手册】 76
任务3.3 改变网页文本样式 78
3.3.1 文本颜色 78
3.3.2 文本对齐 79
3.3.3 文本修饰 80
3.3.4 文本缩进 80
3.3.5 CSS 3新增文本属性 81
【实战记录活页手册】 85
【学生活动手册】 89
思政引领 90
项目4 网页样式CSS进阶 93
任务4.1 CSS盒模型应用 95
4.1.1 认识盒模型 95
4.1.2 宽度属性和高度属性 97
4.1.3 边框属性 98
4.1.4 圆角属性 100
4.1.5 内边距 100
4.1.6 外边距 101
4.1.7 背景 102
【实战记录活页手册】 107
【学生活动手册】 115
任务4.2 清除浏览器默认样式 116
4.2.1 浏览器常见默认样式 116
4.2.2 清除浏览器默认样式的方法 117
4.2.3 reset.css和normalize.css的区别 118
【实战记录活页手册】 118
【学生活动手册】 119
任务4.3 定位技巧 120
4.3.1 元素的定位属性 120
4.3.2 相对定位 122
4.3.3 绝对定位 123
4.3.4 固定定位 124
4.3.5 粘性定位 125
【实战记录活页手册】 127
【学生活动手册】 128
任务4.4 登录页面布局 130
4.4.1 表单的作用 130
4.4.2 创建表单 131
4.4.3 <input>标签 131
4.4.4 <input>标签的不同类型 133
4.4.5 下拉框 135
4.4.6 文本域 136
4.4.7 按钮 137
4.4.8 伪类 137
【实战记录活页手册】 140
【学生活动手册】 144
思政引领 145
项目5 CSS 3高级应用 147
任务5.1 网页布局 149
5.1.1 常见的网页布局 150
5.1.2 弹性盒子布局 151
5.1.3 网格布局 158
【实战记录活页手册】 162
【学生活动手册】 170
任务5.2 网页过渡和动画效果 172
5.2.1 过渡属性 173
5.2.2 转换属性 174
5.2.3 动画属性 177
【实战记录活页手册】 180
【学生活动手册】 180
思政引领 182
项目6 移动端网页开发 185
任务6.1 移动端布局 186
6.1.1 移动端适配 187
6.1.2 视口 187
6.1.3 viewport方案 188
【实战记录活页手册】 188
【学生活动手册】 189
任务6.2 移动端网站开发 190
6.2.1 设备仿真模式 190
6.2.2 进入设备仿真模式 191
【实战记录活页手册】 192
【学生活动手册】 206
思政引领 208
扩展 前端开发知识延伸 211
知识点1 Web网页优化的基本原则 212
知识点2 样式合并与压缩 213
知识点3 兼容性解决方案 214
知识点4 高效的开发设计协作平台 215
