HTML5移动应用开发第5章：新的可视化UI 特性

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

先决条件

在本文中，您将使用最新的 Web 技术开发建设 Web 应用程序。这里的大部分具体代码只是网页hTML、JavaScript 和 CSS — 所有 Web 发人员的核心技术。所需的最重要的工具是用于进行测试的浏览器。本文大部分具体代码将在最新桌面浏览器上运行，但也有一些例外，咱们将在文章中进行说明。当然，您也必须在移动浏览器上测试，为此，您需要最新的 iPhone 和 Android SDKs。本文将使用 iPhone SDK 3.1.3 和 Android SDK 2.1。参见参考资料获取链接。

通过 Canvas 实现图形具体效果

多年以来，Web 开发建设人员一直在抱怨 Canvas。现在，为何还有人会抱怨浏览器中的一个原生画图 API 呢？毕竟，它允许您创见某种图形界面，否则您将需要某种浏览器插件（每位移动 Web 开发建设人员都知道，插件在一些最流行的移动浏览器上并不可用）。Web 开发建设人员抱怨 Canvas 的原因是：尽管现在它可用于 Firefox 和 Safari 已经很多年，但最流行的桌面浏览器 Microsoft®Internet Explorer® 一直不支持它。甚至 Internet Explorer 9 的早期版本也不支持 Canvas。因此，多年来，Canvas 一直是最大的技术笑话。您可能会发现，这些令人惊叹的 Canvas 样例遍布整个 Internet，但您不能仅仅因为 Internet Explorer 不支持它就将它用于大多数 Web 应用程序。幸运的是，对于移动 Web 开发建设人员来说，Canvas 没有这样的限制。您瞄准的所有基于 Webkit 的浏览器都能实现 Canvas 并极大地优化其性能。

Canvas API 是一个低级画图 API，它支持创见直线、曲线、多边形和圆圈，并用彩色、渐变色等填充它们。在 Canvas 上，您可以创见文本，执行各种各样的几何转换。可以想见，这样的 API 的用途是无限的。咱们来看一个使用 Canvas 来创见一个图形报告的应用程序。图 1 展示了该应用程序的屏幕截图：一个显示每年结果的柱状图。

图 1. 运行在 Android 浏览器上的基于 Canvas 的报告应用程序

图 1 所显示的并不是浏览器中的一幅静态图像。这个报告图形是使用这个 Canvas API 实时生成的。清单 1 展示了创见这个报告的网页hTML。

清单 1. 报告网页hTML

XML/网页hTML Code 复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-touch-fullscreen" content="YES" />
<title>网页hTML 5 Reports</title>
<script type="text/javascript">
function init(){
var data = [{year : "2007",sales : 49},
{year : "2008",sales : 131},
{year : "2009",sales : 294},
{year : "2010",sales : 405}];
var report = {x : "year",
y : "sales",
values : data};
graph(report, 350, 300);
}
</script>
</head>
<body onload="init()">
<canvas id="graph"></canvas>
</body>
</html>

这个清单展示了基本的网页hTML 结构。这个文档的主体拥有一个单一的 canvas 标记。在 init 数据库函数（在文档主体加载时相关调用）中，您定义静态数据（报告数据）并将其传递到 graph 数据库函数。尽管这里将报告定义为静态数据，但很容易将其想象为使用 Ajax 通过网络动态下载。report 数据库函数包含所有有趣的具体代码，咱们来看看清单 2。

清单 2. graph 数据库函数

JavaScript Code 复制内容到剪贴板

