HTML5权威指南 [平装] 9787115338365

HTML5 权威指南》是系统学习网页设计的权威参考图书。本书分为五部分：第一部分介绍学习本书的预备知识和HTML、CSS 和JavaScript 的最新进展；第二部分讨论HTML 元素，并详细说明了HTML5中新增和修改的元素；第三部分阐述CSS，涵盖了所有控制内容样式的CSS 选择器和属性，并辅以大量代码示例和图示；第四部分介绍DOM，剖析如何用JavaScript 操纵HTML 内容；第五部分讲解Ajax、多媒体和canvas 元素等HTML5 高级特性。 本书面向初学者和中等水平Web 开发人员，是牢固掌握HTML5、CSS3 和JavaScript 的必读之作。作为下一代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.1HTML的历史2 1.1.1JavaScript出场2 1.1.2浏览器战争的结束3 1.1.3插件称雄3 1.1.4语义HTML浮出水面3 1.1.5发展态势：HTML标准滞后于其使用4 1.2HTML5简介4 1.2.1新标准4 1.2.2引入原生多媒体支持5 1.2.3引入可编程内容5 1.2.4引入语义Web6 1.3HTML5现况6 1.3.1浏览器对HTML5的支持情况6 1.3.2网站对HTML5的支持情况6 1.4本书结构6 1.5HTML5的更多信息7 1.6小结7 第2章　准备工作8 2.1挑选浏览器8 2.2挑选HTML编辑器9 2.3挑选Web服务器9 2.4获取Node.js9 2.5获取示例代码10 2.6小结10 第3章　初探HTML11 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 数据19 3.3.3内容19 3.3.4父元素、子元素、后代元素和兄弟元素20 3.3.5了解元素类型20 3.4使用HTML实体21 3.5HTML5全局属性21 3.5.1accesskey属性21 3.5.2class属性22 3.5.3contenteditable属性25 3.5.4contextmenu属性25 3.5.5dir属性26 3.5.6draggable属性26 3.5.7dropzone属性26 3.5.8hidden属性26 3.5.9id属性28 3.5.10lang属性29 3.5.11spellcheck属性29 3.5.12style属性30 3.5.13tabindex属性30 3.5.14title属性31 3.6有用的HTML工具32 3.7小结32 第4章　初探CSS33 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.3CSS中的颜色48 4.4CSS中的长度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改进CSS59 4.7.4使用CSS框架59 4.8小结59 第5章　初探JavaScript60 5.1准备使用JavaScript61 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或null85 5.8.2区分null和undefined85 5.9常用的JavaScript工具86 5.9.1使用JavaScript调试器86 5.9.2使用JavaScript库86 5.10小结87 第二部分　HTML元素 第6章　HTML素背景知识90 6.1语义与呈现分离90 素选用原则91 6.2.1少亦可为多91 6.2.2别误用元素91 6.2.3具体为佳，一以贯之91 6.2.4对用户不要想当然92 素说明体例92 素速览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.1DOCTYPE元素99 7.1.2html元素99 7.1.3head元素100 7.1.4body元素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.1script元素117 7.3.2noscript元素123 7.4小结125 第8章　标记文字126 8.1生成超链接127 8.1.1生成指向外部的超链接128 8.1.2使用相对URL129 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.1ruby、rt和rp元素147 8.6.2bdo元素149 8.6.3bdi元素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.1ol元素169 9.7.2ul元素171 9.7.3li元素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使用article194 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确保输入值是电子邮箱地址或URL303 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.4object元素的其他用途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章　理解CSS326 16.1CSS标准化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创建盒子阴影 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章　理解DOM520 25.1理解文档对象模型520 25.2理解DOM Level和兼容性522 25.3DOM快速查询524 25.3.1Document的成员524 25.3.2Window的成员525 25.3.3HTMLElement的成员527 25.3.4DOM里的CSS属性529 25.3.5DOM中的事件531 25.4小结532 第26章　使用Document对象533 26.1使用Document元数据536 26.1.1获取文档信息536 26.1.2使用Location对象537 26.1.3读取和写入cookie541 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.4CSSRuleList对象的成员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.1base元素650 31.1.2body元素650 31.1.3link元素651 31.1.4meta元素651 31.1.5script元素651 31.1.6style元素652 31.1.7title元素652 31.1.8其他文档和元数据元素652 31.2文本元素652 31.2.1a元素652 31.2.2del和ins元素653 31.2.3q元素653 31.2.4time元素653 31.2.5其他文本元素654 31.3分组元素654 31.3.1blockquote元素654 31.3.2li元素654 31.3.3ol元素654 31.3.4其他分组元素655 31.4区块元素655 31.4.1details元素655 31.4.2其他区块元素655 31.5表格元素655 31.5.1col和colgroup元素655 31.5.2table元素656 31.5.3thead、tbody和tfoot元素656 31.5.4th元素657 31.5.5tr元素657 31.5.6其他表格元素657 31.6表单元素657 31.6.1button元素657 31.6.2datalist元素658 31.6.3fieldset元素658 31.6.4form元素658 31.6.5input元素659 31.6.6label元素660 31.6.7legend元素661 31.6.8optgroup元素661 31.6.9option元素661 31.6.10output元素661 31.6.11select元素662 31.6.12textarea元素663 31.7内容元素663 31.7.1area元素664 31.7.2embed元素664 31.7.3iframe元素664 31.7.4img元素665 31.7.5map元素665 31.7.6meter元素665 31.7.7object元素666 31.7.8param元素666 31.7.9progress元素667 31.8小结667 第五部分　高级功能 第32章　使用Ajax（第Ⅰ部分）670 32.1Ajax起步671 32.1.1处理响应674 32.1.2主流中的异类：应对Opera675 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.5track元素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小结 第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的探索之旅。