HTML5 如何工作

HTML markup up on laptop
超文本标记语言 (HTML) 已经存在了几十年，而 HTML5 于 2014 年问世。它是 HTML 的第五个版本，开发人员用它来构建和显示网页内容。 Jens Büttner/picture alliance 经由 Getty Images

超文本标记语言 (HTML) 自 20 世纪 90 年代初以来一直是网络的核心技术。蒂姆·伯纳斯-李于 1989 年创建了 HTML，作为一种简单但有效的方式来编码电子文档。事实上，网页浏览器的最初目的是作为此类文档的阅读器。二十年后，浏览器本身已成为在线媒体世界的门户。这就是为什么 HTML5 不仅仅是 HTML 的又一次修订，而是一个关于网页如何工作的综合标准。

为了更好地理解 HTML5 的独特之处，让我们把时间稍微拨回到过去。1994 年，HTML 仍处于其首次修订版，Mosaic 和 Netscape 主导着浏览器市场，大多数人还没有体验过这个名为万维网的新事物。那一年，HTML 的创建者伯纳斯-李领导了一个新成立的网络标准组织，即万维网联盟 (W3C)。

广告

尽管 W3C 在今天是一个受人尊敬的标准机构，但 20 世纪 90 年代浏览器市场中的商业参与者大多忽视了这些标准，并走出自己的道路。到 1995 年，W3C 发布了 HTML 标准的第二版，而网络新秀微软正凭借其 Internet Explorer (IE) 浏览器站稳脚跟。微软基本上忽视了标准，而 Netscape 在努力保持可观的市场份额时，IE 开始占据主导地位 [来源：Harris]。

在这些早期的浏览器大战中，网页开发人员面临着挑战，他们必须确保自己的网站与主要浏览器以及使用较少的 Opera 和 Apple Safari 浏览器的每个新版本兼容。尽管 W3C 在 1997 年发布了 HTML 3.2，随后在 1998 年发布了 HTML 4，但遵循标准似乎不如跟上浏览器特有的功能那么重要。这种情况一直持续到 2003 年，由社区驱动的 Mozilla 基金会打破了这一趋势。在其最初的 Mozilla 浏览器发布之后，紧接着是 2004 年的 Firefox 浏览器，Mozilla 迅速削弱了 IE 的主导地位。此外，这些新浏览器在这样做的同时，实际上遵循了现有的 W3C 标准。

当 Mozilla 的 Firefox 继续使用老旧的 HTML 4 标准发展时，Mozilla 于 2004 年与 Apple 和 Opera 联手成立了一个名为 Web 超文本应用技术工作组 (WHATWG) 的组织。WHATWG 的目标是保持 HTML 开发的活力。尽管最初有所犹豫，W3C 还是在 2006 年加入了 HTML 复兴。WHATWG 和 W3C 共同结合了 HTML 和 XHTML 的现有规范，并进一步开发它们以创建新的 HTML5 规范。该规范目前由 W3C 维护和发布 [来源：W3C, WHATWG]。

本文探讨了这项新的 HTML5 技术。我们将研究 XHTML 和其他已融入 HTML5 的技术，并介绍如何使用 HTML5 创建具有吸引力且符合标准的网页内容的基本要点。我们还将了解人们在网络上使用 HTML5 的一些令人兴奋的方式。让我们首先看看 HTML5 的目标以及为什么它不仅仅是 HTML。

广告

目录
  1. HTML5 超越 HTML
  2. HTML5 基础技术
  3. 基本 HTML 内容
  4. 表单
  5. 语义元素
  6. 媒体元素与 Flash 的竞争
  7. 画布
  8. 使用 CSS3 创建外观
  9. JavaScript 作为核心组件
  10. Web 应用技术
  11. 突破性的概念验证

HTML5 超越 HTML