function graph(report, maxWidth, maxheight){
var data = report.values;
var canvas = document.getElementById("graph");
var axisBuffer = 20;
canvas.height = maxheight 100;
canvas.width = maxWidth;
var ctx = canvas.getContext("2d");
var width = 50;
var buffer = 20;
var i = 0;
var x = buffer axisBuffer;
ctx.font = "bold 12px sans-serif";
ctx.textAlign = "start";
for (i=0;i<data.length;i ){
ctx.fillStyle = "rgba(0, 0, 200, 0.9)";
ctx.fillRect(x, maxheight - (data[i][report.y] / 2),
width, (data[i][report.y] / 2));
ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
ctx.fillText(data[i][report.x], x (width / 4), maxheight 15);
x = width buffer;
}
// draw the horizontal axis
ctx.moveTo(axisBuffer, maxheight);
ctx.lineTo(axisBuffer maxWidth, maxheight);
ctx.strokeStyle = "black";
ctx.stroke();
// draw the vertical axis
ctx.moveTo(axisBuffer,0);
ctx.lineTo(axisBuffer,maxheight);
ctx.stroke();
// draw gridlines
var lineSpacing = 50;
var numLines = maxheight/lineSpacing;
var y = lineSpacing;
ctx.font = "10px sans-serif";
ctx.textBaseline = "middle";
for (i=0;i<numLines;i ){
ctx.strokeStyle = "rgba(0,0,0,0.25)";
ctx.moveTo(axisBuffer, y);
ctx.lineTo(axisBuffer maxWidth,y);
ctx.stroke();
ctx.fillStyle = "rgba(0,0,0, 0.75)";
ctx.fillText("" (2*(maxheight -y)), 0, y);
y = lineSpacing;
}
}

在这个数据库函数的第一部分中，您建立了创见这个报告需要的对象，比如画布的宽度和高度，填充变量等。您还创见了画布上下文对象，因为这是用于进行所有实际画图的对象。然后，您通过迭代报告数据，绘制图 1 中的柱状图。首先，您设置 fillStyle 属性。这就像设置一个颜色一样简单，您使用 CSS 时也可能会这样做。在本例中，使用 rgba 标记来设置颜色，以及 alpha 值（这是颜色的透明度，稍后咱们讨论奇妙的 CSS3 世界时还将介绍这个具体参数）。设置 fillStyle 属性后，使用 fillRect API 来为数据点创见柱状图。这里，您指定这个矩形的起点 (x,y) 以及它的高度和宽度。接下来，您重新定义 fillStyle，因为您想打印一些文本，作为报告的一部分。您使用 fillText API 来在画布上绘制文本。您对每个数据点都执行这个操作，为每个数据点创见一个柱状图，其下带有一个网页文章标签。

接下来，您需要绘制这个图形的其他部分 — 轴线和网格线。首先，绘制水平和垂直轴线。对于每条轴线，使用 moveTo API 来设置开始绘制直线的起始点。然后使用 lineTo API 来从这个起始点到传递到这个 lineTo 相关调用中的端点之间绘制一条直线。注意，这并不实际绘制一条直线；相反，您相关调用 stroke API 来绘制这条直线。绘制水平和垂直轴线后，沿着它们的网页文章标签绘制网格线，实用具体的方法是均匀间隔它们，然后使用相同的 moveTo、lineTo 和 stroke 组合来绘制这些直线。

这就是以编程方式创见这个报告图形所需的所有具体代码。在这个示例中，您已经看到了许多最重要的、也是最常使用的画布 API，但还有其他几个 API（比如用于绘制曲线）。您可以使用这些 API 完成一些令人惊讶的任务，这些任务可以在任何基于 Webkit 的浏览器上完成。如果您的目标不是绘制图形，网页网页hTML 5 仍旧有很多格式为 Cascading Style Sheets (CSS) 3.0 的新视觉图像。

奇妙的 CSS3 世界

谈到网页网页hTML 5，您可能会马上想到网页hTML 标记。当然，网页网页hTML 5 肯定包含新标记，咱们将在下一小节中查看其中的部分新标记。在上一小节中，您看到了如何使用一个 <canvas> 标记来在 DOM 中创见一个画布对象。但是，大部分具体代码是 JavaScript。网页hTML 仅仅是网页网页hTML 5 的一部分 — JavaScript 和 CSS 也是同样重要的部分。网页网页hTML 5 中的许多新用户界面网页元素由 CSS 标准的最新版 CSS 3.0 提供。在图 2 中，一个使用几种 CSS 3.0 新技术的 Web 页面出现在基于 Android 的手机和 iPhone 上。

图 2. 移动设备的新 CSS 功能

