传播学百科网 >>所属分类 >> 新媒介   

H5教程

标签: HTML5 超文本标记语言 H5 HyperText Markup Language H5

顶[0] 发表评论(0) 编辑词条
目录

[显示全部]

概念编辑本段回目录

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也由所有符合浏览器定义的一些细节需要处理的无效文档,以便语法错误将统一处理和其他用户代理 。


H5教程编辑本段回目录

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>

TIY

control 属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

<video> </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:

实例

<video src="movie.ogg" width="320" height="240" controls="controls">

Your browser does not support the video tag.

</video>

TIY

上面的例子使用一个 Ogg 文件,适用于FirefoxOpera 以及 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>

TIY

Internet Explorer

Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 video 元素的支持。

<video> 标签的属性

属性

描述

autoplay

autoplay

如果出现该属性,则视频在就绪后马上播放。

controls

controls

如果出现该属性,则向用户显示控件,比如播放按钮。

height

pixels

设置视频播放器的高度。

loop

loop

如果出现该属性,则当媒介文件完成播放后再次开始播放。

preload

preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src

url

要播放的视频的 URL

width

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

autoplay

如果出现该属性,则视频在就绪后马上播放。

controls

controls

如果出现该属性,则向用户显示控件,比如播放按钮。

height

pixels

设置视频播放器的高度。

loop

loop

如果出现该属性,则当媒介文件完成播放后再次开始播放。

muted

muted

规定视频的音频输出应该被静音。

poster

URL

规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

preload

preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src

url

要播放的视频的 URL

width

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 视频/DOM

·         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 文件,适用于FirefoxOpera 以及 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

autoplay

如果出现该属性,则音频在就绪后马上播放。

controls

controls

如果出现该属性,则向用户显示控件,比如播放按钮。

loop

loop

如果出现该属性,则每当音频结束时重新开始播放。

preload

preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src

url

要播放的音频的 URL

相关页面

参考手册:HTML 5 <audio> 标签

HTML 5 拖放

·         HTML5 音频

·         HTML5 画布

拖放(Drag drop)是 HTML5 标准的组成部分。

拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

浏览器支持

Internet Explorer 9FirefoxOpera 12Chrome 以及 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 拖放

·         HTML5 SVG

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 实例

下面的在 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>

亲自试一试

实例 - 圆形

通过规定尺寸、颜色和位置,来绘制一个圆:

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>

亲自试一试

实例 - 渐变

使用您指定的颜色来绘制渐变背景:

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>

亲自试一试

实例 - 图像

把一幅图像放置到画布上:

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 画布 vs SVG

HTML5 支持内联 SVG

什么是SVG?

·        SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

·        SVG 用于定义用于网络的基于矢量的图形

·        SVG 使用 XML 格式定义图形

·        SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

·        SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比(比如 JPEG GIF),使用 SVG 的优势在于:

·        SVG 图像可通过文本编辑器来创建和修改

·        SVG 图像可被搜索、索引、脚本化或压缩

·        SVG 是可伸缩的

·        SVG 图像可在任何的分辨率下被高质量地打印

·        SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet Explorer 9FirefoxOperaChrome 以及 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

·         HTML5 SVG

·         HTML5 地理定位

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 画布 vs SVG

·         HTML5 Web 存储

HTML5 Geolocation(地理定位)用于定位用户的位置。

亲自试一试:在谷歌地图上显示您的位置

定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

浏览器支持

Internet Explorer 9FirefoxChromeSafari 以及 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() 方法返回对象。始终会返回 latitudelongitude 以及 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 地理定位

·         HTML5 应用缓存

在客户端存储数据

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 Web 存储

·         HTML5 Web Workers

使用 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

·         HTML5 应用缓存

·         HTML5 服务器发送事件

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 Web Workers

·         HTML5 输入类型

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

 1、客户端存储安全问题

HTML5引进了LocalStorage,允许浏览器在客户端存储大量数据,并允许使用新类型的数据。这一调整虽然大大提高了访问性能,却是以牺牲安全为代价,由此带来的安全隐患是巨大的。

2、跨域通信安全问题

以前版本的HTML语言中的同源政策(Same-origin Policy)对JavaScript代码能够访问的页面做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容,甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。 

HTML5为实现跨资源共享,开放了这种限制,提供了一种跨域通信机制绕过同源政策。这一机制将允许不同域的服务器能够在Web浏览器的iframe间进行通信。这样一来,攻击者就能够滥用这个功能以获得敏感数据。对于应用程序的开发人员来说,必须仔细检查以确保信息是来源于他们自己的网站,否则来自其他网站的恶意代码可能会制造恶意信息。

 

 3、WebSocket安全问题

WebSocket协议是HTML5实现的浏览器与服务器双向通信的新协议之一,能更好地节约服务器资源和带宽并带到实时通讯。浏览器和服务器只需要一个握手动作就能建立一条快速通道,进行数据的相互传送。

但是,这也带来了极大的安全隐患,攻击者可通过滥用WebSocket进行秘密的后门通信。此外,攻击者还可以直接利用浏览器对受害者的内部网络进行端口扫描。

 

4、新标签安全问题

HTML5带给人们最明显的变化就是增加了Web动画、视频等相关的新标签,并对已有标签的属性进行了调整。这些标签的安全性没有经过验证,可能存在已知或未知的各种安全漏洞。同时,未知的安全问题使得以黑名单策略做防护的设备无从下手,攻击者可以使用新标签和属性直接绕过黑名单策略发起攻击。

 5、用户位置信息安全问题

