前言

前言

乍一看,你可能觉得HTML5是网页编写语言HTML的第5个版本。但实际上,这背后的故事可乱得多。

HTML5是一个叛逆。它是由一群自由思想者组成的团队设计出来的,这个团队的成员并不负责制定官方HTML标准。它允许使用10年前就被禁止的网页编写方式。它费尽心机、苦口婆心地告诉浏览器开发商怎么处理而不是彻底拒绝标记中的错误。它最终实现了不依赖Flash等浏览器插件播放视频。而且它引入了一大批JavaScript驱动的功能,让网页可以像传统桌面软件那样丰富多彩、富有交互能力。

理解HTML5可没有那么简单。最主要的困难在于人们用HTML5这个词指代十几种甚至更多独立的标准。(后面我们会介绍到,这是HTML5发展演进的结果。一开始时它只有一个标准,但后来就拆分成了很多容易管理的分支。)事实上,HTML5现在代表的是“HTML5及所有相关标准”,甚至还可以更宽泛,代表“下一代网页编写技术”。这就是本书要带领大家探索的HTML5:既包括HTML5核心语言,也包括与HTML5纠缠在一块但在其标准中永远找不到的那些新功能。

于是,第二个困难又摆在了你的面前:浏览器支持。不同的浏览器支持HTML5的程度不同。最差劲的是IE8,它对HTML5的支持非常有限,目前每20台能上网的电脑中就有1台安装着IE8(至少本书写作时是这个比例,后面1.6.2节会介绍怎么查到浏览器装机统计信息)。好在我们有办法弥补浏览器支持上的缺陷,但有的办法简单,有的办法也不讨人喜欢。根据在今天的网页中使用HTML5的需求,本书对这两种方法都会适当介绍。

抛开这些困难,有一个事实毫无争议:HTML5代表未来。苹果、谷歌和微软等大软件公司都在鼎力支持它;W3C(World Wide Web Consortium,万维网联盟)已经放弃了XHTML,从而使HTML5成为正式标准并得到认可。如果你在看这本书,那么也可能加入HTML5阵营,并利用它创造出如图0-1所示的那种酷炫的网页。

阅读本书的条件

