前言

第一篇 HTML 5基础篇

第1章 迎接新的Web 时代——HTML 5 的出现

视频讲解：16分钟

1.1 HTML的历史

1.1.1 HTML发展的历史

1.1.2 HTML 5 时代即将来临

1.2 HTML 5 的优势

1.2.1 使用HTML 5 的理由

1.2.2 HTML 5 的化繁为简

1.2.3 HTML 5 的无插件范式

1.2.4 HTML 5 的新特性

1.3 HTML 5 的语法变化和标记方法

1.3.1 HTML 5 的语法变化

1.3.2 HTML 5 的标记方法

1.3.3 标记实例

1.4 小结

1.5 习题

第2章 去其糟粕，取其精华——HTML 5的元素与属性

视频讲解：36分钟

2.1 新增的元素和废除的元素

2.1.1 新增的结构元素

2.1.2 新增的块级（block）语义的元素

2.1.3 新增的行内（inline）语义的元素

2.1.4 新增的嵌入多媒体元素与交互性元素

2.1.5 新增的input元素的类型

2.1.6 废除的元素

2.2 新增的属性和废除的属性

2.2.1 新增的属性

2.2.2 废除的属性

2.3 全局属性

2.3.1 contentEditable属性

2.3.2 designMode属性

2.3.3 hidden属性

2.3.4 spellcheck属性

2.3.5 tabindex属性

2.4 上机实践

2.4.1 使用hidden属性对用户评论内容进行隐藏

2.4.2 使用spellcheck属性检查单词的拼写情况

2.4.3 对页面输出的文字进行编辑

2.5 小结

2.6 习题

第3章 你很重要——HTML 5 中的表单

视频讲解：48分钟

3.1 新增的元素与属性

3.1.1 新增的属性

3.1.2 增加与改良的input元素的种类

3.1.3 output元素的添加

3.2 对表单的验证

3.2.1 自动验证

3.2.2 checkValidity 显式验证法

3.2.3 避免验证

3.2.4 使用setCustomValidity 方法自定义错误信息

3.3 增加的页面元素

3.3.1 新增的.gure元素

3.3.2 新增的details元素

3.3.3 新增的mark元素

3.3.4 新增的progress元素

3.3.5 新增的meter元素

3.3.6 改良的ol列表

3.3.7 改良的dl列表

3.3.8 加以严格限制的cite元素

3.3.9 重新定义的small元素

3.4 上机实践

3.4.1 应用新增元素制作注册表单

3.4.2 调用表单的checkValidity 方法验证密码格式

3.4.3 应用output元素实现的乘法计算器

3.5 小结

3.6 习题

 

第二篇 HTML 5高级应用篇

第4章 不容小视——HTML 5 中的文件

视频讲解：40分钟

4.1 选择文件

4.1.1 通过.le对象选择文件

4.1.2 使用Blob接口获取文件的类型与大小

4.1.3 通过类型过滤选择的文件

4.2 使用FileReader接口读取文件

4.2.1 检测浏览器对FileReader接口的实现

4.2.2 FileReader接口的使用方法

4.2.3 使用readAsDataURL方法预览图片

4.2.4 使用readAsText 方法读取文本文件

4.2.5 FileReader接口中的事件

4.3 拖放API

4.3.1 实现拖放的步骤

4.3.2 通过拖放显示欢迎信息

4.4 dataTransfer 对象应用详解

4.4.1 使用effectAllowed 和dropEffect 属性设置拖放效果

4.4.2 使用setDragImage方法设置拖放图标

4.5 上机实践

4.5.1 通过accept属性过滤上传文件的类型

4.5.2 将图片文件拖放到页面中并显示

4.6 小结

4.7 习题

第5章 梦幻的世界——绘制图形

视频讲解：95分钟

5.1 canvas的基础知识

5.1.1 canvas是什么

5.1.2 在页面中放置canvas元素

