新一轮科技革命与信息技术革命的到来，推动了产业机构调整与经济转型升级发展新业态的出现，新显示技术、智能机器人等新兴领域，都需要使用Web前端开发技术，Web前端开发人员人才需求量巨大。HTML5是目前主流的Web前端语言，课程依据Web前端开发1+X职业技能标准，按照“单元项目、Web前端开发1+X考证单元组项目、思政专题项目和企业级项目”组成由浅入深、循序渐进的四级项目体系，整合序化HTML5搭建网页结构、CSS3设计样式、JavaScript和jQuery开发交互”3个技能模块11个学习模块；每个项目包含“任务陈述—知识准备—任务实施—虚拟仿真—思政浸润—单元测验与单元作业”环节，以任务为驱动，规划出“应用场景学习—典型案例练习—单元项目综合”的沉浸型渐进式学习路线，带领您实现Web前端开发从入门到实战，所有案例源代码均可以在线下载。
课程支持个性化学习方案,面向两种不同基础的学习者。每一个项目由基础知识——Web2.0基础知识（HTML4、CSS2、JavaScript）和进阶知识（HTML5、CSS3、jQuery）组成。零基础的学习者，建议从头开始学习；有一定Web2.0基础的同学，可以在每一单元中直接进入HTML5、CSS3、jQuery新内容学习，重点领略HTML5、CSS3、jQuery新技术的魅力。
通过课程学习，学习者掌握Web前端开发基础知识，具备网页制作、智能终端界面开发、Web前端软件开发、调试和维护能力，考取Web前端开发 1+X职业技能等级证书，胜任Web前端开发初级岗位。
课程导学
全课程内容导学
思政浸润
项目1 实践Web标准
思政浸润——Web编程规范
项目概述
1.5 HTTP基础
1.1 Web技术概述
1.2 认识网页
1.3 认识Web标准
1.4 准备开发环境
项目实施
任务陈述
单元1测验
项目2 HTML5基础知识设计美食网站
虚拟仿真
任务陈述
项目概述
2.1 HTML5概述
2.2 HTML5基础
2.3 HTML常用元素
2.4 HTML5多媒体元素
2.5 HTML表格
2.6 框架
项目实施
知识准备
思政浸润——HTML编程规范
单元2测验
单元2拓展测验，不计入总分
单元2作业
项目3 使用HTML5页面元素及属性完成“背包客”网页
思政浸润——一起了解我国领先的科学技术专题网站
3.1 HTML结构元素
3.2 HTML5级块性元素
3.3HTML5 新增的语义元素
3.4 HTML5 新增的交互性元素
3.5 HTML5通用属性
3.6单元项目一—使用HTML5结构化标签搭建网页结构
任务实施
Web前端开发职业技能等级样题解析_项目1：搜索引擎网站
项目概述
Web 前端开发初级实操考题解析_项目2：新闻网站首页
知识准备
虚拟仿真
任务陈述
单元3测试
拓展作业—单元3作业，不计入总分
单元3作业
项目4 CSS基础
思政浸润——CSS编程规范
4.1 CSS引入
4.2 CSS语法
4.3 引用CSS样式
单元4测验
拓展测验—单元4测验，不计入总分
项目5 新闻栏目列表中的CSS选择器
项目概述
知识准备
思政浸润
5.1 CSS基础选择器
5.2 属性选择器
5.3 伪类选择器
5.4 伪元素
5.5 CSS优先级
项目实施
任务陈述
单元5测验
项目6 CSS3常用样式大显身手制作新闻栏
虚拟仿真
知识准备
6.1 字体样式属性
6.2 CSS3服务器端字体
6.3 文本外观属性
6.4 CSS3文本效果
6.5 列表属性
6.6 背景属性
6.7 使用渐变背景
6.8 CSS高级特性
项目实施
任务陈述
项目概述
单元6测验
项目7 CSS布局定位“宠物窝”网站
虚拟仿真-CSS盒子模型
任务陈述
虚拟仿真项目—CSS布局
知识准备
思政浸润
项目概述
7.1 CSS盒模型
7.2 CSS3新增的盒模型属性
7.3 CSS定位
7.4 CSS浮动
7.5 移动端页面布局
项目实施
Web 前端开发初级实操考题解析_项目3：购物网站
单元7测验
拓展测验—单元7测验，不计入总分
拓展作业—单元7作业，不计入总分
项目8 CSS3高级应用行星运转动画
虚拟仿真
任务陈述
思政浸润——一起了解我国领先的科学技术专题网站
项目概述
8.1 CSS3变形
8.2 CSS3过渡
8.3 CSS3动画
Web 前端开发初级实操样题解析_项目4：社区网站
项目实施
知识准备
单元8测试
拓展作业——单元8作业，不计入总分
项目9 HTML5表单设计
知识准备
项目概述
9.1 认识表单
9.2 HTML表单控件基础
9.3 HTML5新的input类型
9.4 HTML5新表单元素
9.5 HTML5 input属性
项目实施
虚拟仿真
任务陈述
单元9测验
拓展测验—单元9测验，不计入总分
项目10 JavaScript开发网页计算器
思政浸润
任务陈述
项目概述
10.1 JavaScript概述
10.2 JavaScript基础知识
10.3 JavaScript对象
10.4 JavaScript数组
10.5 字符串
10.6 JavaScript函数
10.7 JavaScript 对象模型—BOM对象
10.8 JavaScript对象模型——DOM对象
10.9 事件
Web前端开发职业技能等级样题解析_项目5：电商网站注册、登录页面开发
项目实施
知识准备
虚拟仿真
单元10 测验
项目11 jQuery框架应用简易学生管理模块
知识准备
任务陈述
思政浸润——一起了解我国领先的科学技术专题网站
项目概述
11.1 jQuery简介
11.2 jQuery选择器
11.3 jQuery DOM操作
11.4 jQuery事件
11.5 jQuery效果
项目实施
综合项目—某企业网站
任务一——网页头部区域制作
任务二——导航栏制作
任务三—应用定位设计导航栏
任务四——应用浮动设计主内容左右两栏
任务五—应用并集选择器设置具有相同样式的内容
任务六——应用定位设置焦点图样式
任务七——应用定时器设置焦点图轮播
任务八—焦点图轮播
任务九——使用无序列表制作通知公告
任务十——使用无序列表制作校园动态
任务十一—使用定位设计轮播图样式
任务十二—应用定时器设置轮播图
任务十三——应用鼠标事件控制轮播效果
任务十四——网页footer制作
制作要求
项目素材下载