就其本身而言，HTML 专注于呈现静态文档，即文本、链接以及其他很少的内容。通过 HTML 4，HTML 标准与用于实现此目标的 HTML 语法是相同的。HTML5 标准具有更广泛的目标，即描述当网页加载到您的浏览器中时，其背后的内容、样式和应用程序接口。更具体地说，HTML5 建立了一种单一的语法，用于与网页加载到您计算机内存中的所有元素进行交互。

在我们继续之前，我们应该澄清一下“HTML5”这个术语可能存在的混淆点。有一个新的标记语言版本本身叫做 HTML5。然而，这种语言只是更广泛的标准的一部分，而这个标准也叫做 HTML5。本文涵盖了 HTML5 标准的所有组件，其中 HTML5 语言是核心部分。

广告

考虑到这一区别，浏览器如何加载根据较新的 HTML5 标准而不是长期存在的 HTML 4 语言编写的页面呢？毕竟，我们通常只是依靠浏览器加载网页，而不必担心其背后的 HTML。答案很简单：只要浏览器本身支持 HTML5，它就可以处理您提供给它的任何内容，而无需区分 HTML 版本。

为了实现这一“魔法”，HTML5 标准整合了多种新版本的技术，它们共同致力于实现以下共同目标：

  • 保持语言的简单和直观
  • 确保代码易于阅读和维护
  • 将页面视为交互式应用程序而非静态文档
  • 依赖层叠样式表 (CSS) 来设置内容样式
  • 将 JavaScript 视为网页的核心脚本组件
  • 支持来自 PHP 和 ASP 等服务器端技术的动态内容

既然您知道 HTML5 不仅仅是 HTML 标记本身，那么让我们来探讨一下该标准中的基础技术。

广告

HTML5 基础技术

很多人看到 HTML 代码时都能认出来，但理解它却是另一回事。
©iStockphoto.com/Thinkstock

标记语言使用一系列标签来标记文件中的元素。标记依赖于某种模型，该模型定义了这些元素是什么以及如何使用它们。由于 HTML 始终是关于编码文档的，因此它依赖于一个称为文档对象模型 (DOM) 的东西。DOM 被整合在网页浏览器应用程序本身中。因此，标记语言只是一种根据浏览器已经理解的模型向其提供指令的方式。

为了更好地理解 DOM 和 HTML 之间的关系，可以把 DOM 想象成一盒橡皮图章。每个图章都是 DOM 中的不同元素。用 HTML 编写的每个页面都只是一系列由图章制作的印记，这些印记填充了您自己的自定义内容。网页浏览器可以显示使用该盒子中的图章创建的任何内容。

广告

从技术上讲，DOM 是一种应用程序编程接口 (API)，它提供了一种平台中立的方式来处理 HTML 或 XML 文档。（可扩展标记语言，即 XML，看起来类似于 HTML，但它允许程序员添加一组自定义元素，您可以在文档中使用。）HTML5 标准要求使用名为 DOM5 HTML 的 DOM。为 HTML5 的发展做好了准备，最新版本的 Chrome、Firefox、IE、Safari 和 Opera 浏览器都可以在 DOM5 HTML 下处理页面。

HTML5 的另一个重要基础是其相关的多用途互联网邮件扩展 (MIME) 类型。MIME 是互联网工程任务组 (IETF) 的一项标准，用于提醒支持互联网的软件它正在尝试处理的内容类型。这通常对应于特定类型的文件，例如 HTML 文档或 MP3 音频文件。

网页开发人员在编码网页时会指定 MIME 类型。这会促使浏览器根据文件类型适当地加载相应的文件。有两种 MIME 类型与 DOM5 HTML 结合，构成了新 HTML5 标准的基础：HTML MIME 类型 (text/html) 和 XML MIME 类型 (application/xhtml+xml)。HTML5 包括对这两种 MIME 类型语法的更新。

简而言之，HTML5 标准中的基本技术是 DOM5 HTML 以及与 HTML5 兼容的 HTML 和 XML 的 MIME 类型。接下来，让我们来看看如何使用 HTML5 来构建网页。