5.1.3 绘制带边框的矩形

5.2 在画布中使用路径

5.2.1 使用arc方法绘制圆形

5.2.2 使用moveTo 与lineTo 路径绘制火柴人

5.2.3 贝塞尔和二次方曲线

5.3 运用样式与颜色

5.3.1 .llStyle和strokeStyle属性

5.3.2 透明度globalAlpha

5.3.3 线型

5.4 绘制渐变图形

5.4.1 绘制线性渐变

5.4.2 绘制径向渐变

5.5 绘制变形图形

5.5.1 坐标的变换

5.5.2 矩阵变换

5.6 组合多个图形

5.7 给图形绘制阴影

5.8 应用图像

5.8.1 绘制图像

5.8.2 图像的局部放大

5.8.3 图像平铺

5.8.4 图像裁剪

5.8.5 像素的处理

5.9 绘制文字

5.10 保存与恢复状态

5.11　文件的保存

5.12 对画布绘制实现动画

5.13 桌面时钟

5.14 上机实践

5.14.1 通过设置lineJoin属性值来绘制不同的矩形

5.14.2 绘制五角星

5.14.3 大头贴边框

5.15 小结

5.16 习题

第6章 如此神奇——多媒体播放

视频讲解：36分钟

6.1 HTML 5 多媒体简述

6.1.1 HTML 4 中多媒体的应用

6.1.2 HTML 5 页面中的多媒体

6.2 多媒体元素的基本属性

6.3 多媒体元素的常用方法

6.3.1 媒体播放时的方法

6.3.2 canPlayType（type） 方法

6.4 事件以及事件的发生顺序

6.4.1 事件处理方式

6.4.2 事件介绍

6.4.3 通过事件的控制来显示视频播放的时间

6.5 上机实践

6.5.1 在HTML 5 文档中播放音频

6.5.2 在HTML 5 文档中播放视频

6.6 小结

6.7 习题

第7章 数据管家——HTML 5 中的数据存储

视频讲解：50分钟

7.1 初识Web Storage

7.1.1 Web Storage 是什么

7.1.2 使用Web Storage 中的API

7.1.3 sessionStorage和localStorage的实例——计数器

7.1.4 Web Storage 综合实例——留言本

7.1.5 JSON对象的存储实例——用户信息卡

7.2 本地数据库

7.2.1 Web SQL 数据库简介

7.2.2 使用Web SQL Database API

7.2.3 本地数据库实例——用户登录

7.3 上机实践

7.3.1 应用Web Storage 实现带留言人的留言本

7.3.2 应用本地数据库实现留言本

7.4 小结

7.5 习题

第8章 线下管家——HTML 5 中的离线应用

视频讲解：13分钟

8.1 HTML 5 离线应用

8.1.1 HTML 5 离线应用概述

8.1.2 本地缓存与浏览器网页缓存的区别

8.2 创建HTML 5 离线应用

8.2.1 缓存清单（manifest）

8.2.2 配置IIS服务器

8.2.3 浏览manifest清单

8.3 浏览器与服务器的交互过程

8.4 applicationCache对象

8.4.1 swapCache方法

8.4.2 applicationCache对象的事件

8.5 上机实践

8.5.1 判断在线状态

8.5.2 检测本地缓存是否有更新

8.6 小结

8.7 习题

第9章 齐头并进——使用Web Worker 处理线程

视频讲解：21分钟

9.1 Web Worker 概述

9.1.1 创建和使用Worker

9.1.2 Web Worker 应用实例——求和运算

9.2 在Worker 内部能做什么

9.3 多个javaScript文件的加载与执行

9.4 线程的嵌套使用

9.4.1 最基本的单层嵌套

9.4.2 在多线程中进行数据的交互

9.5 上机实践

9.5.1 通过传递JSON对象输出用户信息

9.5.2 使用多线程随机显示5的整数倍数的数字

9.6 小结

