HTML5权威指南.pdf

HTML5权威指南.pdf
 

书籍描述

编辑推荐
作为下一代Web标准,HTML5致力于为互联网开发者搭建更加便捷、开放的沟通平台。业界普遍认为,在未来几年内,HTML5无疑将成为移动互联网领域的主宰者。
《HTML5权威指南》是系统学习网页设计和移动设计的权威参考图书。它涵盖创建标准兼容、语义化的新一代HTML5网站的所有基础知识,并囊括实现HTML5核心语言的HTML5生态系统和相关API。全书精彩呈现500多个实战代码示例及主流浏览器实现效果图,贴心汇聚HTML5和CSS3中所有属性、元素和函数的简明参考表。

媒体推荐
在这个浏览器时代你不学点儿网页构建知识还真是有些跟不上时代步伐了。这本书全面覆盖HTML5、CSS3和JavaScript,囊括了构建网页所需的基本知识以及一些中高级内容,新手选这本书绝对不会错,中级开发人员将它作为参考书也相当方便!
——亚马逊读者

这本书对于学习HTML5来说真是不可多得的好书,作者既熟知技术趋势,又深谙写作技巧,看看书中那些代码示例、实现效果图、简明参考表,无一不正中读者下怀,难怪许多Web开发人员都极力推荐这本书!
——goodreads读者

作者简介
Adam Freeman
曾在多家名企担任高级职务,现为畅销技术图书作家,著有多部C#、.NET和Java方面的大部头作品。其中《ASP.NET 4高级程序设计(第4版)》、《精通ASP.NET MVC 3框架(第3版)》销量均在同品种中名列前茅,备受读者推崇。《HTML5权威指南》是Freeman专门为网页开发新手和网页设计师打造的经典参考书,这本书秉承作者的一贯风格,幽默风趣、简约凝练、逻辑性强,是广大Web开发人员的必读经典。

目录
目 录