广告

基本 HTML 内容

这是一个非常基本的 HTML 编码示例。
Stephanie Crawford 为 十万个为什么 撰稿

HTML5 至少包括基本 HTML 语法的第 5 版。本页侧边栏中的示例代码显示了基本网页的 HTML 代码可能是什么样子。当您浏览网页时，请使用浏览器中的“查看源代码”或类似选项来查看加载以创建您当前正在查看的页面的 HTML（及其他代码）。我们示例中显示的所有代码也与 HTML 4 向后兼容，这意味着它不包含 HTML5 中可用的任何新添加内容。

尽管并非所有网页都存在，但一个好的做法是，如示例所示，在 HTML 文件开头使用文档类型 (doctype) 声明。这确认了浏览器在解释文档时应期望标准 HTML。一些开发人员依赖 HTML 标准的扩展，这些扩展使用文档类型定义 (DTD) 文件。如果属于这种情况，开发人员会将 DTD 的位置指定为此文档类型的一部分。

广告

除了文档类型声明，示例中剩余的代码是标准的 HTML 语法。如果您不熟悉此语法，请参阅我们的文章 网页如何工作。

那么，HTML5 中这些基本元素有什么新变化呢？以下是列表，我们将在接下来的页面中详细介绍每一个。

  • 新的和更新的表单元素——布局表单结构并处理用户的表单输入
  • 语义元素——根据内容在网页中的作用来识别内容
  • 媒体元素——无需第三方浏览器扩展即可嵌入音频、视频和其他交互式媒体
  • Ruby 元素——支持亚洲语言网页的国际化

广告

表单

尽管表单（网站中用户可以输入特定数据，如姓名、地址等的部分）是 HTML 中最早可用的元素之一，但在 HTML5 之前它们缺乏许多有用的功能。为了弥补这一点，第三方开发人员创建了网页表单软件，使得基本的 HTML 表单看起来几乎过时。然而，HTML5 通过新的表单元素、输入类型和现有元素的属性为表单注入了新的活力。

在不区分旧语法和新语法的情况下，让我们探讨一下使用 HTML5 为网页创建表单的整体方法。以下是一些建议的入门步骤：

广告

  1. 使用 <form> 标签建立表单块。
  2. 使用 <fieldset> 标签在表单中指定一个字段块。
  3. 使用 <label> 标签布局字段集中的每个字段。为每个标签使用“for”属性，就像使用 id 属性一样，以便在代码的其他部分使用该标签。示例：<label for="name"></label>
  4. 在每个 label 标签内，添加您希望显示的字段名称以及字段本身的 <input /> 标签。
  5. 在 input 标签内使用 type 属性（<input type="">），它会提示浏览器根据该类型验证用户的输入。这消除了处理验证和提示重新输入的额外代码的需要。HTML5 包括以下输入类型：date（日期）、time（时间）、datetime（日期时间）、datetime-local（本地日期时间）、month（月份）、week（周）、number（数字）、e-mail（电子邮件）、tel（电话）、url（网址）、range（范围）、color（颜色）和 search（搜索）。您还可以将 pattern 属性与正则表达式一起使用来创建自定义验证模式。
  6. 通过为 input 元素添加 required 属性来指示必填字段。
  7. 使用 autofocus 属性将特定 input 元素设置为表单中的第一个元素。这是网页浏览器加载表单后会自动放置用户光标的位置。
  8. 如果需要，使用 placeholder 属性为给定字段添加文本提示，说明应输入什么内容。
  9. 为“:required”和“:invalid”设置 CSS 样式，以便用户在信息缺失或给定输入类型无效时有视觉提示。

查阅最新的 HTML5 参考指南，获取表单元素及其属性的完整列表。另外请注意，某些表单字段的支持情况因网络浏览器而异。请务必在您的网站希望支持的每种类型的浏览器中测试您的表单。

