HTML5应用开发与实践

目　录

第1章　HTML5概述　1

1．1　HTML5简介　1

1．1．1　HTML发展历程　1

1．1．2　HTML开发组织　2

1．1．3　HTML5的新特性　2

1．2　HTML的标签构成　3

1．2．1　HTML标签概述　3

1．2．2　开始标签　4

1．2．3　头部标签　4

1．2．4　标题标签　5

1．2．5　主体标签　5

1．2．6　编写时注意事项　5

1．3　HTML文件的编写方法　6

1．3．1　手工编写页面　6

1．3．2　使用可视化软件制作页面　7

1．3．3　使用浏览器浏览HTML文件　10

1．4　综合实例——在浏览器中输出“你好”　11

知识点提炼　11

习题　11

第2章　HTML5的元素与属性　12

2．1　HTML5的语法变化　12

2．1．1　HTML5中的标记方法　12

2．1．2　HTML5与之前版本的不同　13

2．2　新增的元素和废除的元素　14

2．2．1　新增的结构元素　14

2．2．2　新增的行内(inline)语义元素　15

2．2．3　新增的块级(block)语义元素　15

2．2．4　新增的input元素的类型　16

2．2．5　新增的多媒体元素与交互性元素　16

2．2．6　废除的元素　17

2．3　新增的属性和废除的属性　18

2．3．1　新增的属性　18

2．3．2　废除的属性　20

2．4　全局属性　22

2．4．1　designMode属性　22

2．4．2　hidden属性　22

2．4．3　contentEditable属性　22

2．4．4　tabindex属性　23

2．4．5　spellcheck属性　23

2．5　综合实例——检查单词的拼写情况　24

知识点提炼　24

习题　24

第3章　HTML5表单　25

3．1　表单概述　25

3．2　表单的基本元素　26

3．2．1　表单标记及其属性　26

3．2．2　表单基本元素　29

3．3　表单新增元素　40

3．3．1　新增表单元素与属性　40

3．3．2　验证表单　46

3．3．3　新增和改良的页面元素　48

3．4　综合实例——search搜索类型的input元素　55

知识点提炼　56

习题　56

第4章　文件与拖放　58

4．1　选择文件　58

4．1．1　FileList对象与file对象　58

4．1．2　Blob对象的属性　59

4．1．3　通过类型过滤文件　60

4．2　使用FileReader对象读取文件　62

4．2．1　检测浏览器对FileReader对象的支持　62

4．2．2　FileReader对象的方法　62

4．2．3　实现图片的预览　62

4．2．4　文本文件的读取　64

4．2．5　FileReader对象中的事件　65

4．3　拖放API的使用　66

4．3．1　实现拖放的步骤　66

4．3．2　拖放实例　67

4．4　dataTransfer对象　69

4．4．1　设置拖放效果　69

4．4．2　设置拖放图标　70

4．5　综合实例——使用拖放API将商品拖入购物车　71

知识点提炼　73

习题　73

第5章　绘制图形　74

5．1　canvas基础　74

5．1．1　canvas元素简介　74

5．1．2　插入canvas元素　74

5．1．3　绘制矩形实例　76

5．2　使用路径绘制圆形　77

5．2．1　绘制圆形　77

5．2．2　绘制火柴人　78

5．2．3　绘制贝塞尔曲线　80

5．3　运用样式与颜色　82

5．3．1　fillStyle 和 strokeStyle属性　82

5．3．2　globalAlpha属性　84

5．3．3　线型Line styles　85

5．4　实现图形的变形　87

5．4．1　坐标的变换　87

5．4．2　矩阵变换　88

5．5　绘制渐变图形　91

5．5．1　绘制线性渐变　91

5．5．2　绘制径向渐变　92

5．6　绘制阴影和组合图形　93

5．6．1　绘制阴影　93

5．6．2　绘制组合图形　94

5．7　绘制文字　96

5．8　应用图像　97

5．8．1　绘制图像　97

5．8．2　图像的局部放大　99

5．8．3　图像平铺　100

5．8．4　图像裁剪　102

5．8．5　处理像素　102

5．9　保存与恢复状态　103

5．10　文件的保存　104

5．11　使用画布绘制动画　104

5．12　综合实例——绘制桌面时钟　105

知识点提炼　108

习题　108

第6章　HTML5中的多媒体　109

6．1　HTML5页面中的多媒体　109

6．2　多媒体元素的属性　110

6．3　多媒体元素的方法　114

6．3．1　媒体播放时的方法　114

6．3．2　canPlayType方法　115

6．4　多媒体元素的事件　116

6．4．1　事件处理　116

6．4．2　事件介绍　116

6．5　综合实例——用timeupdate事件动态显示媒体文件播放时间　117

知识点提炼　119

习题　119

第7章　HTML5的数据存储　120

7．1　Web Storage　120