9.7 习题

第10章 未完待续——HTML 5 中的其他应用型API

视频讲解：12分钟

10.1 跨文档消息通信

10.1.1 使用postMessage API

10.1.2 跨文档消息传输

10.2 Geolocation API 概述

10.2.1 使用getCurrentPosition获取当前地理位置

10.2.2 持续监视当前地理位置的信息

10.2.3 停止获取当前用户的地理位置信息

10.3 position对象

10.4 上机实践

10.4.1 显示当前地理位置的经纬度

10.4.2 在Google地图上显示“我在这里”

10.5 小结

10.6 习题

 

第三篇 CSS篇

第11章 初露锋芒——CSS 3概述

视频讲解：19分钟

11.1　CSS 3概述

11.2　CSS 3模块化结构

11.3　CSS 3新特性预览

11.4　主流浏览器对CSS 3的支持

11.5　上机实践

11.5.1　使用CSS 3样式添加图像边框

11.5.2　应用CSS 3控制登录页面显示样式

11.6　小结

11.7　习题

第12章 如此强大——CSS 3新增的选择器

视频讲解：78分钟

12.1 选择器概述

12.2 属性选择器

12.2.1 属性选择器是什么

12.2.2 CSS 3中的属性选择器

12.2.3 应用属性选择器实现文档按类型显示

12.3 CSS 3新增的结构性伪类选择器

12.3.1 CSS中的伪类选择器及伪元素

12.3.2 结构性伪类选择器

12.3.3 UI元素状态伪类选择器

12.3.4 通用兄弟元素选择器

12.4 上机实践

12.4.1 随机改变页面的背景色

12.4.2 设计赏心悦目的数据表格

12.4.3 制作生动的列表导航

12.5 小结

12.6 习题

第13章 文字的魅力——字体与文本的相关属性

视频讲解：60分钟

13.1 字体的相关属性

13.2 给文字添加阴影——text-shadow属性

13.2.1 text-shadow属性的使用方法

13.2.2 指定多个阴影

13.3 文本的相关属性

13.3.1 文本自动换行：word-break

13.3.2 长单词和URL地址换行

13.4 CSS 3新增的服务器字体

13.4.1 使用服务器字体

13.4.2 定义粗体、斜体字

13.4.3 优先使用客户端字体

13.5 使用font-size-adjust属性微调字体大小

13.5.1 字体不同导致文字大小的不同

13.5.2 font-size-adjust属性的使用方法

13.5.3 font-size-adjust属性的使用

13.6 上机实践

13.6.1 使用text-shadow属性设计立体文本

13.6.2 防止表格标题行换行

13.7 小结

13.8 习题

第14章 细节修饰——背景、边框和边距的相关属性

视频讲解：53分钟

14.1 设置背景

14.1.1 设置背景颜色

14.1.2 设置背景图片

14.1.3 CSS 3新增的与背景相关的属性

14.2 边框设置

14.2.1 设置边框的线宽

14.2.2 设置边框的样式

14.2.3 设置边框的颜色

14.2.4 边框综合属性

14.2.5 CSS 3新增的与边框相关的属性

14.3 内外边距的相关属性

14.3.1 设置内边距

14.3.2 设置外边距

14.4 上机实践

14.4.1 设计企业门户网站首页

14.4.2 设置最新公告列表的分隔线

14.4.3 通过CSS样式实现圆角矩形栏目标头

14.5 小结

14.6 习题

第15章 如此魔力——新增的弹性盒模型及分栏

视频讲解：53分钟

15.1 盒的类型

15.1.1 盒的基本类型

15.1.2 inline-block盒模型

15.1.3 inline-table盒模型

15.1.4 表格相关的盒模型

15.1.5 list-item盒模型

15.1.6 run-in盒模型与compact盒模型

15.2 为盒设置阴影和倒影

15.2.1 box-shadow属性的使用方法