第一部分 开篇
第1章 HTML5背景知识  1
1.1  HTML的历史  2
1.1.1  JavaScript出场  2
1.1.2  浏览器战争的结束  3
1.1.3  插件称雄  3
1.1.4  语义HTML浮出水面  3
1.1.5  发展态势:HTML标准滞后于其使用  4
1.2  HTML5简介  4
1.2.1  新标准  4
1.2.2  引入原生多媒体支持  5
1.2.3  引入可编程内容  5
1.2.4  引入语义Web  6
1.3  HTML5现况  6
1.3.1  浏览器对HTML5的支持情况  6
1.3.2  网站对HTML5的支持情况  6
1.4  本书结构  6
1.5  HTML5的更多信息  7
1.6  小结  7
第2章 准备工作  8
2.1  挑选浏览器  8
2.2  挑选HTML编辑器  9
2.3  挑选Web服务器  9
2.4  获取Node.js  9
2.5  获取示例代码  10
2.6  小结  10
第3章 初探HTML  11
3.1  使用元素  12
3.1.1  了解本章用到的元素  13
3.1.2  使用空元素  14
3.1.3  使用自闭合标签  14
3.1.4  使用虚元素  14
3.2  使用元素属性  16
3.2.1  一个元素应用多个属性  16
3.2.2  使用布尔属性  16
3.2.3  使用自定义属性  17
3.3  创建HTML文档  17
3.3.1  外层结构  18
3.3.2  元数据  19
3.3.3  内容  19
3.3.4  父元素、子元素、后代元素和兄弟元素  20
3.3.5  了解元素类型  20
3.4  使用HTML实体  21
3.5  HTML5全局属性  21
3.5.1  accesskey属性  21
3.5.2  class属性  22
3.5.3  contenteditable属性  25
3.5.4  contextmenu属性  25
3.5.5  dir属性  26
3.5.6  draggable属性  26
3.5.7  dropzone属性  26
3.5.8  hidden属性  26
3.5.9  id属性  28
3.5.10  lang属性  29
3.5.11  spellcheck属性  29
3.5.12  style属性  30
3.5.13  tabindex属性  30
3.5.14  title属性  31
3.6  有用的HTML工具  32
3.7  小结  32
第4章 初探CSS  33
4.1  定义和应用样式  33
4.1.1  了解本章所用的CSS属性  34
4.1.2  使用元素内嵌样式  34
4.1.3  使用文档内嵌样式  35
4.1.4  使用外部样式表  37
4.2  样式的层叠和继承  40
4.2.1  浏览器样式  40
4.2.2  用户样式  41
4.2.3  样式如何层叠  42
4.2.4  用重要样式调整层叠次序  42
4.2.5  根据具体程度和定义次序解决同级样式冲突  43
4.2.6  继承  46
4.3  CSS中的颜色  48
4.4  CSS中的长度  49
4.4.1  绝对长度  50
4.4.2  相对长度  51
4.5  其他CSS单位  56
4.5.1  使用CSS角度  56
4.5.2  使用CSS时间  57
4.6  测试CSS特性的支持情况  57
4.7  有用的CSS工具  57
4.7.1  浏览器样式报告  57
4.7.2  用SelectorGadget生成选择器  58
4.7.3  用LESS改进CSS  59
4.7.4  使用CSS框架  59
4.8  小结  59
第5章 初探JavaScript  60
5.1  准备使用JavaScript  61
5.2  使用语句  62
5.3  定义和使用函数  63
5.3.1  定义带参数的函数  63
5.3.2  定义会返回结果的函数  64
5.4  使用变量和类型  65
5.4.1  使用基本类型  66
5.4.2  创建对象  67
5.4.3  使用对象  69
5.5  使用JavaScript运算符  73
5.5.1  相等和等同运算符  73
5.5.2  显式类型转换  76
5.6  使用数组  78
5.6.1  使用数组字面量  79
5.6.2  读取和修改数组内容  80
5.6.3  枚举数组内容  80
5.6.4  使用内置的数组方法  81
5.7  处理错误  81
5.8  比较undefined和null值  83
5.8.1  检查变量或属性是否为undefined或null  85
5.8.2  区分null和undefined  85
5.9  常用的JavaScript工具  86
5.9.1  使用JavaScript调试器  86
5.9.2  使用JavaScript库  86
5.10  小结  87
第二部分 HTML元素
第6章 HTML5元素背景知识  90
6.1  语义与呈现分离  90
6.2  元素选用原则  91
6.2.1  少亦可为多  91
6.2.2  别误用元素  91
6.2.3  具体为佳,一以贯之  91
6.2.4  对用户不要想当然  92
6.3  元素说明体例  92
6.4  元素速览  92
6.4.1  文档和元数据元素  92
6.4.2  文本元素  93
6.4.3  对内容分组  94
6.4.4  划分内容  95
6.4.5  制表  95
6.4.6  创建表单  96
6.4.7  嵌入内容  96
6.5  未实现的元素  97
6.6  小结  97
第7章 创建HTML文档  98
7.1  构筑基本的文档结构  99
7.1.1  DOCTYPE元素  99
7.1.2  html元素  99
7.1.3  head元素  100
7.1.4  body元素  101
7.2  用元数据元素说明文档  102
7.2.1  设置文档标题  102
7.2.2  设置相对URL的解析基准  103
7.2.3  用元数据说明文档  104
7.2.4  定义CSS样式  108
7.2.5  指定外部资源  112
7.3  使用脚本元素  116
7.3.1  script元素  117
7.3.2  noscript元素  123
7.4  小结  125
第8章 标记文字  126
8.1  生成超链接  127
8.1.1  生成指向外部的超链接  128
8.1.2  使用相对URL  129
8.1.3  生成内部超链接  129
8.1.4  设定浏览环境  130
8.2  用基本的文字元素标记内容  131
8.2.1  表示关键词和产品名称  131
8.2.2  加以强调  132
8.2.3  表示外文词语或科技术语  133
8.2.4  表示不准确或校正  134
8.2.5  表示重要的文字  135
8.2.6  为文字添加下划线  136
8.2.7  添加小号字体内容  137
8.2.8  添加上标和下标  138
8.3  换行  139
8.3.1  强制换行  139
8.3.2  指明可以安全换行的建议位置  141
8.4  表示输入和输出  142
8.5  使用标题引用、引文、定义和缩写  143
8.5.1  表示缩写  143
8.5.2  定义术语  144
8.5.3  引用来自他处的内容  145
8.5.4  引用其他作品的标题  146
8.6  使用语言元素  147
8.6.1  ruby、rt和rp元素  147
8.6.2  bdo元素  149
8.6.3  bdi元素  150
8.7  其他文本元素  152
8.7.1  表示一段一般性的内容  152
8.7.2  突出显示文本  153
8.7.3  表示添加和删除的内容  155
8.7.4  表示时间和日期  156
8.8  小结  157
第9章 组织内容  158
9.1  为什么要对内容分组  158
9.2  建立段落  159
9.3  使用div元素  161
9.4  使用预先编排好格式的内容  163
9.5  引用他处内容  164
9.6  添加主题分隔  166
9.7  将内容组织为列表  169
9.7.1  ol元素  169
9.7.2  ul元素  171
9.7.3  li元素  172
9.7.4  生成说明列表  173
9.7.5  生成自定义列表  174
9.8  使用插图  176
9.9  小结  178
第10章 文档分节  179
10.1  添加基本的标题  179
10.2  隐藏子标题  182
10.3  生成节  185
10.4  添加首部和尾部  188
10.5  添加导航区域  191
10.6  使用article  194
10.7  生成附注栏  198
10.8  提供联系信息  201
10.9  生成详情区域  202
10.10  小结  205
第11章 表格元素  206
11.1  生成基本的表格  206
11.2  添加表头单元格  209
11.3  为表格添加结构  211
11.3.1  表示表头和表格主题  212
11.3.2  添加表脚  214
11.4  制作不规则表格  216
11.5  把表头与单元格关联起来  220
11.6  为表格添加标题  221
11.7  处理列  223
11.8  设置表格边框  228
11.9  小结  230
第12章 表单  231
12.1  制作基本表单  232
12.1.1  定义表单  233
12.1.2  查看表单数据  234
12.2  配置表单  236
12.2.1  配置表单的action属性  236
12.2.2  配置HTTP方法属性  237
12.2.3  配置数据编码  237
12.2.4  控制表单的自动完成功能  239
12.2.5  指定表单反馈信息的目标显示位置  240
12.2.6  设置表单名称  242
12.3  在表单中添加说明标签  242
12.4  自动聚焦到某个input元素  244
12.5  禁用单个input元素  245
12.6  对表单元素编组  246
12.6.1  为fieldset元素添加说明标签  248
12.6.2  用fieldset禁用整组input元素  249
12.7  使用button元素  250
12.7.1  用button元素提交表单  251
12.7.2  用button元素重置表单  252
12.7.3  把button作为一般元素使用  253
12.8  使用表单外的元素  254
12.9  小结  254
第13章 定制input元素  255
13.1  用input元素输入文字  256
13.1.1  设定元素大小  256
13.1.2  设置初始值和占位式提示  258
13.1.3  使用数据列表  259
13.1.4  生成只读或被禁用的文本框  262
13.1.5  指定文字方向数据的名称  263
13.2  用input元素输入密码  263
13.3  用input元素生成按钮  266
13.4  用input元素为输入数据把关  267
13.4.1  用input元素获取数值  268
13.4.2  用input元素获取指定范围内的数值  270
13.4.3  用input元素获取布尔型输入  271
13.4.4  用input元素生成一组固定选项  273
13.4.5  用input元素获取有规定格式的字符串  275
13.4.6  用input元素获取时间和日期  277
13.4.7  用input元素获取颜色值  279
13.5  用input元素获取搜索用词  281
13.6  用input元素生成隐藏的数据项  282
13.7  用input元素生成图像按钮和分区响应图  284
13.8  用input元素上传文件  286
13.9  小结  288
第14章 其他表单元素及输入验证  289
14.1  使用其他表单元素  289
14.1.1  生成选项列表  289
14.1.2  输入多行文字  294
14.1.3  表示计算结果  296
14.1.4  生成公开/私有密钥对  297
14.2  使用输入验证  298
14.2.1  确保用户提供了一个值  299
14.2.2  确保输入值位于某个范围内  300
14.2.3  确保输入值与指定模式匹配  301
14.2.4  确保输入值是电子邮箱地址或URL  303
14.3  禁用输入验证  304
14.4  小结  305
第15章 嵌入内容  306
15.1  嵌入图像  306
15.1.1  在超链接里嵌入图像  308
15.1.2  创建客户端分区响应图  310
15.2  嵌入另一张HTML文档  313
15.3  通过插件嵌入内容  315
15.3.1  使用embed元素  315
15.3.2  使用object和param元素  317
15.4  object元素的其他用途  319
15.4.1  使用object元素嵌入图像  319
15.4.2  使用object元素创建分区响应图  320
15.4.3  将object元素作为浏览上下文环境  320
15.5  嵌入数字表现形式  321
15.5.1  显示进度  321
15.5.2  显示范围里的值  322
15.6  其他嵌入元素  324
15.6.1  嵌入音频和视频  324
15.6.2  嵌入图形  324
15.7  小结  324
第三部分 CSS
第16章 理解CSS  326
16.1  CSS标准化  326
16.2  盒模型  327
16.3  选择器简明参考  328
16.4  属性简明参考  329
16.4.1  边框和背景属性  329
16.4.2  盒模型属性  331
16.4.3  布局属性  332
16.4.4  文本属性  332
16.4.5  过渡、动画和变换属性  333
16.4.6  其他属性  334
16.5  小结  334
第17章 使用CSS选择器(第Ⅰ部分)  335
17.1  使用CSS基本选择器  335
17.1.1  选择所有元素  336
17.1.2  根据类型选择元素  337
17.1.3  根据类选择元素  338
17.1.4  根据ID选择元素  340
17.1.5  根据属性选择元素  341
17.2  复合选择器  344
17.2.1  并集选择器  344
17.2.2  后代选择器  345
17.2.3  选择子元素  347
17.2.4  选择兄弟元素  349
17.3  使用伪元素选择器  351
17.3.1  使用::first-line选择器  351
17.3.2  使用::first-letter选择器  352
17.3.3  使用:before和:after选择器  353
17.3.4  使用CSS计数器  354
17.4  小结  356
第18章 使用CSS选择器(第Ⅱ部分)  357
18.1  使用结构性伪类选择器  357
18.1.1  使用根元素选择器  358
18.1.2  使用子元素选择器  359
18.1.3  使用:nth-child选择器  363
18.2  使用UI伪类选择器  364
18.2.1  选择启用或禁用元素  364
18.2.2  选择已勾选的元素  365
18.2.3  选择默认元素  366
18.2.4  选择有效和无效的input元素  367
18.2.5  选择限定范围的input元素  369
18.2.6  选择必需和可选的input元素  370
18.3  使用动态伪类选择器  371
18.3.1  使用:link和:visited选择器  371
18.3.2  使用:hover选择器  372
18.3.3  使用:active选择器  373
18.3.4  使用:focus选择器  374
18.4  其他伪类选择器  375
18.4.1  使用否定选择器  376
18.4.2  使用:empty选择器  376
18.4.3  使用:lang选择器  377
18.4.4  使用:target选择器  377
18.5  小结  379
第19章 使用边框和背景  380
19.1  应用边框样式  380
19.1.1  定义边框宽度  381
19.1.2  定义边框样式  382
19.1.3  为一条边应用边框样式  383
19.1.4  使用border简写属性  384
19.1.5  创建圆角边框  385
19.1.6  将图像用做边框  388
19.2  设置元素的背景  392
19.2.1  设置背景颜色和图像  392
19.2.2  设置背景图像的尺寸  394
19.2.3  设置背景图像位置  395
19.2.4  设置元素的背景附着方式  396
19.2.5  设置背景图像的开始位置和裁剪样式  397
19.2.6  使用background简写属性  399
19.3  创建盒子阴影  400
19.4  应用轮廓  403
19.5  小结  405
第20章 使用盒模型  406
20.1  为元素应用内边距  407
20.2  为元素应用外边距  409
20.3  控制元素的尺寸  410
20.3.1  设置一定尺寸的盒子  412
20.3.2  设置最小和最大尺寸  413
20.4  处理溢出内容  414
20.5  控制元素的可见性  417
20.6  设置元素的盒类型  419
20.6.1  认识块级元素  420
20.6.2  认识行内元素  421
20.6.3  认识行内?块级元素  422
20.6.4  认识插入元素  423
20.6.5  隐藏元素  426
20.7  创建浮动盒  427
20.8  小结  433
第21章 创建布局  434
21.1  定位内容  434
21.1.1  设置定位类型  435
21.1.2  设置元素的层叠顺序  437
21.2  创建多列布局  439
21.3  创建弹性盒布局  442
21.3.1  创建简单的弹性盒  444
21.3.2  伸缩多个元素  446
21.3.3  处理垂直空间  447
21.3.4  处理最大尺寸  448
21.4  创建表格布局  450
21.5  小结  453
第22章 设置文本样式  454
22.1  应用基本文本样式  454
22.1.1  对齐文本  455
22.1.2  处理空白  457
22.1.3  指定文本方向  460
22.1.4  指定单词、字母、行之间的间距  461
22.1.5  控制断词  462
22.1.6  首行缩进  464
22.2  文本装饰与大小写转换  465
22.3  创建文本阴影  467
22.4  使用字体  468
22.4.1  选择字体  469
22.4.2  设置字体大小  470
22.4.3  设置字体样式和粗细  472
22.5  使用Web字体  473
22.6  小结  475
第23章 过渡、动画和变换  476
23.1  使用过渡  477
23.1.1  创建反向过渡  480
23.1.2  选择中间值的计算方式  481
23.2  使用动画  483
23.2.1  使用关键帧  486
23.2.2  设置重复方向  488
23.2.3  理解结束状态  490
23.2.4  初始布局时应用动画  491
23.2.5  重用关键帧  492
23.2.6  为多个元素应用多个动画  493
23.2.7  停止和启动动画  495
23.3  使用变换  497
23.3.1  应用变换  497
23.3.2  指定元素变换的起点  498
23.3.3  将变换作为动画和过渡处理  500
23.4  小结  501
第24章 其他CSS属性和特性  502
24.1  设置元素的颜色和透明度  502
24.1.1  设置前景色  502
24.1.2  设置元素的透明度  504
24.2  设置表格样式  505
24.2.1  合并表格边框  505
24.2.2  配置独立边框  507
24.2.3  处理空单元格  508
24.2.4  设置标题的位置  509
24.2.5  指定表格布局  511
24.3  设置列表样式  512
24.3.1  设置列表标记类型  513
24.3.2  使用图像作为列表标记  514
24.3.3  设置列表标记的位置  515
24.4  设置光标样式  517
24.5  小结  518
第四部分 使用DOM
第25章 理解DOM  520
25.1  理解文档对象模型  520
25.2  理解DOM Level和兼容性  522
25.3  DOM快速查询  524
25.3.1  Document的成员  524
25.3.2  Window的成员  525
25.3.3  HTMLElement的成员  527
25.3.4  DOM里的CSS属性  529
25.3.5  DOM中的事件  531
25.4  小结  532
第26章 使用Document对象  533
26.1  使用Document元数据  536
26.1.1  获取文档信息  536
26.1.2  使用Location对象  537
26.1.3  读取和写入cookie  541
26.1.4  理解就绪状态  542
26.1.5  获取DOM的实现情况  543
26.2  获取HTML元素对象  544
26.2.1  使用属性获取元素对象  545
26.2.2  使用数组标记获取已命名元素  546
26.2.3  搜索元素  548
26.2.4  合并进行链式搜索  550
26.3  在DOM树里导航  552
26.4  小结  554
第27章 使用Window对象  555
27.1  获取Window对象  555
27.2  获取窗口信息  556
27.3  与窗口进行交互  558
27.4  对用户进行提示  559
27.5  获取基本信息  561
27.6  使用浏览器历史  561
27.6.1  在浏览历史中导航  562
27.6.2  在浏览历史里插入条目  564
27.6.3  为不同的文档添加条目  566
27.6.4  在浏览历史中保存复杂状态  567
27.6.5  替换浏览历史中的条目  570
27.7  使用跨文档消息传递  570
27.8  使用计时器  574
27.9  小结  576
第28章 使用DOM元素  577
28.1  使用元素对象  577
28.1.1  使用类  579
28.1.2  使用元素属性  582
28.2  使用Text对象  586
28.3  修改模型  588
28.3.1  创建和删除元素  589
28.3.2  复制元素  591
28.3.3  移动元素  592
28.3.4  比较元素对象  593
28.3.5  使用HTML片段  595
28.3.6  向文本块插入元素  600
28.4  小结  601
第29章 为DOM元素设置样式  602
29.1  使用样式表  602
29.1.1  获得样式表的基本信息  603
29.1.2  使用媒介限制  605
29.1.3  禁用样式表  607
29.1.4  CSSRuleList对象的成员  608
29.2  使用元素样式  611
29.3  使用CSSStyleDeclaration对象  613
29.3.1  使用便捷属性  613
29.3.2  使用常规属性  616
29.3.3  使用细粒度的CSS DOM对象  620
29.4  使用计算样式  623
29.5  小结  625
第30章 使用事件  626
30.1  使用简单事件处理器  627
30.1.1  实现简单的内联事件处理器  627
30.1.2  实现一个简单的事件处理函数  629
30.2  使用DOM和事件对象  630
30.2.1  按类型区分事件  633
30.2.2  理解事件流  634
30.2.3  使用可撤销事件  641
30.3  使用HTML事件  642
30.3.1  文档和窗口事件  642
30.3.2  使用鼠标事件  643
30.3.3  使用键盘焦点事件  645
30.3.4  使用键盘事件  647
30.3.5  使用表单事件  649
30.4  小结  649
第31章 使用元素专属对象  650
31.1  文档和元数据对象  650
31.1.1  base元素  650
31.1.2  body元素  650
31.1.3  link元素  651
31.1.4  meta元素  651
31.1.5  script元素  651
31.1.6  style元素  652
31.1.7  title元素  652
31.1.8  其他文档和元数据元素  652
31.2  文本元素  652
31.2.1  a元素  652
31.2.2  del和ins元素  653
31.2.3  q元素  653
31.2.4  time元素  653
31.2.5  其他文本元素  654
31.3  分组元素  654
31.3.1  blockquote元素  654
31.3.2  li元素  654
31.3.3  ol元素  654
31.3.4  其他分组元素  655
31.4  区块元素  655
31.4.1  details元素  655
31.4.2  其他区块元素  655
31.5  表格元素  655
31.5.1  col和colgroup元素  655
31.5.2  table元素  656
31.5.3  thead、tbody和tfoot元素  656
31.5.4  th元素  657
31.5.5  tr元素  657
31.5.6  其他表格元素  657
31.6  表单元素  657
31.6.1  button元素  657
31.6.2  datalist元素  658
31.6.3  fieldset元素  658
31.6.4  form元素  658
31.6.5  input元素  659
31.6.6  label元素  660
31.6.7  legend元素  661
31.6.8  optgroup元素  661
31.6.9  option元素  661
31.6.10  output元素  661
31.6.11  select元素  662
31.6.12  textarea元素  663
31.7  内容元素  663
31.7.1  area元素  664
31.7.2  embed元素  664
31.7.3  iframe元素  664
31.7.4  img元素  665
31.7.5  map元素  665
31.7.6  meter元素  665
31.7.7  object元素  666
31.7.8  param元素  666
31.7.9  progress元素  667
31.8  小结  667
第五部分 高级功能
第32章 使用Ajax(第Ⅰ部分)  670
32.1  Ajax起步  671
32.1.1  处理响应  674
32.1.2  主流中的异类:应对Opera  675
32.2  使用Ajax事件  677
32.3  处理错误  679
32.3.1  处理设置错误  681
32.3.2  处理请求错误  682
32.3.3  处理应用程序错误  682
32.4  获取和设置标头  683
32.4.1  覆盖请求的HTTP方法  683
32.4.2  禁用内容缓存  685
32.4.3  读取响应标头  685
32.5  生成跨源Ajax请求  687
32.5.1  使用Origin请求标头  690
32.5.2  高级CORS功能  691
32.6  中止请求  691
32.7  小结  693
第33章 使用Ajax(第Ⅱ部分)  694
33.1  准备向服务器发送数据  694
33.1.1  定义服务器  695
33.1.2  理解问题所在  697
33.2  发送表单数据  698
33.3  使用FormData对象发送表单数据  701
33.3.1  创建FormData对象  701
33.3.2  修改FormData对象  702
33.4  发送JSON数据  703
33.5  发送文件  705
33.6  追踪上传进度  707
33.7  请求并处理不同内容类型  709
33.7.1  接收HTML片段  709
33.7.2  接收XML数据  712
33.7.3  接收JSON数据  714
33.8  小结  715
第34章 使用多媒体  716
34.1  使用video元素  717
34.1.1  预先加载视频  718
34.1.2  显示占位图像  720
34.1.3  设置视频尺寸  720
34.1.4  指定视频来源(和格式)  721
34.1.5  track元素  724
34.2  使用audio元素  724
34.3  通过DOM操作嵌入式媒体  726
34.3.1  获得媒体信息  726
34.3.2  评估回放能力  728
34.3.3  控制媒体回放  730
34.4  小结  733
第35章 使用canvas元素(第Ⅰ部分)  734
35.1  开始使用canvas元素  735
35.2  获取画布的上下文  736
35.3  绘制矩形  737
35.4  设置画布绘制状态  739
35.4.1  设置线条连接样式  741
35.4.2  设置填充和笔触样式  742
35.4.3  使用渐变  743
35.4.4  使用径向渐变  748
35.4.5  使用图案  751
35.5  保存和恢复绘制状态  753
35.6  绘制图像  755
35.6.1  使用视频图像  756
35.6.2  使用画布图像  759
35.7  小结  761
第36章 使用canvas元素(第Ⅱ部分)  762
36.1  用路径绘图  762
36.1.1  用线条绘制路径  763
36.1.2  绘制矩形  766
36.2  绘制圆弧  768
36.2.1  使用arcTo方法  768
36.2.2  使用arc方法  772
36.3  绘制贝塞尔曲线  773
36.3.1  绘制三次贝塞尔曲线  773
36.3.2  绘制二次贝塞尔曲线  775
36.4  创建剪辑区域  777
36.5  绘制文本  778
36.6  使用特效和变换  780
36.6.1  使用阴影  780
36.6.2  使用透明度  781
36.6.3  使用合成  782
36.6.4  使用变换  784
36.7  小结  786
第37章 使用拖放  787
37.1  创建来源项目  787
37.2  创建释放区  791
37.3  使用DataTransfer对象  794
37.3.1  根据数据过滤被拖动项目  796
37.3.2  拖放文件  797
37.4  小结  801
第38章 使用地理定位  802
38.1  使用地理定位  802
38.2  处理地理定位错误  805
38.3  指定地理定位选项  807
38.4  监控位置  809
38.5  小结  810
第39章 使用Web存储  811
39.1  使用本地存储  811
39.2  使用会话存储  815
39.3  小结  819
第40章 创建离线Web应用程序  820
40.1  定义问题  820
40.2  定义清单  822
40.3  检测浏览器状态  827
40.4  使用离线缓存  828
40.4.1  制作更新  832
40.4.2  获取更新  832
40.4.3  应用更新  833
40.5  小结  834


