H5是指第五代HTML(即HTML5),是一种标记语言,用于构建和展示内容上万维网 。它已经于2014年10月28日由万维网联盟 (W3C)定稿并发表。这是自万维网成立以来HTML标准的第五次修订。以前的版本即HTML4,被标准化于1997年。
其核心目的是改善与支持的语言为最新的多媒体,同时保持它被人类容易阅读和理解一致地由计算机和设备( 网络浏览器 , 解析器等)。 HTML5是为了归入不仅是HTML 4,但也XHTML 1和DOM级别2 HTML。
以下其紧前HTML 4.01和XHTML 1.1,HTML5是这样的事实,在万维网上共同使用的HTML和XHTML具有通过各种规格引入的功能的混合物,以及这些由软件产品如web引入一个响应浏览器和那些由常见的做法建立的。也定义一个单一的尝试标记语言可以写入HTML或XHTML的。 它包括详细的处理模式,以鼓励更多的可互操作的实现; 它延伸,改善和合理化可用于文档的标记,并介绍了标记和应用程序编程接口 (API)的复杂的web应用程序 。出于同样的原因,HTML5是也跨平台的移动应用的潜在候选 。 HTML5的许多功能已经建成了能够在低功耗设备如智能手机和平板电脑上运行的考虑。 在2011年12月,研究公司Strategy Analytics预测销售的HTML5兼容的手机会前1十亿在2013年。
特别是,HTML5增加了许多新的语法特性。 这些措施包括新<video> <audio>和<canvas> 元素 ,还有集成的可伸缩矢量图形(SVG)的含量(取代通用<object>标签),并MATHML的数学公式。 这些功能的设计可以很容易地包括和处理多媒体和图形内容在网络上,而不必求助于专有插件和API的 。 其他新的页面结构元素,如<main> <section> <article> <header> <footer> <aside> <nav>和<figure>旨在以丰富的语义文件的内容。 新属性已被引入,某些元素和属性已被删除及一些元素,如<a> <cite>和<menu>已被更改,重新定义或标准化。 API和文档对象模型 (DOM),不再是事后的想法,但HTML5规范的基本组成部分。 HTML5也由所有符合浏览器定义的一些细节需要处理的无效文档,以便语法错误将统一处理和其他用户代理 。
Web 上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
视频格式
当前,video 元素支持三种视频格式:
格式 | IE | Firefox | Opera | Chrome | Safari |
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
如何工作
如需在 HTML5 中显示视频,您所有需要的是:
<video src="movie.ogg" controls="controls">
</video>
control 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:
实例
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
实例
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Internet Explorer
Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
<video> 标签的属性
属性 | 值 | 描述 |
autoplay | 如果出现该属性,则视频在就绪后马上播放。 | |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | |
pixels | 设置视频播放器的高度。 | |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 | |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | |
url | 要播放的视频的 URL。 | |
pixels | 设置视频播放器的宽度。 |
HTML <video> 标签
实例
一段简单的 HTML5 视频:
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <video> 标签。
定义和用法
<video> 标签定义视频,比如电影片段或其他视频流。
HTML 4.01 与 HTML 5 之间的差异
<video> 标签是 HTML 5 的新标签。
提示和注释
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
autoplay | 如果出现该属性,则视频在就绪后马上播放。 | |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | |
pixels | 设置视频播放器的高度。 | |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 | |
muted | 规定视频的音频输出应该被静音。 | |
URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 | |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | |
url | 要播放的视频的 URL。 | |
pixels | 设置视频播放器的宽度。 |
全局属性
<video> 标签支持HTML 中的全局属性。
事件属性
<video> 标签支持HTML 中的事件属性。
相关页面
HTML DOM 参考手册:Video 对象
HTML 5 Video + DOM
· HTML5 视频
· HTML5 音频
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。
下例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。
实例
为视频创建简单的播放/暂停以及调整尺寸控件:
播放/暂停大中小
Your browser does not support HTML5 video.
上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。
HTML5 <video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件:
方法 | 属性 | 事件 |
play() | currentSrc | play |
pause() | currentTime | pause |
load() | videoWidth | progress |
canPlayType | videoHeight | error |
| duration | timeupdate |
| ended | ended |
| error | abort |
| paused | empty |
| muted | emptied |
| seeking | waiting |
| volume | loadedmetadata |
| height |
|
| width |
|
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
HTML 5 音频
· HTML5 拖放
HTML5 提供了播放音频的标准。
Web 上的音频
直到现在,仍然不存在一项旨在网页上播放音频的标准。
今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
音频格式
当前,audio 元素支持三种音频格式:
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
Ogg Vorbis |
| √ | √ | √ |
|
MP3 | √ |
|
| √ | √ |
Wav |
| √ | √ |
| √ |
如何工作
如需在 HTML5 中播放音频,您所有需要的是:
<audio src="song.ogg" controls="controls">
</audio>
control 属性供添加播放、暂停和音量控件。
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:
实例
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
实例
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Internet Explorer
Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。
<audio> 标签的属性
属性 | 值 | 描述 |
autoplay | 如果出现该属性,则音频在就绪后马上播放。 | |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | |
loop | 如果出现该属性,则每当音频结束时重新开始播放。 | |
preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | |
url | 要播放的音频的 URL。 |
相关页面
参考手册:HTML 5 <audio> 标签
HTML 5 拖放
· HTML5 音频
· HTML5 画布
拖放(Drag 和 drop)是 HTML5 标准的组成部分。
拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。
HTML5 拖放实例
下面的例子是一个简单的拖放实例:
实例
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的event.preventDefault() 方法:
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释:
· 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
· 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
· 被拖数据是被拖元素的 id ("drag1")
· 把被拖元素追加到放置元素(目标元素)中
更多实例
如何在两个 <div> 元素之间拖放图像。
HTML 5 Canvas
· HTML5 拖放
canvas 元素用于在网页上绘制图形。
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
更多 Canvas 实例
下面的在 canvas 元素上进行绘画的更多实例:
实例 - 线条
通过指定从何处开始,在何处结束,来绘制一条线:
JavaScript 代码:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
实例 - 圆形
通过规定尺寸、颜色和位置,来绘制一个圆:
JavaScript 代码:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
实例 - 渐变
使用您指定的颜色来绘制渐变背景:
JavaScript 代码:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
实例 - 图像
把一幅图像放置到画布上:
JavaScript 代码:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
相关页面
参考手册:HTML 5 <canvas> 标签
参考手册:HTML DOM Canvas 对象
HTML5 内联 SVG
· HTML5 画布
HTML5 支持内联 SVG。
什么是SVG?
· SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
· SVG 用于定义用于网络的基于矢量的图形
· SVG 使用 XML 格式定义图形
· SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
· SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
· SVG 图像可通过文本编辑器来创建和修改
· SVG 图像可被搜索、索引、脚本化或压缩
· SVG 是可伸缩的
· SVG 图像可在任何的分辨率下被高质量地打印
· SVG 可在图像质量不下降的情况下被放大
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
把 SVG 直接嵌入 HTML 页面
在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中:
实例
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
结果:
如需学习更多有关 SVG 的知识,请阅读我们的SVG 教程。
HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
· 依赖分辨率
· 不支持事件处理器
· 弱的文本渲染能力
· 能够以 .png 或 .jpg 格式保存结果图像
· 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
· 不依赖分辨率支持事件处理器
· 最适合带有大型渲染区域的应用程序(比如谷歌地图)
· 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
· 不适合游戏应用
HTML5 地理定位
HTML5 Geolocation(地理定位)用于定位用户的位置。
定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
浏览器支持
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例,可返回用户位置的经度和纬度。
实例
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
例子解释:
· 检测是否支持地理定位
· 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
· 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
· showPosition() 函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本,不含错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:
实例
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
错误代码:
· Permission denied - 用户不允许地理定位
· Position unavailable - 无法获取当前位置
· Timeout - 操作超时
在地图中显示结果
如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图:
实例
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}
在上例中,我们使用返回的经纬度数据在谷歌地图中显示位置(使用静态图像)。
上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。
给定位置的信息
本页演示的是如何在地图上显示用户的位置。不过,地理定位对于给定位置的信息同样很有用处。
案例:
· 更新本地信息
· 显示用户周围的兴趣点
· 交互式车载导航系统 (GPS)
getCurrentPosition() 方法 - 返回数据
若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。
属性 | 描述 |
coords.latitude | 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例(比如 iPhone):
实例
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
HTML 5 Web 存储
在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法:
· localStorage - 没有时间限制的数据存储
· sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
如何创建和访问 localStorage:
实例
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
下面的例子对用户访问页面的次数进行计数:
实例
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
如何创建并访问一个 sessionStorage:
实例
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
下面的例子对用户在当前 session 中访问页面的次数进行计数:
实例
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
HTML 5 应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
· 离线浏览 - 用户可在应用离线时使用它们
· 速度 - 已缓存资源加载得更快
· 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
浏览器支持
所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。
HTML5 Cache Manifest 实例
下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):
实例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Cache Manifest 基础
如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
· CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
· NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
· FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的:
NETWORK:
login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接:
NETWORK:
*
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件:
FALLBACK:
/html5/ /404.html
注释:第一个 URI 是资源,第二个是替补。
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
· 用户清空浏览器缓存
· manifest 文件被修改(参阅下面的提示)
· 由程序来更新应用缓存
实例 - 完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
重要的提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注释
请留心缓存的内容。
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
HTML 5 Web Workers
web worker 是运行在后台的 JavaScript,不会影响页面的性能。
什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
浏览器支持
所有主流浏览器均支持 web worker,除了 Internet Explorer。
HTML5 Web Workers 实例
下面的例子创建了一个简单的 web worker,在后台计数:
计数:
启动Worker停止 Worker
检测 Web Worker 支持
在创建 web worker 之前,请检测用户的浏览器是否支持它:
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
创建 web worker 文件
现在,让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以上代码中重要的部分是postMessage()方法 - 它用于向 HTML 页面传回一段消息。
注释:web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。
创建 Web Worker 对象
我们已经有了 web worker 文件,现在我们需要从 HTML 页面调用它。
下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器:
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
终止 Web Worker
当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
w.terminate();
完整的 Web Worker 实例代码
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:
实例
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
Web Workers 和 DOM
由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
· window 对象
· document 对象
· parent 对象
HTML 5 服务器发送事件
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
浏览器支持
所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
实例
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
例子解释:
· 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
· 每接收到一次更新,就会发生 onmessage 事件
· 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
检测 Server-Sent 事件支持
在上面的 TIY 实例中,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况:
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}
服务器端代码实例
为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。
PHP 代码 (demo_sse.php):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
代码解释:
· 把报头 "Content-Type" 设置为 "text/event-stream"
· 规定不对页面进行缓存
· 输出发送日期(始终以 "data: " 开头)
· 向网页刷新输出数据
EventSource 对象
在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:
事件 | 描述 |
onopen | 当通往服务器的连接被打开 |
onmessage | 当接收到消息 |
onerror | 当错误发生 |
资料链接:http://wenku.baidu.com/view/da039867e45c3b3567ec8b9c?fr=prin
HTML5引进了LocalStorage,允许浏览器在客户端存储大量数据,并允许使用新类型的数据。这一调整虽然大大提高了访问性能,却是以牺牲安全为代价,由此带来的安全隐患是巨大的。
以前版本的HTML语言中的同源政策(Same-origin Policy)对JavaScript代码能够访问的页面做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容,甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。
而HTML5为实现跨资源共享,开放了这种限制,提供了一种跨域通信机制绕过同源政策。这一机制将允许不同域的服务器能够在Web浏览器的iframe间进行通信。这样一来,攻击者就能够滥用这个功能以获得敏感数据。对于应用程序的开发人员来说,必须仔细检查以确保信息是来源于他们自己的网站,否则来自其他网站的恶意代码可能会制造恶意信息。
WebSocket协议是HTML5实现的浏览器与服务器双向通信的新协议之一,能更好地节约服务器资源和带宽并带到实时通讯。浏览器和服务器只需要一个握手动作就能建立一条快速通道,进行数据的相互传送。
但是,这也带来了极大的安全隐患,攻击者可通过滥用WebSocket进行秘密的后门通信。此外,攻击者还可以直接利用浏览器对受害者的内部网络进行端口扫描。
HTML5带给人们最明显的变化就是增加了Web动画、视频等相关的新标签,并对已有标签的属性进行了调整。这些标签的安全性没有经过验证,可能存在已知或未知的各种安全漏洞。同时,未知的安全问题使得以黑名单策略做防护的设备无从下手,攻击者可以使用新标签和属性直接绕过黑名单策略发起攻击。
地理定位Geolocaltion API是HTML5新功能中最受注目的一个,因为安全和隐私的考虑,网站必须先得到用户的批准,随后才能获得位置信息。然而这些需要用户做决定的安全措施依然存在安全隐患,因为一旦有了授权,网站不仅可以知道用户的位置,而且还可以在用户移动时对其进行实时追踪。如果网页中存在攻击者的劫持代码,那么用户的地理位子信息就会被攻击者获取。
拖放劫持可定义为点击劫持技术(Clickjacking)与HTML5拖放事件的组合。点击劫持攻击在隐藏框中的操作只涉及到点击操作,其攻击范围有所限制。而拖放动持模式将劫持的用户操作由单纯的点击扩展到了拖放行为。在现在的Web应用中,有大量需要用户采用拖放完成的操作,因此,拖放劫持大大扩展了点击劫持的攻击范围。此外,在浏览器中拖放操作是不受同源策略限制的,用户可以把一个域的内容拖放到另外一个域;因此,突破同源政策限制的拖放劫持可以演化出更为广泛的攻击形式,能够突破多种防御。
在了解了HTML5技术的优势、效果以及实现进度之后,设计师应该考虑自己接下来需要做些什么了。HTML5是互联网研发的必然趋势之一, 具有提高产品品质的巨大潜力。设计师唯有顺应这一潮流的发展,积极投身到HTML5的试验研发中,才能在时代的大潮中握有先机。那,我们应当怎么做抑或做些什么呢?在此有几个浅薄的建议分享给大家:
现在的native app 都需要经过严厉的审核才能上架“应用商店”,即使如此,应用程序已经开始数量激增,找到一个满意的应用谈何容易。如果web app的时代到来,用户只需要通过浏览器就可以轻松使用某个应用程序,没有了“应用商店”的限制,应用程序产品的数量将难以估计。这个时候我们需要担心我们的产品会不会被淹没在其中。为了避免这样的悲剧,一个有效的办法是使同一个公司的产品具有一致风格,并且鲜明有特点,这样可以更有效的抓去用户的注意力,增强产品的识别性。
为特定用户而设计,也就需要为用户所使用的特定浏览器而设计。只有当我们控制了使用环境,我们才能控制确保用户角度的产品效果更好。也许HTML5的时代不需要再频繁的铺平台,但为特定的浏览器设计特定的效果是进一步提高用户体验的重要举措。
Google Wave是一个不错的例子。Google Wave试图把博客、邮箱、即时通讯以及wikis结合起来,成为一款强大的网络交流服务。它是由HTML5编写的,并不支持在所有浏览器上使用。虽然因为关注度不高被Google停止服务,但Google Wave作为一次尝试,已经在HTML5的发展道路上走了很远很远。
这一建议来源于实际的工作,针对的也是实际工作中会遇到的情况。Web app 的设计工作中,所需要应用的HTML5技术效果往往没有那么多;即使有,团队中的RD也未必全都做得出来。其实用户不关心这个效果是使用什么编程语言完成的,用户关心的是交互是否顺畅、视觉感官上是否有品味。因此设计师需要在细节上注重提升web app的品质感,比如边框的设计,比如翻页的设计,比如子产品列表的设计等等。甚至可以尝试做一些“伪app效果”。这方面m.naver.com做得非常棒,布局设计、功能按钮的设计都酷似native app, 子产品的列表全部做成高品质的icon样式;其实 不过是一个图标加一个链接那么简单。
HTML5在移动互联网中的需求最旺盛,潜力也最大。适配碎片化严重的移动终端从长远看不是理想的办法,但现阶段还摆脱不了这一现实。现在我们所拥有的最好的移动实验平台是iphone,它的适配比例已经足够高了。如果做Html5新产品的API支持测试,建议还是使用iPhone.
资料链接:http://cio.it168.com/a2015/0924/1764/000001764955.shtml
1.底层技术优化:引擎,作为H5应用的技术基础,其性能和效率需要优化,唯此优质、重度的应用及游戏才会转向H5应用。目前一些行业领先的游戏公司已经开始将引擎优化作为重要的战略部署,并逐步将优质手游转化为手机页游。随着引擎进一步的优化,未来将会有更多符合用户体验的手机页游产生。
2. 提高体验:目前市场上一些H5应用在界面交互设计方面较为简略,和原生APP有一定差距(其中很多甚至还是从PC页面转化而来,严格意义只是页面而算不上应用);传统网页的形式也不适合在手机有限的显示空间内展示或使用。
3. 固定入口: H5应用和本地应用的一个显著差异在于本地应用服务程序运行在手机本地,并会在手机桌面中生成一个图标,用户只需点击图标就能使用应用服务。而H5应用所有服务都运行在云端,手机上没有保留服务程序,也没有固定的启动入口。
4. 培养使用习惯:智能手机的诞生开始一直和本地应用相伴,用户已经习惯使用本地应用开启服务。目前让用户全部转向使用H5不是一件易事,但随着以上问题的不断解决优化,H5应用的用户基数增涨也将水到渠成。
扩展阅读:
您所在的用户组无法下载或查看附件
→如果您认为本词条还有待完善,请 编辑词条
词条内容仅供参考,如果您需要解决具体问题
(尤其在法律、医学等领域),建议您咨询相关领域专业人士。
0