15.2.2 对表格及单元格使用阴影

15.2.3 为盒设置倒影

15.3 布局的相关属性

15.3.1 使用.oat属性实现多栏布局

15.3.2 使用clear实现换行

15.3.3 使用clip属性控制裁剪

15.3.4 控制组件的滚动条

15.4 CSS 3的多栏布局

15.4.1 CSS 3新增的分栏功能

15.4.2 使用盒模型实现多栏布局

15.5 上机实践

15.5.1 设计多栏布局

15.5.2 为商品列表添加阴影和倒影

15.6 小结

15.7 习题

第16章 大体勾勒——尺寸和定位的相关属性

视频讲解：46分钟

16.1 尺寸的相关属性

16.1.1 设置对象的宽度

16.1.2 设置对象的高度

16.1.3 CSS 3新增的与尺寸相关的属性

16.2 定位的相关属性

16.2.1 设置定位方式

16.2.2 设置层叠顺序

16.2.3 设置与其父对象的上、下、左、右边的距离

16.3 上机实践

16.3.1 高度可自由调整的许愿墙背景

16.3.2 让多个字条层叠显示

16.4 小结

16.5 习题

第17章 增姿增色——表格和列表的相关属性

视频讲解：43分钟

17.1 表格的相关属性

17.1.1 设置表格边框线的显示方式

17.1.2 设置单元格边框间距

17.1.3 设置表格标题的位置

17.1.4 设置单元格无内容时是否显示边框

17.1.5 设置表格的布局方式

17.2 列表的相关属性

17.2.1 设置项目符号的种类

17.2.2 设置作为项目符号的图片

17.2.3 设置项目符号排列的位置

17.2.4 综合属性——list-style

17.3 上机实践

17.3.1 设计隔行变色的单线表格

17.3.2 应用列表实现横向展示商品

17.4 小结

17.5 习题

第18章 充满生机——CSS 3的动画设计

视频讲解：78分钟

18.1 2D变换

18.1.1 应用transform属性实现平移

18.1.2 应用transform属性实现缩放

18.1.3 应用transform属性实现倾斜

18.1.4 应用transform属性实现旋转

18.1.5 更改变换的中心点

18.2 过渡效果

18.2.1 指定过渡持续的时间

18.2.2 指定参与过渡的属性

18.2.3 指定过渡的动画类型

18.2.4 指定过渡的延迟时间

18.3 Animation动画

18.3.1 关键帧

18.3.2 动画属性

18.4 上机实践

18.4.1 实现方形变圆形动画效果

18.4.2 应用Animation动画实现模拟进度条效果

18.5 小结

18.6 习题

第19章 锦上添花——CSS的其他重要属性

视频讲解：24分钟

19.1 控制鼠标指针

19.2 打印的相关属性

19.2.1 应用@media print控制打印的内容

19.2.2 在对象之前插入页分隔符

19.2.3 在对象之后插入页分隔符

19.2.4 设置是否允许在对象的内部插入页分隔符

19.3 Media Queries

19.3.1 Media Queries的语法

19.3.2 根据浏览器宽度自动调整布局

19.4 上机实践

19.4.1 实现分页打印客户信息表格

19.4.2 设置不同的鼠标指针

19.5 小结

19.6 习题

 

第四篇 项目实战篇

第20章 旅游信息网前台页面

视频讲解：23分钟

20.1 需求分析

20.2 网站总体设计

20.2.1 网站功能概述

20.2.2 网站开发及运行环境

20.2.3 文件夹组织结构

20.3 网站主体结构设计

20.4 网站公共部分设计

20.4.1 设计网站公共header

20.4.2 设计网站公共footer

20.5 网站主页设计

20.5.1 显示网站介绍及相关图片

20.5.2 主页左侧导航的实现

20.6 “留下足迹”页面设计

20.6.1 播放音乐

20.6.2 添加留言功能的实现

20.7 小结