图 2 在一个基于 Android 的设备和 iPhone 上展示了许多新 CSS 功能。左边的图像来自一个基于 Android 的设备。它比右边的图像更大，原因是它来自一个 Motorola Droid，它比用于右边的图像的 iPhone 3GS 拥有的分辨率更高的屏幕。因此，您在 Droid 上将看到更多的页面内容。但是，您可能会看到，标题 “The Gettysburg Address” 有一个倒影，该倒影在 iPhone 上逐渐淡出，但是在 Droid 上并不淡出，而是最终模糊下一个标题。这只是一个细节提醒：即使基于 Android 的设备和 iPhone 都拥有基于 Webkit 的浏览器，但它们之间也有细微的差别，因此您在测试时必须更加细心。现在看一下生成这个漂亮页面的具体代码（见清单 3），首先从页面顶端开始。

清单 3. 页面上半部分的具体代码

XML/网页hTML Code 复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function init(){
var i=0;
var row = {};
var cell = {};
var topics = ["nth-child", "gradients", "alpha", "text effects",
"reflections", "transformations"];
for (i=0;i<topics.length;i ){
row = document.createElement("tr");
cell = document.createElement("td");
cell.appendChild(document.createTextNode(topics[i]));
row.appendChild(cell);
$("dtable").appendChild(row);
}
}
</script>
<style type="text/css">
header > h1{
color: yellow;
background: -webkit-gradient(linear, left top, left bottom,
from(blue), to(white))
}
tr:nth-child(4n 1) { color: navy; }
tr:nth-child(4n 2) { color: green; }
tr:nth-child(4n 3) { color: maroon; }
tr:nth-child(4n 4) { color: purple; }
input[type="text"]{
background: rgba(150, 30, 30, 0.5);
}
</style>
</head>
<body onload="init()">
<header>
<h1>The World of CSS3</h1>
<div>What kind of CSS3 does your browser support?</div>
</header>
<table id="dtable"></table>
<div id="formSection">
<label for="name">What's your name?</label>
<input type="text" id="name"></input>
<button id="rtBtn" onclick="rotate()">Rotate</button>
</div>
</body>
</html>

清单 3 中的具体代码绘制标题 “Gettysburg Address” 上方的所有 UI。您将稍后看到这个页面的下半部分的具体代码。

首先应该检查页面标题。如果您查看清单 3 底部附近的网页hTML 页面主体，您将看到这个标题实际上位于一个 header 标记中 — 这是网页网页hTML 5 中的一个新网页hTML 网页元素。

现在看看 style 网页元素（位于清单 3 中的网页hTML 主体上方）。这个文本的样式使用带有选择器 header > h1 的 CSS 设置。这个规则将文本颜色设置为黄色，同时将其背景设置为蓝色和白色。背景应用有渐变。这是您看到的前缀为 -webkit 的 CSS 特性的首个示例。您可能会猜测，这个前缀使这个 CSS 专用于基于 Webkit 的浏览器。但是，在多数情况下，这些特性是 CSS 3.0 标准的一部分，但它们处于这个标准中还在不断轻微变化的部分。多数情况下，Webkit 浏览器和基于 Mozilla Firefox 的浏览器都已经实现了这些特性。如果您的开发建设也需要针对 Mozilla 浏览器（比如 Firefox 的移动版本 Fennec，该版本在欧洲的 Nokia 智能手机上迅速流行起来），那么您通常可以将 -webkit 前缀更改为 -moz。

下一步是使用名为 dtable 的表显示一个主题列表。如图 2 所示，当您显示这个表的内容时，相邻两行的颜色各不相同。这个任务使用下一个 CSS 部分 — tr:nth-child 声明 — 来完成。可以在任意重复的网页元素上使用 nth-child 声明。您传递一个用作谓词的公式，检查它是否是一个有效的网页元素规则。在本例中，您声明表单行号为 4n 1（1、5、9，等等）的行的颜色为海军蓝，表单行号为4n 2（2、6、10，等等）的行的颜色为绿色，以此类推，其余的行分别为栗色和紫色。过去，您经常需要对表、列表等组件实现类似的视觉具体效果，但通常是通过繁琐的 JavaScript 来实现。