尽管 HTML 表单元素在版本 5 中拥有更多功能，但下一个元素类型在 HTML5 中是全新的。

广告

语义元素

HTML5 中的语义元素，顾名思义，是指那些涉及特定内容含义的元素。仅仅使用 <body> 标签是不够的，因为如今大多数网站在一个页面上包含多种不同类型的内容。网页开发人员需要为每种类型的内容如何显示或行为应用单独的规则。

没有语义元素时，网页开发人员使用 <div> 和 <span> 元素来标识内容块，并将每个块与特定的 class 属性关联。每个 class 可以使用 CSS 关联特定的样式，或使用脚本关联特定的行为。

广告

随着时间的推移，某些内容类型在网站上变得非常常见，例如页眉、页脚、菜单和导航点。HTML5 通过添加标准语义元素来整合这些内容。这意味着您可以将 <body> 块分解为有用的语义元素，而不是一系列的 <div> 和 <span> 标签。

以下是语义页面元素的列表及其简要定义。请务必查阅可靠的 HTML5 参考资料，以获取每个语义元素的有效属性和子元素的完整列表。

块级元素

  • section —— 一个通用的页面分区，用于帮助拆分较大的内容块
  • article —— 原始内容来自外部来源，有时通过使用聚合脚本在页面加载时动态添加
  • header 和 footer —— 出现在每个页面顶部和底部的内容块
  • hgroup —— 多个相关标题的组合，例如主标题和副标题
  • menu —— 命令列表（参见 command 元素），以及指定菜单行为的属性
  • nav —— 标识一个严格用于网站导航的块，通常是网站上其他页面的无序链接列表
  • address —— 包含块内内容作者的联系信息，例如文章、部分或整个页面主体
  • aside —— 表明内容应作为侧边栏处理

行内元素

  • summary 和 details —— 在相同内容的摘要/概览和完整详细信息之间切换
  • figure 和 figcaption —— 用于对图像应用通用行为的元素，无论使用何种媒体元素（img、svg 或 canvas）来包含它们
  • time —— 表示日历日期、时钟时间或两者的文本，格式化后浏览器可以在必要时调整时区差异
  • command —— 当您使用键盘或鼠标与之交互时，与该标签关联的标签和行为，通常用于菜单块内部
  • dfn —— 内容中正在定义的术语
  • wbr —— 一个标签，指示当文本跨多行换行时，可以在单词内断开文本的可接受位置

语义元素的创建是为了改进更通用的 HTML 元素。然而，下一个新的元素类型旨在完全取代网页浏览器中的第三方媒体扩展。

广告

媒体元素与 Flash 的竞争

HTML5 最受关注的特性之一是其在网页上嵌入媒体的新方法。我们将在本文后面介绍这项 HTML5 特性的一些惊人应用。HTML5 无需外部浏览器插件即可实现媒体嵌入。以下是 HTML5 中可用的媒体元素：

  • audio -- 在页面中嵌入音频，并包含指定如何播放的属性；支持的文件格式因网页浏览器而异
  • video -- 在页面中嵌入视频，并包含指定如何播放的属性；支持的文件格式因网页浏览器而异
  • source -- 与 audio 或 video 元素一起使用以识别源；单个项目可以指定多个源
  • embed -- 嵌入并指定可能在其他媒体元素中缺乏支持的内容的媒体类型
  • canvas -- 划出页面或计算机屏幕的一部分，供 JavaScript 绘制图像；接下来，我们将更详细地了解这项重要的新功能是如何工作的
  • svg -- 嵌入使用 SVG 标记语言编码的矢量图形，允许它们在加载的页面区域中动态缩放，而不会损失任何图形质量

