《HTML5+CSS3从入门到精通》(清华社“视频大讲堂”大系)通过基础知识+中小实例+ 综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的**知识,相对于权威指南、**程序设计、开发指南同类图书,本书是一本适合快速入手的自学教程。内容有:创建HTML5文档,实战HTML5表单,实战 HTML5绘画,HTML5音频与视频,Web存储,离线应用,Workers多线程处理,Geolocation地理位置等技术。CSS3部分主要介绍了CSS3概述,CSS选择器,文本、字体与颜色,背景和边框,2D变形,设计动画,网页布局、用户界面以及CSS3的其他新特性。
《HTML5+CSS3从入门到精通》内容涵盖了 HTML5+CSS3的所有重要特性,通过大量实际案例对 HTML5+CSS3的重要特性进行了详细讲解,内容全面丰富,易于理解,能够帮助读者提升实际应用技能。
《HTML5+CSS3从入门到精通》内容翔实、结构清晰、循序渐进,基础知识与案例实战紧密结合,既可作为HTML5+CSS3初学者的入门教材,也适合作为中**用户对新技术作进一步学习的参考用书。本书显著特色有: 1.同步视

第1章Web开发新时代1
1.1HTML5概述2
1.1.1HTML5新特性2
1.1.2HTML5组织3
1.1.3HTML5构成4
1.2HTML5设计原理4
1.2.1HTML开发历程5
1.2.2HTML5开发动力6
1.2.3HTML5设计理念7
1.3编写**个HTML5页面14
1.3.1搭建上机练习环境14
1.3.2检测浏览器是否支持14
1.3.3使用HTML5编写简单的Web页面15
1.4HTML5页面的特征17
1.4.1使用HTML5结构化元素17
1.4.2使用CSS美化HTML5文档19
第2章从HTML、XHTML到HTML521
视频讲解：2小时
2.1HTML基础22
2.1.1HTML简介22
2.1.2HTML特性22
2.1.3HTML结构23
2.1.4HTML语法23
2.1.5HTML标签25
2.1.6HTML属性29
2.2XHTML基础32
2.2.1XHTML结构32
2.2.2XHTML语法33
2.2.3XHTML类型34
2.2.4DTD解析35
2.2.5命名空间37
2.3HTML5基础38
2.3.1HTML5语法38
2.3.2HTML5元素40
2.3.3HTML5增加及废除的属性46
2.3.4HTML5全局属性48
2.3.5HTML5其他功能50
第3章创建HTML5文档54
视频讲解：1小时13分钟
3.1认识HTML5文档结构55
3.2HTML5元素分类58
3.3构建主体内容59
3.3.1标识文章59
3.3.2给内容分段61
3.3.3设计导航信息64
3.3.4设计辅助信息66
3.3.5设计微格式67
3.3.6添加发布日期68
3.4添加语义模块69
3.4.1添加标题块69
3.4.2给标题分组70
3.4.3添加脚注块70
3.4.4添加联系信息71
3.5综合实战：使用HTML5设计博客主页72
3.5.1设计大纲73
3.5.2设计样式76
第4章实战HTML5表单79
视频讲解：1小时08分钟
4.1新增的input输入类型80
4.1.1email类型的应用80
4.1.2url类型的应用82
4.1.3number类型的应用83
4.1.4range类型的应用84
4.1.5日期检出器类型的应用85
4.1.6search类型的应用90
4.1.7tel类型的应用91
4.1.8color类型的应用92
4.2新增的input属性93
4.2.1新增的autocomplete属性93
4.2.2新增的autofocus属性95
4.2.3新增的form属性96
4.2.4新增的表单重写属性97
4.2.5新增的height与width属性98
4.2.6新增的list属性98
4.2.7新增的min、max和step属性99
4.2.8新增的multiple属性100
4.2.9新增的pattern属性101
4.2.10新增的placeholder属性101
4.2.11新增的required属性102
4.3新增的form元素103
4.3.1新增的datalist元素103
4.3.2新增的keygen元素103
4.3.3新增的output元素104
4.4新增的form属性105
4.4.1新增的autocomplete属性105
4.4.2新增的novalidate属性105
第5章实战HTML5画布106
视频讲解：2小时
5.1认识HTML5canvas元素107
5.1.1在页面中添加canvas元素107
5.1.2Canvas如何绘制图形108
5.1.3认识Canvas坐标109
5.1.4何时不用Canvas109
5.1.5如果浏览器不支持Canvas110
5.1.6检测浏览器支持110
5.2绘制简单图形111
5.2.1绘制直线111
5.2.2绘制矩形112
5.2.3绘制圆形113
5.2.4绘制三角形115
5.2.5清空画布116
5.3绘制贝塞尔曲线117
5.3.1绘制二次方贝塞尔曲线118
5.3.2绘制三次方贝塞尔曲线119
5.4图形的变换120
5.4.1保存与恢复Canvas状态120
5.4.2移动坐标空间121
5.4.3旋转坐标空间123
5.4.4缩放图形125
5.4.5矩阵变换126
5.5图形的组合与裁切129
5.5.1图形的组合129
5.5.2裁切路径132
5.6更多的颜色和样式选项133
5.6.1应用不同的线型133
5.6.2绘制线性渐变138
5.6.3绘制径向渐变139
5.6.4绘制图案140
5.6.5设置图形的透明度141
5.6.6创建阴影142
5.7绘制文字144
5.7.1绘制填充文字144
5.7.2文字相关属性145
5.7.3绘制轮廓文字145
5.7.4测量文字宽度146
5.8操作与使用图像147
5.8.1向Canvas中引入图像147
5.8.2改变图像大小149
5.8.3创建图像切片150
第6章HTML5音频与视频152
视频讲解：50分钟
6.1HTML5多媒体技术概述153
6.1.1关于编解码器153
6.1.2音频编解码器153
6.1.3视频编解码器154
6.2浏览器支持概述156
6.2.1用JavaScript检测音频格式支持情况157
6.2.2用JavaScript检测视频格式支持情况158
6.3在HTML5中播放音频159
6.3.1认识audio元素159
6.3.2播放音频160
6.4在HTML5中播放视频161
6.4.1认识video元素161
6.4.2播放视频162
6.5音频与视频相关属性、方法与事件164
6.5.1音频与视频相关属性164
6.5.2音频与视频相关方法167
6.5.3音频与视频相关事件168
6.6综合实战169
6.6.1用脚本控制音乐播放169
6.6.2查看视频帧画面170
第7章Web存储175
视频讲解：1小时20分钟
7.1认识WebStorage176
7.1.1Cookie存储机制的优缺点176
7.1.2为什么要用WebStorage176
7.1.3WebStorage的优缺点177
7.1.4浏览器支持概述177
7.2使用WebStorage178
7.2.1检查浏览器的支持性178
7.2.2设置和获取数据180
7.2.3防止数据泄露181
7.2.4WebStorage的其他用法181
7.2.5WebStorage事件监测182
7.2.6实例1：设计网页皮肤183
7.2.7实例2：跟踪localStorage数据184
7.2.8实例3：设计计数器186
7.2.9综合应用：Web应用项目实时跟踪187
7.3WebSQL数据库192
7.3.1WebSQL数据库概述192
7.3.2使用WebSQL数据库193
7.3.3实例1：创建简单的本地数据库195
7.3.4实例2：批量存储本地数据198
7.3.5综合应用：WebStorage和
WebSQL混合开发199
第8章离线应用207
视频讲解：23分钟
8.1HTML5离线应用概述208
8.1.1为什么要学习HTML5离线应用208
8.1.2浏览器支持概述209
8.2HTML5离线应用详解210
8.2.1解析manifest文件210
8.2.2搭建离线应用程序213
8.2.3检查浏览器是否支���213
8.2.4离线缓存更新实现213
8.2.5JavaScript接口实现214
8.2.6离线存储事件监听217
8.3实战1：缓存首页218
8.4实战2：离线编辑内容221
8.5实战3：离线跟踪225
第9章Workers多线程处理231
视频讲解：1小时01分钟
9.1认识WebWorkers232
9.1.1WebWorkers概述232
9.1.2浏览器支持概述233
9.1.3熟悉WebWorkers成员233
9.2使用WebWorkers234
9.2.1检查浏览器支持性234
9.2.2创建WebWorkers234
9.2.3与WebWorkers通信235
9.2.4使用WebWorkers上机练习237
9.3案例实战240
9.3.1使用多线程实现后台运算240
9.3.2在后台过滤值242
9.3.3多任务并发处理243
9.3.4在多线程之间通信246
9.3.5使用线程技术计算Fibonacci数列248
9.3.6使用多线程绘图249
9.4综合应用：模拟退火算法253
9.4.1认识模拟退火算法253
9.4.2编写应用主页面254
9.4.3编写worker.js256
9.4.4与WebWorkers通信257
第10章Geolocation地理位置261
10.1位置信息概述262
10.1.1为什么要学习Geolocation262
10.1.2位置信息表示方式262
10.1.3位置信息来源262
10.1.4IP定位263
10.1.5GPS定位263
10.1.6Wi—Fi定位263
10.1.7手机定位264
10.1.8自定义定位264
10.2使用GeolocationAPI264
10.2.1检查浏览器支持性264
10.2.2获取当前地理位置265
10.2.3监视位置信息267
10.2.4停止获取位置信息267
10.2.5隐私保护267
10.2.6处理位置信息267
10.2.7使用position对象268
10.3案例实战269
10.3.1使用Google地图269
10.3.2跟踪行走速度271
第11章CSS3概述277
视频讲解：1小时01分钟
11.1回顾CSS278
11.1.1CSS发展简史278
11.1.2CSS1.0和CSS2.0概述278
11.1.3CSS与DIV标记之缘285
11.1.4CSS编码规范288
11.2了解CSS3新增特性289
11.2.1属性选择器289
11.2.2RBGA透明度291
11.2.3多栏布局292
11.2.4多背景图片294
11.2.5字符串溢出295
11.2.6块阴影与圆角阴影296
11.2.7圆角297
11.2.8边框图片298
11.2.9形变299
11.3CSS3前景展望301
11.3.1CSS3的应用范围302
11.3.2当前支持CSS3的浏览器303
11.4案例实战：设计漂亮的表单305
第12章CSS选择器310
视频讲解：34分钟
12.1属性选择器311
12.1.1认识属性选择器311
12.1.2案例实战312
12.2结构伪类选择器314
12.2.1认识结构伪类选择器314
12.2.2案例实战315
12.3UI伪类选择器321
12.3.1认识常用UI伪类选择器321
12.3.2案例实战322
12.4其他选择器324
第13章文本、字体与颜色330
视频讲解：49分钟
13.1设计文本阴影331
13.1.1定义text—shadow属性331
13.1.2应用阴影效果333
13.1.3综合实战：设计黑客网站首页339
13.2定义文本样式341
13.2.1文本样式简介341
13.2.2溢出文本345
13.2.3文本换行347
13.3设计颜色样式353
13.3.1使用RGBA颜色值353
13.3.2使用HSL颜色值355
13.3.3使用HSLA颜色值359
13.3.4定义opacity属性360
13.3.5定义transparent颜色值363
第14章背景和边框365
视频讲解：1小时09分钟
14.1设计多色边框366
14.1.1用法详解366
14.1.2案例实战368
14.2设计边框背景368
14.2.1用法详解369
14.2.2案例实战372
14.3设计圆角375
14.3.1用法详解376
14.3.2案例实战：设计椭圆图形379
14.4设计阴影380
14.4.1用法详解380
14.4.2案例实战：设计Windows7界面效果385
14.5设计背景390
14.5.1定义背景坐标390
14.5.2定义背景裁剪区域392
14.5.3定义背景图像大小395
14.5.4定义背景图像循环方式396
14.5.5定义多背景图像398
第15章2D变形400
视频讲解：31分钟
15.1认识transform401
15.22D变形402
15.2.1旋转动画403
15.2.2缩放动画404
15.2.3移动动画406
15.2.4倾斜动画408
15.2.5变形动画410
15.2.6案例实战：设计涂鸦墙412
15.3自定义变形414
15.4定义复杂变形416
第16章设计动画420
视频讲解：1小时20分钟
16.1平滑过渡421
16.1.1定义过渡属性421
16.1.2定义过渡时间422
16.1.3定义过渡延迟时间423
16.1.4定义过渡效果424
16.1.5案例实战：设计MacOS导航器426
16.23D动画428
16.2.1定义动画名称429
16.2.2定义动画时间429
16.2.3定义动画播放方式429
16.2.4定义动画延迟时间429
16.2.5定义动画播放次数430
16.2.6定义动画播放方向430
16.2.7案例实战：设计图片翻转**430
16.3渐变效果431
16.3.1设计Webkit渐变432
16.3.2Webkit案例实战437
16.3.3设计Gecko渐变440
16.3.4Gecko案例实战446
16.3.5设计IE渐变447
16.3.6设计W3C渐变449
16.4案例综合实战449
16.4.1设计礼品盒450
16.4.2设计折叠面板452
16.4.3设计易拉罐454
16.4.4设计光盘滑动动画457
16.4.5设计下拉菜单461
16.4.6设计精致按钮465
第17章网页布局468
视频讲解：40分钟
17.1设计多列布局469
17.2设置多列显示样式471
17.2.1定义列宽471
17.2.2定义列数472
17.2.3定义列间距473
17.2.4定义列边框样式475
17.2.5定义跨列显示476
17.2.6定义列高度478
17.2.7定义打印列480
17.3设计盒布局481
17.4设置盒布局格式485
17.4.1定义自适应宽度485
17.4.2定义列显示顺序487
17.4.3定义列排列方向489
17.4.4定义模块大小自适应491
17.4.5消除空白493
17.4.6定义对齐方式497
17.5综合实战：设计多列网页498
第18章用户界面506
视频讲解：35分钟
18.1改变盒模型组成方式507
18.2调节元素尺寸507
18.3设计轮廓509
18.3.1定义轮廓线509
18.3.2定义轮廓线宽度512
18.3.3定义轮廓线样式512
18.3.4定义轮廓线颜色513
18.3.5定义轮廓线位移513
18.4设计导航516
18.4.1定义导航顺序516
18.4.2定义方向键控制顺序519
18.5添加显示内容521
18.6恢复默认样式522
18.6.1取消元素样式522
18.6.2慎用initial的情况524
第19章CSS3其他新特性527
视频讲解：40分钟
19.1溢出处理528
19.2自定义字体类型530
19.2.1使用@font—face规则530
19.2.2开放字体532
19.3定义设备类型532
19.3.1认识MediaQueries模块532
19.3.2认识@media规则533
19.3.3使用@media规则535
19.3.4在网站中应用@media规则537
19.4添加语音功能543
19.5设计倒影545