序言
第一章:HTML5背景知识

HTML(Hypertext Markup Language,超文本标记语言)诞生于20世纪90年代初。我与它的初次邂逅大约是在1993年或1994年,当时我还在伦敦附近一个大学的研究实验室工作。那时浏览器只有NCSA Mosaic这一种,Web服务器的种类也屈指可数。
回想那段日子我们对HTML和万维网的着迷,仍不免有些惊讶。那时我们还得不厌其烦地把“World Wide Web”(万维网)这三个单词全写出来,因为它的知名度还没有那么高,远没有今天这么受人瞩目,还不能只简称其为“Web”。
那时一切都还很简陋。我还记得当时盯着一些慢腾腾加载的宝石图片看的情景。这都是宽带革命之前的事,整个大学享有的带宽大致与如今的一部移动电话相当。不过我们还是很激动。为迎接新时代的到来,大家都在忙着修改课题经费申请。尽管我们上网能做的只是看看另一所大学的咖啡壶图片(这所大学也在伦敦附近,但过去喝杯咖啡却并不近),我们还是有一种强烈的感觉:技术世界已经分为Web诞生前和诞生后两个时代了。
光阴荏苒,在许多用户眼中,Web跟因特网变成了一回事儿,而我们也远远超越了为几张宝石图片就雀跃不已的层次。在此过程中,HTML有过扩充,有过增强,有过扭曲,有过煎熬,见过争斗,见过官司,受过忽视,受过追捧,曾被贬为雕虫小技,也曾被誉为未来之星。待尘埃落定,它已然成为亿万人日常生活不可或缺的一部分。
本书讲述的是HTML5。这是HTML标准的最新版本,意在为这项重要技术带来秩序、条理和改进。曾经的青涩少年终于成熟了。
1.1 HTML的历史
讲HTML的书都有“HTML的历史”这样一节,其中大都会提供HTML标准从诞生至今的详细年表。需要这类信息的读者可以去查查维基百科,不过这些信息读起来可能比较枯燥乏味,用处也不大。本书只关心其中几个重要转折点和一个长期存在的发展态势,旨在让读者明白HTML是如何成型的,明白为什么最终走到了HTML5。
1.1.1 JavaScript出场
JavaScript语言(虽然取了这么一个名字,但是它跟Java程序设计语言基本上没有什么关系)出自一家名为网景的公司。它的出现标志着内嵌在Web浏览器中的客户端脚本程序控制功能的发端。原本是一种静态内容载体的HTML因此变得有点丰富起来。之所以说“有点丰富”,是因为现在我们在浏览器中见到的这种复杂交互方式是经过一段时间的发展之后才形成的。
JavaScript并非HTML规范核心的组成部分,然而Web浏览器、HTML和JavaScript之间的关系是如此紧密,以至于根本无法将它们分开讨论。HTML5规范假定可以使用JavaScript,而且要想使用HTML5中新增的一些最为引人注目的特性也需要用到JavaScript。
1.1.2 浏览器战争的结束
浏览器市场也有过激烈的竞争。主要的角逐者是微软和网景,它们都把在自己的浏览器中添加一些独有的特性当做竞争手段。其如意算盘是这样打的:诱人的专有特性会诱使开发人员制作出只能在特定浏览器上使用的内容,而诱人的内容又会诱使用户对能提供这种内容的浏览器青睐有加,由此市场霸业可成。
可惜人算不如天算。这样做的结果是Web开发人员要么只使用那些所有浏览器都有的特性,要么煞费苦心地想些变通办法来使用各款浏览器中勉强相当的那些特性。这不啻为一种煎熬,而且其后遗症直到现在仍然在影响Web开发。
微软用免费提供IE来与网景收费的Navigator抢生意,这一招儿后来被认定违反垄断法。很多人指责微软是网景垮台的罪魁祸首。这一指控或许不无道理,不过在我这个曾在那段时期为网景做过大约18个月顾问的人看来,我从没见过像它那样一根筋地自残的公司。有些公司注定要成为别人的前车之鉴,网景就是其中之一。
浏览器战争以网景倒台及微软受到惩处结束,为基于标准的网络浏览奠定了基础。HTML规范有了改进,遵从这个规范成了准则。现在的浏览器需要凭遵守标准的程度来竞争。这是一次天翻地覆的转折,开发人员和用户均受益于此。
1.1.3 插件称雄
插件是Web世界的“益虫”。它们可以提供一些单用HTML很难实现的高级特性和丰富内容。有些插件特性如此丰富、部署如此普遍,以至于不少网站只提供用于这种插件的内容。Adobe公司的Flash正是这样一个典型。我经常见到完全用Flash实现的网站。按说这也没什么不妥,不过这就意味着浏览器和HTML除了Flash容器一职外再无他用。
浏览器开发商看插件不顺眼,因为它把控制权转移到了插件开发商手中。HTML5的一大改进就是着力于让浏览器直接处理那些原来要使用Flash的富内容(rich content)。苹果和微软是疏远Flash的两个急先锋。前者的iOS不支持Flash,后者则在Windows 8附带的Metro风格的IE中禁用了Flash。
1.1.4 语义HTML浮出水面
HTML标准的早期版本不太关心将内容的意义与其呈现方式分开。想表示一段文字的重要性,使用一个让文字显示为粗体的HTML元素就是了。把粗体内容与重要内容关联起来是用户的事。这对人类用户来说很容易,却会让自动化工具犯难。自HTML初次亮相以来,对内容进行自动处理日趋重要,人们也越来越致力于分开HTML元素的意义与内容在浏览器中的呈现方式。
1.1.5 发展态势:HTML标准滞后于其使用
制定标准一般都是一个长期过程,像HTML这种应用广泛的技术更是如此。参与方众多,每家都想把新标准往符合自己利益或观点的方向引。而标准并不是法律,标准制定机构害怕分裂甚于一切。因此对于未来的特性和改进该当如何,各方经常陷入旷日持久的讨价还价。
负责制定HTML标准的是W3C(World Wide Web Consortium,万维网联盟)。这是一项棘手的任务。一条提案要花不少时间才能成为标准。而对HTML核心规范的修改则需经过很长时间才会得到批准。
冗长的标准制定过程带来的结果就是W3C总是要多绕一些路,总是在将已经被大家接受的实际做法追认为标准。HTML规范反映的只是几年前关于Web内容的前沿思考。这削弱了HTML标准的重要性,因为真正的革新并非来自W3C,而是来自浏览器和插件。
1.2 HTML5简介
HTML5不仅仅是HTML规范的最新版本,它还是一系列用来制作现代富Web内容的相关技术的总称。后面各章将会介绍这些技术,其中最重要的三项技术是HTML5核心规范、CSS(Cascading Style Sheets,层叠样式表)和JavaScript。
HTML5核心规范定义用以标记内容的元素,并明确其含义。CSS可用于控制标记过的内容呈现在用户面前的外貌。JavaScript则可以用来操纵HTML文档的内容以及响应用户的操作,此外要想使用HTML5新增元素的一些为编程目的设计的特性也需要用到JavaScript。
提示 看不懂上面说的这些东西不要紧。我会分别在第3章、第4章和第5章专门介绍HTML元素、CSS和JavaScript。
有些人(那些挑剔、执拗、爱钻牛角尖的人)会说HTML5所指的只是HTML元素。别管他们。这些人看不出Web内容的本质所发生的根本性变化。用于网页的各种技术之间的关联已经变得如此紧密,以致于需要通晓这些技术才能制作Web内容。如果只使用HTML元素,不用CSS,这样制作出来的内容会让用户觉得不便阅读。如果用了HTML和CSS,但不用JavaScript,那就无法为用户的操作提供即时反馈,也无法使用HTML5中的一些高级特性。
1.2.1 新标准
为了应对漫长的标准化过程以及标准落后于常见用法的情况,HTM5及其相关技术是作为一系列小型标准而制定的。其中有些标准只有区区几页,涉及的只是某项特性中一个高度细化的方面。当然,其他一些标准仍然有密密麻麻的几百页,涵盖了相关功能的所有方面。
这样做的目的是让较小的团体可以合作设计和将对他们较为重要的特性标准化,争议较少的特性可以先标准化,不必受围绕其他特性发生的争论的拖累。
这个办法有利也有弊。好处是可以加快标准制定步伐。主要的弊端在于难以全面掌握制定中的各个标准的情况以及这些标准之间的关系。技术规范的质量也有所下降。有些标准中存在着一些歧义,致使浏览器中的实现出现了不一致的情况。
最大的不足之处大概要算没有一条可用来评估HTML5达标情况的基准线。我们现在还处于初始阶段,但是不能指望用户可能用到的所有浏览器都实现了要用的特性。因此采用HTML5中的特性是件复杂的事情,需要仔细评估相关标准得到支持的情况。W3C公布过一个正式的HTML5徽标(如图1-1所示),但是它并不代表对HTML5标准及相关技术的全面支持。

