本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第1章,第1.4节,作者:【英】Peter Gasston,更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.4 真正的HTML5
HTML5是HTML4.01的迭代,它在HTML4.01基础上添加了一些新功能,废弃或者删除了几项旧功能,并且对一些现有的功能进行了修改。编写HTML5的目的一是为了规范许多开发人员已使用多年的常见程序编辑和设计模式,二是为了满足现代网络的需求,这是因为,现代网络与应用程序的相关性和它与文档的相关性是一样大的(也可能更大)。事实上,Web Applications 1.0是HTML5的前身。
HTML5的新功能包括建立可提供含义和可接入性的文档,我会在第2章中介绍。HTML5还会有一系列的新窗体功能和UI控件,使得应用程序的生成变得更加简单,这方面的内容可以翻阅第8章。此外,HTML5还包括依然被很多人用来相互联系的本机(无插件)视频,第9章将讲述这个话题。
如今有两个主要群体正对HTML5产生着影响,他们的角色和职责大致是这样的:WHATWG(读者不需要知道这个首字母缩略词是什么意思),这是个由浏览器生产商们和“感兴趣各方”组成的财团,通过最重要的规格编辑器Ian Hickson,它创建了HTML的“现存规范”—这基本上是一个无版本的规范,它能不断地合并新功能、更新现有功能;另一个是W3C(万维网联盟),即万维网的标准机构,它的职责是获取无版本规格的快照,来创建编号了的版本,以使浏览器供应商能确保实现的兼容性。
事实上,情况比这要复杂些,另外,这还涉及很多政治争论。只有标准的书呆子才会对这些争论感兴趣,它们不会对读者有任何的实际影响。
W3C提议,虽然眼下还不能确认,到2014年时HTML5应当进入推荐状态—即“完成”状态;随后,在2016年推出HTML5.1。它还提议,HTML5应当分解成单独的模块,这样,就可以在不同的模块上同时进行操作,而不用担心影响到整体的速度。然而,这些对读者来说真的无关紧要,你仅仅需要知道的是当浏览器里何时会包含HTML5,以及何时可以使用HTML5。
1.4.1 HTML5模板
作为一个具备HTML基本使用知识的人,你要熟悉基本的页面标记。但是对于HTML5,情况稍有不同—虽然不多,但值得提及。下面的代码块是本书中所有例子的基本模块(也可以参考范例文件template.html):
大家应该对这个例子中的大部分代码比较熟悉,但我想讨论两个兴趣点。第一个兴趣点是Doctype。它是一个残余物,因为在过去,你不得不告诉浏览器所写的是哪种文档类型(strict HTML、transitional HTML、XHTML1.1等其他文档类型)。然而,在HTML5中,就没有必要这样做了—因为HTML5只青睐一种HTML—所以就不再需要Doctype声明了。理论上就是这样。
现代浏览器往往有三种渲染模式:怪异模式(quirks mode)模仿IE5的非标准渲染,这是为了满足兼容旧版网页的需求;标准模式(standards mode)是现代的标准兼容行为;近乎标准模式是添加了稍许混杂的标准模式。
想知道使用哪种模式,浏览器就要求助于Doctype。我们总是想要使用标准模式,所以在HTML5中,Doctype是能触发标准模式的最短可行路线:
第二个兴趣点是meta标记,它也是标准HTML5模板所做的另一个更改,用来表明Unicode字符范围。使用Unicode字符可以呈现页面上的文本,而UTF-8是一种被万维网普遍默认使用的Unicode字符,所以大多数情况都会使用UTF-8。meta标记使用charset属性:
确实可以这样:如果客户要求“用HTML5来创建网站”,则只需更新那两个标记,然后向他们收取一大笔费用。不要真这么做,我只是开个玩笑。
其实,我本应该涵盖很多其他模式,但是为了清晰和简洁,我把它们都省略了。如果想要了解更多模式,则可以访问深受用户欢迎的HTML5 Boilerplat网站。这里提供了全面的模板,读者可以仔细阅读,看看这个模板有什么作用—但请牢记,只能把它当成参考,不要一字不差地生搬硬套。
1.4.2 新型最佳实践
除了对核心模板的更改外,HTML5还有一两个新的最佳实践,读者应该考虑去实现它们。开发人员利用许多不同编写代码的方式来编写HTML5,当然,这些方式不应该被当作一成不变的规则,但在我看来,它们会使代码易于编写和维护。
HTML5的第一个最佳实践是,用户不再需要使用type属性来调用最常见的外部资源。在使用HTML4.01或者XHTML时,我们不得不为每个link、script或style标签声明类型:
但在万维网上工作时,CSS和JavaScript事实上是使用这些标记的默认资源类型,所以每次都将它们写出确实有一点冗余。因此可以立即删除它们,这样不仅浏览器能更好地理解代码,而且代码也能更整洁一些:
只有在不使用默认的CSS或JavaScript时,才需要使用这些标签。例如,某些版本的火狐浏览器具有最新版本JavaScript的实验实现。并且,为了安全起见,当用户想要使用最新版本JavaScript时,只需要在type属性中加上一个标记:
HTML5对语法也非常宽容。无论是使用所有的小写字符, 或是引用属性值,还是喜欢关闭空元素,HTML5都很乐于分析和理解它们。因此,以下三条代码的作用是相同的:
注释:
当属性值有多个值时,就需要使用引号,例如类名列表。如果属性值包含某些特殊字符,则也需要引号。
某些被称为布尔值属性(Boolean attribute)的属性,只有真或者假两种值;除非另有指定,否则它们被推定为以“真”这个值存在,所以用户不需要提供一个值—除非使用的是类似XML的语法,那就必需提供值,在这种情况下,需要使用属性本身的名称。这就意味着,以下两者是等效的:
我自己的偏好是全部使用小写,全部引用,但我不喜欢关闭空元素:
在整本书中,我使用的都是这种模式,因为我觉得这样更简洁,并且更易于使用。此外,我使用的文本编辑器具有语法高亮显示,这使得代码变得清晰,方便浏览。读者可以随心所欲地使用自己想要的模式,但必须保持一致,以确保可维护性。