第1章 HTML5+CSS3初体验
1.1 HTML5和CSS3的优势
1.1.1 HTML5的优势
1.1.2 CSS3的优势
1.2 HTML5的基本使用
1.2.1 HTML5的基本语法
1.2.2 HTML5语义化标签
1.3 CSS的基本使用
1.3.1 CSS的引入方式
1.3.2 选择器
1.3.3 盒子模型
1.3.4 浮动与定位
1.4 【项目1-1】三栏布局页面
1.4.1 项目分析
1.4.2 编写头部和底部区域
1.4.3 编写主体区域
1.4.4 实现左侧边栏效果
1.4.5 实现右侧边栏效果
1.4.6 项目总结
1.5 CSS3边框属性
1.5.1 圆角边框
1.5.2 特殊边框效果
1.6 CSS3背景设置
1.7 CSS3阴影和渐变
1.7.1 阴影
1.7.2 线性渐变
1.7.3 径向渐变
1.8 【项目1-2】许愿墙
1.8.1 项目分析
1.8.2 编写许愿墙页面结构
1.8.3 编写许愿墙页面样式
1.8.4 项目总结
课后练习
第2章 CSS3文本与图标
2.1 HTML5中常用的文本标签
2.2 CSS3文本样式属性
2.2.1 字体样式属性
2.2.2 文本外观属性
2.2.3 链接属性
2.2.4 @font-face属性
2.3 font-awesome字体图标
2.3.1 下载font-awesome
2.3.2 使用font-awesome
2.4 CSS3用户界面属性
2.4.1 box-sizing属性
2.4.2 resize调整尺寸
2.4.3 outline-offset外形修饰
2.5 【项目2】软文推广页面
2.5.1 项目分析
2.5.2 编写头部页面效果
2.5.3 编写中间部分页面效果
2.5.4 编写底部页面效果
2.5.5 项目总结
课后练习
第3章 CSS3过渡、变形与动画
3.1 CSS3过渡
3.1.1 什么是过渡
3.1.2 transition的子属性
3.2 CSS3变形
3.2.1 2D转换
3.2.2 元素变形原点
3.2.3 3D转换
3.3 CSS3动画
3.3.1 @keyframes规则
3.3.2 animation属性
3.4 【项目3】摇晃的桃子
3.4.1 项目分析
3.4.2 编写摇晃桃子的基本页面效果
3.4.3 编写桃子的摇晃效果
3.4.4项目总结
课后练习
第4章 HTML5表单的应用
4.1 介绍表单
4.1.1 <form>标签
4.1.2 <input>标签
4.1.3 其他表单标签
4.2 【项目4-1】调查问卷页面
4.2.1 项目分析
4.2.2 编写用户基本信息页面效果
4.2.3 编写上传文件和文本域页面效果
4.2.4 项目总结
4.3 HTML5表单新特性
4.3.1 <form>新特性
4.3.2 <input>新特性
4.4 【项目4-2】登录注册页面
4.4.1 项目分析
4.4.2 编写登录页面效果
4.4.3 编写注册基本页面效果
4.4.4 实现注册信息验证页面效果
4.4.5 项目总结
课后练习
第5章 HTML5画布
5.1 JavaScript的基础知识
5.1.1 JavaScript引入方式
5.1.2 数据类型
5.1.3 变量
5.1.4 函数
5.1.5 对象
5.1.6 事件处理
5.1.7 DOM操作
5.1.8 getBoundingClientRect()方法
5.2 Canvas绘图基本步骤
5.2.1 创建画布
5.2.2 准备画笔
5.2.3 定义坐标和起始点
5.2.4 绘制线条图案
5.2.5 绘制三角形
5.3 Canvas常用方法
5.3.1 绘制几何图形
5.3.2 绘制笑脸
5.3.3 绘制图片
5.4 Canvas其他方法
5.5 【项目5-1】涂鸦板
5.5.1 项目分析
5.5.2 编写页面结构，定义画布
5.5.3 在JavaScript中绘制图形
5.5.4 实现鼠标涂鸦效果
5.5.5 项目总结
5.6 【项目5-2】发红包看照片
5.6.1 项目分析
5.6.2 编写页面结构
5.6.3 编写页面样式
5.6.4 绘制圆形图片
5.6.5 实现单击按钮图片显示效果
5.6.6 项目总结
课后练习
第6章 HTML5音频和视频
6.1 JavaScript编程基础
6.1.1 JavaScript运算符
6.1.2 分支结构
6.1.3 循环结构
6.2 视频和音频技术简介
6.3 视频的基本使用
6.3.1 在HTML5中嵌入视频
6.3.2 视频标签的常用属性
6.3.3 处理视频文件格式
6.4 音频的基本使用
6.4.1 在HTML5中嵌入音频
6.4.2 处理音频文件格式
6.5 音频和视频对象
6.5.1 音频和视频对象的常用方法
6.5.2 音频和视频对象的常用属性
6.5.3 音频和视频对象的常用事件
6.6 【项目6-1】视频播放器
6.6.1 项目分析
6.6.2 编写播放器页面结构
6.6.3 编写播放器页面样式
6.6.4 计算视频播放的总时长
6.6.5 实现视频播放和暂停效果
6.6.6 实现进度条显示效果
6.6.7 实现视频全屏显示效果
6.6.8 实现视频播放完成后的重置操作
6.6.9 实现单击进度条视频跳转效果
6.6.10使用Esc键退出全屏
6.6.11使用按键控制视频的播放和暂停
6.6.12项目总结
6.7 【项目6-2】音乐播放器
6.7.1 项目分析
6.7.2 编写音乐播放器页面结构
6.7.3 编写音乐播放器页面样式
6.7.4 实现歌词控制栏效果
6.7.5 实现播放器样式效果
6.7.6 实现音频文件的播放功能
6.7.7 项目总结
课后练习
第7章 响应式Web设计
7.1 响应式Web设计基础
7.1.1 视口
7.1.2 媒体查询
7.1.3 百分比布局
7.1.4 栅格系统
7.2 响应式常见实现方式
7.2.1 媒体查询实现响应式布局
7.2.2 弹性盒布局
7.2.3 弹性盒常用属性
7.2.4 弹性盒属性的综合运用
7.3 【项目7-1】环保网站
7.3.1 项目分析
7.3.2 编写HTML结构代码
7.3.3 编写style.css公共样式代码
7.3.4 实现header响应式效果
7.3.5 实现banner响应式效果
7.3.6 实现中间区域效果
7.3.7 实现底部区域效果
7.3.8 项目总结
7.4 【项目7-2】学习教程库
7.4.1 项目分析
7.4.2 编写HTML结构代码
7.4.3 编写标题部分样式代码
7.4.4 编写免费教程资源部分样式代码
7.4.5 编写媒体查询样式代码
7.4.6 项目总结
课后练习
第8章 Bootstrap（上）
8.1 Bootstrap简介
8.1.1 什么是Bootstrap
8.1.2 Bootstrap的优势
8.1.3 Bootstrap 4的新特性
8.2 Bootstrap的下载和环境安装
8.2.1 Bootstrap的下载方式
8.2.2 下载Bootstrap预编译文件
8.2.3 下载Bootstrap源文件手动编译
8.2.4 使用CDN加载Bootstrap
8.2.5 在HTML中引入Bootstrap
8.3 Bootstrap布局容器
8.3.1 初识布局容器
8.3.2 栅格系统
8.3.3 栅格基本使用
8.3.4 响应式布局工具
8.4 Flex弹性布局
8.5 SVG矢量图的使用
8.6 Bootstrap常用组件
8.6.1 表单
8.6.2 输入框组
8.6.3 按钮
8.6.4 分页
8.7 辅助样式
8.7.1 文本颜色
8.7.2 背景颜色
8.7.3 设置元素间距
8.8 【项目8】PC端登录界面
8.8.1 项目分析
8.8.2 编写HTML结构代码
8.8.3 设置body和html样式
8.8.4 实现页面垂直居中显示
8.8.5 实现头部head部分
8.8.6 实现中间center部分
8.8.7 实现底部footer部分
8.8.8 项目总结
课后练习
第9章 Bootstrap（下）
9.1 导航
9.1.1 基础导航
9.1.2 标签式导航
9.1.3 pills导航
9.1.4 导航对齐方式
9.1.5 导航下拉菜单
9.1.6 标签页切换
9.2 导航栏
9.2.1 基础导航栏
9.2.2 设置导航栏的标题
9.2.3 导航栏折叠效果
9.3 卡片
9.3.1 卡片结构
9.3.2 卡片主体内容
9.3.3 设置带有图片的卡片
9.3.4 设置卡片背景图
9.4 【项目9】后台管理系统
9.4.1 项目展示
9.4.2 安装Node.js环境
9.4.3 使用Sass编写样式代码
9.4.4 安装Gulp
9.4.5 下载和安装Chart.js图表库
9.4.6 引入Feather图标库
9.4.7 搭建项目目录结构
9.4.8 创建模板文件
9.4.9 实现导航栏
9.4.10 实现网页中间部分布局
9.4.11 编写中间部分结构代码
9.4.12 实现侧边导航布局
9.4.13 实现右侧内容布局
9.4.14 实现左侧导航激活效果
9.4.15 解决iframe框架高度自适应
9.4.16 项目总结
课后练习