HTML5+CSS3+JAVASCRIPT从入门到精通

第1篇 HTML技术篇
第1章 网页基础知识入门 1
1.1 了解HTML网页技术 1
1.1.1 什么是HTML和HTML 5 1
1.1.2 如何获取网页的源代码 2
1.1.3 静态网页 3
1.1.4 动态网页 3
1.1.5 网站 3
1.2 了解网页技术的工作原理 4
1.2.1 静态HTML的工作流程 4
1.2.2 动态HTML的工作流程 4
1.3 制作一个完整的HTML 5网页 5
1.3.1 搭建上机练习环境 5
1.3.2 完成**个网页 5
1.4 技术解惑 6
1.4.1 HTML与HTML 5是两种网页语言吗 6
1.4.2 如何区分静态网页与动态网页 6
第2章 HTML 5网页的结构 7
2.1 动手解构一个HTML 5页面 7
2.2 HTML的基础知识 7
2.2.1 HTML的基础语法 7
2.2.2 HTML文档的基本骨架 8
2.3 HTML文档中的标签 8
2.3.1 样本代码DOCTYPE 9
2.3.2 开始标签＜html＞ 9
2.3.3 头部标签和头部标签的对象 9
2.3.4 标题标签＜title＞ 9
2.3.5 主体标签＜body＞ 9
2.3.6 美化HTML文档 9
2.4 拓展训练 10
2.4.1 训练一：制作一个HTML网页，包含HTML基本标记，页面显示
“Hello World!” 10
2.4.2 训练二：制作一个HTML网页，要求在浏览器标题栏中显示
“Hello World!” 10
2.5 技术解惑 11
2.5.1 HTML标签需要死记硬背吗 11
2.5.2 HTML网页的结构中哪些标签是必需的 11
第3章 网页中的文本与段落 12
3.1 文本的排版格式 12
3.1.1 写一行换一行 12
3.1.2 在页面中使用空格 13
3.1.3 文本的段落要对齐 14
3.2 文本的属性样式 15
3.2.1 不一样的文本字体大小 15
3.2.2 奇妙的特殊符号 16
3.2.3 给文本加标注 17
3.3 整齐的文本列表 18
3.3.1 无序列表 18
3.3.2 有序列表 19
3.3.3 定义列表 20
3.3.4 列表嵌套 21
3.4 拓展训练 22
3.4.1 训练一：在页面中设置段落对齐方式 22
3.4.2 训练二：在页面中创建有序列表 23
3.5 技术解惑 23
3.5.1 文本段落的对齐方式 23
3.5.2 有序列表与无序列表 23
第4章 网页中的图像 24
4.1 图像的基础知识 24
4.1.1 常用的位图图像 24
4.1.2 在页面中常用的位图格式 24
4.1.3 矢量图 25
4.1.4 图像的分辨率 25
4.1.5 认识一些网页中常用的Banner尺寸 25
4.2 页面中的图像 26
4.2.1 理解图像路径 26
4.2.2 像编辑文本对齐一样在页面中对齐图片 27
4.2.3 图像与文本的对齐方式 28
4.2.4 调整图像与文本的距离 29
4.3 让图像更美观 30
4.3.1 使用画图工具修改图像 30
4.3.2 为图像添加边框 30
4.3.3 独树一帜的水平线 31
4.4 改变页面的背景 32
4.5 拓展训练 33
4.5.1 训练一：在网页中插入图片并设置边框 33
4.5.2 训练二：在页面中插入宽度为800px、高度为2px、颜色为蓝色的
水平线 34
4.6 技术解惑 34
4.6.1 使用图像的技巧 34
4.6.2 善用水平线 34
第5章 网页中的链接 35
5.1 认识链接 35
5.1.1 初识页面链接 35
5.1.2 理解链接地址 36
5.2 链接的种类 37
5.2.1 基本的文本链接 38
5.2.2 基本的图像链接 38
5.2.3 把邮箱留给需要联系你的人 39
5.2.4 在同一页面中快速查找信息 40
5.3 提高页面链接的友好度 42
5.3.1 美观链接的状态 42
5.3.2 特殊的链接方式 44
5.3.3 热点图像区域的链接 46
5.4 在新窗口中显示链接窗口 48
5.5 拓展训练 49
5.5.1 训练一：在页面中使用图像链接 49
5.5.2 训练二：在页面中使用热点图像区域链接 49
5.6 技术解惑 49
5.6.1 合理使用锚点链接 49
5.6.2 合理使用邮件链接 50
第6章 网页中的表单 51
6.1 表单的工作原理 51
6.1.1 ＜script＞标记 51
6.1.2 创建表单 51
6.1.3 表单域 52
6.2 通过表单展示不一样的页面 52
6.2.1 input对象下的多种表单表现形式 52
6.2.2 text文本框的样式表单 53
6.2.3 password输入密码的样式表单 54
6.2.4 checkbox复选框的样式表单 55
6.2.5 radio单选框的样式表单 57
6.2.6 submit提交数据的样式表单 58
6.2.7 hidden隐藏域的样式表单 59
6.2.8 image样式的表单 60
6.2.9 file上传文件的样式表单 61
6.2.10 textarea对象的表单 62
6.2.11 select对象的表单 64
6.2.12 表单域集合 65
6.3 HTML 5表单的进化 66
6.3.1 早期的表单发展 66
6.3.2 HTML 5表单的问世 66
6.3.3 当前的支持情况 67
6.3.4 新增的表单输入类型 67
6.4 新增表单特性及元素 68
6.4.1 form特性 68
6.4.2 formaction特性 68
6.4.3 form其他特性 69
6.4.4 placeholder特性 69
6.4.5 autofocus特性 69
6.4.6 autocomplete特性 69
6.4.7 list特性和datalist元素 70
6.4.8 keygen元素 70
6.4.9 output元素 70
6.5 表单验证API 71
6.5.1 与验证有关的表单元素特性 71
6.5.2 表单验证的属性 72
6.5.3 ValidityState对象 72
6.5.4 表单验证的方法 73
6.5.5 表单验证的事件 75
6.6 拓展训练 76
6.6.1 训练一：在页面中使用下拉菜单表单元素 76
6.6.2 训练二：在页面中使用email表单输入元素并设置autofocus属性 77
6.7 技术解惑 77
6.7.1 HTML 5新增的表单类型有哪些 77
6.7.2 HTML 5新增的表单特性有哪些 77
第7章 音频和视频 78
7.1 audio和video基础知识 78
7.1.1 在线多媒体的发展 78
7.1.2 多媒体术语 79
7.1.3 HTML 5多媒体文件格式 80
7.1.4 功能缺陷及未来趋势 81
7.2 使用HTML 5的audio和video元素 81
7.2.1 在页面中加入音频和视频 81
7.2.2 使用source元素 82
7.2.3 使用脚本检测浏览器的标签支持情况 82
7.2.4 audio和video的特性和属性 83
7.2.5 audio和video的方法 86
7.2.6 audio和video的事件 88
7.3 练习：做自定义播放工具条 89
7.3.1 案例简介 89
7.3.2 网页基本元素 90
7.3.3 定义全局的视频对象 90
7.3.4 添加播放/暂停、前进和后退功能 91
7.3.5 添加慢进和快进功能 91
7.3.6 添加静音和音量功能 92
7.3.7 添加进度显示功能 92
7.4 拓展训练 93
7.4.1 训练一：在页面中插入音频格式 93
7.4.2 训练二：在页面中插入视频格式，并在页面加载完毕后自动播放 93
7.5 技术解惑 93
7.5.1 如何使用合适的音频类型 93
7.5.2 在网上使用视频的技巧 94
第8章 在网页中拖放内容 95
8.1 拖放API 95
8.1.1 新增的draggable特性 95
8.1.2 新增的鼠标拖放事件 95
8.1.3 DataTransfer对象 96
8.1.4 练习：拖放元素的内容 97
8.2 文件API 100
8.2.1 新增的标签特性 100
8.2.2 FileList对象与File对象 101
8.2.3 Blob对象 102
8.2.4 FileReader接口 103
8.3 练习：把图片拖入浏览器 108
8.3.1 案例简介 108
8.3.2 设计网页基本元素 108
8.3.3 基本函数的实现 109
8.3.4 页面加载处理 109
8.4 拓展训练 110
8.4.1 训练一：使用文件选择框可以一次选取多个文件 110
8.4.2 训练二：在网页中设置一个层是可以拖动的 110
8.5 技术解惑 110
8.5.1 理解拖放API与文件API 110
8.5.2 如何使用FlieList对象 111
第9章 网页的本地存储 112
9.1 本地存储对象——Web Storage 112
9.1.1 Web Storage简介 112
9.1.2 sessionStorage和localStorage 113
9.1.3 设置和获取Storage数据 115
9.1.4 Storage API的属性和方法 117
9.1.5 存储JSON对象的数据 119
9.1.6 Storage API的事件 122
9.1.7 练习：在两个窗口中实现通信 122
9.2 本地数据库——Web SQL Database 124
9.2.1 Web SQL Database简介 124
9.2.2 操作Web SQL数据库 124
9.2.3 练习：基本的数据库操作 125
9.3 拓展训练 129
9.3.1 训练一：保存并读取Storage数据 129
9.3.2 训练二：使用Web SQL数据库向名称为User的表中插入一条记录 129
9.4 技术解惑 130
9.4.1 理解本地存储对象 130
9.4.2 如何使用本地数据库 130
第10章 绘制图形 131
10.1 认识Canvas 131
10.1.1 Canvas的历史 131
10.1.2 Canvas和SVG及VML之间的差异 131
10.2 Canvas基本知识 132
10.2.1 构建Canvas元素 132
10.2.2 使用JavaScript实现绘图的流程 133
10.3 使用Canvas绘图 135
10.3.1 绘制矩形 135
10.3.2 使用路径 137
10.3.3 图形组合 142
10.3.4 绘制曲线 144
10.3.5 使用图像 151
10.3.6 剪裁区域 153
10.3.7 绘制渐变 157
10.3.8 描边属性 159
10.3.9 模式 161
10.3.10 变换 163
10.3.11 使用文本 167
10.3.12 阴影效果 170
10.3.13 状态的保存与恢复 171
10.3.14 操作像素 173
10.4 在Canvas中实现动画 175
10.5 拓展训练 179
10.5.1 训练一：使用Canvas绘制矩形 179
10.5.2 训练二：使用Canvas绘制阴影效果 180
10.6 技术解惑 180
10.6.1 理解Canvas对象 180
10.6.2 使用JavaScript实现绘图 180
第2篇 CSS技术篇
第11章 CSS基础知识入门 181
11.1 什么是CSS 181
11.2 CSS的写法 181
11.2.1 基本的样式表的写法 181
11.2.2 使用类class和标志id链接样式表 182
11.2.3 创建选择器 183
11.2.4 应用CSS样式表 185
11.3 用CSS来修饰页面文本 186
11.3.1 修饰页面文本字体 186
11.3.2 文本的字号 187
11.3.3 文本段落行高 187
11.3.4 禁止文本自动换行 187
11.4 给页面对象添加颜色 187
11.5 CSS 3的发展 188
11.5.1 模块化的发展 188