本书为新专标计算机类课程“双高计划”建设成果系列教材之一，也是职业教育国家在线精品课程“Web前端开发基础”的配套教材，按照Web前端工程师岗位技能要求，融入Web前端开发1+X职业技能等级标准和世界技能大赛Web开发技术赛项标准，遵循学习规律，基于“搭建网页结构—美化网页效果—添加网页交互”的网站设计工作过程，设计 7个教学模块。模块1主要介绍Web前端技术，包括发展历程、核心技术、主要框架、开发工具准备、前端开发知识体系等内容;模块2主要介绍HTML基础知识，包括HTML基本格式、常用标签、列表、音视频插入等内容；模块3主要介绍CSS基础知识，包括基础语法、引入方式、选择器的使用、文字及段落样式等内容；模块4主要介绍表格和表单，包括表格常见标签及属性、表单常见标签及属性、表单的基本结构、常见的表单元素等内容；模块5主要介绍页面布局，包括盒子模型、常见的3种布局方式、弹性布局等内容；模块6主要介绍JavaScript编程基础，包括程序结构、函数的使用、定时器的使用等内容;模块7为综合实训项目，以企业工程师的思维，介绍实现完整网站项目开发的思维过程和工作过程，最终使读者获得经验积累和能力提升。全书以“案例导入、任务驱动”的模块化设计方式，将真实项目和知识点贯穿起来，并辅以实例，以此激发读者的学习兴趣。

本书配有微课视频、教学设计、授课用PPT、案例素材、习题答案等数字化学习资源。与本书配套的数字课程“Web前端开发开发基础”在“智慧职教”平台（www.icve.com.cn）上线，学习者可以登录平台进行在线学习，授课教师可以调用本课程构建符合自身教学特色的SPOC课程，详见“智慧职教”服务指南。教师可发邮件至编辑邮箱1548103297@qq.com获取相关资源。

本书可作为高等职业教育Web前端开发类课程的教材，也可作为有意向从事Web前端开发、网站开发、网页编程等工作人员的自学参考书。

前辅文
模块1 Web前端技术简介
  1.1 前端技术简介
   1.1.1 什么是Web前端技术
   1.1.2 前端技术能做什么
   1.1.3 前端技术发展历程
   1.1.4 前端核心技术
   1.1.5 前端框架技术
   1.1.6 前端开发技术就业前景
  1.2 前端开发准备
   1.2.1 前端开发工具
   1.2.2 Web浏览器
  1.3 Web前端开发知识体系
  1.4 案例鉴赏
  1.5 模块实训：创建第一个HTML页面
  1.6 习题
模块2 网站页面搭建（HTML）
  2.1 个人介绍网页制作
   2.1.1 任务描述
   2.1.2 知识准备
   2.1.3 任务实现
   2.1.4 任务拓展
  2.2 个人相册制作
   2.2.1 任务描述
   2.2.2 知识准备
   2.2.3 任务实现
   2.2.4 任务拓展
  2.3 地域分级列表制作
   2.3.1 任务描述
   2.3.2 知识准备
   2.3.3 任务实现
   2.3.4 任务拓展
  2.4 个人主页制作
   2.4.1 任务描述
   2.4.2 知识准备
   2.4.3 任务实现
   2.4.4 任务拓展
  2.5 音频、视频播放页面制作
   2.5.1 任务描述
   2.5.2 知识准备
   2.5.3 任务实现
   2.5.4 任务拓展
  2.6 模块实训：一盏茶社模板页面制作
   2.6.1 实训目标
   2.6.2 实训任务
   2.6.3 设计思路
   2.6.4 任务实现
  2.7 习题
模块3 网站页面美化（CSS）
  3.1 了解CSS选择器
   3.1.1 任务描述
   3.1.2 知识准备
   3.1.3 任务实现
   3.1.4 任务拓展
  3.2 艺术字体设计制作
   3.2.1 任务描述
   3.2.2 知识准备
   3.2.3 任务实现
   3.2.4 任务拓展
  3.3 新闻网页制作
   3.3.1 任务描述
   3.3.2 知识准备
   3.3.3 任务实现
   3.3.4 任务拓展
  3.4 同心圆班徽设计制作
   3.4.1 任务描述
   3.4.2 知识准备
   3.4.3 任务实现
   3.4.4 任务拓展
  3.5 网页背景设计制作
   3.5.1 任务描述
   3.5.2 知识准备
   3.5.3 任务实现
   3.5.4 任务拓展
  3.6 模块实训：一盏茶社新闻资讯模块制作
   3.6.1 实训目标
   3.6.2 实训任务
   3.6.3 设计思路
   3.6.4 任务实现
  3.7 习题
模块4 网站表格和表单页面制作
  4.1 课程信息表制作
   4.1.1 任务描述
   4.1.2 知识准备
   4.1.3 任务实现
   4.1.4 任务拓展
  4.2 学生成绩信息表制作
   4.2.1 任务描述
   4.2.2 知识准备
   4.2.3 任务实现
   4.2.4 任务拓展
  4.3 登录页面制作
   4.3.1 任务描述
   4.3.2 知识准备
   4.3.3 任务实现
   4.3.4 任务拓展
  4.4 模块实训：一盏茶社注册页面制作
   4.4.1 实训目标
   4.4.2 实训任务
   4.4.3 设计思路
   4.4.4 任务实现
  4.5 习题
模块5 网站页面布局
  5.1 电子礼盒设计制作
   5.1.1 任务描述
   5.1.2 知识准备
   5.1.3 任务实现
   5.1.4 任务拓展
  5.2 九宫格设计制作
   5.2.1 任务描述
   5.2.2 知识准备
   5.2.3 任务实现
   5.2.4 任务拓展
  5.3 购物车图标的制作
   5.3.1 任务描述
   5.3.2 知识准备
   5.3.3 任务实现
   5.3.4 任务拓展
  5.4 购物车商品列表制作
   5.4.1 任务描述
   5.4.2 知识准备
   5.4.3 任务实现
   5.4.4 任务拓展
  5.5 模块实训：一盏茶社首页礼盒专区模块设计
   5.5.1 实训目标
   5.5.2 实训任务
   5.5.3 设计思路
   5.5.4 任务实现
  5.6 习题
模块6 网站页面交互（JavaScript）
  6.1 简单计算器的制作
   6.1.1 任务描述
   6.1.2 知识准备
   6.1.3 任务实现
   6.1.4 任务拓展
  6.2 选座位小程序的制作
   6.2.1 任务描述
   6.2.2 知识准备
   6.2.3 任务实现
   6.2.4 任务拓展
  6.3 学生随机提问程序的制作
   6.3.1 任务描述
   6.3.2 知识准备
   6.3.3 任务实现
   6.3.4 任务拓展
  6.4 模块实训：一盏茶社购物车页面制作
   6.4.1 实训目标
   6.4.2 实训任务
   6.4.3 设计思路
   6.4.4 任务实现
  6.5 习题
模块7 综合实训案例：一盏茶社网站制作
  7.1 实训目标
  7.2 实训任务
   7.2.1 实训要求
   7.2.2 实训内容
   7.2.3 项目预览
  7.3 设计思路
  7.4 任务实现
   7.4.1 模板页制作
   7.4.2 内容页制作
   7.4.3 登录页制作
   7.4.4 列表页制作
   7.4.5 详情页制作