乍一看,你可能觉得HTML5是网页编写语言HTML的第5个版本。但实际上,这背后的故事可乱得多。
HTML5是一个叛逆。它是由一群自由思想者组成的团队设计出来的,这个团队的成员并不负责制定官方HTML标准。它允许使用10年前就被禁止的网页编写方式。它费尽心机、苦口婆心地告诉浏览器开发商怎么处理而不是彻底拒绝标记中的错误。它最终实现了不依赖Flash等浏览器插件播放视频。而且它引入了一大批JavaScript驱动的功能,让网页可以像桌面软件那样丰富多彩、富有交互能力。
理解HTML5可没有那么简单。最主要的困难在于人们用HTML5这个词指代十几甚至更多种独立的标准。(后面我们会介绍到,这是HTML5发展演进的结果。一开始时它只有一个标准,但后来就拆分成了很多容易管理的分支。)事实上,HTML5现在代表的是“HTML5及所有相关标准”,甚至还可以更宽泛,代表“下一代网页编写技术”。这就是本书要带领大家探索的HTML5:既包括HTML5核心语言,也包括与HTML5纠缠在一块但在其标准中永远找不到的那些新功能。
于是,第二个困难又摆在了你的面前:浏览器支持。不同的浏览器支持HTML5的不同部分,而且还有一些让人难受的新功能,任何平台的浏览器都不支持。
抛开这些困难,有一个事实接受起来毫无挑战性:HTML5代表未来。苹果、谷歌等大软件公司都在鼎力支持它;W3C(World Wide Web Consortium,万维网联盟)已经放弃了XHTML,从而使HTML5成为正式标准并得到认可;而且所有浏览器开发商现在都对它的大部分功能给予了支持。如果你在看这本书,那就有可能在它还让人觉得好玩和刺激的时候加入HTML5阵营,并创造出如图0-1所示的那种酷炫的网页。
阅读本书的条件
本书介绍的HTML5是HTML标准最新最好的版本。虽然不一定非得是标记大师才能看懂这本书,但阅读本书的的确确还是需要一些Web设计经验的。以下就是几个必要条件。
写过网页。本书假设你以前至少写过一些网页(或者至少知道怎么使用HTML元素把内容分成标题、段落和列表,等等)。如果你才刚刚接触Web设计,那最好是先找一本合适的入门书看一看,比如我的Creating a Website: The Missing Manual。(不过别担心,你不会被限制在过去的技术中,Creating a Website这本书里的示例都是有效的HTML5文档。)
图0-1:在Web世界黑暗的过去(也就是去年),要编写网页游戏,必须依赖Flash这样的浏览器插件。但有了HTML5的新功能——包括canvas(图中显示的就是)之后,你可以使用可靠而又免插件的JavaScript。这个图展示的是用HTML5技术开发的迷宫游戏(第7章将详细讨论)
懂样式表。没有CSS(Cascading Style Sheet,层叠样式表)就没如今的网站。CSS为页面提供布局和格式。要想顺利阅读本书,你应该知道样式表的基本知识,包括怎么创建样式表,里面都有什么,以及怎么把它应用到网页上。如果你不太清楚CSS是干什么的,可以先看一看附录A(“CSS简明教程”)。如果你需要更多帮助,或者想提高自己的CSS技能,以便真正做出漂亮的布局和样式,建议你看看David Sawyer McFarland的CSS: The Missing Manual(O’Reilly)。
懂JavaScript。当然,编写HTML5页面用不着JavaScript。可是,如果你想使用HTML5不计其数的那些超酷功能——比如在画布上画图或者与Web服务器通信,那就需要JavaScript了。如果你有一些浅显的编程经验,但对JavaScript还一知半解,附录B(“JavaScript简明教程”)可以帮你掌握一些新情况。不过,要是一听到写代码这几个字,马上就像被窝里爬进一条蟒蛇那样魂飞魄散,那要么你根本不必看本书中的很多章节了,要么你得通过David Sawyer McFarland的JavaScript & jQuery: The Missing Manual (O’Reilly)补补课。
如果这些必要条件让你头晕目眩——好吧,这就是活在Web设计最前沿必须付出的代价。
编写HTML5
编写HTML5页面可以使用编写HTML页面时使用的软件。可以是个再简单不过的文本编辑器,像Windows中的记事本,或者Mac中的TextEdit。目前也有很多设计工具(比如Adobe Dreamweaver和Microsoft Expression Web)提供了快速创建新HTML5文档的模板。不过,HTML5页面的基本结构确实非常简单,任何网页编辑软件(即使不是为HTML5设计的)都没有问题。
注意 当然啦,不管你上网和编写网页时用的计算机是Windows PC,还是最新的MacBook,同样也无所谓,因为HTML5与操作系统无关。
查看HTML5
每个人都想问一个问题:“哪些浏览器支持HTML5?”可悲的是,这个问题没有明确的答案。本书后面会介绍,HTML5实际上是一组独立标准的集合。有些标准已经得到了支持,而另一些标准几年内(甚至永远)不会得到支持。其他所有标准则介于这两种情况之间;换句话说,HTML5在某些浏览器的某些版本中能够运行。
下面列出的浏览器无需什么变通手段,就可以支持HTML5的绝大部分。
Internet Explorer 9及更高版本
. Firefox 3.5及更高版本
谷歌Chrome 8及更高版本
Safari 4及更高版本
Opera 10.5及更高版本
更高版本的支持程度更高。也就是说,Firefox 5能比Firefox 3.5更好地支持HTML5。
在鼓励大家使用新的HTML5功能之前,本书会清楚地说明当前浏览器对这些功能的支持情况。当然,浏览器版本的变化相对比较快,因此在尝试某些可能有问题的功能之前,你自己应该先搜索一下最新的支持情况。推荐一个网站:http://caniuse.com,你可以在上面搜索某个具体的功能,然后它会告诉你到底哪个浏览器的哪个版本支持该功能。(1.6节还将更详细地介绍这个工具的用法。)
注意 本书会讨论那些已知在某些浏览器中不能使用的功能。别慌,如果你只想对HTML5有所了解,而专注于那些今天可以使用的功能,这样不是挺好嘛。你可以通过这些功能窥见Web的未来。
什么时候可以使用HTML5
简短的答案是“现在”。就连遭人唾弃的Internet Explorer 6,这个问世长达10年之久、补丁撂补丁的家伙都可以显示HTML5文档。这是因为创建HTML5标准时,就想让它能涵盖并扩展原来的HTML。
更详尽的答案是“视情况而定”。前面刚刚提到过,HTML5是一组不同标准的集合,浏览器对这些标准有着不同程度的支持。因此,尽管现在任何Web开发人员都可以转而编写HTML5文档(Google、YouTube和Wikipedia等一些大型网站已经这样做了),但要放心地使用大部分HTML5 的新奇功能——至少不必针对那些不够开化的浏览器采取变通手段,恐怕还要再等几年。
注意 某项功能到底属于哪个规范并不重要,重要的是现在有没有浏览器支持它(以及尚未支持它的浏览器将来有没有可能支持它)。本书每介绍一项新功能,都会告诉读者它来自哪个规范,以及都有哪些浏览器支持它。
作为有标准意识的开发人员,恐怕你也对这些标准什么时候正式颁布感兴趣。但这个问题有点复杂,因为设计HTML5的人遵循的理念有点不合常规。他们经常说,正式的标准中怎么说并不重要,关键是有没有浏览器支持。(换句话说,只要你觉得可行,现在就可以采用任何你想使用的功能。)但不少开发人员、大公司、政府机关以及其他组织,通常会根据一种语言的标准是否正式颁布来判断是否可以采用它。
从技术上说,HTML5语言现在还是W3C手中的工作草案(working draft)。对标准的这种称谓表明它已经相当成熟了,但在成为候选推荐标准(candidate recommendation)的时候(可能是2012年的某一天),仍然可能会有改动。而到真正的推荐标准(recommendation)阶段,因为必须有足够的测试,可能就是很多年之后的事了。但那确实不怎么重要了,因为到了该阶段,即便有改动也会很少,而想要使用HTML5的人也早已经有了自己的选择。
本书内容
本书把完整的HTML5教程分为12章,具体内容如下。
第一部分:认识新语言
第1章(“HTML5简介”)介绍HTML发展到HTML5的历程。我们会看一看HTML5文档的样子,看看它跟以前的HTML有何不同,另外也看一下浏览器的支持情况。
第2章(“构造网页的新方式”)讨论HTML5的语义元素(semantic element),也就是一组可以为标记赋予含义的元素。恰当地使用这些元素,可以让浏览器、屏幕阅读器、Web设计工具以及搜索引擎基于它们提供的额外信息更智能地工作。
第3章(“有意义的标记”)进一步讨论语义的概念,涉及微数据(microdata)等标准。尽管这一章的内容有点偏理论,但透彻理解这个概念可以给Web开发人员带来巨大的回报:在Google等搜索引擎的结果列表中显示更全面、更详尽的内容。
第二部分:制作新网页
第4章(“Web表单”)探索HTML5 Web表单元素的变化,包括文本框、选择列表、复选框和其他用来从访客那里收集信息的微件(widget)。HTML5为捕获数据输入错误提供了一些辅助和基本工具。
第5章(“音频与视频”)讲一讲HTML最激动人心的新功能,即支持音频和视频播放。这一章将介绍如何避免遭遇“Web视频编解码器大战”,创建出在所有浏览器中都能工作的播放页面,同时还要学习创建自己定制的播放器。
第6章(“基本Canvas绘图”)介绍名为画布(canvas)的二维绘图表面。你将会学习怎样在画布上绘制图形、图像、文本,甚至还将构建一个简单的绘图程序(使用一系列强大的JavaScript代码)。
第7章(“高级Canvas技术”)进一步提升你的“绘画”技术。这一章将会学习投影、花哨的模式,以及可点击的交互图形和动画等更加令人神往的Canvas技术。
第8章(“使用CSS3”)将介绍最新版本的CSS3标准,它与HTML5可谓绝配。我们将学习如何应用新奇的字体让文本变得活泼可爱,如何让页面适应不同的移动设备,以及利用变换添加吸引人的效果。
第三部分:构建桌面式Web应用
第9章(“数据存储”)讨论在访客计算机中保存小段数据的新Web存储功能。(非常像cookie的超级简捷版。)这一章还将介绍如何在网页而不是在Web服务器中,使用JavaScript代码处理用户选择的文件。
第10章(“离线应用”)探索新的HTML5缓存功能,这个功能可以实现在断网的情况下仍然能够通过浏览器查看网页。
第11章(“与Web服务器通信”)将把目光投向与Web服务器通信这个主题上。为此,将介绍久负盛名的XMLHttpRequest对象,JavaScript通过它可以联系Web服务器并请求信息。然后再讨论两个比较新的功能:服务器端事件和(影响更加深远但还需要完善的)Web套接字。
第12章(“更酷的JavaScript技术”)介绍了解决现代Web应用开发难题的三个新功能。第一是可以确定访客位置的地理定位;第二是在后台执行复杂任务的Web Worker;第三是能够同步网页URL到当前状态的新的浏览器历史功能。
最后有两个附录,可以为你掌握HTML5补习一些基础知识。附录A是对CSS的一个简要介绍,附录B则会简单地介绍JavaScript。
在线资源
作为Missing Manual丛书的读者,你所得到的不仅仅是一本书。在网上,你还可以找到示例文件以及技巧、文章,甚至是一两段视频。你可以跟Missing Manual团队交流,告诉我们你喜欢(或讨厌)本书的哪一方面。请访问www.missingmanuals.com,或直接阅读后面的某一小节。
Missing CD
本书没有附带光盘,但这对学习本书一点影响都没有。读者可以访问本书的Missing CD页面http://missingmanuals.com/cds/html5mm,下载本书讨论和展示的网页示例,这样你就不必自己动手敲那些长长的网页地址了。这个页面中列出了全书每一章提到的网站的链接。
提示 假如你想找某个特定的例子,我教给你一个好办法——看插图。在插图中,文件名一般都会出现在浏览器地址栏的末尾。比如,看到文件路径C:\HTML5\Chapter01\SuperSimple HTML5.html(图1-1),就知道对应的示例文件名叫SuperSimpleHTML5.html。
试验站点
还有另一种使用本书示例的方法,就是访问在线示例网站:www.prosetech.com/html5/。在这个网站上可以看到本书的每一个示例,并直接在浏览器中运行它们。因为HTML5的某些功能需要一个真正的Web服务器,所以直接使用这个网站其实可以省点心。(如果你直接从计算机硬盘上运行网页,这些功能可能会导致一些怪异的现象,或者完全不能用。)而使用这个网站,就可以先看到某个例子的运行结果,然后再下载该页面并动手尝试。
注意 别担心自己不知道哪些HTML5功能需要Web服务器,到时候本书会给出提示的。
注册
如果你在oreilly.com注册了这本书,可能会享受到一些优惠,比如购买Creating a Website: The Missing Manual的新版时可以打个折。注册其实只需点几次鼠标。在浏览器地址栏里输入http://tinyurl.com/registerbook,直接就可以跳到注册(Registration)页面。
反馈
有问题要问?需要更多信息?想给我们写个书评?在反馈(Feedback)页面上,你可以向专家请教自己看书时碰到的问题,也可以分享自己对Missing Manual丛书的看法,甚至找到一些志同道合的朋友,听听他们谈论在做网站过程中的一些体会。要想发言,可访问www.missingmanuals.com/ feedback。
勘误
为了尽可能保证本书切合实际、准确无误,每次重印我们都会纠正一些确认的勘误。这些勘误信息也会在本书网站上发布出来,以便读者更正自己手里这本书的错误。要提交或查看勘误,请访问http://tinyurl.com/3q56k7v。
简报
订阅我们免费的电子邮件简报可以随时了解Missing Manual丛书的新动向。这样可以方便你与作者、编辑联系,并能看到免费视频和图书样章等。要订阅,请访问http://tinyurl.com/MMnewsletter。
Safari? Books Online
Safari? Books Online是一个按需阅读的数字图书馆,有7500种技术图书和视频可供搜索。
通过订阅,可以在此阅读所有图书,观看任何视频。甚至可以在新书印刷之前阅读到它们。可以复制粘贴示例代码,收藏喜欢的内容,下载整章内容,为关键部分创建书签,添加评注,打印页面,以及享受其他众多省时省力的阅读体验。
O’Reilly Media已经将本书上传到Safari Books Online。访问http://my.safaribooksonline.com并免费注册,可以看到本书及O’Reilly和其他出版社图书的完整电子版。