7．1．1　Web Storage简介　120

7．1．2　WebStorage的API　121

7．1．3　两种不同存储类型的实例——计数器　122

7．1．4　JSON对象的存储实例——用户信息卡　124

7．2　Web SQL数据库　126

7．2．1　Web SQL数据库简介　126

7．2．2　Web SQL Database API的使用　126

7．3　跨文档消息通信　128

7．3．1　postMessageAPI的使用　128

7．3．2　跨文档消息传输　128

7．4　综合实例——简单的Web留言本　130

知识点提炼　132

习题　132

第8章　离线Web应用和地理定位　133

8．1　HTML5离线Web应用　133

8．1．1　HTML5离线Web应用概述　133

8．1．2　创建HTML5离线应用　135

8．1．3　浏览器与服务器的交互　137

8．1．4　applicationCache对象　138

8．2　获取地理位置　142

8．2．1　Geolocation API概述　142

8．2．2　position对象　144

8．3　综合实例——在页面上使用google地图　146

知识点提炼　147

习题　148

第9章　CSS3基础　149

9．1　CSS3概述　149

9．2　CSS3新特性　150

9．3　CSS3选择器　151

9．3．1　选择器概述　151

9．3．2　属性选择器　152

9．3．3　结构性伪类选择器　154

9．3．4　UI元素状态伪类选择器　161

9．3．5　通用兄弟元素选择器　166

9．4　综合实例——生动的列表导航　167

知识点提炼　170

习题　171

第10章　CSS字体与文本相关属性　172

10．1　给文字添加阴影——text-shadow属性　172

10．1．1　text-shadow属性的使用方法　172

10．1．2　指定多个阴影　174

10．2　文本相关属性　174

10．2．1　文本自动换行：word-break　174

10．2．2　长单词和URL地址换行　175

10．3　CSS 3新增的服务器字体　176

10．3．1　使用服务器字体　176

10．3．2　定义粗体、斜体字　177

10．3．3　优先使用客户端字体　179

10．4　使用font-size-adjust属性微调字体大小　180

10．4．1　字体不同导致文字大小的不同　180

10．4．2　font-size-adjust属性的使用方法　181

10．4．3　font-size-adjust属性的使用示例　181

10．5　综合实例——设计立体文本　182

知识点提炼　183

习题　183

第11章　CSS3美化背景与边框　184

11．1　设置背景　184

11．1．1　设置背景颜色　184

11．1．2　设置背景图片　186

11．1．3　CSS 3新增的与背景相关的属性　189

11．2　边框设置　193

11．2．1　设置边框的线宽　193

11．2．2　设置边框的样式　195

11．2．3　设置边框的颜色　196

11．2．4　边框综合属性　197

11．2．5　CSS 3新增的与边框相关的属性　198

11．3　内外边距的相关属性　201

11．3．1　设置内边距　201

11．3．2　设置外边距　202

11．4　综合实例——设计企业门户网站首页　203

知识点提炼　205

习题　205

第12章　变形与动画相关属性　206

12．1　CSS变形(Transformation)　206

12．1．1　变形基础——transform属性　206

12．1．2　旋转动画——rotate()函数　207

12．1．3　缩放动画——scale()函数　208

12．1．4　移动动画——translate()函数　210

12．1．5　倾斜动画——skew()函数　211

12．1．6　变形原点——transform-origin属性　213

12．2　CSS过渡——transition属性　214

12．2．1　设置过渡的CSS属性——transition-property属性　214

12．2．2　设置过渡的时间——transition-duration属性　216

12．2．3　设置过渡延迟时间——transition-delay属性　217

12．2．4　设置过渡效果——transition-timing-function属性　218

12．3　CSS动画——animation属性　220

12．4　综合实例——模拟进度条效果　223

知识点提炼　224

习题　225

第13章　JavaScript概述　226

13．1　JavaScript概貌　226

13．1．1　JavaScript的历史起源　226

13．1．2　JavaScript的主要特点　227

13．1．3　JavaScript成功案例　227

13．2　搭建JavaScript开发环境　229

13．2．1　硬件要求　229

13．2．2　软件要求　229

13．2．3　浏览器对JavaScript的支持　230

13．3　编写JavaScript的工具　231

13．3．1　Adobe Dreamweaver　231

13．3．2　Microsoft FrontPage　232

13．4　JavaScript在HTML中的使用　232

13．4．1　在页面中直接嵌入JavaScript　232

13．4．2　链接外部JavaScript　233

13．5　综合实例——用JS输出中文字符串　233

知识点提炼　234

习题　234

第14章　JavaScript语言基础　235

14．1　JavaScript数据结构　235

14．1．1　标识符　235

14．1．2　关键字　236

14．1．3　常量　236

14．1．4　变量　236

14．2　数据类型　238

14．2．1　数字型数据　238

