实战系列:HTML 5与CSS 3权威指南.pdf

实战系列:HTML 5与CSS 3权威指南.pdf
 

书籍描述

编辑推荐
《实战系列:HTML 5与CSS 3权威指南(第2版•上册)》编辑推荐:畅销书全新升级,第1版上市后已印刷近10次,累计销量超过50000册,是该领域公认的标杆之作,销量和口碑都极佳。资深专家撰写,内容系统而全面,详尽讲解了HTML 5与CSS 3的所有功能和特性;注重实战,不仅包含大量辅助理解的小案例,而且还包含两个综合性案例,可操作性极强。

作者简介
陆凌牛,资深Web开发工程师、软件开发工程师和系统设计师。从事Web开发多年,对各种Web开发技术(包括前端和后端)都有非常深入的研究,经验极其丰富。HTML 5和CSS 3等新技术的先驱者和布道者,不仅对HTML 5与CSS 3有非常深入的研究,而且对Sencha Touch等移动应用开发框架也有非常深刻的认识,并且付诸了大量实践。同时,他还擅长微软与Java的相关技术,在C#、VB.NET、ASP.NET、SQL Server、Oracle、Java、Struts、Spring、Hibernate等方面也积累大量的实战经验。
此外,他还是一位颇有影响力的技术作家:
(1)处女作《HMTL 5与CSS 3权威指南》凭借优质的内容获得了读者广泛的好评,印刷近10次,销量超过50000册,被读者誉为“系统学习HTML 5与CSS 3的最佳选择”和“Web前端工程师案头必备图书之一”,不仅是HTML 5与CSS 3领域的领头羊和标杆,而且是近年来原创计算机图书领域的一面旗帜;
(2)第2本著作《HTML 5开发精要与案例详解》不仅在内容上延续了前一本书的精彩,而其同样也取得了非常好的口碑和销量,已经两次重印,销量万余册。
(3)第3本著作《Sencha Touch权威指南》是该领域的第一本著作,也是唯一一本著作,内容非常全面,且极具实战性,销售势头也非常不错。