随着 HTML5 的发展，市场专家质疑它是否会取代目前由 Adobe 控制的 Flash。Flash 是一种媒体播放器，您可以将其作为插件添加到网页浏览器中。由于 Flash 具备网站嵌入不同类型媒体所需的所有功能，YouTube 等网站多年来一直依赖它。甚至有些网络应用程序完全依赖 Flash 来驱动其交互式界面。2007 年 Flash 的普及程度如此之广，以至于备受期待的 Apple iPhone 发布时，许多消费者听到其操作系统 Apple iOS 不支持 Flash 时感到不满。

广告

当谷歌，可以说互联网上最大的品牌，一头扎进使用 HTML5 开发其应用程序时，Flash 支持者们注意到了。在 HTML5 之前，Flash 主导地位的唯一威胁是那些愿意构建和维护自定义 HTML/JavaScript 替代方案的网页应用程序开发人员。有了 HTML5，在创建足以媲美 Flash 技术的交互式媒体体验时，这种繁琐的定制不再是必需的。

那么，谁会赢：Flash 还是 HTML5？简短的答案是：“都不是。”每种技术都有其自身的特点、优点和缺点。此外，Adobe 和谷歌一直在开发 Flash 到 HTML5 的转换工具。在撰写本文时，似乎尽管 HTML5 正在获得地位，Flash 在一段时间内也可能保持其自身的受欢迎程度。

翻到下一页，我们将详细介绍 canvas 元素以及如何在您的 HTML5 网页中使用它。

广告

画布

HTML5 最重要的新特性之一是 canvas（画布）。canvas 特性允许您识别网页的一个区域，在该区域内绘制内容并添加交互功能。所有这些都可以通过 HTML 和 JavaScript 代码的组合实现。让我们来看看在 HTML5 中设置 canvas 所需的三个部分：

第 1 部分： 使用 <canvas> 标签来指定计算机屏幕的一个矩形区域作为新的画布窗口。您可以指定画布的高度和宽度，从其左上角开始测量。画布的 identity 属性 (id) 很重要，因为您需要它来匹配其对应的 JavaScript 代码。以下是在 HTML5 代码中使用 canvas 标签的示例：

广告

<canvas id="sampleCanvas"

width="400"

height="300>

If you see this text, your browser

does not have HTML5 canvas support.

</canvas>

第 2 部分： 创建将内容绘制到画布中的 JavaScript 代码。稍后，我们将了解如何添加和管理与 HTML5 网页关联的 JavaScript 代码。这里，我们只看一些您可以用于画布对象的 JavaScript 示例。以下代码在上面的画布内绘制一个矩形：

function drawRectangle() {

var targetCanvas = document.getElementById("sampleCanvas");

var rectContext = sampleCanvas.getContext("2d");

rectContext.fillStyle = "blue";

rectContext.fillRect(50, 25, 150, 100);

}

此函数在您的画布中绘制一个实心蓝色矩形。其中两条“var”行创建了您可以使用的变量。第一条 (targetCanvas) 使用 HTML 中的 ID 标识您要定位的画布元素。第二条 (rectContext) 设置了一个二维绘图上下文。可以将上下文想象成铺在画布上的一层透明玻璃，您将调用函数在该玻璃上绘图。

“fillStyle”行通过名称标识蓝色，HTML 能够识别并将其与其中一个命名颜色关联。您还可以像在 HTML 或 CSS 中编写样式代码时一样，使用任何颜色、图案或渐变。 “fillRect”行绘制矩形，从左上角偏移处开始，前两个数字是 x 和 y 偏移量，就像画布的左上角位于坐标 (0,0) 一样。后两个数字分别表示矩形的宽度和高度。

第 3 部分： 从 HTML 代码中调用 JavaScript 函数。这将把两个部分连接起来。您可以在网页加载后立即调用该函数，如果您使用 canvas 绘制需要在页面加载后立即出现的交互式页面内容，这样做是合理的。另一种选择是在 HTML 中创建一个按钮、菜单或其他元素来触发绘图事件。以下是您可以用来运行上面示例脚本的按钮示例：