14．2．2　字符串型数据　239

14．2．3　布尔型数据　240

14．2．4　特殊数据类型　240

14．2．5　数据类型的转换规则　241

14．3　运算符与表达式　242

14．3．1　算术运算符　243

14．3．2　比较运算符　243

14．3．3　赋值运算符　244

14．3．4　字符串运算符　245

14．3．5　布尔运算符　245

14．3．6　条件运算符　245

14．3．7　其他运算符　246

14．3．8　运算符优先级　247

14．3．9　表达式　248

14．4　流程控制语句　248

14．4．1　条件控制语句　248

14．4．2　循环控制语句　255

14．4．3　跳转语句　257

14．5　函数　259

14．5．1　函数的定义　259

14．5．2　函数的调用　260

14．5．3　几种特殊的函数　263

14．6　综合实例——将长数字分位显示　268

知识点提炼　269

习题　269

第15章　JavaScript内置对象　271

15．1　字符串对象String　271

15．1．1　search方法　271

15．1．2　match方法　272

15．1．3　split方法　272

15．1．4　replace方法　273

15．2　常用的数值处理对象　273

15．2．1　Math对象　273

15．2．2　Number对象　275

15．2．3　Boolean对象　279

15．2．4　Date对象　280

15．3　数组对象　283

15．3．1　数组对象Array　283

15．3．2　常用的数组操作方法　286

15．3．3　获取数组中的某段数组元素　289

15．3．4　将数组转换成字符串　290

15．4　综合实例——使用数组存储商品信息　291

知识点提炼　291

习题　292

第16章　JavaScript对象编程与事件处理　293

16．1　文档(document)对象　293

16．1．1　文档对象的常用属性、方法与事件　294

16．1．2　Document对象的应用　296

16．2　窗口(window)对象　302

16．2．1　窗口对象的常用属性与方法　302

16．2．2　控制窗口　304

16．2．3　窗口事件　311

16．3　DOM对象　312

16．3．1　DOM概述　312

16．3．2　DOM对象节点属性　313

16．3．3　操作节点　318

16．3．4　获取文档中的指定元素　324

16．4　事件处理　325

16．4．1　事件与事件处理概述　325

16．4．2　DOM事件模型　328

16．4．3　表单相关事件　331

16．4．4　鼠标键盘事件　335

16．4．5　页面事件　339

16．5　综合实例——动态设置网页的标题栏　341

知识点提炼　342

习题　343

第17章　HTML5、CSS3与JavaScript综合应用　344

17．1　综合实例 1——文字升降特效　344

17．2　综合实例 2——闪烁的图片　345

17．3　综合实例 3——左右移动的图片　346

17．4　综合实例 4——自动隐藏菜单　348

17．5　综合实例 5——树状导航菜单　351

17．6　综合实例 6——颜色选择器　353

第18章　课程设计——旅游信息网前台　357

18．1　需求分析　357

18．2　系统设计　357

18．2．1　系统目标　357

18．2．2　网站预览　357

18．3　开发及运行环境　359

18．4　关键技术　360

18．4．1　网站主题结构设计　360

18．4．2　HTML5结构元素的使用　360

18．5　网站公共部分设计　361

18．5．1　设计网站公共header　361

18．5．2　设计网站公共footer　367

18．6　网站主页设计　367

18．6．1　显示网站介绍及相关图片　368

18．6．2　主页左侧导航的实现　369

18．7　“留下足迹”页面设计　371

18．7．1　播放音乐　372

18．7．2　添加留言功能的实现　372

18．8　课程设计总结　374

本书作为HTML5课程的教材，首先用较大篇幅详细讲解了HTML5技术，然后讲解CSS3技术，之后用一定篇幅介绍JavaScript技术，最后讲解三者的搭配应用，并通过大案例综合应用。全书共分18章，内容包括HTML5概述、HTML5的元素与属性、HTML5表单、文件与拖放、绘制图形、HTML5中的多媒体、HTML5的数据存储、离线Web应用和地理定位、CSS3基础、CSS3字体与文本相关属性、CSS3美化背景与边框、变形与动画相关属性、JavaScript概述、JavaScript语言基础、JavaScript内置对象、JavaScript对象编程与事件处理、HTML5、CSS3与JavaScript综合应用、课程设计——旅游信息网前台。全书每章内容都与实例紧密结合，有助于学生理解知识、应用知识，达到学以致用的目的。　　本书附有配套DVD光盘，光盘提供与本书所有实例、综合实例和课程设计的源代码、制作精良的PPT电子课件及教学录像。其中，源代码全部经过精心测试，能够在Windows XP、Windows 2003、Windows 7、Windows 8系统下编译和运行。　　本书可作为本科计算机专业、软件学院、高职软件专业及相关专业的教材，同时也适合网站开发爱好者和初、中级的HTML5网页开发人员参考使用。