目录
前言
上册
第1章 Web时代的变迁 1
1.1 迎接新的Web时代 2
1.1.1 HTML 5时代即将来临 2
1.1.2 HTML 5的目标 4
1.2 HTML 5会深受欢迎的理由 4
1.2.1 世界知名浏览器厂商对HTML 5的支持 4
1.2.2 第一个理由:时代的要求 5
1.2.3 第二个理由:Internet Explorer 8 6
1.3 可以放心使用HTML 5的三个理由 6
1.4 HTML 5要解决的三个问题 7
第2章 HTML 5与HTML 4的区别 8
2.1 语法的改变 9
2.1.1 HTML 5的语法变化 9
2.1.2 HTML 5中的标记方法 10
2.1.3 HTML 5确保了与之前HTML版本的兼容性 10
2.1.4 标记示例 12
2.2 新增的元素和废除的元素 12
2.2.1 新增的结构元素 12
2.2.2 新增的其他元素 14
2.2.3 新增的input元素的类型 18
2.2.4 废除的元素 18
2.3 新增的属性和废除的属性 19
2.3.1 新增的属性 19
2.3.2 废除的属性 21
2.4 全局属性 22
2.4.1 contentEditable属性 22
2.4.2 designMode属性 24
2.4.3 hidden属性 24
2.4.4 spellcheck属性 24
2.4.5 tabindex属性 25
第3章 HTML 5的结构 26
3.1 新增的主体结构元素 27
3.1.1 article元素 27
3.1.2 section元素 29
3.1.3 nav元素 31
3.1.4 aside元素 /32
3.1.5 time元素与微格式 34
3.1.6 pubdate属性 35
3.2 新增的非主体结构元素 35
3.2.1 header元素 36
3.2.2 hgroup元素 37
3.2.3 footer元素 37
3.2.4 address元素 38
3.3 HTML 5结构 39
3.3.1 大纲 39
3.3.2 大纲的编排规则 44
3.3.3 对新的结构元素使用样式 47
第4章 表单及其他新增和改良元素 48
4.1 新增元素与属性 49
4.1.1 新增属性 49
4.1.2 大幅度地增加与改良input元素的种类 61
4.1.3 对新的表单元素使用样式 71
4.1.4 output元素的追加 72
4.2 表单验证 73
4.2.1 自动验证 73
4.2.2 取消验证 73
4.2.3 显式验证 74
4.3 增强的页面元素 74
4.3.1 新增的figure元素与figcaption元素 75
4.3.2 新增的details元素与summary元素 76
4.3.3 新增的mark元素 77
4.3.4 新增的progress元素 80
4.3.5 新增的meter元素 81
4.3.6 改良的ol列表 82
4.3.7 改良的dl列表 83
4.3.8 加以严格限制的cite元素 85
4.3.9 重新定义的small元素 85
4.3.10 安全性增强的iframe元素 86
4.3.11 增强的script元素 89
第5章 HTML编辑API 94
5.1 Range对象与Selection对象 95
5.1.1 基本概念 95
5.1.2 Range对象的属性与方法 97
5.1.3 Selection对象的属性与方法 118
5.2 命令 128
5.2.1 基本概念 128
5.2.2 execCommand方法 128
5.2.3 queryCommandSupported方法 129
5.2.4 queryCommandState方法 130
5.2.5 queryCommandIndeterm方法 131
5.2.6 queryCommandEnabled方法 133
5.2.7 queryCommandValue方法 135
5.2.8 可以在各种浏览器中运行的所有命令 136
第6章 绘制图形 136
6.1 canvas元素的基础知识 138
6.1.1 在页面中放置canvas元素 138
6.1.2 绘制矩形 139
6.2 使用路径 141
6.2.1 绘制圆形 141
6.2.2 如果没有关闭路径会怎么样 143
6.2.3 moveTo与lineTo 145
6.2.4 使用bezierCurveTo绘制贝济埃曲线 146
6.3 绘制渐变图形 148
6.3.1 绘制线性渐变 148
6.3.2 绘制径向渐变 150
6.4 绘制变形图形 151
6.4.1 坐标变换 151
6.4.2 坐标变换与路径的结合使用 153
6.4.3 矩阵变换 154
6.5 图形组合 158
6.6 给图形绘制阴影 160
6.7 使用图像 162
6.7.1 绘制图像 162
6.7.2 图像平铺 164
6.7.3 图像裁剪 166
6.7.4 像素处理 168
6.8 绘制文字 170
6.9 补充知识 172
6.9.1 保存与恢复状态 172
6.9.2 保存文件 173
6.9.3 简单动画的制作 174
第7章 History API 177
7.1 History API的基本概念 178
7.2 History API使用示例 179
7.2.1 使用History API 179
7.2.2 结合使用Canvas API与History API 188
第8章 本地存储 193
8.1 Web Storage 194
8.1.1 Web Storage概述 194
8.1.2 简单Web留言本 197
8.1.3 作为简易数据库来利用 200
8.1.4 利用storage事件实时监视Web Storage中的数据 202
8.2 本地数据库 204
8.2.1 本地数据库的基本概念 204
8.2.2 用executeSql来执行查询 205
8.2.3 使用数据库实现Web留言本 206
8.2.4 transaction方法中的处理 209
8.3 indexedDB数据库 211
8.3.1 indexedDB数据库的基本概念 211
8.3.2 连接数据库 211
8.3.3 数据库的版本更新 213
8.3.4 创建对象仓库 218
8.3.5 创建索引 222
8.3.6 索引的multiEntry属性值 226
8.3.7 使用事务 227
8.3.8 保存数据 229
8.3.9 获取数据 232
8.3.10 根据主键值检索数据 235
8.3.11 根据索引属性值检索数据 241
8.3.12 复合索引 246
8.3.13 统计对象仓库中的数据数量 250
8.3.14 使用indexedDB API制作Web留言本 252
第9章 离线应用程序 259
9.1 离线Web应用程序详解 260
9.1.1 新增的本地缓存 260
9.1.2 本地缓存与浏览器网页缓存的区别 260
9.2 manifest文件 261
9.3 浏览器与服务器的交互过程 263
9.4 applicationCache对象 264
9.4.1 swapCache方法 265
9.4.2 applicationCache对象的事件 267
第10章 文件API 270
10.1 FileList对象与file对象 271
10.2 ArrayBuffer对象与ArrayBufferView对象 272
10.2.1 基本概念 272
10.2.2 ArrayBuffer对象 272
10.2.3 ArrayBufferView对象 273
10.2.4 DataView对象 274
10.3 Blob对象与BlobBuilder对象 278
10.3.1 Blob对象 278
10.3.2 BlobBuilder对象 280
10.3.3 Blob对象的slice方法 283
10.4 FileReader对象 284
10.4.1 FileReader对象的方法 284
10.4.2 FileReader对象的事件 285
10.4.3 FileReader对象的使用示例 285
10.5 FileSystem API 292
10.5.1 FileSystem API概述 292
10.5.2 FileSystem API的适用场合 292
10.5.3 请求访问文件系统 293
10.5.4 申请磁盘配额 296
10.5.5 创建文件 300
10.5.6 写入文件 302
10.5.7 在文件中追加数据 305
10.5.8 读取文件 307
10.5.9 复制磁盘中的文件 309
10.5.10 删除文件 311
10.5.11 创建目录 312
10.5.12 读取目录中的内容 316
10.5.13 删除目录 319
10.5.14 复制文件或目录 321
10.5.15 移动文件或目录与重命名文件或目录 323
10.5.16 filesystem:URL前缀 326
10.5.17 综合案例 328
10.6 Base64编码支持 336
10.6.1 Base64编码概述 336
10.6.2 在HTML 5中支持Base64编码 338
第11章 通信API 342
11.1 跨文档消息传输 343
11.1.1 跨文档消息传输的基本知识 343
11.1.2 跨文档消息传输示例 344
11.1.3 通道通信 346
11.2 WebSockets通信 350
11.2.1 WebSockets通信的基本知识 350
11.2.2 使用WebSockets API 350
11.2.3 WebSockets API使用示例 351
11.2.4 发送对象 353
11.2.5 发送与接收原始二进制数据 354
11.2.6 实现WebSockets API的开发框架 355
11.2.7 WebSocket 协议 355
11.2.8 WebSockets API的适用场景 356
11.3 Server-Sent Events API 356
11.3.1 Server-Sent Events API的基本概念 356
11.3.2 Server-Sent Events API的实现方法 356
11.3.3 事件ID的使用示例 363
第12章 扩展的XMLHttpRequest API 366
12.1 从服务器端获取二进制数据 367
12.1.1 ArrayBuffer响应 368
12.1.2 Blob响应 373
12.2 发送数据 374
12.2.1 发送字符串 374
12.2.2 发送表单数据 376
12.2.3 上传文件 378
12.2.4 发送Blob对象 379
12.2.5 发送ArrayBuffer对象 381
12.3 跨域数据请求 385
第13章 使用Web Workers处理线程 388
13.1 基础知识 389
13.2 与线程进行数据的交互 392
13.3 线程嵌套 394
13.3.1 单层嵌套 395
13.3.2 在多个子线程中进行数据的交互 397
13.4 线程中可用的变量、函数与类 398
13.5 适用场合 399
13.6 SharedWorker 399
13.6.1 基础知识 399
13.6.2 实现前台页面与后台线程之间的通信 400
13.6.3 定义页面与共享的后台线程开始通信时的处理 400
13.6.4 SharedWorker的使用示例 401
第14章 获取地理位置信息 406
14.1 Geolocation API的基本知识 407
14.1.1 取得当前地理位置 407
14.1.2 持续监视当前地理位置的信息 409
14.1.3 停止获取当前用户的地理位置信息 409
14.2 position对象 409
14.3 在页面上使用google地图 411
第15章 多媒体相关API 414
15.1 多媒体播放 415
15.1.1 video元素与audio元素的基础知识 415
15.1.2 属性 417
15.1.3 方法 421
15.1.4 事件 423
15.2 Web Audio API 426
15.2.1 AudioContext对象 426
15.2.2 加载声音 427
15.2.3 播放声音 428
15.2.4 将声音加载处理封装在类中 429
15.2.5 控制节奏 431
15.2.6 控制音量 433
15.2.7 两个声音的交叉混合 436
15.2.8 多个音频文件之间的平滑过渡 439
15.2.9 对音频使用滤波处理 443
第16章 与页面显示相关的API 447
16.1 Page Visibility API 448
16.1.1 Page Visibility API概述 448
16.1.2 Page Visibility API的使用场合 448
16.1.3 实现Page Visibility API 448
16.2 Fullscreen API 451
16.2.1 Fullscreen API概述 451
16.2.2 实现Fullscreen API 451
16.2.3 Fullscreen API代码使用示例 454
第17章 拖放API与通知API 457
17.1 拖放API 458
17.1.1 实现拖放的步骤 458
17.1.2 DataTransfer对象的属性与方法 461
17.1.3 设定拖放时的视觉效果 461
17.1.4 自定义拖放图标 462
17.2 通知API 463
17.2.1 通知API的基础知识 463
17.2.2 通知API的代码使用示例 465
下 册
第18章 CSS 3概述 467
18.1 概要介绍 468
18.1.1 CSS 3是什么 468
18.1.2 CSS 3的历史 468
18.2 使用CSS 3能做什么 469
18.2.1 模块与模块化结构 469
18.2.2 一个简单的CSS 3示例 470
第19章 选择器 473
19.1 选择器概述 475
19.2 属性选择器 475
19.2.1 属性选择器概述 475
19.2.2 CSS3中的属性选择器 477
19.2.3 灵活运用属性选择器 478
19.3 结构性伪类选择器 479
19.3.1 CSS中的伪类选择器及伪元素 479
19.3.2 选择器root、not、empty和target 483
19.3.3 选择器:first-child、last-child、nth-child和nth-last-child 488
19.3.4 选择器:nth-of-type和nth-last-of-type 492
19.3.5 循环使用样式 494
19.3.6 only-child选择器 496
19.4 UI元素状态伪类选择器 498
19.4.1 选择器:E:hover、E:active和E:focus 498
19.4.2 E:enabled伪类选择器与E:disabled伪类选择器 500
19.4.3 E:read-only伪类选择器与E:read-write伪类选择器 501
19.4.4 伪类选择器:E:checked、E:default和E:indeterminate 502
19.4.5 E::selection伪类选择器 505
19.4.6 E:invalid伪类选择器与E:valid伪类选择器 506
19.4.7 E:required伪类选择器与E:optional伪类选择器 507
19.4.8 E:in-range伪类选择器与E:out-of-range伪类选择器 508
19.5 通用兄弟元素选择器 509
第20章 使用选择器在页面中插入内容 511
20.1 使用选择器来插入文字 512
20.1.1 使用选择器来插入内容 512
20.1.2 指定个别元素不进行插入 513
20.2 插入图像文件 514
20.2.1 在标题前插入图像文件 514
20.2.2 插入图像文件的好处 515
20.2.3 将alt属性的值作为图像的标题来显示 517
20.3 使用content属性来插入项目编号 518
20.3.1 在多个标题前加上连续编号 518
20.3.2 在项目编号中追加文字 519
20.3.3 指定编号的样式 519
20.3.4 指定编号的种类 519
20.3.5 编号嵌套 520
20.3.6 中编号中嵌入大编号 521
20.3.7 在字符串两边添加嵌套文字符号 523
第21章 文字与字体相关样式 525
21.1 给文字添加阴影—text-shadow属性 526
21.1.1 text-shadow属性的使用方法 526
21.1.2 位移距离 528
21.1.3 阴影的模糊半径 528
21.1.4 阴影的颜色 529
21.1.5 指定多个阴影 529
21.2 让文本自动换行—word-break属性 530
21.2.1 依靠浏览器让文本自动换行 530
21.2.2 指定自动换行的处理方法 530
21.3 让长单词与URL地址自动换行—word-wrap属性 532
21.4 使用服务器端字体—Web Font与@font-face属性 532
21.4.1 在网页上显示服务器端字体 532
21.4.2 定义斜体或粗体字体 534
21.4.3 显示客户端本地的字体 536
21.4.4 属性值的指定 537
21.5 修改字体种类而保持字体尺寸不变—font-size-adjust属性 538
21.5.1 字体不同导致文字大小的不同 538
21.5.2 font-size-adjust属性的使用方法 540
21.5.3 浏览器对于aspect值的计算方法 540
21.5.4 font-size-adjust属性的使用示例 541
第22章 盒相关样式 543
22.1 盒的类型 544
22.1.1 盒的基本类型 544
22.1.2 inline-block类型 545
22.1.3 inline-table类型 552
22.1.4 list-item类型 554
22.1.5 run-in类型与compact类型 555
22.1.6 表格相关类型 556
22.1.7 none类型 558
22.1.8 各种浏览器对于各种盒类型的支持情况 559
22.2 对于盒中容纳不下的内容的显示 560
22.2.1 overflow属性 560
22.2.2 overflow-x属性与overflow-y属性 562
22.2.3 text-overflow属性 563
22.3 对盒使用阴影 565
22.3.1 box-shadow属性的使用方法 565
22.3.2 将参数设定为0 566
22.3.3 对盒内子元素使用阴影 567
22.3.4 对第一个文字或第一行使用阴影 568
22.3.5 对表格及单元格使用阴影 568
22.4 指定针对元素的宽度与高度的计算方法 570
22.4.1 box-sizing属性 570
22.4.2 为什么要使用box-sizing属性 572
第23章 背景与边框相关样式 574
23.1 与背景相关的新增属性 575
23.1.1 指定背景的显示范围—background-clip属性 575
23.1.2 指定绘制背景图像的绘制起点—background-origin属性 577
23.1.3 指定背景图像的尺寸—background-size属性 579
23.2 在一个元素中显示多个背景图像 582
23.3 圆角边框的绘制 583
23.3.1 border-radius属性 583
23.3.2 在border-radius属性中指定两个半径 584
23.3.3 不显示边框时 585
23.3.4 修改边框种类时 585
23.3.5 绘制四个角不同半径的圆角边框 585
23.4 使用图像边框 586
23.4.1 border-image属性 586
23.4.2 border-image属性的最简单的使用方法 587
23.4.3 使用border-image属性来指定边框宽度 589
23.4.4 中央图像的自动拉伸 590
23.4.5 指定四条边中图像的显示方法 591
23.4.6 使用背景图像 594
第24章 CSS 3中的变形处理 596
24.1 transform功能的基础知识 597
24.1.1 如何使用transform功能 597
24.1.2 transform功能的分类 598
24.2 对一个元素使用多种变形的方法 602
24.2.1 两个变形示例 602
24.2.2 指定变形的基准点 604
第25章 CSS 3中的动画功能 607
25.1 Transitions功能 608
25.1.1 Transitions功能的使用方法 608
25.1.2 使用Transitions功能同时平滑过渡多个属性值 609
25.2 Animations功能 612
25.2.1 Animations功能的使用方法 612
25.2.2 实现多个属性值同时改变的动画 614
25.2.3 实现动画的方法 616
25.2.4 实现网页的淡入效果 618
第26章 布局相关样式 619
26.1 多栏布局 620
26.1.1 使用float属性或position属性的缺点 620
26.1.2 使用多栏布局方式 622
26.2 盒布局 625
26.2.1 盒布局的基础知识 625
26.2.2 弹性盒布局 629
第27章 Media Queries相关样式 641
27.1 根据浏览器的窗口大小来选择使用不同的样式 642
27.2 在iPhone中的显示 646
27.3 Media Queries的使用方法 647
第28章 CSS 3的其他重要样式和属性 /650
28.1 颜色相关样式 651
28.1.1 利用alpha通道来设定颜色 651
28.1.2 alpha通道与opacity属性的区别 653
28.1.3 指定颜色值为transparent 655
28.2 用户界面相关样式 656
28.2.1 轮廓相关样式 656
28.2.2 resize属性 659
28.3 取消对元素的样式指定—initial属性值 660
28.3.1 取消对元素的样式指定 660
28.3.2 使用initial属性值并不等于取消样式设定的特例 662
第29章 综合实例 664
29.1 实例1:使用HTML 5中新增结构元素来构建网页 665
29.1.1 组织网页结构 665
29.1.2 构建网页标题 667
29.1.3 构建侧边栏 670
29.1.4 构建主体内容 672
29.1.5 构建版权信息 678
29.2 实例2:使用HTML 5+CSS 3来构建Web应用程序 678
29.2.1 HTML 5页面代码分析 679
29.2.2 CSS 3样式代码分析 682
29.2.3 JavaScript脚本代码分析 685
附录A 可以在各种浏览器中运行的所有命令 698
附录B 2012年7月五大浏览器的最新版对HTML 5的支持情况 706