<button type="button"

onclick="drawRectangle()">

Click here to see the drawing.

</button>

《Dive Into HTML5》提供了一份易于遵循的指南，用于为您的网页创建 canvas 元素。此外，一份可靠的 HTML5 参考资料应该为绘制复杂的图形（静态和动态）提供丰富的资源。如果您想在 HTML5 中广泛使用 canvas，您需要熟练掌握 JavaScript 编程。接下来，让我们探讨 CSS3 如何创建 HTML5 网页的外观和感觉。

广告

使用 CSS3 创建外观

每个 HTML 元素都有许多属性，您可以在代码中使用它们来修改该元素的外观或功能。样式和相关属性调整元素的大小、颜色、位置、边框和其他物理方面。在网络存在的多年中，网站开发人员广泛采用了样式与内容分离的做法。通过这种分离，开发人员享有以下优势：

  • 维护的代码更少：多个网页上的多个元素可以共享相同的样式，而无需为每个元素重复样式代码。
  • 随着时间的推移，维护更轻松：更新到新样式或修复现有样式，意味着只需更改一份样式代码，而不是更新使用该代码的每个元素。

因此，虽然样式可以与 HTML 代码一起内联放置，但网页开发人员更流行的选择是使用层叠样式表 (CSS) 来管理与网站相关的所有样式代码。每个页面的 HTML 可以引用一个或多个样式表，您的浏览器在页面加载时应该加载这些样式表。这些以 CSS 文件形式存在的样式表旨在模仿您可能在 HTML 的 <head> 块中使用 <style> 标签输入的内容。

广告

虽然编写和使用 CSS 的指南超出了本文的范围，但请务必获取一份全面的 CSS3 参考资料。以下是 CSS3 可以实现的功能摘要，它们与 HTML5 标准相辅相成：

  • 根据元素是否具有特定属性来应用样式。
  • 删除特定类中所有元素的样式。
  • 使用弹性盒布局来布局页面，以应对浮动 div 块的挑战和缺点。
  • 包含字体文件并将其与自定义的 font-family 标签关联，以便在整个 CSS 中使用。
  • 为文本元素的字体添加阴影 (text-shadow) 或轮廓 (text-stroke)。
  • 使用 RGBA 格式指定颜色。
  • 利用流行的视觉元素，包括圆角、渐变、阴影、反射和边框图像。
  • 调整元素的透明度。
  • 为元素添加更精细的过渡动画。
  • 使用 transform 属性移动、旋转、缩放或倾斜元素。

请注意，尽管大多数主流浏览器支持上述列表中的大部分项目，但有些浏览器仍未完全实现这些 CSS3 功能。与 HTML5 一样，请务必在您的网站希望支持的每种浏览器中测试您的 CSS 代码。接下来，让我们看看帮助实现 HTML5 目标的核心技术：JavaScript。

广告

JavaScript 作为核心组件

JavaScript 是一种专门为网络设计的语言。JavaScript 中编写函数和引用对象的语法类似于 Java 和其他面向对象语言。然而，相似之处也仅止于此。JavaScript 不会被编译以创建可执行文件。相反，与网页关联的 JavaScript 会在网页加载时加载到您的网页浏览器中，并且 JavaScript 函数会根据您与页面的交互而被调用。

您可以使用标签将 JavaScript 代码写入 HTML 代码中，类似于使用 <style> 标签进行内联 CSS。然而，与 CSS 样式一样，脚本代码的最佳实践是将其放在单独的文件中，并从 HTML 中引用该文件。这也为您提供了灵活性，仅当浏览器满足某些要求时才加载脚本。在 HTML5 中，您的网页浏览器还会缓存支持网页的 JavaScript 和其他文件，因此该页面在离线模式下也能正常运行。

广告

以下是包含名为“example.js”的 JavaScript 文件的示例，该文件位于引用网页上一级的 scripts 目录中：

<script language="javascript" type="text/javascript"

