锻造坊 - HTML5
关于 Web，最令人惊叹的事情之一一直是创建网站的相对容易性。您所要做的就是学习一些 HTML 标签，创建一个使用这些标签的文件，然后 瞧，您就拥有了一个单页网站。再学习一两个标签，您现在就可以创建包含图像、指向其他页面的链接以及各种其他好东西的多页网站。真的，学习 HTML 的基础知识只需几个小时。
问题在于，这种浅薄的学习曲线长期以来掩盖了一个事实，即 HTML 的词汇量没有跟上时代的步伐。是的，创建网站非常容易，但是当您想要开始设计网站样式时，事情就会变得有点复杂。而且，我并不是说它们变得复杂是因为 CSS 对很多人来说很难理解（确实如此）。相反，事情变得复杂是因为样式通常附加到 span 和 div 标签，这意味着页面最终包含许多 span 和 div 标签，每个标签都有自己的 ID 和/或 class，以便您可以将每件事都设计得恰到好处。
现在，在 HTML 页面上拥有数十个 div 标签在技术上并没有什么问题。但是，在蒂姆·伯纳斯-李和其他人谈论“语义网”，并且越来越多的计算机（而不是人）试图检索和解析 Web 上的文档时，坚持使用如此有限的词汇量似乎很奇怪。
在抱怨的同时，我很难相信自 1993 年我开始使用 HTML 表单以来，它们几乎没有改变。考虑到有大量网站要求您输入电子邮件地址或日期，您会认为 HTML 表单会包含针对这些类型输入的特殊规定，而不是强迫人们为每个输入都使用文本字段。
事实上，目前的 HTML 形式以及许多允许您很好地设计其样式的 CSS 选择器都存在很多问题。HTML 已经成为我生活的一部分很长时间了，以至于当我开始更深入地思考这些问题时，其中一些问题甚至没有在我脑海中出现。不过，对 Web 来说幸运的是，我不是负责这种思考的人。经过多次尝试和失败，HTML5 规范（以及一些其他相关规范，例如 CSS3）包含了大量改进，并且开始流行起来。
好消息是，HTML5（及其朋友）可以为 Web 开发人员提供很多东西。实际上，我已经将所有新开发都切换为使用 HTML5，并且我希望尽可能地反向移植应用程序。但是，HTML5 是大量不同标签、功能和 CSS 选择器的统称，而且，每个浏览器制造商都在零敲碎打地实现这些，并且无法保证在不久的将来 100% 兼容。
这使 Web 开发人员处于一种令人羡慕的境地，他们能够享受大量新功能，但也不得不经常检查用户的浏览器是否可以利用这些功能。我发现这有点讽刺。多年来，我们中的许多人一直吹捧 Web 和服务器端应用程序是绕过与困扰桌面应用程序的兼容性问题相关联的麻烦的一种方法。尽管浏览器兼容性始终是某种问题，但迄今为止我们遇到的问题与我们目前的问题相比相形见绌，部分原因是 HTML5 元素比我们以前见过的更高级。（最接近的等价物将是早期 Web 中缺少表单支持的浏览器。）与此同时，JavaScript 现在已经足够成熟，可以为我们提供一种方法来测试这些功能是否存在，无论是我们自己测试还是使用第三方库。
本月，我将研究 HTML5 为桌面带来的希望，特别强调一些正在发挥作用的语法、元素和属性。我还将解释如何使用 Modernizr，这是一个开源 JavaScript 库，可自动测试各种 HTML5 功能，以便您可以使用替代方案。
我应该注意到一个一直是关于 HTML5 的许多公开讨论的中心主题，它与视频和音频格式有关。这些主题当然很重要且令人感兴趣，但它们在浏览器兼容性和许可问题方面也很复杂。诚然，HTML5 在许多方面简化了视频的使用，但这仍然是一个复杂的问题，没有真正简单的解决方案。如果您对此主题感兴趣，我建议您查看本文“资源”部分中提到的一本或多本书籍。
如果您像我一样，那么当您在新站点上创建第一个符合标准的 HTML（或 XHTML）页面时，您要做的第一件事是从现有站点复制文档类型。文档类型不仅为用户的浏览器提供了提示，表明它可以并且应该期望什么，而且还提供了一个标准，您可以根据该标准检查 HTML 的有效性。如果您未能提供文档类型，那么您不仅未能将您的马车连接到任何标准，而且您还在告诉 Microsoft 的浏览器它们应该在“怪异模式”下运行，这会明确忽略标准，并且会对您的 HTML 和 CSS 造成严重破坏。
现代 HTML 声明冗长且容易出错，所以我从不自己键入它们，而是从现有项目或 Web 上的其他人那里复制它们。幸运的是，HTML5 大大简化了这一点。通常，您只需将以下内容放在页面顶部即可
<!DOCTYPE html>
在文档类型之后，HTML 文档的外观和工作方式与您可能期望的非常相似。例如，文档有一个 <head> 部分，通常包含文档标题、指向样式表的链接、元标记和导入的 JavaScript 库。您将使用的最常见的元标记可能是确定字符编码的元标记；如今，几乎每个人都应该使用 UTF-8，您可以将其指定为
<meta charset="utf-8" />
在 <head> 部分之后是 <body> 部分，其中包含页面的实际内容。标签继续像以前一样工作，但规则有所放宽。例如，您不再需要引用缺少空格的属性值（尽管我认为这样做是个好主意），并且您可以省略 <img> 等标签上的自闭合尾部斜杠。
如果您厌倦了使用 <div> 来划分页面，并使用“header”、“footer”或“sidebar”的“id”属性，请振作起来，您并不孤单。谷歌显然对网页进行了一些统计分析，并确定大量站点使用 div 来设置其页眉和页脚等。为了使 HTML5 更具语义表达性，该规范包含许多新的节标签，例如 <section>、<article>、<header> 和 <footer>。您甚至可以指示一组特定的链接用于导航，例如菜单栏，方法是将它们放在 <nav> 标签内。请注意，这些新标签除了语义以及按标签而不是按 ID 设置样式的能力之外，不会改变任何内容。尽管这不一定会改变页面的技术布局，但它会使它们更易于阅读和理解，并且还会使搜索引擎更容易解析和处理文档，而无需查看 ID 和类，无论如何，这些都是任意的。
如果您曾经创建过 Web 应用程序，那么您无疑需要请人们输入他们的电子邮件地址或电话号码。在这两种情况下，您都需要使用文本字段，然后大概需要检查（使用 JavaScript、服务器端程序或两者）以确保电子邮件地址有效，或者电话号码仅包含有效字符。对于用户和开发人员来说幸运的是，HTML5 指定了许多新的输入和表单元素类型，从专门用于电话号码和电子邮件地址的字段，到颜色选择器和滑块。
在 HTML5 之前，如果您想让某人输入 URL，您将使用一个简单的文本字段
<input type="text" name="homepage" />
在 HTML5 中，您可以使用特殊的 url 输入类型
<input type="url" name="homepage" />
许多网站预先填充文本字段，其中包含应在此处输入的内容的提示或描述（例如，“在此处输入搜索词”），当您第一次单击该字段时，该提示或描述会消失。HTML5 使此过程自动化，允许您提供“占位符”文本
<input type="text" name="search" placeholder="Search here" />
您甚至可以通过设置“pattern”属性，使用正则表达式来限制您将在各种字段中允许的值。您还可以要求用户输入日期和时间，而无需指定六个单独的输入
<input type="datetime" name="datetime" />
这些表单元素不仅仅具有语义价值。浏览器本身可以监视这些元素，以确保提交的数据有效。这并不能消除服务器端验证和检查的需要，但它确实大大简化了事情。
所有这些听起来都很棒，并且将使 HTML 表单比以往任何时候都更有用和有效。但是，您知道肯定有一个陷阱，对这些 HTML 表单元素的支持在不同浏览器之间非常不稳定且不一致。Opera 似乎是支持它们的领导者，其次是 Apple 的 iPhone/iPad，Safari 浏览器紧随其后。Firefox 中对此类术语的支持几乎不存在。现在，当浏览器被要求呈现它无法识别的输入标签时，它会生成一个文本字段，这通常没问题，这是真的。而且，可以使用 JavaScript 绕过有问题的案例，例如日期和颜色选择器。但是，我仍然感到沮丧的是，在我们将看到它实现之前还需要一段时间。
另一个杀手级 HTML5 功能“canvas”已经开发了几年。它提供了一个 2D 绘图区域，您可以使用 JavaScript 控制（写入和读取）。canvas 使创建图形、图表甚至简单的绘图程序变得容易，其功能支持创建各种形状、线条、图像甚至渐变填充。
我倾向于成为一个面向文本的人，依靠设计师来完成网站中的大部分图形工作。然而，对我来说显而易见的是，Safari 和 Firefox 的最新版本支持的 canvas，并且将包含在 Internet Explorer 9 中，将开启许多可能性——不仅用于显示图形和图表，还用于在文本和图形下方和上方绘制，并允许在浏览器内进行新的、基于鼠标的交互和信息显示。
HTML5 中我最喜欢的新功能之一是地理位置。迄今为止，地理位置一直是一项非常不确定的业务，通常取决于 IP 地址。这通常会产生不太准确的结果——例如，大多数基于 IP 的地理位置库都表明我的房子在 Lod 市，距离我的城市 Modi'in 大约 20 分钟车程。现在，如果您意识到世界有多大，这不算太离谱，但这对于从超市查找器到朋友定位器的地理位置应用程序来说还不够好。
尽管 HTML5 没有正式包含地理位置标准，但它正在与 HTML5 一起开发和发布，所以我很乐意将其与标准放在一起。（我不是第一个这样做的人。）通过在浏览器中提供功能，JavaScript 程序可以获取您当前的位置
navigator.geolocation.getCurrentPosition(function(position) {
alert("longitude = " + position.coords.longitude + ",
↪latitude = " + position.coords.latitude);
});
还有各种各样的其他功能，包括一些将帮助您跟踪速度和移动的功能，用于帮助导航的应用程序。而且，我无法告诉您为什么，但 HTML5 浏览器中的地理位置始终比简单的 IP 地址定位器更准确。仅这一点对于计划依赖此类功能进行应用程序开发的人们来说就是好消息。
现在，如果任何 Web 应用程序都可以普遍获得地理位置信息让您感到紧张，请放心，创建这些标准的好心人已经尽力确保您的隐私。当调用地理位置功能时，并且在它返回任何结果之前，浏览器中会显示一个对话框，询问是否可以共享位置信息。此消息明确指示请求数据的站点，阻止其执行，直到用户响应。
如果您想知道，您可以在 JavaScript 中获取位置信息这一事实并不意味着您被迫使用 JavaScript 在客户端编写所有软件。您始终可以使用 Ajax 调用获取地理位置信息并将其发送到服务器。
地理位置取决于能够在浏览器中依赖此功能的存在。在撰写本文时，各种浏览器都完全支持它，但在 Internet Explorer 或 Opera 中不支持。在这样的系统上，您可能需要联系服务器以执行基于 IP 的地理位置服务器调用，这会引起所有问题。
也就是说，我对未来浏览器中地理位置的引入感到非常兴奋，并且我期待看到由此产生的应用程序。
正如我之前指出的，很高兴知道 HTML5 正在分阶段推出，并且我们不需要等待完整的实现准备就绪，这可能需要数年时间。但是，这也意味着每个浏览器都支持 HTML5 标准的略有不同的子集，这给旨在为用户提供统一平台的 Web 开发人员带来了麻烦。
幸运的是，有一些方法可以检查当前浏览器，以查看它是否支持 HTML5 提供的每个功能。但是，您可能希望能够专注于开发应用程序，而不是创建有用且可靠的测试。开源 Modernizr JavaScript 框架易于下载和安装（因为它是一个 .js 文件），它允许您从程序中查询浏览器，检查是否存在哪些功能。例如，如果您想知道是否支持地理位置，您可以说
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(handle_position);
}
else
{
alert("Ack! I have no way of knowing where you are!");
}
尽管 Modernizr 可以极大地帮助识别哪些功能可用，但它并没有解决真正的问题，即优雅地处理缺少此类功能的情况。我知道 Modernizr 并非旨在承担此类责任，但也许 jQuery 社区（或其他地方）的某个人会创建一个库（后 Modernizr？）在 Modernizr 的基础上更进一步，允许我们弥合浏览器之间的差异，就像 Prototype 和 jQuery 几年前对基本 JavaScript 功能所做的那样。
HTML5 即将到来，有些人会说它已经到来。如果您正在创建 Web 应用程序，那么使用 HTML5 将对您自己和您的用户都有很大的帮助。但是，这样做确实会引发关于您可以并且将包含哪些功能以及您打算支持哪些浏览器的问题。我们已经看到了 Modernizr 如何帮助消除这些差异并保持 Web 的通用媒介，但这样做需要做一些工作。下个月，我将研究一些旨在使 Web 成为更完整的应用程序框架的功能，即 Web 套接字（用于进程间通信）、工作线程（用于后台线程）和本地存储。
资源
HTML5 最近已成为热门话题，导致出现大量关于该主题的书籍、博客文章甚至杂志文章（如本文！）。此外，W3C 还有许多关于 HTML5 的标准和论文。
我读过的关于该主题的最佳书籍甚至不是一本合适的书，而是一个由 Mark Pilgrim 编写的免费在线资源。如果您熟悉 Pilgrim 以前的作品，例如 深入 Python，您就会知道他的写作非常出色。毫不奇怪，这是我转向的第一个资源，以充实我的 HTML5 知识，并且它仍然是我最喜欢的教程和参考资料的组合。
我还阅读过另外两本关于该主题的书籍，每本书都以自己的方式介绍了事物。Pragmatic Programmers 出版了 Brian Hogan 的 HTML5 和 CSS3。这本书写得很好，（我认为）对该主题的介绍比其他书更温和。Apress 有自己的书，名为 Peter Lubbers、Brian Albers 和 Frank Salim 的 Pro HTML5 Programming。最后一本书也是针对初学者的，但我发现它的示例不如其他书中的示例有用。
还有许多关于 HTML5 的优秀文章和博客文章。一篇特别有趣的文章是 www.smashingmagazine.com/2010/09/23/html5-the-facts-and-the-myths。
最后，Modernizr 库位于 www.modernizr.com。关于它提供的内容的完整文档在该网站上，其中包含关于您的应用程序可用的信息的精彩详细信息。
Reuven M. Lerner 是一位长期的 Web 开发人员、架构师和培训师。他是西北大学学习科学专业的博士候选人，研究协作在线社区的设计和分析。Reuven 与他的妻子和三个孩子住在以色列的 Modi'in。