序言
前言
为何写作本书
如果要盘点2010年IT届的十大热门技术,云计算、移动开发、物联网等无疑会在其中,HTML 5肯定也是少不了的。2010年,随着HTML 5的迅猛发展,各大浏览器开发公司如Google、微软、苹果、Mozilla和Opera的浏览器开发业务都变得异常繁忙。在整个2010年度,无论是Mozilla的Firefox、Google的Chrome、苹果的Safari,还是微软的Internet Explorer,以及Opera都处于不断地推陈出新的状态当中。
2010年3月,在微软的MIX2010大会上,微软的工程师在介绍Internet Explorer 9浏览器的同时,从前端技术的角度把互联网的发展分为了三个阶段:第一阶段:Web 1.0的以内容为主的网络,前端主流技术是HTML和CSS;第二阶段:Web 2.0的Ajax应用,热门技术是JavaScript/DOM/异步数据请求;第三阶段:即将迎来的HTML 5时代,亮点是富图形和富媒体内容(Graphically-Rich and Media-Rich)。
前端技术将进入一个崭新的时代,至少已经开启了这扇门。
在这种局势下,学习HTML 5无疑成为Web开发者的一个重要任务,谁先学会HTML 5,谁就掌握了迈向未来Web平台的一把钥匙。因此,我希望能够借助此书帮助国内的Web开发者更好地学习HTML 5以及与之相伴随的CSS 3技术,使他们能够早日运用这些技术开发出一个具有现代水平的、在未来的Web平台上能够流畅运行的Web网站或Web应用程序。
第2版与第1版的区别
自2011年上半年本书第1版出版以来,一直受到广大读者的欢迎,笔者在这里首先感谢广大读者的支持。自2011年之后,HTML 5与CSS 3标准处于不断发展中,各主流浏览器也以最快的速度对HTML 5中各种最新公布的API提供了支持,其中包括各种新增元素、IndexedDB API、FileSystem API、Server-Sent Events API、扩展的XMLHttpRequest API等。因此,本书第2版以第1版的内容为基础,添加2011年到2012年之间HTML 5中新增的各种元素及API,同时更新各主流浏览器CSS 3的最新支持情况,以使读者能够学习到截至2012年HTML 5与CSS 3标准中的各种知识,了解各种最新的浏览器对HTML 5与CSS 3标准的最新支持情况,能够早日用这些新的知识打造一个HTML 5时代的功能强大的Web网站或Web应用程序。
具体来说,第2版在第1版的基础上,做出如下主要修改:
“第2章 HTML 5与HTML 4的区别”中新增部分元素属性。
“第3章 HTML 5的结构”中扩充“3.3.1大纲”一节中的内容。
“第4章 表单及其他新增和改良元素”中新增大量表单元素与页面元素,移除“4.4文件API”一节与“4.5拖放API”一节。
新增“第5章 HTML编辑API”一章(原“第5章绘制图形”修改为第6章,原“第6章多媒体播放”修改为“第15章多媒体相关API”中“15.1多媒体播放”一节)。
新增“第7章 HistoryAPI”一章(原“第7章本地存储”章修改为“第8章本地存储”,原“第8章离线应用程序”修改为“第9章离线应用程序”)。
“第8章 本地存储”中新增“8.1.4利用storage事件实时监视Web Storage中的数据”小节,新增“8.3 indexedDB数据库”一节。
新增“第10章 文件API”一章。
原“第9章 通信API”修改为“第11章通信API”,“11.1 跨文档消息传输”中新增“11.1.3 通道通信”小节,“11.2 Web Sockets通信”中新增“11.2.5 发送与接收原始二进制数据”、“11.2.6 实现Web Sockets API的开发框架”、“11.2.7 WebSocket 协议”与“11.2.8 Web Sockets API的适用场景”等小节,新增“11.3 Server-Sent Events API”一节。
新增“第12章 扩展的XMLHttpRequest API”。
原“第10章 使用Web Workers处理线程”修改为“第13章 使用Web Workers处理线程”,新增“13.5 适用场合”一节和“13.6 SharedWorker”一节。
原“第11章 获取地理位置信息”修改为“第14章 获取地理位置信息”。
新增“第15章 多媒体相关API”一章。
新增“第16章 与页面显示相关的API”一章。
新增“第17章 拖放API与通知API”(“17.1 拖放API”一节中内容为原“第4章表单及其他新增和改良元素”一章中“4.5 拖放API”一节内容)。
原“第12章 CSS 3概述”修改为“第18章CSS 3概述”。
“第19章 选择器”中“19.4 UI元素状态伪类选择器”一节中新增“19.4.6 E:invalid伪类选择器与E:valid伪类选择器”小节、“19.4.7 E:required伪类选择器与E:optional伪类选择器”小节与“19.4.8 E:in-range伪类选择器与E:out-of-range伪类选择器”小节。
“第22章 盒相关样式”与“第23章背景与边框相关样式”的样式代码及其说明中移除部分浏览器供应商前缀。
重新编写“第29章 综合实例”一章中两个代码示例,“29.2 实例2:使用HTML 5+CSS 3来构建Web应用程序”中添加了使用indexedDB API将数据书写到indexedDB数据库中的代码示例部分。本书面向的读者 本书主要适合如下人群阅读:
具有一定基础的Web前端开发工程师。
具有一定美术功底的Web前端设计师和UI设计师。
Web项目的项目管理人员。
开设了Web开发等相关专业的高等院校师生和相关培训机构的学员及教师。
如何阅读本书
相较于第1版,第2版有了很大的变化,篇幅也大量增加,于是我们将第2版分成上下两册。
上册对HTML 5中新增的语法与标记方法、新增元素、新增API以及这些元素与API到目前为止受到了哪些浏览器的支持等进行了详细的介绍。在对它们进行介绍的同时将其与HTML 4中的各种元素与功能进行了对比,以帮助读者更好地理解为什么需要使用HTML 5、使用HTML 5有什么好处、HTML 5中究竟增加了哪些目前HTML 4不具备而在第3代Web平台上将会起到重要作用的功能与API,以及这些功能与API的详细使用方法。
下册详细介绍了CSS 3中各种新增样式与属性,其中主要包括CSS 3中的各种选择器、文字与字体、背景与边框、各种盒模型、CSS 3中的布局方式、CSS 3中的变形与动画、CSS 3中与媒体类型相关的一些样式与属性等。在介绍的同时也详细讲述了这些样式与属性目前为止受到了哪些浏览器的支持,以及针对各种浏览器应该怎样在样式代码中进行各种属性的正确书写。最后,详细讲解了两个实例,第一个实例展示了如何在一个用HTML 5语言编写而成的页面中综合运用HTML 5中新增的各种结构元素,如何对这些结构元素综合使用CSS 3样式;第二个实例展示了如何使用HTML 5中新增的表单元素,以及操作本地数据库的功能来实现一个具有现代风格的Web应用程序,如何在这个利用HTML 5语言及其功能编写而成的Web应用程序中综合使用CSS 3样式来完成页面的布局以及视觉效果的美化工作。
上下两册一共351个示例页面,每个页面都经过笔者上机实践,确保运行结果正确无误。每个页面的详细代码及其使用到的脚本文件、各种资源文件都可在华章公司的官方网站本书的相应页面上下载,因为是由HTML 5编写而成的网页,所以可直接在各种浏览器中打开该文件并查看运行结果(少量页面需要首先建立网站,然后通过访问网站中该页面的方式来进行查看,少量页面使用服务器端PHP脚本语言,可在Apache服务器中运行)。同时,对于HTML 5中的各种元素和各种API,以及CSS 3中的各种属性和样式受到了哪些浏览器的支持在书中都进行了详细介绍,读者可以针对不同的页面选择正确的浏览器来查看其正确的运行结果。
致谢
在本书的写作过程中,策划编辑杨福川先生和姜影女士给予了很大的帮助和支持,并提出了很多中肯的建议,在此表示感谢。同时,还要感谢机械工业出版社的所有编审人员为本书的出版所付出的辛勤劳动。本书的成功出版是大家共同努力的结果,谢谢你们。
另外,在本书的写作过程当中,由于时间及水平上的原因,有可能存在一些对HTML 5及CSS 3上认识不全面或疏漏的地方,敬请读者批评更正,谨以最真诚的心希望能与读者共同交流,共同成长。
陆凌牛