最后的视觉网页元素是红色的文本字段，带有网页文章标签 What's your name? 和按钮 Rotate。这个文本字段的红色是使用一个特定于类型的输入选择器实现的。换句话说，这是一个 CSS 规则，只适用于类型为 text 的输入网页元素。现在，您可能想知道 Rotate 按钮到底作用何在？看看清单 4 中的具体代码就明白了，该具体代码相关调用一个名为 rotate 的数据库函数。

清单 4. 使用 CSS 的 JavaScript rotate 数据库函数

JavaScript Code 复制内容到剪贴板

function rotate(){
$("formSection").style["-webkit-transform"] = "rotateZ(-5deg)";
$("formSection").style["-webkit-transition"] =
"-webkit-transform 2s ease-in-out";
$("rtBtn").inner网页hTML = "Undo";
$("rtBtn").onclick = function() {
$("formSection").style["-webkit-transform"] = "";
$("rtBtn").inner网页hTML = "Rotate";
$("rtBtn").setAttribute("onclick", "rotate()");
}
}

这个 rotate 数据库函数使用 JavaScript 来更改应用到名为 formSection 的 div 的 CSS。（注意：您正在将 $() 用作document.getElementById() 的一个别名。）要旋转这个 div，将它的 -webkit-transform 样式设置为 rotateZ(-5deg)，将其逆时针旋转 5 度。接下来，将 -webkit-transform 样式设置为 -webkit-transform 2s ease-in-out。这使旋转耗时两秒钟，缓慢启动，加速，然后在最后再次减速。在图 3 中，左边显示 What's your name? 字段旋转之前的初始位置；右边显示该字段部分旋转后的视觉具体效果及其 Undo 按钮。

图 3. 旋转网页hTML 网页元素

参见参考资料中的链接查看这个具体效果在 Chrome、Safari 4 和 Opera 等兼容网页网页hTML 5 的浏览器上的实际运行情况。

现在咱们转到图 2 中的页面的下半部分。这里您看到几个有趣的图像、文本具体效果以及布局示例。清单 5 显示了相关具体代码。

清单 5. 图 2 的下半部分具体代码