src="../scripts/example.js"></script>

与 HTML 和 CSS 一样，JavaScript 的基础知识超出了本文的范围，您应该在编程时寻找一份好的参考资料。请确保该参考资料涵盖了 HTML5 的 JavaScript，这样您就不会错过这些 HTML5 的增强功能：

  • 通过类名、标签名或自定义查询选择来引用元素。
  • 在客户端系统上分配和使用多达 5 MB 的本地存储，而不是在网页浏览器中设置和使用 cookie。
  • 创建并使用 WebSQL 数据库作为该本地存储的一部分。
  • 利用 WebSockets，这项新功能可以在您的浏览器和网页服务器之间维护一个实时的客户端-服务器连接。
  • 通过浏览器从客户端计算机检索地理位置数据，并将该数据用于其他操作，例如显示该位置的地图。

到目前为止，我们已经研究了 HTML5 的客户端部分。换句话说，我们研究了您的网页浏览器从互联网下载并在您本地计算机上处理的代码。然而，HTML5 标准也触及了该连接的另一端。接下来，让我们看看 HTML5 背后的服务器端技术。

广告

Web 应用技术

早些时候，我们确定 HTML5 将网页内容视为一个网络应用程序集合，而非一组文档。因此，您的浏览器不仅仅是处理您下载内容的场所。它还是连接到位于远程网页服务器上的额外软件的门户。在 HTML5 标准中，这种远程软件始终可用，以支持您的交互式网络体验。

那么我们谈论的是哪种软件呢？两个广泛使用的例子是超文本预处理器 (PHP) 和活动服务器页面 (ASP)。这些都是网页开发语言，用于从服务器端按需组装内容。例如，当您在网站上回答投票问题并获得显示投票分布情况的图形时，页面上很可能有一些 PHP 在工作。即使您查看页面的源代码，也看不到 PHP 或 ASP 代码本身。相反，默认情况下，您只会看到服务器在加载到您的浏览器窗口之前动态组装的 HTML 和 JavaScript。

另一种可以支持 HTML5 网页的服务器端技术是数据库软件。例如，MySQL 和 Oracle 都可以存储和管理大量数据，并确保其免受未经授权的查询。网页应用程序可以接受凭证并根据需要访问这些数据，响应查询并允许应用程序检索所需信息。

凭借网络的灵活性以及 HTML5 等技术不断扩展的功能，越来越多的网络应用程序可能会寻求服务器端软件的支持。云计算这一不断发展的领域已经通过网络依赖这种客户端-服务器关系。HTML5 已准备好从客户端适应这种关系。

现在我们已经了解了 HTML5 背后的技术方面，接下来让我们看看一些广为人知的 HTML5 应用，它们帮助确立了 HTML5 的声誉。

突破性的概念验证

这张截图展示了《荒野市中心》的实际运行效果，一群鸟影在窗户之间飞翔，包括您在视频开始时输入的街道的航拍视图。
图片由 Stephanie Crawford 为 十万个为什么 拍摄

概念验证是一种演示，证明一项新技术可以在实际应用中实现其宣称的功能。正如您目前所读到的，HTML5 本身是应用程序编程接口 (API) 及其使用标准的修订版。对于 HTML5，概念验证通过使用该技术的产品演示来实现。

如今，有许多使用 HTML5 编程的游戏，但它们通常无法展示 HTML5 为网站所能做的一切。随着谷歌在 HTML5 采用方面处于领先地位，它在其 Chrome 网页浏览器中发布了一些有趣的 HTML5 功能演示。您可以在 Chrome Experiments 网站上找到这些演示。

在 2010 年 8 月最受关注的演示之一中，乐队 Arcade Fire 与谷歌合作制作了一个名为“荒野市中心”的互动音乐视频体验。要启动该应用，您需要输入您童年住址。在它整合了该输入后，您点击即可启动多窗口视频体验。视频中融入了地理位置图像，并叠加了鸟儿在头顶飞翔和一个人在街上奔跑的剪影。