图1-1 W3C的正式HTML5徽标
1.2.2 引入原生多媒体支持
HTML5的一大改进就是支持在浏览器中直接播放视频和音频文件(也就是说不借助于插件)。这是W3C对插件风靡现象的一种反应。原生(native)多媒体支持再结合其他HTML特性可望大有作为。这些特性将在第34章介绍。
1.2.3 引入可编程内容
HTML5最大的变化之一是添加了canvas元素(第34章和第35章会有介绍)。这个元素是对插件现象的另一反应,它提供了一个通用的绘图平面,开发人员可以用它完成一些通常用Adobe Flash来完成的任务。
这个特性之所以重要,部分原因在于要使用canvas元素就必须用到JavaScript。编程从而成了HTML文档中第一层次的事情,这是一个重大转变。
1.2.4 引入语义Web
HTML5引入了一些用来分开元素的含义和内容呈现方式的特性和规则。这是HTML5中的一个重要概念,详见第6章。这个主题在本书中将多次论及,它标志着HTML在走向成熟的道路上又迈上了一个新台阶,反映出制作和使用HTML内容的方式的多样性。这个变化(它逐步体现在之前的HTML版本中)稍稍增加了Web开发者的负担,这是因为开发者需要先标记内容然后再定义其呈现方式。不过有些实用的新改进可以减轻这种负担。
1.3 HTML5现况
HTML5的核心标准目前仍在制定过程中,一时完成不了。这意味着本书介绍的特性与最终标准中的可能略有出入。不过,标准正式出炉还得等上好些年,而最终版本与目前版本可能出入不大。
1.3.1 浏览器对HTML5的支持情况
最流行的那些浏览器都已经实现了许多HTML特性。本书演示示例的显示效果时,用来浏览HTML5文档的是谷歌的Chrome或Mozilla的Firefox。然而,不是每款浏览器都支持所有的特性。在把某个特性用到实际项目之前,应该先核查一下浏览器是否支持这个特性。有些浏览器(例如Chrome和Firefox)的升级近乎持续不断。撰写本书时我已经记不清所使用的浏览器到底更新过多少次了。鉴于每次升级都会加入些新特性或修补点纰漏,这意味着我无法就某种特性得到哪些浏览器的支持提供确切的信息。不过考虑到HTML标准的分散本性,使用Modernizr之类的JavaScript库检查特性是可行的。使用Modernizr,可以用编程的方式判断用户使用的浏览器是否支持关键的HTML特性,籍此可以决定在文档中应该使用哪些特性。
习惯未雨绸缪的读者可以参考一下When Can I Use?网站。上面提供了浏览器的支持情况和采用率方面的详细信息,并且勤于修订。
1.3.2 网站对HTML5的支持情况
用到HTML5特性的网站日益增多。其中有些属于示范性网站,是用来演示HTML特性的。但是能利用浏览器对HTML5的支持的实用型网站也越来越多。YouTube就是一个典型,它现在已经提供让浏览器直接播放的视频——当然,它还为较老的浏览器提供Flash视频。
1.4 本书结构
本书分为五部分。本章所属的第一部分除了介绍使用本书所需要的预备知识外,还会介绍HTML、CSS和JavaScript最新进展的基本情况。对于近期未做过Web开发工作的读者,这此内容可以助其跟上形势。
第二部分讨论的是HTML元素,包括那些HTML5中新增或有所改动的元素。每个元素都有说明和演示。读者还可以了解到元素默认的呈现方式。
第三部分讨论的是CSS(Cascading Style Sheet,层叠样式表)。其中各章介绍了用来控制内容样式的所有CSS选择器和属性,还提供了大量例子和图示来帮助读者掌握其用法。这部分讨论的是CSS的最新版本(CSS3),不过也会说明一下哪些特性是CSS1和CSS2中引入的。
第四部分介绍的是DOM(Document Object Model,文档对象模型)。通过DOM,即可用JavaScript探索和操纵HTML内容。DOM包含着对于制作富Web内容至关重要的一套特性。
第五部分讲的是Ajax、多媒体和canvas元素等HTML5高级特性。这些特性需要更高的编程技术,但也能显著提升Web内容的品质。使用HTML5时这些特性并非非用不可,不过对于复杂项目来说它们值得一试。
注意 本书没有涉及的一种HTML5相关技术是SVG(Scalable Vector Graph,可缩放矢量图形)。使用SVG技术,可以用标记或JavaScript生成二维矢量图形。这不是一个简单的话题。对SVG感兴趣的读者可参阅Kurt Cagle所著的SVG Programming一书,该书由Apress出版。
1.5 HTML5的更多信息
虽然本书力求做到全面详尽,但是有些事情还是难以避免。读者可能会遇到我未曾提及的情况,也可能会有问题但在书中找不到答案。在此情况下,首选的参考资料是W3C的网站。读者可以在此细读相关标准,并能明白浏览器应该如何处理。那些标准可能不太好读(甚至有自我参照倾向),但能提供一些有用的深层信息。
还有一个资料来源是Mozilla开发者网络。它更具亲和力,不过权威性略有不如。上面有大量关于各种HTML特性的有用信息,包括一些HTML5方面的很不错的内容。
1.6 小结
本章为讲解HTML5提供了一些背景知识,罗列了HTML发展史上的一些关键转折点,并说明了HTML5的应对方式。下一章将告诉读者如何为使用本书中的大量例子做好准备。在此之后,我们就将从HTML元素本身入手开始HTML5的探索之旅。

内容简介
HTML5 权威指南》是系统学习网页设计的权威参考图书。本书分为五部分:第一部分介绍学习本书的预备知识和HTML、CSS 和JavaScript 的最新进展;第二部分讨论HTML 元素,并详细说明了HTML5中新增和修改的元素;第三部分阐述CSS,涵盖了所有控制内容样式的CSS 选择器和属性,并辅以大量代码示例和图示;第四部分介绍DOM,剖析如何用JavaScript 操纵HTML 内容;第五部分讲解Ajax、多媒体和canvas 元素等HTML5 高级特性。
本书面向初学者和中等水平Web 开发人员,是牢固掌握HTML5、CSS3 和JavaScript 的必读之作。

购买书籍

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

PDF电子书下载地址

相关书籍

搜索更多