文摘
第1章 Web时代的变迁
1.1 迎接新的Web时代
1.2 HTML 5会深受欢迎的理由
1.3 可以放心使用HTML 5的三个理由
1.4 HTML 5要解决的三个问题
自从2010年HTML 5正式推出以来,它立刻受到了世界各大浏览器的热烈欢迎与支持。根据世界上各大IT界知名媒体评论,新的Web时代,HTML 5的时代马上就要到来。本章重点介绍什么是HTML 5,HTML 5产生的时代背景,为什么HTML 5会如此深受业界欢迎,以及HTML能够解决什么问题。
学习内容:
初步了解什么是HTML 5,HTML 5与之前版本的HTML大致上有哪些区别。
了解世界各大知名浏览器目前的发展策略,为什么它们都不约而同地把支持HTML 5当成目前的工作重点,就连微软也把全面支持HTML 5作为新版Internet Explorer 9(IE 9)浏览器的开发重点与主要宣传手段。
了解为什么说开发者今后可以放心大胆地使用HTML 5进行Web网站与Web应用程序的开发,HTML 5被正式推广以后之前的Web网站与Web应用程序怎么办。
了解使用HTML 5到底可以解决哪些问题。
1.1 迎接新的Web时代
1.1.1 HTML 5时代即将来临 自从2010年HTML 5正式推出以来,它就以一种惊人的速度被迅速推广着,就连微软也因此为下一代IE 9做了标准上的改进,使其能够支持HTML 5。关于各主流浏览器对于HTML 5所表现出来的热烈欢迎、积极支持的详细情况,以及为什么HTML 5会如此受欢迎,我们将在后面几节中详细介绍,这里,笔者要告诉大家的是,目前业界全体都步调一致地朝着HTML 5的方向迈进着,HTML 5的时代马上就要到来了。在全面介绍HTML 5的相关知识之前,我们先来认识一下HTML 5中的部分代码,对HTML 5有个初步的了解。首先,我们来看一段HTML 4中常见的JavaScript代码,如代码清单1-1所示。代码清单1-1 HTML 4中的JavaScript代码示例