本书介绍的HTML5是HTML标准最新最好的版本。虽然不一定非得是标记大师才能看懂这本书,但阅读本书的的确确还是需要一些Web设计经验的。以下就是几个必要条件。

  • 写过网页。本书假设你以前至少写过一些网页(或者至少知道怎么使用HTML元素把内容分成标题、段落和列表,等等)。如果你刚刚接触Web设计,那最好是先找一本合适的入门书看一看,比如我的Creating a Website: The Missing Manual, Third Edition。(不过别担心,你不会被限制在过去的技术中,这本书里的示例都是有效的HTML5文档。)

    图0-1:在Web世界黑暗的过去,要编写网页游戏,必须依赖Flash这样的浏览器插件。但有了HTML5的新功能——包括canvas(图中显示的就是)之后,你可以使用可靠而又免插件的JavaScript。这个图展示的是用HTML5技术开发的迷宫游戏(第9章将详细讨论)

  • 懂样式表。没有CSS(Cascading Style Sheet,层叠样式表)就没如今的网站。CSS为页面提供布局和格式。要想顺利阅读本书,你应该知道样式表的基本知识,包括怎么创建样式表,里面都有什么,以及怎么把它应用到网页上。如果你不太清楚CSS是干什么的,可以先看一看附录A。如果你需要更多帮助,或者想提高自己的CSS技能,以便真正做出漂亮的布局和样式,建议你看看 David Sawyer McFarland 的 CSS3: The Missin Manual (O'Reilly)。

  • 懂JavaScript。当然,编写HTML5页面用不着JavaScript。可是,如果你想使用HTML5不计其数的强大功能——比如在画布上画图或者与Web服务器通信,那就需要JavaScript了。如果你有一些浅显的编程经验,但对JavaScript还一知半解,附录B可以帮你掌握一些新情况。不过,要是一听到写代码这几个字,马上就像被窝里爬进一条蟒蛇那样魂飞魄散,那要么你根本不必看本书中的很多章节了,要么你得通过 David Sawyer McFarland 的 JavaScript & jQuery: The Missing Manual (O'Reilly)补补课。

如果这些必要条件让你头晕目眩——好吧,这就是活在Web设计最前沿必须付出的代价。

编写 HTML5

编写HTML5页面可以使用编写HTML页面时使用的软件。可以是个再简单不过的文本编辑器,像 Windows 中的记事本,或者 Mac 中的 TextEdit 。目前也有很多设计工具(比如 Adobe Dreamweaver和Microsoft Visual Studio)提供了快速创建新HTML5文档的模板。不过,HTML5页面的基本结构确实非常简单,任何网页编辑软件(即使不是为HTML5设计的)都没有问题。

注意 当然啦,不管你上网和编写网页时用的计算机是Windows PC,还是最新的MacBook Pro,同样也无所谓,因为HTML5与操作系统无关。

查看 HTML5

现在,任何浏览器的最新版本都能支持大多数的HTML5功能,包括那些在苹果和Android设备上运行的移动版浏览器。只要你的浏览器是最新的,HTML5就可以出色地运行,因此就可以用来测试本书中的示例。

目前,还没有一款浏览器巨细靡遗地支持HTML5的所有功能,HTML5本身就是一大批互相关联的标准也是其中一个原因。谷歌Chrome在对HTML5的支持方面通常处于领跑地位,Firefox和Opera紧追不舍,Safari也尾随其后,IE的差距则一直很大。老版本IE是真正的老大难问题,这些IE不能升级,主要是因为它们都运行在Windows Vista或Windows XP这样老掉牙的操作系统上(这两个操作系统仍然跑在世界1/5的台式机中)。1.6节会更全面地探讨这个问题,并给出应对建议。

什么时候可以使用 HTML5

简短的答案是“现在”。就连遭人唾弃的IE6,这个问世长达10年之久、补丁撂补丁的家伙都可以显示基本的HTML5文档。这是因为创建HTML5标准时,就想让它能涵盖并扩展原来的 HTML。

更详尽的答案是“视情况而定”。前面刚刚提到过,HTML5是一组不同标准的集合,浏览器对这些标准有着不同程度的支持。因此,尽管现在任何Web开发人员都可以转而编写HTML5文档(谷歌、YouTube和Wikipedia等很多大型网站已经这样做了),但要放心地使用HTML5的全部新奇功能——至少不必针对那些不够开化的浏览器采取变通手段,恐怕还要再过一些时日。

注意 在告诉读者使用某项HTML5新功能之前,我们会明确指出该功能得到了哪些浏览器的支持。当然,浏览器版本变化得比较快,如果你担心使用某功能会有问题,最好还是随时查阅某些资料。在此,推荐大家使用http://caniuse.com,通过这个网站可以查到任何一项功能,以及哪个浏览器的哪个版本支持它。(1.6.1节还将详细介绍如何使用这个网站。)

作为有标准意识的开发人员,恐怕你也对这些标准什么时候正式颁布感兴趣。但这个问题有点复杂,因为设计HTML5的人遵循的理念有点不合常规。他们经常说,正式的标准中怎么说并不重要,关键是有没有浏览器支持。换句话说,只要你觉得可行,现在就可以采用任何你想使用的功能。但不少开发人员、大公司、政府机关以及其他组织,通常会根据一种语言的标准是否正式颁布来判断是否可以采用它。

在本书写作时,HTML5正处于候选推荐标准(candidate recommendation)阶段。这意味着标准很大程度上已经尘埃落定,但浏览器开发商仍然在完善自己的实现。而进入下一个(也是最后一个)阶段,也就是推荐标准(recommendation)阶段,可能要等到2014年年底。在此期间,W3C 已经发布了HTML5.1的工作草案(working draft)。(要了解这两个版本的区别,请看下面的附注)。

HTML5与HTML5.1的区别

HTML又有新版本了?怎么又多出来一个空格呢?

正如我们将在第1章介绍的,HTML5经过了两个组织之手。整个过程因此遗留了一些小问题,包括一个有点轻微“分裂”的版本系统。

最初制定HTML5规范的人(即WHATWG成员,将在1.1.3节介绍)对版本号不太“感冒”,他们认为HTML5是一门“活的”语言,鼓励Web开发者关注浏览器的支持情况,而非版本号。

可是,WHATWG把HTML5交给了W3C官方,以便W3C把它制定完成。W3C是一个严谨、细致的组织,希望区分最初发布的HTML5和后来经过改进的版本。因此,W3C决定将最初发布的HTML5命名为HTML 5.0(注意空格),第二次发布的版本就是HTML 5.1,第三次发布时就叫HTML 5.2。真够乱的,所有这些版本其实都还是HTML5。

顺便说一下,后续几个版本的HTML5标准不可能再有大的改动了。如果有新功能,也会以独立的、补充性的规范形式发布。这样,少数几个人很快就可以制定新的HTML5功能规范,而不必等待对整个语言的修订。

本书内容

本书把完整的HTML5教程分为13章,具体内容如下。

第一部分:现代标记

  • 第1章介绍HTML发展到HTML5的历程。我们会看一看HTML5文档的样子,看看它跟以前的HTML有何不同,另外也看一下浏览器的支持情况。

  • 第2章讨论HTML5的语义元素(semantic element),也就是一组可以为标记赋予含义的元素。恰当地使用这些元素,可以让浏览器、屏幕阅读器、Web设计工具以及搜索引擎基于它们提供的额外信息更智能地工作。

  • 第3章进一步讨论语义的概念,涉及微数据(microdata)等标准。尽管这一章的内容有点偏理论,但透彻理解这个概念可以给Web开发人员带来巨大的回报:在谷歌等搜索引擎的结果列表中显示更全面、更详尽的内容。

  • 第4章探索HTML5 Web表单元素的变化,包括文本框、选择列表、复选框和其他用来从访客那里收集信息的微件(widget)。HTML5为捕获数据输入错误提供了一些辅助和基本工具。

第二部分:视频、图形和特效

  • 第5章讲一讲HTML最激动人心的功能,即支持音频和视频播放。这一章将介绍如何避免遭遇“Web视频编解码器大战”,创建出在所有浏览器中都能工作的播放页面,同时还要学习创建自己定制的播放器。

  • 第6章介绍最新版本的CSS3标准,它与HTML5可谓绝配。我们将学习如何应用新奇的字体让文本变得活泼可爱,以及如何利用变换和动画添加吸引人的效果。

  • 第7章探索CSS3媒体查询。我们会介绍怎么使用它创建响应式设计,让网页平滑地适配各种移动设备。

  • 第8章将介绍名为画布(canvas)的二维绘图表面。你将会学习怎样在画布上绘制图形、图像、文本,甚至还将构建一个简单的绘图程序(使用JavaScript)。

  • 第9章进一步提升你的“绘画”技术。这一章将会学习投影、花哨的模式,以及可点击的交互图形和动画等更加令人神往的Canvas技术。

第三部分:构建 Web 应用

  • 第10章讨论在访客计算机中保存小段数据的Web存储功能。这一章还将介绍如何在网页而不是在Web服务器中使用JavaScript代码处理用户选择的文件。

  • 第11章探索HTML5的缓存功能,这个功能可以实现在断网的情况下仍然能够通过浏览器查看网页。

  • 第12章将把目光投向与Web服务器通信这个主题上。为此,将介绍久负盛名的XMLHttpRequest对象,JavaScript通过它可以联系Web服务器并请求信息。然后再讨论两个比较新的功能:服务器发送事件(Server-Sent Events)和Web Socket。

  • 第13章介绍了解决现代Web应用开发难题的三个新功能。第一是可以确定访客位置的地理定位;第二是在后台执行复杂任务的Web Worker;第三是能够同步网页URL到当前状态的浏览器历史功能。

最后有两个附录,可以为你掌握HTML5补习一些基础知识。附录A是对CSS的一个简要介绍,附录B则会简单地介绍JavaScript。

在线资源

作为Missing Manual丛书的读者,你所得到的不仅仅是一本书。在网上,你还可以找到示例文件以及技巧、文章,甚至是一两段视频。你可以跟Missing Manual团队交流,告诉我们你喜欢(或讨厌)本书的哪一方面。请访问www.missingmanuals.com,或直接阅读后面的某一小节。

Missing CD

本书没有附带光盘,但这对学习本书一点影响都没有。读者可以访问本书的Missing CD页面 http://missingmanuals.com/cds/html5tmm2e,下载本书讨论和展示的网页示例,这样你就不必自己动手敲那些长长的网页地址了。这个页面中列出了全书每一章提到的网站的链接。

提示 假如你想找某个特定的例子,我教给你一个好办法——看插图。在插图中,文件名一般都会出现在浏览器地址栏的末尾。比如,看到文件路径C:\HTML5\Chapter01\SuperSimple HTML5.html(图1-1),就知道对应的示例文件名叫SuperSimpleHTML5.html。

试验站点

还有另一种使用本书示例的方法,就是访问在线示例网站:www.prosetech.com/html5。在这个网站上可以看到本书的每一个示例,并直接在浏览器中运行它们。因为HTML5的某些功能需要一个真正的Web服务器,所以直接使用这个网站其实可以省点心。(如果你直接从计算机硬盘上运行网页,这些功能可能会导致一些怪异的现象,或者完全不能用。)而使用这个网站,就可以先看到某个例子的运行结果,然后再下载该页面并动手尝试。

注意 别担心自己不知道哪些HTML5功能需要Web服务器,到时候本书会给出提示的。

注册

如果你在oreilly.com注册了这本书,可能会享受到一些优惠,比如购买HTML5: The Missing Manual的新版时可以打个折。注册其实只需点几次鼠标。在浏览器地址栏里输入http://tinyurl.com/registerbook,直接就可以跳到注册(Registration)页面。

反馈

有问题要问?需要更多信息?想给我们写个书评?在反馈(Feedback)页面上,你可以向专家请教自己看书时碰到的问题,也可以分享自己对Missing Manual丛书的看法,甚至找到一些志同道合的朋友,听听他们谈论在做网站过程中的一些体会。

要想发言,可访问www.missingmanuals.com/feedback

勘误

为了尽可能保证本书切合实际、准确无误,每次重印我们都会纠正一些确认的勘误。这些勘误信息也会在本书网站上发布出来,以便读者更正自己手里这本书的错误。要提交或查看勘误,请访问http://tinyurl.com/html52e-mm1

1要提交中文版勘误,请访问图灵社区,并在本书页面下提交:http://ituring.cn/book/1361。——编者注

Safari® Books Online

Safari® Books Online是一个按需阅读的数字图书馆,有7500种技术图书和视频可供搜索。

通过订阅,可以在此阅读所有图书,观看任何视频。甚至可以在新书印刷之前阅读到它们。可以复制粘贴示例代码,收藏喜欢的内容,下载整章内容,为关键部分创建书签,添加评注,打印页面,以及享受其他众多省时省力的阅读体验。

O'Reilly Media已经将本书上传到Safari Books Online。访问http://my.safaribooksonline.com并免费注册,可以看到本书及O'Reilly和其他出版社图书的完整电子版。

目录

  • 版权声明
  • O'Reilly Media, Inc.介绍
  • 前言
  • 第一部分 现代标记
  • 第 1 章 HTML5 简介
  • 第 2 章 用语义元素构造网页
  • 第 3 章 编写更有意义的标记
  • 第 4 章 构建更好的 Web 表单
  • 第二部分 视频、图形和特效
  • 第 5 章 音频与视频
  • 第 6 章 美妙的 CSS3 字体和特效
  • 第 7 章 CSS3 与响应式 Web 设计
  • 第 8 章 基本 Canvas 绘图
  • 第 9 章 高级 Canvas 技术:交互性和动画
  • 第三部分 构建 Web 应用
  • 第 10 章 数据存储
  • 第 11 章 离线应用
  • 第 12 章 与 Web 服务器通信
  • 第 13 章 地理定位、Web Worker 和历史管理
  • 第四部分 附录
  • 附录 A CSS 基础
  • 附录 B JavaScript:页面的大脑