内 容 简 介
本书以零基础讲解为宗旨，用实例引导读者深入学习，采取“基础知识→核心技术→高级应用→项目案例实战”的讲解模式，深入浅出地讲解HTML5的各项技术及实战技能。
本书第1篇“基础知识”主要讲解初识HTML5、HTML5网页文档结构、HTML5与HTML4的区别等；第2篇“核心技术”主要讲解设计网页文本内容、网页列表与段落设计、HTML5网页中的图像、使用HTML5建立超链接、使用HTML5创建表单、使用HTML5创建表格、 HTML5中的多媒体、使用HTML5绘制图形、HTML 5中的文件与拖放等；第3篇“高级应用”主要讲解获取地理位置、Web通信新技术、数据存储技术、使用Web Worker处理线程、HTML5服务器发送事件、构建离线的Web应用等；第4篇“项目案例实战”主要讲解HTML5、CSS3和JavaScript的搭配应用案例，制作电子商务类网页，制作休闲娱乐类网页，制作企业门户类网页。
本书配套的DVD光盘中赠送了丰富的资源，诸如HTML5案例源码命令、教学幻灯片、本书精品教学视频、HTML5标签速查手册、CSS属性速查表、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。
本书适合任何想学习HTML5的人员，无论您是否从事计算机相关行业或是否接触过HTML5，通过学习均可快速地掌握HTML5的设计方法和技巧。
前 言
“网站开发案例课堂”系列图书是专门为网站开发和数据库初学者量身定做的一套学习用书，由刘玉红策划，IT应用实训中心的高级讲师编著。整套书涵盖网站开发、数据库设计等方面。整套书具有以下特点。
* 前沿科技
无论是网站建设、数据库设计还是HTML5、CSS3，我们都精选较为前沿或者用户群最大的领域推进，帮助大家认识和了解最新动态。
* 权威的作者团队
组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念。
* 学习型案例设计
以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度，提高读者的学习效率。
为什么要写这样一本书
自从HTML5正式推出以来，它立刻受到世界各大浏览器的热烈欢迎和支持。根据世界各大IT界知名媒体的评论，新的Web时代，HTML5马上就要到来。随着用户页面体验要求的提高，页面前端技术日趋重要，HTML5的技术成熟，使其在前端技术中突显优势，随着各大厂商浏览器的支持，它会更加盛行。通过本书的实训，读者可以很快地上手设计网页，提高职业化能力，从而帮助读者解决公司需求问题。
本书特色
* 零基础、入门级的讲解
无论您是否从事计算机相关行业，无论您是否接触过HTML5，都能从本书中找到最佳起点。
* 超多、实用、专业的范例和项目
本书内容在编排上紧密结合深入学习HTML5技术的先后过程，从HTML5的基本概念开始，带领大家逐步深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者学习起来简明轻松，操作起来有章可循。
* 随时检测自己的学习成果
每章首页中，均提供了学习目标，以指导读者重点学习及学后检查。
每章最后的“跟我练练手”板块，均根据本章内容精选而成，读者可以随时检测自己的学习成果和实战能力，做到融会贯通。
* 细致入微、贴心提示
本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小栏目，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松地掌握各种操作技巧。
* 专业创作团队和技术支持
本书由IT应用实训中心编著和提供技术支持。
如果您在学习过程中遇到任何问题，可加入QQ群：221376441进行提问，专家人员会在线答疑。
“HTML5网页设计”学习最佳途径
本书以学习“HTML5网页设计”的最佳制作流程来分配章节，从最初的HTML5基本概念开始，然后讲解了HTML5的核心技术、HTML5的高级应用等。同时，在最后的项目实战环节特意补充了4个常见网站设计过程，以便更进一步提高大家的实战技能。
超值光盘
* 全程同步教学录像
涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点，读者可以更轻松地掌握书中所有的HTML5网页设计知识，而且扩展的讲解部分能使您得到比书中更多的收获。
* 超多容量王牌资源大放送
赠送大量王牌资源，包括HTML5案例源码命令、教学幻灯片、本书精品教学视频、HTML5标签速查手册、CSS属性速查表、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。
读者对象
* 没有任何HTML5基础的初学者
* 有一定的HTML5基础，想精通HTML5的人员
* 有一定的HTML5基础，没有项目经验的人员
* 正在进行毕业设计的学生
* 大专院校及培训学校的教师和学生
创作团队
本书由刘玉红策划，IT应用实训中心高级讲师编著，参加编写的人员有胡同夫、付红、郭广新、侯永岗、蒲娟、王月娇、包慧利、陈伟光、梁云梁和周浩浩。
在编写过程中，我们尽所能地将最好的讲解呈现给读者，但书中也难免有疏漏和不妥之处，敬请读者不吝指正。
编 者
目 录
第1篇 基础知识
第1章 初识HTML5 3
1.1 HTML5简介 4
1.1.1 HTML 5简介 4
1.1.2 HTML5文件的基本结构 5
1.2 HTML5文件的编写方法 5
1.2.1 案例1——手工编写HTML5 5
1.2.2 案例2——使用HTML编辑器 6
1.3 使用浏览器查看HTML5文件 10
1.3.1 各大浏览器与HTML5
的兼容 11
1.3.2 案例3——查看页面效果 11
1.3.3 案例4——查看源文件 11
1.4 跟我练练手 12
1.4.1 练习目标 12
1.4.2 上机练习 12
1.5 高手甜点 12
第2章 HTML5网页文档结构 15
2.1 Web标准 16
2.1.1 Web标准概述 16
2.1.2 Web标准规定的内容 16
2.2 HTML5文档的基本结构 17
2.2.1 文档类型说明 18
2.2.2 HTML5标记<HTML> 19
2.2.3 头标记<HEAD> 19
2.2.4 网页的主体标记<BODY> 22
2.2.5 页面注释标记<!-- --> 22
2.3 综合案例——符合W3C标准的
HTML5网页制作 23
2.4 跟我练练手 24
2.4.1 练习目标 24
2.4.2 上机练习 25
2.5 高手甜点 25
第3章 HTML5与HTML4的区别 27
3.1 新增的主体结构元素 28
3.1.1 案例1——section元素的使用 28
3.1.2 案例2——article元素的使用 29
3.1.3 案例3——aside元素的使用 32
3.1.4 案例4——nav元素的使用 33
3.1.5 案例5——time元素的使用 36
3.2 新增的非主体结构元素 37
3.2.1 案例6——header元素的使用 37
3.2.2 案例7——hgroup元素的使用 38
3.2.3 案例8——footer元素的使用 40
3.2.4 案例9——figure元素的使用 42
3.2.5 案例10——address元素的
使用 45
3.3 新增其他常用元素 46
3.3.1 案例11——mark元素的使用 46
3.3.2 案例12——rp元素、rt元素
与ruby元素的使用 48
3.3.3 案例13——progress元素的
使用 49
3.3.4 案例14——command元素的
使用 50
3.3.5 案例15——embed元素的
使用 50
3.3.6 案例16——details元素与
summary元素的使用 51
3.3.7 案例17——datalist元素的
使用 52
3.4 新增全局属性 53
3.4.1 案例18——contentEditable
属性的使用 53
3.4.2 案例19——spellcheck属性的
使用 54
3.4.3 案例20——tabIndex属性的
使用 55
3.5 新增的其他属性 56
3.5.1 案例21——表单相关属性的
使用 56
3.5.2 案例22——链接相关属性的
使用 64
3.5.3 案例23——其他属性的使用 66
3.6 HTML5废除的属性 66
3.7 跟我练练手 68
3.7.1 练习目标 68
3.7.2 上机练习 68
3.8 高手甜点 68
第2篇 核心技术
第4章 设计网页文本内容 73
4.1 标题文字的建立 74
4.1.1 案例1——标题文字标记 74
4.1.2 案例2——标题文字的对齐
方式 75
4.2 设置文字格式 75
4.2.1 案例3——设置文字字体 75
4.2.2 案例4——设置字号 77
4.2.3 案例5——设置文字颜色 78
4.2.4 案例6——设置粗体、斜体、
下划线 79
4.2.5 案例7——设置上标与下标 81
4.2.6 案例8——设置字体风格 82
4.2.7 案例9——设置加粗字体 83
4.2.8 案例10——设置字体复合
属性 84
4.2.9 案例11——设置阴影文本 85
4.2.10 案例12——控制换行 86
4.3 设置段落格式 88
4.3.1 案例13——设置段落标记 88
4.3.2 案例14——设置换行标记 89
4.4 设置网页水平线 90
4.4.1 案例15——添加水平线 90
4.4.2 案例16——设置水平线的
宽度与高度 91
4.4.3 案例17——设置水平线的
颜色 92
4.4.4 案例18——设置水平线的
对齐方式 92
4.4.5 案例19——去掉水平线阴影 93
4.5 综合案例——成才教育网文本设计 94
4.6 跟我练练手 95
4.6.1 练习目标 95
4.6.2 上机练习 95
4.7 高手甜点 95
第5章 网页列表与段落设计 97
5.1 网页文字列表设计 98
5.1.1 案例1——建立无序列表<ul> 98
5.1.2 案例2——建立有序列表<ol> 99
5.1.3 案例3——建立不同类型的
无序列表 100
5.1.4 案例4——建立不同类型的
有序列表 101
5.1.5 案例5——嵌套列表 102
5.1.6 案例6——自定义列表<dl> 103
5.2 网页段落格式的设计 104
5.2.1 案例7——设计单词间隔
word-spacing 104
5.2.2 案例8——设计字符间隔
letter-spacing 105
5.2.3 案例9——设计文字修饰
text-decoration 106
5.2.4 案例10——设计垂直对齐
方式vertical-align 107
5.2.5 案例11——设计文本转换
text-transform 109
5.2.6 案例12——设计水平对齐
方式text-align 110
5.2.7 案例13——设计文本缩进
text-indent 112
5.2.8 案例14——设计文本行高
line-height 113
5.2.9 案例15——处理空白
white-space 114
5.2.10 案例16——文本反排
unicode-bidi 115
5.3 综合案例——制作图文混排型
旅游网页 117
5.4 跟我练练手 118
5.4.1 练习目标 118
5.4.2 上机练习 118
5.5 高手甜点 118
第6章 HTML5网页中的图像 121
6.1 网页中的图像<img> 122
6.1.1 网页中支持的图片格式 122
6.1.2 图像中的路径 122
6.2 在网页中插入图像 124
6.2.1 案例1——插入图像 124
6.2.2 案例2——从不同位置插入
图像 125
6.3 编辑网页中的图像 126
6.3.1 案例3——设置图像的宽度
和高度 126
6.3.2 案例4——设置图像的提示
文字 127
6.3.3 案例5——将图片设置为
网页背景 128
6.3.4 案例6——排列图像 129
6.4 实战演练——图文并茂房屋装饰
装修网页 130
6.5 跟我练练手 131
6.5.1 练习目标 131
6.5.2 上机练习 131
6.6 高手甜点 131
第7章 使用HTML5建立超链接 133
7.1 网页超链接的概念 134
7.1.1 什么是网页超链接 134
7.1.2 超链接中的URL 134
7.1.3 超链接的URL类型 135
7.2 建立网页超级链接 135
7.2.1 案例1——创建超文本链接 135
7.2.2 案例2——创建图片链接 137
7.2.3 案例3——创建下载链接 138
7.2.4 案例4——使用相对路径
和绝对路径 139
7.2.5 案例5——设置以新窗口
显示超链接页面 140
7.2.6 案例6——设置电子邮件
链接 142
7.3 案例7——浮动框架iframe的使用 143
7.4 案例8——精确定位热点区域 145
7.5 综合案例——使用锚链接制作
电子书阅读网页 148
7.6 跟我练练手 151
7.6.1 练习目标 151
7.6.2 上机练习 151
7.7 高手甜点 151
第8章 使用HTML5创建表单 153
8.1 案例1——认识表单 154
8.2 表单基本元素的使用 155
8.2.1 案例2——单行文本输入框
text的使用 155
8.2.2 案例3——多行文本输入框
textarea的使用 156
8.2.3 案例4——密码域password
的使用 156
8.2.4 案例5——单选按钮radio的
使用 157
8.2.5 案例6——复选框checkbox
的使用 158
8.2.6 案例7——下拉列表框select
的使用 159
8.2.7 案例8——普通按钮button
的使用 160
8.2.8 案例9——提交按钮submit
的使用 161
8.2.9 案例10——重置按钮reset
的使用 162
8.3 表单高级元素的使用 163
8.3.1 案例11——url属性的应用 163
8.3.2 案例12——email属性的
应用 164
8.3.3 案例13——date属性和
times属性的应用 165
8.3.4 案例14——number属性的
应用 166
8.3.5 案例15——range属性的
应用 167
8.3.6 案例16——required属性
的应用 167
8.4 综合案例——创建用户反馈表单 168
8.5 跟我练练手 170
8.5.1 练习目标 170
8.5.2 上机练习 170
8.6 高手甜点 170
第9章 使用HTML5创建表格 171
9.1 表格的基本结构 172
9.2 使用HTML5创建表格 173
9.2.1 案例1——创建普通表格 174
9.2.2 案例2——创建一个带有
标题的表格 175
9.2.3 案例3——定义表格的边框
类型 176
9.2.4 案例4——定义表格的表头 177
9.2.5 案例5——设置表格背景 178
9.2.6 案例6——设置单元格背景 180
9.2.7 案例7——合并单元格 181
9.2.8 案例8——排列单元格中的
内容 185
9.2.9 案例9——设置单元格的
行高与列宽 186
9.3 案例10——创建完整的表格 187
9.4 综合案例——制作商品报价表 189
9.5 跟我练练手 191
9.5.1 练习目标 191
9.5.2 上机练习 191
9.6 高手甜点 191
第10章 HTML5中的多媒体 193
10.1 网页音频标签audio 194
10.1.1 audio标签概述 194
10.1.2 audio标签的属性 194
10.1.3 音频解码器 195
10.1.4 audio标签浏览器的支持
情况 195
10.2 网页视频标签video 195
10.2.1 video标签概述 195
10.2.2 video标签的属性 195
10.2.3 视频解码器 196
10.2.4 video标签浏览器的支持
情况 196
10.3 添加网页音频文件 197
10.3.1 案例1——设置背景音乐 197
10.3.2 案例2——设置音乐循环
播放 198
10.4 添加网页视频文件 198
10.4.1 案例3——为网页添加视频
文件 198
10.4.2 案例4——设置自动运行 199
10.4.3 案例5——设置视频文件
的循环播放 200
10.4.4 案例6——设置视频窗口
的高度与宽度 201
10.5 添加网页滚动文字 202
10.5.1 案例7——滚动文字标签
的使用 202
10.5.2 案例8——滚动方向属性
的应用 203
10.5.3 案例9——滚动方式属性
的应用 204
10.5.4 案例10——滚动速度属性
的应用 205
10.5.5 案例11——滚动延迟属性
的应用 206
10.5.6 案例12——滚动循环属性
的应用 206
10.5.7 案例13——滚动范围属性
的应用 207
10.5.8 案例14——滚动背景颜色
属性的应用 208
10.5.9 案例15——滚动空间属性
的应用 209
10.6 跟我练练手 210
10.6.1 练习目标 210
10.6.2 上机练习 210
10.7 高手甜点 210
第11章 使用HTML5绘制图形 213
11.1 什么是canvas 214
11.2 绘制基本形状 215
11.2.1 案例1——绘制矩形 215
11.2.2 案例2——绘制圆形 216
11.2.3 案例3——使用moveTo与
lineTo绘制直线 217
11.2.4 案例4——使用bezierCurveTo
绘制贝济埃曲线 219
11.3 绘制渐变图形 221
11.3.1 案例5——绘制线性渐变 221
11.3.2 案例6——绘制径向渐变 222
11.4 绘制变形图形 223
11.4.1 案例7——变换原点坐标 223
11.4.2 案例8——图形缩放 225
11.4.3 案例9——旋转图形 226
11.5 绘制其他样式的图形 227
11.5.1 案例10——图形组合 227
11.5.2 案例11——绘制带阴影的
图形 229
11.5.3 案例12——绘制文字 230
11.6 使用图像 232
11.6.1 案例13——绘制图像 232
11.6.2 案例14——图像平铺 234
11.6.3 案例15——图像裁剪 235
11.6.4 案例16——像素处理 237
11.7 图形的保存与恢复 239
11.7.1 案例17——保存与恢复
状态 239
11.7.2 案例18——保存文件 240
11.8 实战演练——绘制图形商标 241
11.9 跟我练练手 243
11.9.1 练习目标 243
11.9.2 上机练习 243
11.10 高手甜点 244
第12章 HTML5中的文件与拖放 245
12.1 选择文件 246
12.1.1 案例1——选择单个文件 246
12.1.2 案例2——选择多个文件 246
12.2 使用FileReader接口读取文件 247
12.2.1 案例3——检测浏览器
是否支持FileReader接口 247
12.2.2 案例4——FileReader接口
的方法 248
12.2.3 案例5——使用
readAsDataURL方法预览
图片 248
12.2.4 案例6——使用readAsText
方法读取文本文件 250
12.3 使用HTML5实现文件的拖放 252
12.3.1 案例7——认识文件拖放
的过程 252
12.3.2 浏览器支持情况 253
12.3.3 案例8——在网页中拖放
图片 253
12.3.4 案例9——在网页中拖放
文字 254
12.4 综合案例——在网页中来回拖放
图片 256
12.5 跟我练练手 258
12.5.1 练习目标 258
12.5.2 上机练习 258
12.6 专家甜点 258
第3篇 高级应用
第13章 获取地理位置 261
13.1 Geolocation API获取地理位置 262
13.1.1 地理地位的原理 262
13.1.2 获取定位信息的方法 262
13.1.3 常用地理定位方法 262
13.1.4 案例1——判断浏览器是
否支持HTML5获取地理
位置信息 263
13.1.5 案例2——指定纬度和经度
坐标 264
13.1.6 案例3——获取当前位置的
经度与纬度 265
13.2 目前浏览器对地理定位的支持情况 267
13.3 综合案例——在网页中调用
Google地图 268
13.4 跟我练练手 271
13.4.1 练习目标 271
13.4.2 上机练习 271
13.5 高手甜点 271
第14章 Web通信新技术 273
14.1 跨文档消息传输 274
14.1.1 跨文档消息传输的基本知识 274
14.1.2 案例1——跨文档通信应用
测试 274
14.2 WebSockets API 277
14.2.1 什么是WebSocket API 277
14.2.2 WebSockets通信基础 277
14.2.3 案例2——服务器端使用
Web Sockets API 279
14.2.4 案例3——客户机端使用
WebSockets API 282
14.3 综合案例——编写简单的
WebSocket服务器 283
14.4 跟我练练手 287
14.4.1 练习目标 287
14.4.2 上机练习 287