在HTML 5中,这段代码将会以怎样的形式出现呢?具体如代码清单1-2所示。 代码清单1-2 用HTML 5实现代码清单1-1中的JavaScript代码

我们来看一下在HTML 4中常见的一种页面结构,代码如代码清单1-3所示。代码清单1-3 div标签示例(用HTML 4实现)... ... ... ...页面中有关该部分的结构示意图如图1-1所示。图1-1 HTML 4中的页面结构 那么,在HTML 5中,又会用怎样的页面代码来描述这种结构呢?具体如代码清单1-4所示。代码清单1-4 HTML 5中的新型结构示例
...
...
页面中有关该部分的结构示意图如图1-2所示。图1-2 HTML 5中的页面结构 怎么样?看出区别来了吗?在第一个示例中,我们可以看见,在HTML 4中的一段JavaScript代码,在HTML 5中消失了,取而代之的是一个在HTML 5中新出现的属性。在第二个示例中,我们可以看见,在HTML 4中常见的用div来划分页面结构的方法,到了HTML 5中,也被一种HTML 5中新出现的标签给替代了。那么究竟为什么HTML 5要对HTML 4的脚本以及页面代码做这种修改呢?做这种修改的目的又是什么呢?
1.1.2 HTML 5的目标
HTML 5的目标是为了能够创建更简单的Web程序,书写出更简洁的HTML代码。例如,为了使Web应用程序的开发变得更容易,提供了很多API;为了使HTML变得更简洁,开发出了新的属性、新的元素,等等。总体来说,为下一代Web平台提供了许许多多新的功能。那么让我们先来初步接触一下在HTML 5中究竟提供了哪些革命性的新功能。在第2章中,我们会针对这些功能做一个全面介绍。首先,在HTML 5之前,有很多功能必须要使用JavaScript等脚本语言才能实现,譬如前面例子中提到,登录画面中经常使用的让文本框获得光标焦点的功能。如果使用HTML 5,同样的功能只要使用元素的属性标签就可以实现了。这样的话,整个页面就变得非常清楚直观,容易理解。因此,Web设计者可以非常放心大胆地使用这些HTML 5中新增的属性标签。由于HTML 5中提供了大量的这种可以替代脚本的属性标签,使得开发出来的界面语言也变得更加简洁易懂。不但如此,HTML 5使页面结构也变得清楚明了。之前使用的div标签也不再使用了,而是使用前面HTML 5示例中所提到的更加语义化的结构标签。这样的话,书写出来的界面结构显得非常清晰,各部位要展示什么内容也让人一目了然。虽然HTML 5宣称的立场是“非革命性的发展”,但是它所带来的功能是让人渴望的,使用它所进行的设计也是很简单的,因此,它深受Web设计者与Web开发者的欢迎。
1.2 HTML 5会深受欢迎的理由
1.2.1 世界知名浏览器厂商对HTML 5的支持
HTML 5被说成是划时代也好,具有革命性也好,如果不能被业界承认并且大面积地推广使用,这些都是没有意义的。事实上,今后HTML 5被正式地、大规模地投入应用的可能性是相当高的。通过对Internet Explore、Google、Firefox、Safari、Opera等主要的Web浏览器的发展策略的调查,发现它们都在支持HTML 5上采取了措施。
微软:2010年3月16日,微软于拉斯维加斯市举行的MIX10技术大会上宣布已推出IE9浏览器开发者预览版。微软称,IE9完成开发后,将更多支持CSS 3、SVG和HTML 5等互联网浏览通用标准。
Google:2010年2月19日,谷歌Gears项目经理伊安-费特通过博客宣布,谷歌将放弃对Gears浏览器插件项目的支持,以此重点开发HTML 5项目。据费特表示,目前,在谷歌看来,Gears面临的主要问题是,该应用与HTML 5的诸多创新非常相似,而且谷歌一直积极发展HTML 5项目。因此,只要谷歌不断以加强新网络标准的应用功能为工作重点,那么为Gears增加新功能就无太大意义了。目前,多种浏览器将会越来越多地为GMail及其他服务提供更多脱机功能方面的支持,因此Gears面临的需求也在日益下降,这是谷歌做出上述调整的重要原因。
苹果:2010年6月7日,苹果在开发者大会的会后发布了Safari 5,这款浏览器支持10个以上的HTML 5新技术,包括全屏幕播放、HTML 5视频、HTML 5地理位置、HTML 5切片元素、HTML 5的可拖动属性、HTML 5的形式验证、HTML 5的Ruby、HTML 5的AJAX历史和WebSocket字幕。
Opera:2010年5月5日,Opera软件公司首席技术官Hakon Wium Lie先生在访华之际,接受了中国软件资讯网等少数几家媒体的采访。号称“CSS之父”的Hakon Wium Lie认为,HTML 5与CSS 3将是全球互联网发展的未来趋势,目前包括Opera在内的诸多浏览器厂商,纷纷在研发HTML 5相关产品,Web的未来属于HTML 5。
Mozilla:2010年7月,Mozilla基金会发布了即将推出的Firefox 4浏览器的第一个早期测试版。在该版本中的Firefox浏览器中进行了大幅改进,包括新的HTML 5语法分析器,以及支持更多HTML 5形式的控制等。从官方文档来看,Firefox 4对HTML 5是完全级别的支持。目前包括在线视频、在线音频等多种应用都已在该版中实现。
以上证据表明,目前这些浏览器都纷纷地朝着支持HTML 5、结合HTML 5的方向迈进着,因此HTML 5已经被广泛地推行开来了。为什么HTML 5会如此受欢迎,理由如1.2.2节和1.2.3节所示。
1.2.2 第一个理由:时代的要求
现在的时代已经迫切地要求有一个统一的互联网通用标准。HTML 5之前的情况是,由于各浏览器之间的不统一,光是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间。而HTML 5的目标就是将Web带入一个成熟的应用平台,在HTML 5平台上,视频、音频、图像、动画,以及同电脑的交互都被标准化。关于Web浏览器,网页标准计划小组设计并推出了Acid3测试,它是针对网页浏览器及设计软件之标准相容性的一项测试。它针对Web应用程序中使用着的动态内容进行检查,测试焦点主要集中在ECMAScript、DOM Level 3、Media Queries和data: URL。Acid3测试推出后,各大浏览器都认真接受了它的测试并希望能够获得比较高的分数。这个测试的设计者,正是在W3C开发及设计者,HTML 5的重要人物Ian Hickson。Ian Hickson是WHATWG(Web Hypertext Application Technology Working Group)开发团体的成员,担任Web标准规格的设计,现在是W3C的HTML 5工作组的负责人之一。Ian Hickson设计Acid3测试的意图是给声称“让开发者能够什么都不必担心,可以放心大胆地进行开发”的各大Web浏览器提供一个机会,让他们能够以此来证明自己是优秀的。Acid3的宣传是很重要的,要想扩大Web浏览器的市场份额,宣称遵从它所依赖的标准是最有效的宣传方法。图1-3为Acid3的一个测试图。

内容简介
《实战系列:HTML 5与CSS 3权威指南(第2版•上册)》共29章,分为上下两册:上册(1~17章)全面系统地讲解了HTML 5相关的技术,以HTML 5对现有Web应用产生的变革开篇,顺序讲解了HTML 5与HTML 4的区别、HTML 5的结构、表单元素、HTML编辑API、图形绘制、History API、本地存储、离线应用、文件API、通信API、扩展的XML HttpRequest API、Web Workers、地理位置信息、多媒体相关的API、页面显示相关的API、拖放API与通知API等内容;下册(18~29章)全面系统地讲解了CSS 3相关的技术,以CSS 3的功能和模块结构开篇,顺序讲解了各种选择器及其使用、文字与字体的相关样式、盒相关样式、背景与边框相关样式、布局相关样式、变形处理、动画、颜色相关样式等内容。上下两册共351个示例页面,所有代码均通过作者上机调试。下册的最后有2个综合案例,以迭代的方式详细讲解了整个案例的实现过程,可操作性极强。

购买书籍

当当网购书 京东购书 卓越购书

PDF电子书下载地址

相关书籍

搜索更多