XML/网页hTML Code 复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2 {
-webkit-text-fill-color: blue;
-webkit-text-stroke-color: yellow;
-webkit-text-stroke-width: 1.5px;
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red),
to(#000));
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left
bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
h3{
color: rgba(0,0,255,0.75);
background: rgba(255,255,0,0.5);
}
.xyz{
text-shadow: #6374AB 4px -4px 2px;
white-space: nowrap;
width: 14em;
height: 2em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #bbb;
border-radius: 9px;
background-color: #fff;
}
.abc {
border: 1px solid #000;
border-radius: 9px;
-webkit-column-count:4;
-webkit-column-rule: 1px solid #a00;
-webkit-column-gap: 0.75em;
}
</style>
</head>
<body onload="init()">
<h2>The Gettysburg Address</h2>
<h3>Abraham Lincoln, Gettysburg, PA. November 19, 1863</h3>
<div class="xyz">
Four score and seven years ago our fathers brought forth on this
continent a new nation, conceived in liberty, and dedicated to
the proposition that all men are created equal.
</div>
<div class="abc">
Now we are engaged in a great civil war, testing whether that
nation, or any nation, so conceived and so dedicated, can long
endure. We are met on a great battle-field of that war. We have
come to dedicate a portion of that field, as a final resting
place for those who here gave their lives that that nation might
live. It is altogether fitting and proper that we should do this.
</div>
</body>
</html>

咱们来逐个看看这个具体代码中的网页元素。首先，为 “The Gettysburg Address” 创见了一个标题，并以几种方式设置其样式。

使用 -webkit-text-fill-color、-webkit-text-stroke-color 和 -webkit-text-stroke-width 样式来创见 “黄中带蓝” 的具体效果。
通过设置背景样式 -webkit-gradient 来在文本后面放置一个红黑色背景。注意，这是一个放射状渐变，而此前您看到的是一个线性渐变。这两种渐变在智能手机上的具体效果都很好。
通过设置 -webkit-box-reflect 样式对标题应用一个倒影。设置这个样式以在标题下方 5 个像素处反射标题，并对倒影应用一个渐变具体效果。这里的渐变具体效果使倒影看起来似乎正在淡出。如果回顾一下图 2，您将看到，Android 浏览器不支持这个对倒影应用一个渐变的组合：它只是呈现不带任何渐变的倒影。

继续移动到下一个标题，对它应用一个非常简单的样式：文本一种颜色，背景另一种颜色。这两种颜色都使用 rgba 数据库函数来指定 “红-绿-蓝” 值，以及一个 alpha 透明度值。值 1.0 完全不透明，值 0.0 则为透明。

清单 5 中的下一部分是这篇短文的第一段。文本周围有一个边界，您使用新的 border-radius 样式来实现 4 个圆角。现在，您在 Web 上到处都能看到这样的圆角，它们通常使用图像来实现。与使用 CSS 3.0 来实现相比，这种实用具体的方法真是太老土了。通过使用 text-shadow 样式来向这个段落的文本应用一个阴影。最后，注意段落区域受到了父 div 的高度和宽度的限制，文本太大了。与在一些较老的浏览器中看到的那样直接截除文本相反，通过设置 text-overflow 样式可以获得一个美观的省略号（...）具体效果。

最后，来到文本的最后部分。它的周围也有一个边界，但是注意，它出现在 4 个带有列分隔符的列中。为此，设置 -webkit-column-count 样式，并设置配套的 -webkit-column-rule 样式来获取这些分隔符。可以想见，如果没有这些新的 CSS 3.0 特性，像这样格式化文本将会是多么的繁琐！当您创见简单的 headers 和 footers（它们二者也是网页网页hTML 5 中的新网页元素）时，这也可能是一个很有用的特性。看一下它们以及由网页网页hTML 5 引入的其他一些新标记。

新语义

网页网页hTML 5 向网页hTML 标记添加了许多新网页元素。其中一些网页元素将导致浏览器提供一些新的呈现处理。其他一些网页元素将添加一些稍后可以通过 JavaScript 变得可用的额外特性。但是，另外一些网页元素则不具备上述两种功能。它们与 <span>、<div> 和 <p> 看起来一样，且拥有相同的编程接口。但是，它们将添加额外的语义含义。这些新语义对于页面的非视觉用户（包括使用屏幕阅读器这样的辅助技术的用户）和搜索引擎爬虫这样的计算机程序很重要。这些新标记还向开发建设人员提供一些挂钩，帮助他们编写表现力更强的 CSS 选择器。图 4 展示了一个使用一些新语义网页元素的 Web 页面。

图 4. iPhone 上的一些新网页网页hTML 5 网页元素

图 4 中的这个示例拥有一个 header 网页元素、几个 nav 网页元素、一个 article 网页元素、一个 section 网页元素、以及一个 aside 网页元素。这些网页元素不会导致任何特殊呈现。它们只是添加语义值，您可以使用它们来编写向它们提供视觉处理来匹配该语义值的 CSS。图 4 中显示的图片的具体代码如清单 6 所示。

清单 6. 网页网页hTML 5 中的新语义网页元素

XML/网页hTML Code 复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-touch-fullscreen" content="YES" />
<title>Get the latest markup</title>
</head>
<body>
<header style="border: 1px dotted #000;border-radius: 3px;">
<hgroup align="center">
<h1>Real documents have headers</h1>
<h2>Even if they don't say so</h2>
</hgroup>
<hgroup>
<nav style="-webkit-column-count:3;-webkit-column-rule: 1px solid #a00;">
<a href="new-css.html">CSS3</a><br/>
<a href="report.html">Canvas</a><br/>
<a href="elements.html">Markup</a>
</nav>
</hgroup>
</header>
<article>
<h1>There are a lot of new markup elements in 网页hTML5教程</h1>
<time datetime="2010-05-16" pubdate>Sunday, May 16</time>
<section>Did you notice that we just had two h1's?
But it's cool!</section>
<aside style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" >
If this page was really popular, I'd put an ad here and make some
serious cash
</aside>
</article>
</body>
</html>

您可以看到此前提到过的几个新网页元素。注意，您还应用了一些新的 CSS 样式来在 header 周围创见一个圆角框，并为 nav 创见几个分隔符。您还在 aside 上使用了文本溢出样式。这里的关键点是：无需额外的工作，您就可以创见更有意义的标记，然后，您可以像使用了 <div> 和 <span> 一样显示该标记。要查看拥有更多视觉和编程具体效果的新网页网页hTML 5 网页元素的一个示例，请看图 5。（查看图 5 的文本版本。）

图 5. 在 iPhone 上使用网页网页hTML 5 创见的表单

图 5 中的屏幕使用了在网页网页hTML 5 中可用的许多新表单网页元素。在很多情况下，这些网页元素看起来就像现有的网页元素，但您可以期望浏览器添加这些更丰富的表单网页元素的更好的视觉表示。为展示大致具体效果，图 6 显示了上述表单网页元素在 Opera 桌面浏览器中的具体效果。（查看图 6 的文本版本。）

图 6. Opera 上的网页网页hTML 5 表单网页元素

Opera 一直是实现网页网页hTML 5 特性的先行者，这对于新的表单网页元素而言尤其如此。现在，看看生成清单 4 和清单 5 的具体代码，以便您更好地理解 Opera 之所依采用其呈现方式的原因。清单 7 显示了这个具体代码。

清单 7. 具体代码形式的网页网页hTML 5 表单网页元素

XML/网页hTML Code 复制内容到剪贴板

<form id="settings">
<fieldset id="inputs" style="border: 1px solid #000;border-radius: 6px;">
<legend>Settings</legend>
<label for="name">Username</label>
<input id="name" name="name" type="text" required autofocus /><br/>
<label for="name">Name</label>
<input id="name" name="name" type="text"
placeholder="First and last name" required /><br/>
<label for="email">Email</label>
<input id="email" name="email" type="email"
placeholder="example@domain.com" required /><br/>
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel"
placeholder="Eg. 447500000000" required /><br/>
<label for="dob">Date of birth</label>
<input id="dob" name="dob" type="date" required/>
<fieldset style="border: 1px dotted #000; border-radius: 6px">
<legend>Preferred Contact Method</legend>
<ol>
<li>
<input id="emailMeth" name="contactMethod"
type="radio">
<label for="emailMeth">Email</label>
</li>
<li>
<input id="phoneMeth" name="contactMethod"
type="radio">
<label for="phoneMeth">Phone</label>
</li>
</ol>
</fieldset>
<label for="climate">Preferred external temperature</label>
<input id="climate" name="climate" type="range" min="50"
max="100" step="5" value="70"/><br/>
<label for="color">Favorite color</label>
<input id="color" name="color" type="color"/><br/>
<label for="referrer">Where'd you hear about us?</label>
<input type="url" name="refUrl" id="referrer" list="urls"/>
<datalist id="urls">
<option label="TechCrunch" value="http://www.techcrunch.com/">
<option label="ReadWrite Web" value="http://www.readwriteweb.com/">
<option label="Engadget" value="http://www.engadget.com/">
<option label="Ajaxian" value="http://www.ajaxian.com/">
</datalist><br/>
<button type="button" onclick="checkInputs()">Save</button>
</fieldset>
</form>

清单 7 中的 form 网页元素展示了网页网页hTML 5 的许多新特性。注意两个新属性：required 和 autofocus。required 属性用于表单验证（下面将详细介绍）过程中，autofocus 属性允许选择页面上的网页元素以获取焦点。还要注意几个拥有 placeholder 文本的网页元素。这是许多网站多年来一直在使用的一个模式 — 将某个示例或解释性文本放置到一个文本框中 — 但开发建设人员总是必须修改（hack）该具体代码。图 4展示了 iPhone 如何整洁地实现这个模式。

下面，您将看到一些支持输入网页元素的新类型，比如 email, phone, date, range, color, 和 url。现在，这些类型在 iPhone 和 Android 浏览器上总是呈现为文本字段，但那只是使用语义不太准确的网页hTML 4.0 创见它们的样子。图 5 展示了它们未来的可能外观。date 输入在 Opera 上展示其新 UI（一个弹出式日历）前必须获得焦点。这对于图 7 中的 url 输入也同样适用，但原因不在于它是 url 输入，而是它拥有一个 list 属性。该属性指向 datalist 网页元素，该网页元素包含该字段支持的值。当您聚焦该字段时，您将看到来自 datalist 的可能值（本例中是几个 URL）。图 7 展示了 date 和 datalist 特性。

图 7. 带有日期和数据列表的网页网页hTML 5 输入

随着 Webkit 持续快速发展，可以预见，许多输入类型将允许更有用的视觉表示。Opera 将为您带来更好的未来。许多这些输入字段也提供验证，网页网页hTML 5 拥有一组完整的新验证 APIs。这些特性目前还没有在 iPhone 或基于 Android 的设备上实现，但已经在它们的桌面对等设备上实现，因此，预计可以很快在移动浏览器上实现这些特性。清单 8 展示了这些新的验证 APIs 的使用情况。

清单 8. 网页网页hTML 5 验证 APIs 的应用

JavaScript Code 复制内容到剪贴板

function checkInputs(){
var inputs = document.getElementById("inputs").childNodes;
var len = inputs.length;
var i = 0;
var input = null;
var errors = [];
for (i=0;i<len;i ){
input = inputs.item(i);
if (input.nodeName == "INPUT"){
if (input.validity){
if (!input.checkValidity()){
errors.push(input.validationMessage);
}
}
}
}
var errMsg = "There are " errors.length " errors";
var notify = function(){
var notification =
webkitNotifications.createNotification(null, "Errors!", errMsg);
notification.show();
};
if (window.webkitNotifications){
if (webkitNotifications.checkPermission()){
webkitNotifications.requestPermission(notify);
} else {
notify();
}
} else {
alert(errMsg);
}
}

每个输入网页元素拥有一个 validity 属性。可以使用这个属性，或者，也可以使用返回 ture 或 false 的 checkValidity() 数据库函数以及validationMessage 属性来获取一条本地错误消息。在本文撰写之时，多数最新的桌面浏览器并不能为 validationMessage 返回任何一致或标准的消息，因此，它的用途有限。validity 对象可用于检查不同类型的错误，比如valueMissing、rangeOverflow、rangeUnderflow、patternMismatch 和 tooLong。例如，如果网页元素拥有一个必要属性而用户留空，那么 validity.valueMissing 将为 true。

最后，注意，在清单 8 中，您在明确所有的验证错误之后，将尝试使用 webkitNotifications。这些通知与您的桌面计算机上的通知类似，可用于最新版 Chrome 中。因此，您同样可以期望它们将很快应用于 iPhone 和 Android 浏览器。API 的使用很简单明了。惟一需要注意的是，您需要检查用户是否已提供您的站点许可来使用这个 API。如果没有，您必须请求许可；反之，则传递想要被相关调用的数据库函数。

结束语

在本文中，您快速浏览了网页网页hTML 5 中许多与 UI 相关的新特性：从新网页元素到新样式再到绘图画布。这些特性（除了文末提到的几个例外之外）都可用于 iPhone 和基于 Android 设备上发现的基于 Webkit 的浏览器上。Blackberry 和 Nokia 智能手机等其他流行平台即将装配强大的浏览器，以便利用本文介绍的这些技术。作为一位移动 Web 开发建设人员，您有机会使用这些强大的视觉特性来瞄准广泛的用户，这些特性比桌面浏览器上使用网页hTML、CSS 和 JavaScript 实现的任何特性都要强大。在本系列前 4 篇文章中，您了解到可用于这些精彩的新移动浏览器上的许多其他新技术（比如地理定位和 Web Workers）。移动 Web 并不是您多年来一直为之编程的 Web 的简化版，而是更强大的、拥有无限可能性的版本。

网页hTML5教程参考手册简介
为了方便新手的学习，实践，我从网上找了一个一个网页hTML5教程的参考手册，这是一个单独的图像相关站点文件可以存储在任何位置，本地硬盘或者网络中以便随时查看。

关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,

HTML5移动应用开发第5章：新的可视化UI 特性

宝贝市场2023-02-08

夺宝助手2023-02-08

查诚信2023-02-08

车价天天报2023-02-08

考勤助理小程序2023-02-08

汽车报价大全查询2023-02-08