地理定位Geolocaltion APIHTML5新功能中最受注目的一个,因为安全和隐私的考虑,网站必须先得到用户的批准,随后才能获得位置信息。然而这些需要用户做决定的安全措施依然存在安全隐患,因为一旦有了授权,网站不仅可以知道用户的位置,而且还可以在用户移动时对其进行实时追踪。如果网页中存在攻击者的劫持代码,那么用户的地理位子信息就会被攻击者获取。

 6、拖放劫持攻击

    拖放劫持可定义为点击劫持技术(Clickjacking)与HTML5拖放事件的组合。点击劫持攻击在隐藏框中的操作只涉及到点击操作,其攻击范围有所限制。而拖放动持模式将劫持的用户操作由单纯的点击扩展到了拖放行为。在现在的Web应用中,有大量需要用户采用拖放完成的操作,因此,拖放劫持大大扩展了点击劫持的攻击范围。此外,在浏览器中拖放操作是不受同源策略限制的,用户可以把一个域的内容拖放到另外一个域;因此,突破同源政策限制的拖放劫持可以演化出更为广泛的攻击形式,能够突破多种防御。


页面设计问题编辑本段回目录

1.短连接 互动难
  众所周知,HTML5页面和用户之间建立的是短连接,这就使得用户一旦离开了HTML5页面便再也无法主动触达。

 

 2.依赖浏览器 资源利用难
  现如今,一个小小的手机也已经十分的强大,拥有大量的资源。而H5想要利用这些资源却必须要通过浏览器。而浏览器的兼容性问题一直都是HTML各个版本的标准的兼容性问题。

 3.用户标识 个性化功能难
  不同于APP的用户标识,H5的用户标识是站点随机分配的一串唯一码,而这个唯一码被存储在浏览器的缓存中,一旦缓存被清除或者浏览器被卸载,用户就会丢失,即使同一个用户来访问,站点也不会识别出,而解决这个问题的唯一办法就是用户登录。   而对于用户来说体会不到个性化带来的好处就不会登录,用户不登录就没有办法体会个性化相关功能,这就走到了一个无限循环的死胡同。

  

 4.交互有限 运行速度难
  HTML5产品的设计,通常交互都比较简单,以点击、鼠标滑动为主,动画都比较少见,这就使得HTML5的交互十分有限。   而HTML5的运行速度与浏览器的内核解析速度有关。大家都知道,HTML5的运行代码要从网络取回来以后才可能载入浏览器的内核中运行。这样就使得在没有网络的情况下,HTML5基本就没有什么作用了,这给用户的体验感觉也就差了。


设计师应如何应对HTML5 编辑本段回目录

 在了解了HTML5技术的优势、效果以及实现进度之后,设计师应该考虑自己接下来需要做些什么了。HTML5是互联网研发的必然趋势之一, 具有提高产品品质的巨大潜力。设计师唯有顺应这一潮流的发展,积极投身到HTML5的试验研发中,才能在时代的大潮中握有先机。那,我们应当怎么做抑或做些什么呢?在此有几个浅薄的建议分享给大家:

 1.形成企业的一致风格,增强识别性

现在的native app 都需要经过严厉的审核才能上架应用商店,即使如此,应用程序已经开始数量激增,找到一个满意的应用谈何容易。如果web app的时代到来,用户只需要通过浏览器就可以轻松使用某个应用程序,没有了应用商店的限制,应用程序产品的数量将难以估计。这个时候我们需要担心我们的产品会不会被淹没在其中。为了避免这样的悲剧,一个有效的办法是使同一个公司的产品具有一致风格,并且鲜明有特点,这样可以更有效的抓去用户的注意力,增强产品的识别性。

2.开始注重特定浏览器的适配



Google waveGoogle wave


为特定用户而设计,也就需要为用户所使用的特定浏览器而设计。只有当我们控制了使用环境,我们才能控制确保用户角度的产品效果更好。也许HTML5的时代不需要再频繁的铺平台,但为特定的浏览器设计特定的效果是进一步提高用户体验的重要举措。

Google Wave是一个不错的例子。Google Wave试图把博客、邮箱、即时通讯以及wikis结合起来,成为一款强大的网络交流服务。它是由HTML5编写的,并不支持在所有浏览器上使用。虽然因为关注度不高被Google停止服务,但Google Wave作为一次尝试,已经在HTML5的发展道路上走了很远很远。




3.打破思维定势,注重运用技巧

这一建议来源于实际的工作,针对的也是实际工作中会遇到的情况。Web app 的设计工作中,所需要应用的HTML5技术效果往往没有那么多;即使有,团队中的RD也未必全都做得出来。其实用户不关心这个效果是使用什么编程语言完成的,用户关心的是交互是否顺畅、视觉感官上是否有品味。因此设计师需要在细节上注重提升web app的品质感,比如边框的设计,比如翻页的设计,比如子产品列表的设计等等。甚至可以尝试做一些app效果。这方面m.naver.com做得非常棒,布局设计、功能按钮的设计都酷似native app, 子产品的列表全部做成高品质的icon样式;其实 不过是一个图标加一个链接那么简单。

 4.重视移动互联网

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应用的用户基数增涨也将水到渠成。

 

扩展阅读:

当设计师遭遇HTML5

附件列表


您所在的用户组无法下载或查看附件

→如果您认为本词条还有待完善,请 编辑词条

上一篇GIF教程 下一篇国际重要媒体封面关于APPLE企业、企业家的报道

词条内容仅供参考,如果您需要解决具体问题
(尤其在法律、医学等领域),建议您咨询相关领域专业人士。
0

收藏到:  

词条信息

荣0108
荣0108
举人
词条创建者 发短消息   
麻雀味馅饼
麻雀味馅饼
最近编辑者 发短消息   

相关词条