2011 年 7 月，乐队 OK Go 与创新表演艺术舞蹈公司 Pilobolus 合作，推出了他们自己的 HTML5 Chrome 实验项目，名为“一切未失视频舞蹈信使”。与 Arcade Fire 的视频类似，您首先输入一些文本，然后让应用程序处理该输入。然后，当您启动应用程序时，HTML5 代码会在屏幕上绘制并调整多个窗口的大小，并在每个窗口中显示视频的一部分。最终，您在开始时输入的文本会由舞者用脚拼写出来，这些舞者是从玻璃地板下方拍摄的。

对于您访问的典型网站，除非它告诉您，否则您可能不会知道它是一个 HTML5 网站。然而，有一点是肯定的：得益于 HTML5 的 canvas 等功能，网页设计师已经能够将他们的艺术提升到一个新的水平。设计师和开发人员都应该将 HTML5 视为未来几年必须掌握的重要技术。

在本文中，我们探讨了 HTML5 的组成部分以及它们如何协同工作以创建网络杰作。我们甚至瞥见了一些展示 HTML5 多功能性的创新作品。要了解更多关于 HTML5 的内容，包括在开发 HTML5 时可以参考的在线资源链接，请继续阅读。

常见问题

HTML5 意味着什么？
HTML5 的开发是为了解决影响 HTML4 的问题。HTML5 是一种用于在万维网上构建和呈现内容的标记语言。它是互联网的一种核心技术标记语言，用于描述文本文档的结构。
HTML5 与 HTML 有何区别？
HTML5 是 HTML 的最新版本，它包含了音频和视频支持等新功能，以及嵌入其他类型内容的能力。HTML5 也比之前的 HTML 版本更具响应性，更易于使用。

更多信息

相关文章

更多精彩链接

  • Allaire, Jeremy. "The Future of Web Content - HTML5, Flash & Mobile Apps." TechCrunch. AOL, Inc. Feb. 5, 2010. (Aug. 9, 2011) http://techcrunch.com/2010/02/05/the-future-of-web-content-html5-flash-mobile-apps/
  • Gohring, Nancy. "HTML5 not yet solving mobile dev issues." IDG News Service. May 16, 2011. (Aug. 9, 2011) http://www.infoworld.com/d/mobile-technology/html5-not-yet-solving-mobile-dev-issues-268
  • Harris, Andy. "HTML5 for Dummies Quick Reference." Wiley Publishing, Inc. 2011.
  • Ondrejka, Cory. "HTML5 Games 0.1: Speedy Sprites." Facebook. Jan. 26, 2011. (Aug. 9, 2011) https://#/note.php?note_id=491691753919&id=9445547199
  • Sivonen, Henri. "Spelling HTML5." The WHATWG Blog. Sept. 10, 2009. (Aug. 18, 2011) http://blog.whatwg.org/spelling-html5
  • World Wide Web Consortium (W3C). "Document Object Model (DOM) Level 2 Core Specification, Version 1.0." Nov. 13, 2000. (Aug. 8, 2011) http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113
  • World Wide Web Consortium (W3C). "HTML5: A vocabulary and associated APIs for HTML and XHTML, Revision 1.4938." May 25, 2011. (Aug. 7, 2011) http://www.w3.org/TR/2011/WD-html5-20110525/
  • World Wide Web Consortium (W3C). "Ruby Markup and Styling." (Aug. 9, 2011) http://www.w3.org/International/articles/ruby/
  • W3Schools. "Browser Statistics." Refsnes Data. (Aug. 8, 2011) https://w3schools.org.cn/browsers/browsers_stats.asp
  • Web Hypertext Application Technology Working Group (WHATWG). "FAQ." (Aug. 8, 2011) http://wiki.whatwg.org/wiki/FAQ
引用

广告

加载中...