HTML5秘籍（第2版） PDF 完整版

内容简介

不依赖插件添加音频和视频，构建适用于所有浏览器的播放页面。

用Canvas创建吸引人的视觉效果，绘制图形、图像、文本，播放动画，运行交互游戏。

用CSS3将页面变活泼，比如添加新奇的字体，利用变换和动画添加吸引人的效果。

设计更出色的Web表单，利用HTML5新增的表单元素更加高效地收集访客信息。

一次开发，多平台运行，实现响应式设计，创建适配桌面计算机、平板电脑和智能手机的网站。

让Web应用拥有桌面应用的特性，通过开发自给自足的离线应用，无论用户能否上网，都可以在本地保存用户信息。

目录

• 前言ix
• 第一部分现代标记
• 第1章HTML5简介2
• 1.1HTML5的故事2
• 1.1.1XHTML1.0：更严格的标准2
• 1.1.2XHTML2：意想不到的失败3
• 1.1.3HTML5：起死回生3
• 1.1.4HTML：活着的语言5
• 1.2HTML5的三个主要原理6
• 1.2.1不破坏Web6
• 1.2.2修补牛蹄子路7
• 1.2.3实用至上7
• 1.3HTML5标记初体验8
• 1.3.1HTML5文档类型9
• 1.3.2字符编码11
• 1.3.3页面语言11
• 1.3.4添加样式表11
• 1.3.5添加JavaScript12
• 1.3.6最终结果13
• 1.4HTML5语法13
• 1.4.1放松的规则13
• 1.4.2HTML5验证14
• 1.4.3XHTML的回归16
• 1.5HTML5元素家族17
• 1.5.1新增的元素18
• 1.5.2删除的元素18
• 1.5.3改变的元素19
• 1.5.4调整的元素20
• 1.5.5标准化的元素21
• 1.6今天开始用HTML521
• 1.6.1了解浏览器支持情况23
• 1.6.2浏览器装机情况统计24
• 1.6.3通过Modernizr检测功能25
• 1.6.4使用“腻子脚本”填补功能缺陷28
• 第2章用语义元素构造网页30
• 2.1语义元素30
• 2.2改造传统的HTML页面32
• 2.2.1构造页面的老办法32
• 2.2.2使用HTML5构造页面35
• 2.2.3用<figure>添加插图38
• 2.2.4用<aside>添加附注40
• 2.3浏览器对语义元素的支持情况42
• 2.3.1为语义元素添加样式43
• 2.3.2使用HTML5“垫片”43
• 2.3.3Modernizr：一站式解决方案44
• 2.4使用语义元素设计站点44
• 2.4.1理解<header>45
• 2.4.2用<nav>标注导航链接47
• 2.4.3理解区块51
• 2.4.4理解<footer>51
• 2.4.5使用<main>标识主要内容54
• 2.5HTML5纲要55
• 2.5.1如何查看纲要55
• 2.5.2基本纲要56
• 2.5.3分块元素58
• 2.5.4解决一个纲要问题60
• 第3章编写更有意义的标记64
• 3.1回顾语义元素64
• 3.1.1使用<time>标注日期和时间65
• 3.1.2使用<output>标注JavaScript返回值67
• 3.1.3使用<mark>标注突显文本68
• 3.2其他语义标准70
• 3.2.1ARIA70
• 3.2.2RDFa71
• 3.2.3微格式71
• 3.2.4微数据72
• 3.3实例：改进“AboutMe”页面75
• 3.4搜索引擎如何使用元数据79
• 3.4.1GoogleRichSnippets79
• 3.4.2增强搜索结果80
• 3.4.3食谱搜索引擎84
• 第4章构建更好的Web表单87
• 4.1理解表单87
• 4.2传统表单翻新89
• 4.2.1通过占位符文本添加提示92
• 4.2.2焦点：挑选正确的起点94
• 4.3验证：阻止错误94
• 4.3.1HTML5验证的原理95
• 4.3.2关闭验证96
• 4.3.3验证样式挂钩97
• 4.3.4使用正则表达式98
• 4.3.5自定义验证99
• 4.4浏览器对Web表单和验证的支持101
• 4.4.1用Modernizr检测支持情况101
• 4.4.2用HTML5Forms兼容102
• 4.5新的输入控件104
• 4.5.1电子邮件地址106
• 4.5.2网址106
• 4.5.3搜索框107
• 4.5.4电话号码107
• 4.5.5数值107
• 4.5.6滑动条108
• 4.5.7日期和时间108
• 4.5.8颜色110
• 4.6新元素110
• 4.6.1使用<datalist>显示输入建议110
• 4.6.2进度条和计量条113
• 4.6.3使用<command>和<menu>创建工具条和菜单115
• 4.7网页中的HTML编辑器115
• 4.7.1使用contenteditable编辑元素115
• 4.7.2使用designMode编辑页面117
• 第二部分视频、图形和特效
• 第5章音频与视频122
• 5.1网络视频的演变122
• 5.2HTML5音频与视频123
• 5.2.1使用<audio>播放点噪音124
• 5.2.2预加载媒体文件125
• 5.2.3自动播放125
• 5.2.4循环播放126
• 5.2.5了解<video>126
• 5.3HTML5媒体格式128
• 5.3.1谈谈格式128
• 5.3.2浏览器对媒体格式的支持情况130
• 5.4后备措施：如何讨好每一款浏览器131
• 5.4.1支持多种格式132
• 5.4.2添加Flash后备措施134
• 5.5使用JavaScript控制播放器137
• 5.5.1添加音效137
• 5.5.2创建自定义视频播放器140
• 5.5.3JavaScript媒体播放器142
• 5.6视频字幕144
• 5.6.1标记时间的文本轨道和WebVTT145
• 5.6.2使用<track>添加字幕146
• 5.6.3浏览器对视频字幕的支持情况148
• 第6章美妙的CSS3字体和特效149
• 6.1使用CSS3149
• 6.1.1选择一：用能用的150
• 6.1.2选择二：将CSS功能作为增强150
• 6.1.3选择三：Modernizr151
• 6.1.4有开发商前缀的特定于浏览器的样式154
• 6.2多变的盒子156
• 6.2.1透明157
• 6.2.2圆角158
• 6.2.3背景159
• 6.2.4阴影160
• 6.2.5渐变162
• 6.3创建过渡效果165
• 6.3.1基本的颜色过渡166
• 6.3.2更多的过渡思路168
• 6.3.3用JavaScript触发过渡168
• 6.3.4变换170
• 6.3.5使用变换的过渡173
• 6.4Web字体174
• 6.4.1Web字体格式176
• 6.4.2给网站找个字体177
• 6.4.3从FontSquirrel获取免费字体177
• 6.4.4准备一个网络字体179
• 6.4.5用谷歌更简单地使用Web字体181
• 6.4.6多栏文本184
• 第7章CSS3与响应式Web设计187
• 7.1响应式设计基础187
• 7.1.1流式布局187
• 7.1.2流式图片191
• 7.1.3流式排版192
• 7.1.4理解视口195
• 7.2使用媒体查询适配布局196
• 7.2.1媒体查询197
• 7.2.2创建简单的媒体查询198
• 7.2.3构建移动设备友好的布局199
• 7.2.4媒体查询的高级条件202
• 7.2.5替换整个样式表204
• 7.2.6识别特定的移动设备205
• 第8章基本Canvas绘图207
• 8.1Canvas起步207
• 8.1.1画直线210
• 8.1.2路径与形状212
• 8.1.3绘制曲线214
• 8.1.4变换217
• 8.1.5透明度220
• 8.1.6合成操作221
• 8.2构建基本的画图程序223
• 8.2.1准备工作224
• 8.2.2在画布上绘图225
• 8.2.3将画布保存为图像226
• 8.3浏览器对Canvas的支持情况229
• 8.3.1用ExplorerCanvas兼容Canvas230
• 8.3.2用FlashCanvas兼容Canvas230
• 8.3.3Canvas后备及功能检测231
• 第9章高级Canvas技术：交互性和动画233
• 9.1高级Canvas绘图233
• 9.1.1绘制图像233
• 9.1.2裁剪、切割和伸缩图片235
• 9.1.3绘制文本237
• 9.2阴影与填充238
• 9.2.1添加阴影238
• 9.2.2填充图案240
• 9.2.3填充渐变241
• 9.2.4综合示例：绘制图解245
• 9.3赋予图形交互能力249
• 9.3.1记录绘制的内容249
• 9.3.2基于坐标的碰撞检测252
• 9.4给Canvas添加动画254
• 9.4.1基本的动画255
• 9.4.2多物体动画256
• 9.5实例：迷宫游戏260
• 9.5.1布置迷宫261
• 9.5.2让笑脸动起来263
• 9.5.3基于像素颜色的碰撞检测265
• 第三部分构建Web应用
• 第10章数据存储270
• 10.1Web存储简介270
• 10.1.1存储数据272
• 10.1.2实战：保存游戏中的最后位置274
• 10.1.3浏览器对Web存储的支持情况275
• 10.2深入Web存储276
• 10.2.1删除数据项276
• 10.2.2查找所有数据项276
• 10.2.3保存数值和日期277
• 10.2.4保存对象278
• 10.2.5响应存储变化279
• 10.3读取文件281
• 10.3.1取得文件282
• 10.3.2用<input>读取文本文件282
• 10.3.3替换标准的上传控件284
• 10.3.4一次读取多个文件285
• 10.3.5通过拖曳读取图片文件285
• 10.3.6浏览器对FileAPI的支持情况288
• 10.4IndexDB：浏览器的数据库引擎288
• 10.4.1数据对象290
• 10.4.2创建并连接数据库291
• 10.4.3在数据库中保存数据293
• 10.4.4在数据表中查询所有数据295
• 10.4.5查询单条数据297
• 10.4.6删除一条数据298
• 10.4.7浏览器对IndexedDB的支持情况299
• 第11章离线应用300
• 11.1通过描述文件缓存资源301
• 11.1.1创建描述文件302
• 11.1.2使用描述文件303
• 11.1.3把描述文件放到Web服务器304
• 11.1.4更新描述文件306
• 11.1.5浏览器对离线应用的支持情况308
• 11.2实用缓存技术309
• 11.2.1访问未缓存的文件309
• 11.2.2添加后备内容310
• 11.2.3检测连接312
• 11.2.4用JavaScript监听更新313
• 第12章与Web服务器通信317
• 12.1向Web服务器发送消息317
• 12.1.1XMLHttpRequest对象318
• 12.1.2向Web服务器提问319
• 12.1.3取得新内容323
• 12.2服务器发送事件326
• 12.2.1消息格式327
• 12.2.2通过服务器脚本发送消息328
• 12.2.3在网页中处理消息330
• 12.2.4轮询服务器端事件331
• 12.3WebSocket333
• 12.3.1WebSocket服务器333
• 12.3.2简单的WebSocket客户端334
• 12.3.3使用现成的WebSocket服务器335
• 第13章地理定位、WebWorker和历史管理339
• 13.1地理定位339
• 13.1.1地理定位的基本原理340
• 13.1.2查找访客的坐标342
• 13.1.3处理错误344
• 13.1.4设置地理定位选项345
• 13.1.5显示地图346
• 13.1.6跟踪访客移动349
• 13.1.7浏览器对地理定位的兼容情况349
• 13.2WebWorker350
• 13.2.1费时的任务351
• 13.2.2把任务放在后台353
• 13.2.3处理Worker错误356
• 13.2.4取消后台任务356
• 13.2.5传递复杂消息357
• 13.2.6浏览器对WebWorker的兼容情况359
• 13.3历史管理360
• 13.3.1URL问题361
• 13.3.2以往的解决方案：hashbangURL362
• 13.3.3HTML5的方案：会话历史363
• 13.3.4浏览器对会话历史的支持情况366
• 第四部分附录
• 附录ACSS基础368
• 附录BJavaScript：页面的大脑381