原文：HTML5 Mastery Semantics, Standards, and Styling
协议：CC BY-NC-SA 4.0
八、前方的路
HTML5 有许多边缘，这些领域仍在朝着标准的完美进行塑造和雕琢，但在很大程度上，未来的道路与 HTML5 关系不大，而与 HTML5 的应用领域关系更大。这是一个互联的世界，通过手机连接的人比通过台式电脑连接的人多。在未来的几年里，支持互联网的智能手机可能会普及到大众，就像几年前低端的“哑”手机一样，网络将会有移动的访问者，在拥挤的公共汽车上、在街角、在咖啡馆、在餐馆，甚至，我敢说，在电影院浏览网页。移动设备给你这个网页开发者/设计者带来了特殊的挑战。屏幕分辨率更复杂，屏幕空间更有限，但在 CSS3 的帮助下，HTML5 在当代智能手机上得到了很好的支持。您从前面章节中学到的东西在这里也适用，尽管速度可能会慢一点，屏幕区域也会小一点，但这些都是需要解决的设计挑战，它们被移动空间的独特可能性所抵消。本章将讨论这些挑战和可能性，并以讨论 HTML5 规范的一些最后的角落结束。
移动网络的挑战
在过去的几年里，许多新的支持互联网的手持设备已经变得广泛可用。虽然支持互联网的移动设备自 20 世纪 90 年代以来就已经存在，但可以说，随着 2007 年 iPhone 及其彩色大触摸屏的推出，它们首次被广泛视为浏览网页的可行平台(而不仅仅是用来收发电子邮件)。随之而来的是运行 iOS、谷歌 Android 操作系统、微软 Windows Phone 7 平台等的大型触摸屏设备的激增。网页设计突然变成了一个多方面的过程，比以前多了许多倍。在具有大量处理能力的台式计算机环境中，可以在大的宽屏显示器上浏览网页，但是在处理器受限并且显示器只有几英寸宽的小型手持移动电话上浏览网页。此外，还有介于两者之间的平板设备，如苹果的 iPad 或三星的 Galaxy Tab。然而，设计桌面显示器不仅仅是考虑屏幕尺寸和处理能力的差异。移动设备没有鼠标，点击可能要用手指来完成(如果设备比较老，可能要用手写笔)，所以最好避免小按钮。然后是连通性的问题。当用户四处移动时，移动设备可能会断开连接。
1 要了解全球移动设备使用的爆炸性增长，看看世界银行收集的移动电话用户数据:【http://data.worldbank.org/indicator/IT. CEL.SETS.P2/countries/1W？显示=图形。
响应式设计
让我们从屏幕尺寸开始考虑，因为这是台式电脑和手持设备之间最明显的区别。手机设计有两种主要方法。首先是开发两个不同的网站，一个用于桌面环境，另一个用于移动设备。根据用户在哪个浏览器中查看站点，用户会被定向到其中一个。对于复杂的网站来说，这可能是一种可行的方法，因为复杂的网站可能需要大量的工作来适应移动查看体验，并且最好为移动用户提供一个简单版本的网站。这种方法的一个问题是涉及到潜在的高维护。如果为台式机、平板设备和移动电话创建一个不同的网站，如果另一个具有不同外形的设备变得流行，会发生什么？比如 Opera 有任天堂 Wii 游戏机的网页浏览器，运行 Android 操作系统的可上网手表甚至已经开发出来了！另一个选项是根据查看设备的屏幕大小更改正在使用的样式表。媒体查询(稍后讨论)可用于根据查看设备的物理质量更改 CSS，例如基于显示器尺寸和分辨率的更改。将这种方法与流体布局相结合，你会得到所谓的响应式设计、、 2 ，旨在适应各种屏幕尺寸。
固定的 960 像素宽的网格一直是使用 CSS 创建行和列的 web 设计标准。由此发展而来的是响应式网格设计，它根据宽度增加或减少页面上的列数，并将可见列扩展到浏览器可视区域的宽度。像 Skeleton ( [getskeleton.com](http://getskeleton.com))这样的开发工具包已经出现，可以帮助开发这种灵活的布局。
注意自适应图像([adaptive-images.com](http://adaptive-images.com))是一个与响应式设计相关的概念，用于处理页面上图像的缩放，以便它们在移动设备上缩小，在桌面显示器上放大。
视口
在桌面环境中，视窗是在网络浏览器中可见的网页区域。例如，如果您在桌面上打开一个网页，并将页面大小缩小到移动电话显示屏的实际大小，您看到的区域就是视窗。您可能会看到滚动条出现，以便您可以滚动到其余的内容。您还会注意到，如果文本没有使用 CSS 调整大小，它可能会自动换行以适应可视区域。
移动设备上的视区行为略有不同。与桌面环境不同，在移动环境中，web 浏览器覆盖一个固定的区域。视口定义了文本将被换行的区域等等，其可以延伸到可视区域之外。例如，iPhone 上的默认视窗是 980 像素宽(以适应网页设计中常用的 960 像素网页宽度)，但页面可以缩小，以便完全适合 320 像素的可视区域(图 8-1 )。
参见 Ethan Marcotte 在 http://alistapart.com/articles/responsive-web-design/发表的关于响应式网页设计的开创性文章。
***图 8-1。*典型智能手机上的可视区域为 320 像素，而页面所在的视区可能要大得多，这要求用户在以实际大小查看时需要平移才能看到页面上的所有内容。
理想情况下，网页的宽度应该与可视区域相对应，这就是为移动查看优化网页所能做到的。首先，有一个meta元素值告诉移动设备将布局视口的宽度设置为可视区域的宽度。为此，将在网页的 head 部分添加以下内容:
<meta name="viewport" content="width=device-width" />
注意有一个 CSS 规则@viewport，它正在开发中，作为meta元素视窗规则的替代。有关实施细节，请参见 Opera 网站上的页面:[www.opera.com/docs/specs/presto28/css/viewportdeviceadaptation/](http://www.opera.com/docs/specs/presto28/css/viewportdeviceadaptation/)。
接下来，可以添加一个额外的选项来防止页面不必要的缩放。将initial-scale=1.0添加到meta元素:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
viewport meta元素值是最近才添加的；它是苹果公司为在 iPhone 上使用而添加的，但后来被整合到其他当代移动操作系统中。然而，为了适应旧的移动浏览器，添加两个额外的meta元素是个好主意:
<meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" />
这两个价值预示着移动网络的早期，所以最终它们将不再需要包含，但现在包含它们是一个好主意。
现在，如果页面布局针对 320 像素宽的查看区域进行了优化，它将正好适合大多数现代移动电话的显示区域，但要实际达到这一宽度并允许网站在桌面环境中仍然可以舒适地查看，您很可能会使用媒体查询，我们接下来将讨论这一点。
注第一章中提到的 HTML5 样板工程在[html5boilerplate.com/mobile](http://html5boilerplate.com/mobile)有一个为移动设备量身定制的版本，其中包含了这些meta元素值。
媒体查询
媒体查询是 CSS3 中的一项新功能，它允许 CSS 检查查看设备的物理特性，并相应地更改 CSS 规则。媒体查询产生于为不同的媒体类型定制 CSS 的需要，例如为印刷或屏幕。典型的媒体查询可能如下所示:
@media only screen and (min-width:480px) and (max-width:767px) { body { width:560px; } }
这出现在链接到页面的外部 CSS 文件中。它指定了包含的 CSS 规则将应用到的媒体类型(在这种情况下，它用于在屏幕上显示)以及包含的规则将应用到的查看屏幕的最小和最大宽度。没有必要同时指定最小和最大宽度。也可以选择许多其他值，比如精确的宽度、高度、方向、颜色、分辨率等等。3
注自媒体类型(screen、print等)。)在较老的浏览器中受支持，因此不一定会忽略@media规则。在查询的开头添加了only关键字，以便对旧浏览器隐藏包含的样式规则，因为旧浏览器不会识别它，这将导致它们跳过媒体查询声明的其余部分。
在分层配置中使用媒体查询有助于适应各种屏幕尺寸，每个尺寸都将内容放入越来越小的屏幕区域:
@media only screen and (min-width:768) and (max-width:959px) { body { width:768px; } } @media only screen and (min-width:480) and (max-width:767px) { body { width:480px; } } @media only screen and (max-width:479px) { body { width:340px; } }
这三个规则通过三个屏幕尺寸变化来约束页面的宽度。这个例子只是显示了对宽度的限制，但是您可能希望为移动查看设置全方位的内容样式，这可能意味着更大的文本和更大的链接区域。例如，第四章中使用的城市媒体新闻提示表单可能会使用媒体查询进行修改，以出现在移动浏览器中，如图图 8-2 所示。为了使内容适合移动环境，使用 CSS 将无关信息放置在视图之外，并添加了样式以使菜单更加突出。
3 完整列表和详细信息见[www.w3.org/TR/css3-mediaqueries/](http://www.w3.org/TR/css3-mediaqueries/)。
***图 8-2。*城市出版社手机优化新闻提示提交表单页面
测试手机网页
在实际的移动设备上测试网页是了解移动页面实际上针对移动设备进行了优化的最佳方式，但是也可以在运行于桌面计算机上的模拟设备上非常有效地测试网页。每个主要平台都有自己的运行在台式计算机上的模拟设备。这对于检查布局和基本功能非常有用，但对于测试性能却不太有用，因为模拟设备使用的是计算机的处理器，它比移动设备中的处理器强大许多倍。无论如何，以下是一些在台式计算机上测试移动网页的有用资源:
- Android:Android 模拟器可以在
[developer.android.com](http://developer.android.com)作为 Android 软件开发工具包(SDK)的一部分下载，可以模拟和仿真各种硬件细节。Android 的一个注意事项是，当访问本地 web 服务器上的页面时，通常的[localhost/](http://localhost/)地址会寻找运行在模拟器本身上的 web 服务器。相反，需要使用特殊的 URLhttp://10.0.2.2/来访问运行在主机上的网络服务器。 - iOS :苹果公司在
[developer.apple.com/xcode/](http://developer.apple.com/xcode/)提供了一个带有 Xcode 软件包的模拟器。该模拟器可以模拟带有和不带有 Retina 显示屏的 iPad 和 iPhone。 - Windows Phone 7:Windows Phone SDK 包括一个模拟器，用于测试 Windows Phone 7 平台上的内容。这可以从
[create.msdn.com](http://create.msdn.com)下载。 - Opera : Opera 不开发硬件，但有一个桌面网络浏览器的移动版本，它有一个可以从
[opera.com/developer/tools/mobile](http://opera.com/developer/tools/mobile)下载的模拟器。
除此之外，Adobe Device Central 也是创建各种配置和屏幕尺寸的通用虚拟移动设备的一个选项。可以在虚拟设备中的文件 打开 URL…下打开网页 URL。
也可以在标准的网络浏览器中测试响应式设计。如果在 Safari 的高级偏好设置中打开了开发菜单，你会发现在开发用户代理下有一个选项，让浏览器伪装成手机浏览器(甚至是另一家厂商的浏览器！).打开一个网页并调整窗口大小，它就像在 Safari 的移动版本上被浏览一样！
离线应用缓存
脱机应用缓存是一种确保关键文件存储在客户端上的方法，这样，如果连接丢失并且页面被重新加载，缓存的文件仍将被加载。如果所有必要的文件都被缓存，即使用户离线，网站也可以正常导航。这在互联网连接可能中断的移动网络环境中可能特别有用。
应用缓存使用根html元素上的manifest属性将 web 页面与缓存清单文件相关联，该文件列出了要缓存的文件(在某些情况下，不是缓存！).缓存清单文件只是一个文件扩展名为.manifest的文本文件。必须使用text/cache-manifest MIME 类型从 web 服务器提供服务。它使用相对或绝对 URL，但通常如下所示:
`
…`sitecache.manifest文件(取决于您的配置；你可以用不同的方式命名)必须以关键字CACHE MANIFEST开始，然后可选地跟随三个部分。这些是:
CACHE:要缓存的文件。NETWORK:总是应该从网上检索的文件。FALLBACK:缓存中未找到的文件的回退内容。首先给出要查找的文件，然后是回退文件的位置。
缓存清单还可以包含注释，这些注释会被忽略。注释以井号(#)开头。缓存清单文件可能如下所示:
CACHE MANIFEST # list of files to cache CACHE: index.html css/styles.css js/script.js # files that require a network connection NETWORK: userlogin.php # files to use in place of other files that were not cached FALLBACK: img/logo.png img/offline-logo.png contact.php contact.html
这需要出现在任何使用缓存的页面上。在CACHE部分列出的文件将存储在客户端机器上，并在必要时检索以浏览网站。出现在NETWORK部分下的任何文件将总是从服务器中获取。FALLBACK部分将成对的文件映射在一起，这样如果第一个文件找不到，第二个文件将代替它在页面上的位置。使用回退，您可以向用户提供视觉线索，告诉他们正在浏览页面的缓存版本。例如，您可以提供标记为“脱机”的替代图像，这些图像只有在用户查看缓存图像时才会显示。
其他 HTML5 技术
HTML5 家族中有许多技术要么不够成熟，要么过于宽泛，无法在本书的范围内解决。然而，这并不是你不应该意识到他们的存在的理由！以下是这些技术的高级概述。
微数据
微数据是机器的 HTML5。它适用于搜索引擎和其他外部应用，这些应用可能希望从您的内容中获取意义，但需要更多信息来理解它。要做到这一点，可以用属性对现有的 HTML 元素进行注释，这些属性定义页面上的数据类型，比现有的语义 HTML 元素更精细。
在最基本的层面上，微数据使用三个属性:itemscope、itemtype和itemprop。例如，考虑一下关于这本书的一段话:
`
HTML5 Mastery: Semantics, Standards, and Styling by Anselm Bradford and Paul Haine.
为了使用微数据进行标记，首先添加了itemscope属性来表示该段落包含相关的数据集合，在本例中是一本书和作者:
`
HTML5 Mastery: Semantics, Standards, and Styling by Anselm Bradford and Paul Haine.
这个注释意味着段落中的任何元素都是相互关联的。然后使用itemtype属性给出一个微数据词汇表的 URL，这是一组为不同类型的公共数据定义的属性值，比如人、地点、事件和事物。网站[schema.org](http://schema.org)(由微软、谷歌和雅虎推出！)包含许多用于分类数据的词汇表。我们将用他们关于Book的文献来注释这一段。itemtype被添加到词汇表定义的 URL 中:
`
HTML5 Mastery: Semantics, Standards, and Styling by Anselm Bradford and Paul Haine.
访问词汇地址，您会看到有大量的属性可以使用，比我们在这个简单的例子中需要的要多得多。我们将使用itemprop属性用文档中的属性来注释内容。为了将标题与作者分开，我们还需要添加span元素，以便将注释附加到:
`
<span itemprop=“name”<HTML5 Mastery: Semantics, Standards, and Styling>/span> by >span itemprop=“author”>Anselm Bradford>/span> and >span itemprop=“author”>Paul Haine>/span>.
首先是书名，然后是作者。作者有点特殊，因为他们是微数据宇宙中的另一个对象，即Person对象，这意味着他们可以拥有自己的itemscope属性，并有关于他们的附加信息，如出生日期、地址、电话号码、国籍等。
搜索引擎或其他应用可以解析这一段落，并能够找出书名的开始和结束以及作者是谁。这只是一个尝试，但是您现在应该对微数据有所了解了。这个概念相当简单:键和值用于为页面上的内容提供详细的元数据。
关于微数据有一些争议，因为它与之前存在的另外两种格式重叠，微格式和 RDFa 4 (属性中的资源描述框架)。此外，由于[schema.org](http://schema.org)是由几家在搜索引擎技术上有既得利益的大公司推出的，这个网站所提倡的语法的中立性受到了质疑。但是，这是熟悉注释页面内容的概念的一个很好的起点。
4 微数据其实是从 RDFa 进化而来的。
撤销管理器 API
撤消管理器 API 是一个新的接口，允许网页访问 web 浏览器中的撤消/重做事务管理器。这是什么意思？嗯，想想当你在网页浏览器的搜索栏中输入一些文本时；您可以选择编辑撤销来撤销您输入的文本。这是浏览器的原生撤销管理器，允许你撤销已经完成的操作。但是，如果您有一个交互式 web 应用，比如基于canvas的富文本编辑器或绘图应用，它是由 JavaScript 控制的，浏览器的本地撤销管理器不会获取脚本执行的修改。这就是撤销管理器 API 的用武之地，因为它提供了一种方法来将通过 JavaScript 执行的动作添加到浏览器的撤销/重做管理器中。正如历史 API 通过将 URL 添加到历史“堆栈”来操作一样，撤消管理器允许将页面的一组特定更改(统称为事务)添加到浏览器的本机撤消堆栈中。由于这一特性仍在开发中，所以不要指望它能在今天的浏览器中工作，但请记住，在不久的将来，它很可能会成为浏览器实现中的一项功能。
即将到来的 CSS 技术
如你所知，这并不是 HTML5 技术，但它与 HTML 携手并进。由于 HTML5 中有很多开发，所以 CSS3 中也有很多。一个有趣的领域与页面布局有关，这个领域的规范还没有完全合并成一个主导方法。最终，预计该领域将有三个主要规范:多栏布局(在第六章中讨论)；灵活的框布局，或 FlexBox，它们提供了元素在其父容器中更好的对齐和定位；和网格/模板/区域布局。目前，网格/模板/区域布局被分为四个不同的规范，但这些规范在未来可能会合并。网格定位和网格布局用于处理行和列，并指定如何在这种布局中定位元素(多列布局可以被认为是无行网格布局)。模板布局也使用网格，但定义了一个模板，如“abc”或“bca”，其中每个字母对应一个元素，然后可以通过改变模板字母顺序来重新排列。最后，区域布局提出了一种方法，当内容溢出边界时，内容可以通过这种方法从一个元素“流向”另一个元素。CSS 中的定位一直是一个令人头痛的问题，特别是对于新手设计师来说，所以这些规范的新建议可能会像 HTML5 为 HTML 编码人员提供爆炸式增长的可能性一样，增强 CSS 编码人员的能力(很可能这两个人是同一个人，所以创造性的可能性可能会大大扩展！).
最后，值得注意的是选择器第 4 级规范中定义的一些新的选择器。 6 见表 8-1 中即将出现的新选择器列表及其用法说明。不要期望这些在不久的将来会起作用，但是将来这些很可能会得到你的首选浏览器的支持。
5 见[www.w3.org/TR/css3-flexbox/](http://www.w3.org/TR/css3-flexbox/)。
6 见[dev.w3.org/csswg/selectors4/](http://dev.w3.org/csswg/selectors4/)。
总结
如果你假设事情的发展方向是错误的，并着手定义自己的新道路，那么预测未来是很容易的。这似乎是 HTML5 的发展方向。对 XHTML 的局限不再抱幻想的 Web 开发人员转向 HTML5，希望它能为他们提供新一代 web 应用所需的平台。既然它已经铺好了自己的前进道路，重塑网络的势头带来了全新的可能性。语法的灵活性，新的元素，多媒体和丰富的 JavaScript 和 CSS 特性。我们已经走了很多路，还有更多的路要走，但是现在我们已经走到了这段旅程的终点。让这成为你探索的开始。从这里你可以走很多路，比如深入研究移动开发、CSS3 或者广泛的 HTML5 APIs。规范的细节无疑将会发展，因为这是 Web 的本质，但是您在这里学到的基础知识和 HTML5 组件背后的概念将在相同的知识基础下继续，即使将来语法有所变化。是时候尝试这些技术了，看看在开放标准的世界里有什么是可能的。继续制作语义合理、内容丰富的页面。继续前进，让网络成为一个更好的地方。
九、相关技术
除了 CSS3，许多技术都与 HTML5 相关联，但实际上是在它们自己的规范中定义的。有些曾经是 HTML5 的一部分，但是随着它们的发展，已经被剥离到它们自己的文档中，而另一些则直接用于 HTML5，但是从来不是 HTML5 规范的一部分。本附录提供了这些通常与 HTML5 相关的不同技术的高级概述。此外，你还可以在本章末尾找到使用 HTML5 的有用网站资源列表。
地理位置
地理定位 API 1 定义了网络浏览器如何使用用户的 IP 或 WiFi 地址来确定用户的地理位置，如果用户在移动设备上，则使用设备上的全球定位系统(GPS)。位置以经纬度坐标的形式给出，根据检索位置时使用的方法，这可能更准确或更不准确。例如，用用户的 IP 地址来确定他们的位置远不如用基于卫星的 GPS 来确定他们的位置准确。
检索用户位置的含义非常有趣，因为它使得基于位置的服务能够通过 web 浏览器提供。这对于移动设备来说可能是最有用的，因为信息和广告可以通过移动设备上的网络浏览器传送。
检索用户位置的 JavaScript 方法保存在window.navigator.geolocation内部的Geolocation对象中。该位置可以检索一次，也可以连续更新。API 定义了三种方法:
getCurrentPosition():检索当前位置一次watchPosition():当当前位置改变时，检索并更新当前位置clearWatch():停止更新观察位置
当试图检索用户的位置时，网络浏览器通常会提示是否允许使用地理定位。
1 见【www.w3.org/TR/geolocation-API/】的。
检索当前位置
当成功获得位置时(如果使用 GPS，这可能需要几分钟)，为函数调用的getCurrentPosition()方法提供了一个参数。这里有一个例子:
function init() { // get the current position and call the “locatedSuccess" function when successful window.navigator.geolocation.getCurrentPosition(locatedSuccess); } function locatedSuccess(geo) { // log the returned Geoposition object console.log(geo); } window.onload = init;
注意根据所使用的网络浏览器，这段代码可能只能在一个活动的网络服务器上运行(在本地运行也可以)。如果不行，先检查页面的 URL 地址开头包含http://。
该脚本将尝试获取当前位置，并在获取后调用locatedSuccess()函数。位置查询是异步完成的，以便其他流程可以继续在页面上运行。该函数被传递一个参数，该参数包含一个包含位置信息的Geoposition对象。Geoposition对象包含一个timestamp属性和coords属性，后者包含另一个对象，一个Coordinates对象。Coordinate对象包含以下属性，根据查看设备的硬件功能，这些属性可能包含null值(例如，如果您的设备没有 GPS 功能，这些值将受到限制):
latitude:地球上的南北位置longitude:地球上的东西位置altitude:位置的高度，如果观察装置具有测量高度的能力，则收集该高度accuracy和altitudeAccuracy:以米为单位测量的位置精度heading:围绕一个圆以度数测量的行进方向speed:在某一航向上行驶的速度，单位为米/秒
注意除了timestamp和coords属性，Firefox 还包括一个address属性，用于检索地址信息，如城市、国家，甚至街道信息！
更新前面的locatedSuccess()函数，在屏幕上打印位置数据:
function locatedSuccess(geo) { var lat = geo.coords.latitude; var long = geo.coords.longitude; document.body.innerHTML = “<ul><li>lat:"+lat+"</li><li>long:"+long+"</li></ul>"; }
可以给getCurrentPosition()方法一个额外的函数名，以指定在请求用户位置失败时运行的函数。编辑init()代码并添加一个locatedFailed()功能:
function init() { // get the current position //and call the “locatedSuccess" or “locatedFailed" if successful or not window.navigator.geolocation.getCurrentPosition (locatedSuccess, locatedFailed); } function locatedFailed(e) { // log the error code and message console.log(e.code , e.message); }
当无法获得位置时，locatedFailed()功能将运行。传递给它的参数是一个包含错误代码和消息的PositionError对象。以下是可能的错误:
- 错误代码 1，权限被拒绝:用户未授权使用地理定位。
- 错误代码 2，位置不可用:位置无法确定。
- 错误代码 3，位置检索超时:检索位置时间过长。
如果你想测试这个功能，最简单的方法就是拒绝浏览器的地理定位请求。根据浏览器以及您是否接受了之前的地理位置信息请求，浏览器会记住您的选择，不会再次询问您。例如，Google Chrome 将要求你点击地址栏右侧的“目标”图标，在那里你可以选择清除地理位置设置(需要重新加载页面以使设置生效)。图 A-1 显示了这个对话框的样子。对于 Firefox，地理定位权限位于工具页面信息下，这将打开一个对话框，显示当前正在查看的页面的信息。选择权限选项卡将允许您设置与特定页面共享位置信息的首选项。Safari 在浏览器偏好设置面板的“隐私”标签中设定了位置设置。如果您不确定在首选浏览器中的何处清除地理位置信息，请查看应用的偏好设置或地址栏的右侧，因为这些位置通常是地理位置权限设置的位置。
图 A-1。用于清除谷歌浏览器页面地理位置设置的对话框
最后，可以向getCurrentPosition()方法传递一个自定义对象，该对象可用于设置检索位置时使用的各种选项。该对象可以用下列属性和值来设置:
enableHighAccuracy:设定为true或false。如果启用，将使用精度最高的方法来确定位置，如 GPS。请注意，这将增加电池的使用和检索位置的时间长度。timeout:检索位置时等待多长时间(以毫秒为单位)，然后抛出位置不可用错误。maximumAge:一个特定的位置应该被认为是当前位置多长时间(以毫秒为单位)。
这些选项可以使用速记对象创建符号添加到getCurrentPosition()方法中，如下所示:
var options = { enableHighAccuracy: true, timeout: 120000, maximumAge: 1000 }; window.navigator.geolocation.getCurrentPosition(locatedSuccess, locatedFailed, options);
这将启用高精度定位(这取决于可用的硬件)，将超时设置为两分钟，并将位置的最大年龄设置为一秒。
观察当前位置
对于固定设备(如台式计算机)来说，获得一次位置是可以的，但是对于移动设备来说，必须不断地检索位置才能准确。watchPosition()方法用于不断轮询位置(这是最大年龄选项有用的地方)以更新位置信息。它采用与getCurrentPosition()方法相同的参数，但是它应该被设置为一个变量，如果停止连续更新位置，这个变量可以在以后被引用并传递给clearWatch()方法。这里有一个例子:
var geoWatchID = window.navigator.geolocation.watchPosition(locatedSuccess, locatedFailed, options);
在代码的后面，geoWatchID可以作为参数传递给clearWatch()以停止位置更新:
clearWatch(geoWatchID);
SVG 和 MathML
SVG 和 MathML 有两个完全不同的目的，但它们有一个共同点:它们都是基于 XML 的语言，可以嵌入到 HTML5 中。可缩放矢量图形(SVG)用于描述矢量形状，而数学标记语言(MathML)用于描述数学符号。
SVG 和canvas是网络标准图像选项的一半。虽然canvas很好地处理了位图，但是 SVG 很好地处理了矢量形状。它还具有内置的动画功能，这将需要在canvas从头开始构建。
这两者的语法超出了本文的讨论范围，但是由于它们都是基于 XML 的，所以看起来非常像 HTML，只是元素集不同。例如，下面的代码显示了一个包含 MathML 和 SVG 的 HTML 页面，用于描述和绘制第七章中的三角函数。
*<!DOCTYPE html>* <html> <head> <meta charset="utf-8" /> <title>SVG and MathML Demo</title> </head> <body> <h1>SVG and MathML embedded in an HTML5 page</h1> <p> <math> <mi>x</mi> <mo>=</mo> <mrow> <msub><mi>x</mi><mn>1</mn></msub> <mo>+</mo> <mi>cos</mi> <mfenced><mi>θ</mi></mfenced> <mo>⁢</mo> <mi>c</mi> </mrow> `
y
=
y1
+
sin
θ
c
上述代码创建了图 A-2 中的符号和图表。
嵌入 HTML5 页面的 SVG 和 MathML
x = x【1】+cos(θ)c
y = y1+sin(μ)c
图 A-2。使用 HTML、MathML 和 SVG 从标记创建的图表
客户端存储
想象一下，一个 web 应用可以将用户处理过的数据保存在客户端数据库中，然后在用户在线连接时与基于服务器的数据库同步。这种离线功能对于改善应用的延迟非常有用，因为用户的数据不需要频繁地在网络上来回发送，而且在连接不稳定的情况下，例如在移动环境中，这种功能也很有帮助。
网络存储
Cookies 一直是在客户端浏览器上存储数据的方法。cookies 的一个问题是它们很小，每个只允许 4kb 的存储空间，这对于当今数据丰富的网页/应用来说是微不足道的。对此，新一代客户端存储解决方案应运而生。最稳定的解决方案，也是可以被视为 cookies 替代品的解决方案，是 Web 存储 API， 2 ，它允许高达 5 兆字节的存储空间。Web 存储实际上分为两个选项，localStorage对象和sessionStorage对象，它们都是window对象的属性。两者的区别在于，存储在localStorage中的数据是持久的，而存储在sessionStorage中的数据在浏览器会话结束时(比如退出浏览器时)会丢失，但除此之外，它们的使用方式是相同的。每个只是一系列的键/值对，所以用一些数据设置一个键，然后用这个键在以后检索数据。
使用网络存储
使用网络存储非常简单。要向存储中添加数据，请使用以下语法之一:
window.localStorage.setItem("key","value"); window.localStorage["key"] = “value";
在这段代码中，“键”和“值”可以是任何文本字符串。要从存储中检索数据，请使用以下任一方法:
var val = window.localStorage.getItem("key"); var val = window.localStorage["key"];
要删除数据，请删除特定的密钥或清除整个存储:
window.localStorage.removeItem("key"); window.localStorage.clear();
网络存储示例
使用contenteditable属性，您可以创建一个简单的文本编辑器来保存客户机上的更改。对于本例，创建一个名为edit.html的新 HTML 文件，并用以下代码填充它:
<!DOCTYPE html> `
Turn editing on
Turn editing off and save changes
Clear changes!
`
2 见【http://dev.w3.org/html5/webstorage/】的。
现在创建一个名为script.js的新 JavaScript 文件，并将它放在名为js的目录中，该目录与edit.html在同一个位置。用以下脚本填充它:
`var editable; // variable for editable area
// initialize the variables and add event handlers
function init()
{
editable = document.getElementById(‘editable’);
var startEditBtn = document.getElementById(‘startEditBtn’);
var stopEditBtn = document.getElementById(‘stopEditBtn’);
var clearBtn = document.getElementById(‘clearBtn’);
startEditBtn.onmousedown = startEdit;
stopEditBtn.onmousedown = stopEdit;
clearBtn.onmousedown = clear;
// update text with data in local storage
if (localStorage.getItem(“savedtext”)) editable.innerHTML =
localStorage.getItem(“savedtext”);
}
function startEdit()
{
// add the contenteditable attribute
editable.setAttribute(“contenteditable”, true);
}
function stopEdit()
{
// disable the contenteditable attribute
editable.setAttribute(“contenteditable”, false);
// save the text
localStorage.setItem(“savedtext”, editable.innerHTML);
}
function clear()
{ // clear the local storage
localStorage.clear();
// reload the page
window.location.href = “";
}
window.onload = init;`
在 web 浏览器中打开 HTML 页面，您将能够打开编辑功能(这将添加contenteditable属性)，保存编辑内容，并查看这些编辑内容，因为它们将存储在本地存储中(图 A-3 )。
图 A-3。使用本地存储的简单应用
其他存储选项
本地存储很容易使用，但这种方便也带来了它的功能限制。它确实无法与后端 web 服务器上的数据库相比，后者可能描述了存储数据之间的关系，并提供了确保数据完整性的方法。由于 web 技术正朝着支持创建 web 应用的方向发展，所以在客户端拥有一个功能完备的数据库是一个理想的选择。一个这样的选项是 Web SQL，它本质上将一个 SQLite 3 数据库嵌入到 Web 浏览器中。这意味着结构化查询语言 (SQL)命令可以直接从 JavaScript 中使用。相当酷！不幸的是，Web SQL 的未来变得相当暗淡，因为关于将 SQLite 用作嵌入式数据库的标准化的分歧导致 W3C 放弃了对该倡议的支持。正因为如此，Mozilla 已经表示将放弃对 Firefox 的支持，这意味着这种支持是不稳定的，不可靠的。太糟糕了。
另一个选项是索引数据库 API， 4 ，也称为 IndexedDB，目前仅在 Firefox 中受支持，但其他主流 web 浏览器也计划提供支持。这种数据库解决方案存储键/值对，就像 web 存储一样，但包括更复杂的功能，例如用于确保数据成功提交到数据库的事务，这有助于保证数据完整性。IndexedDB 不像 web SQL 那样复杂(它不是关系数据库)，但它比 Web 存储更强大，并且看起来它将成为未来处理比 Web 存储所能容纳的更复杂的客户端数据存储的选项。
网络工作者
网络工作者正在让网络上的计算密集型任务变得不那么痛苦。JavaScript 是一种单线程语言，这意味着一个占用大量处理能力的脚本可能会完全瘫痪任何可能正在运行的用户交互脚本。使用 web worker，可以生成一个新的线程来运行脚本，而不会中断主脚本中 UI 交互或其他事件的处理。Web 工作者分为两种类型:专用工作者和共享工作者。共享工作者比专用工作者更强大，因为他们可以与多个脚本通信，而专用工作者只对最初产生它的脚本做出响应。
3 见【http://sqlite.org】的。
4 见【www.w3.org/TR/IndexedDB/】的。
网络套接字 API
网络套接字 API 5 是定义用于提供与远程主机的双向通信的协议的规范。网络的根源传统上基本上是单向的。服务器向客户端 web 浏览器发送一个页面，然后两者之间什么也不发生，直到用户单击一个链接并请求另一个页面。web 套接字提供的是一个开放的连接，在页面加载后，可以随时通过这个连接将数据从客户端发送到服务器，反之亦然。例如，这可以用于创建多人在线游戏或应用，因为数据可以从一个客户端发送到服务器，并分发到连接到同一服务器的所有其他客户端。
视频会议和点对点通信
一个为两种浏览器之间的视频会议创建规范的项目正在进行中。这是 W3C HTML5 和 WHATWG HTML 规范之间的主要区别，因为它包含在 WHATWG 版本中，但在 W3C 规范中被省略了。相反，W3C 有一个单独的规范，名为“WebRTC 1.0:浏览器间的 Web 实时通信”由于这两个规范都处于草案状态，不难想象，包含在 WHATWG HTML 草案中的版本很可能在未来被分离出来成为一个单独的规范，就像 W3C 所发生的那样。
无论如何，撇开管理问题不谈，实现视频会议的实际技术需要两个独立的网络浏览器收集视频和音频，并通过对等连接相互传输。具体来说，需要执行以下步骤:
- 访问网络摄像头或其他视频/音频输入设备。
- 在本地录制视频/音频，以便将其流式传输到远程 web 浏览器。
- 连接并将视频/音频发送到远程 web 浏览器。
- 在本地和远程 web 浏览器的
video或audio元素中显示视频/音频流。
一个名为 Stream API 的 API 定义了一个名为MediaStream的接口，它将与 JavaScript 一起使用来处理流媒体的解析和显示。就发送媒体流而言，将使用另一个 API，称为对等连接 API。这个 API 描述了一个PeerConnection JavaScript 接口，它定义了连接和发送媒体流到远程对等点的方法。
5 见【http://dev.w3.org/html5/websockets/】的。
6 见【http://dev.w3.org/2011/webrtc/editor/webrtc.html.】??
围空
WAI-ARIA， 7 《可访问的富互联网应用规范》(WAI 代表 Web Accessibility Initiative)，旨在提供一种语法，使残疾人可以访问现代动态 Web 应用。WAI-ARIA 使用属性来标记页面内容的用户交互，并描述页面元素之间的相互关系。WAI-ARIA 定义了一个role属性，它有一大组值，用于描述一个 web 特性是如何呈现的，以及页面是如何构造的。还有大量的“aria- *”前缀属性用于描述网页特征的状态。这些属性可用于注释，例如，菜单是否有子菜单，或者被拖动的对象放在目标上时可以执行什么操作。WAI-ARIA 规范本身就是一个很大的规范；欲了解更多信息，请访问 WAI 的 WAI-ARIA 概况页面:[www.w3.org/WAI/intro/aria](http://www.w3.org/WAI/intro/aria)。
文件 API
有三个正在开发中的规范与客户端机器的文件系统上的文件的读取、浏览和写入相关。主要的一个是文件 API， 8 ，它包括名为File、FileList、FileReader和FileError的接口，这些接口定义了一些方法，例如，可以用来读取文件或文件组的名称和最后修改日期。该规范还定义了一个与原始二进制数据接口的Blob,可以对其大小和类型进行检查，并将其分割成块。文件 API 通过 web 表单的文件输入类型，甚至通过将文件从用户系统拖放到 web 浏览器窗口来处理可能出现在 web 浏览器中的文件。扩展文件 API 的是目录和系统 9 和 Writer10API。目录和系统描述了与用户的本地文件系统直接交互的方法。显然，这涉及到安全问题，所以公开的文件系统是沙箱化的，这样 web 应用就不能不受限制地入侵用户的计算机。编写器 API 完成了您所期望的工作；它定义了如何将文件或原始数据块写入文件系统。它还定义了一个FileWriterSync接口，用于与 Web Workers API 一起编写文件。
有用的网络资源
使用 HTML5 进行开发时，您可能会发现以下网站资源非常有用:
- W3C 的 HTML5 规范工作草案 :
[w3.org/TR/html5/](http://w3.org/TR/html5/) - WHATWG“live”HTML 规范 :
[www.whatwg.org/specs/web-apps/current-work/](http://www.whatwg.org/specs/web-apps/current-work/) - Html5.org:包括一个 HTML5 验证器和一个跟踪 WHATWG 规范变化的跟踪器:
[html5.org](http://html5.org) - Html5rocks.com:包括一个完全用 HTML5 技术制作的在线代码编辑器游乐场和幻灯片演示:
[html5rocks.com](http://html5rocks.com)
7 见【www.w3.org/TR/wai-aria/】的。
8 见【www.w3.org/TR/FileAPI/】??。
9 见【www.w3.org/TR/file-system-api/】的。
10 见【www.w3.org/TR/file-writer-api/】的。
- Html5doctor.com*:包含关于 HTML5 的翔实文章以及全面的元素参考；
[html5doctor.com](http://html5doctor.com)*
** Caniuse.com:html 5、CSS3 及相关技术的兼容表:[caniuse.com](http://caniuse.com)* Html5test.com:html 5 及相关功能支持的浏览器评分:[html5test.com](http://html5test.com)* CSS3 选择器测试:支持多种 CSS 选择器的浏览器测试:[www.css3.info/selectors-test/](http://www.css3.info/selectors-test/)* Mobilehtml5.org:手机和平板浏览器的 HTML5 特性兼容表:[mobilehtml5.org](http://mobilehtml5.org)* HTML5boilerplate.com:html 5 页面的起始模板:[html5boilerplate.com](http://html5boilerplate.com)* Modernizr :测试浏览器对 HTML5、CSS3 及相关特性支持的 JavaScript 库:[modernizr.com/](http://modernizr.com/)* 谷歌 Chrome 框架:在旧浏览器中启用现代网络技术功能的方法:[code.google.com/chrome/chromeframe/](http://code.google.com/chrome/chromeframe/)* Html5pattern.com:web 表单中客户端验证的正则表达式模式:[html5pattern.com](http://html5pattern.com)* Mozilla Developer Network(MDN):关于 HTML5 和其他 web 技术的优秀且易于掌握的资源:[developer.mozilla.org/en/HTML/HTML5/](https://developer.mozilla.org/en/HTML/HTML5/)* Html5gallery.com:使用 HTML5 技术的网站展示:[html5gallery.com](http://html5gallery.com)* Mediaqueri.es :使用媒体查询的网站展示:[mediaqueri.es](http://mediaqueri.es)*