9.1 认识Web Workers
Web Workers为网页脚本提供了一种能在后台进程中运行的方法。当创建WoOer对象后，WebwbrkerS就可以通过postMessage方法向任务池发送任务请求，执行完之后再通过postMessage返回消息给创建者指定的事件处理程序，然后通过onmessage捕获返回消息，实现前后台数据的交互。
9.1.1 Web Workers概述
在Web应用程序中，Web WoOers是一项后台处理技术。在此之前使用JavaScript创建的W曲程序中，因为所有的处理都是在单线程内执行，所以如果脚本所需运行时间太长，程序界面会长时间处于停止响应状态，甚至当等待时间超出一定的限度，浏览器会提示脚本运行时间过长需要中断正在执行的处理。
为了解决这个问题，HTML5新增了一个Web WorkersAPI。使用这个API，用户可以很容易地创建在后台运行的线程，这个线程被称为Worker，如果将可能耗费较长时间的处理交给后台执行，则对用户在前台页面中执行的操作没有影响。
尽管Web Workers功能强大，但也不是**的，例如，在Web Workers中执行的脚本不能访问该页面的window对象，因此Web Workers不能直接访问Web页面和DOM API，虽然Web Workers不会导致浏览器UI停止响应，但是仍然会消耗CPU周期，导致系统反应速度变慢。
如果开发人员创建的Web应用程序需要执行一些后台数据处理，但又不希望这些数据处理任务影响Web页面本身的交互性，那么可以通过Web Workers生成一个WoOer去执行数据处理任务。同时添加一个事件监听器进行监听，并与之进行数据交互。
Web Workers的另一个用途是可以监听由后台服务器广播的消息，收到后台服务器的消息后，将其显示在Web页面上。这种与后台服务器对话的场景，Web Workers可能会使用到Web Sockets或Server—Sent事件。
Web Workers接口可以创建真正的系统级别的进程，还可以使用XMLHttpRequest来处理I／O，无论responseXML和channel属性是否为null。使用它可以很容易设计并发操作效果，这将会很有趣。例如，在做网站下载的时候使用Worker，或者使用Worker实现处理扩展功能。
注意：后台进程（包括Web Workers进程）不能对DOM进行操作。如果希望后台程序处理的结果能够改变DOM，只能通过返回消息给创建者的回调函数进行处理。
Web Workers能够为用户做些什么？
加载一个JavaScript文件，进行大量的复杂计算，而不挂起主进程，并通过postMessage和onMessage进行通信。
可以在WoOer中通过importScripts（url）方法加载JavaScript脚本文件。
可以使用setTimeout（）、clearTimeout（）、setInterval（）和clearInterval（）。
可以使用XMLHttpRequest进行异步请求。
可以访问navigator的部分属性。
可以使用JavaScript核心对象。
web Workers的局限性：
不能跨域加载JavaScriot。

李东博
获得过微软办公软件专家、Adobe平面设计师、平面设计讲师认证,曾任山东省济南市计算机协会网络教育**教学主任/讲师,主讲Photoshop、Illustrator、PageMaker、Acrobat、Dreamweaver、Flash、Fireworks等课程。曾在青岛银河网络教育**主办两期Adobe平面设计培训班、在青岛倍来通电脑培训**主讲Office办公软件及Adobe平面设计软件、担任青岛本色广告公司培训部平面设计讲师等。另外,长期在天极网、eNet、IT168、太平洋电脑网及一些电脑类报纸杂志发表新技术教程文章。