HTML5介绍和部分功能实现

来源：互联网发布：梦里花落知多少沐紫苏编辑：程序博客网时间：2024/06/05 11:55

HTML5 是下一代的 HTML。

什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果。

编者注：W3C 指 World Wide Web Consortium，万维网联盟。

编者注：WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

· 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

· 减少对外部插件的需求（比如 Flash）

· 更优秀的错误处理

· 更多取代脚本的标记

· HTML5 应该独立于设备

· 开发进程应对公众透明

新特性

HTML5 中的一些有趣的新特性：

· 用于绘画的 canvas 元素

· 用于媒介回放的 video 和 audio 元素

· 对本地离线存储的更好的支持

· 新的特殊内容元素，比如 article、footer、header、nav、section

· 新的表单控件，比如 calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性

许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。

Web 上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式

当前，video 元素支持三种视频格式：

格式

Firefox

Opera

Chrome

Safari

Ogg

3.5+

10.5+

5.0+

MPEG 4

9.0+

5.0+

3.0+

WebM

4.0+

10.6+

6.0+

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

如何工作

如需在 HTML5 中显示视频，您所有需要的是：

</video>

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

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

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

实例1

Your browser does not support the video tag.

</video>

上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

实例2

Your browser does not support the video tag.

</video>

Internet Explorer

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

<video> 标签的属性

属性

值

描述

autoplay 属性" href="http://www.w3school.com.cn/html5/att_video_autoplay.asp">autoplay

autoplay

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

controls 属性" href="http://www.w3school.com.cn/html5/att_video_controls.asp">controls

controls

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

height 属性" href="http://www.w3school.com.cn/html5/att_video_height.asp">height

pixels

设置视频播放器的高度。

loop 属性" href="http://www.w3school.com.cn/html5/att_video_loop.asp">loop

loop

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

preload 属性" href="http://www.w3school.com.cn/html5/att_video_preload.asp">preload

preload

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

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

src 属性" href="http://www.w3school.com.cn/html5/att_video_src.asp">src

url

要播放的视频的 URL。

width 属性" href="http://www.w3school.com.cn/html5/att_video_width.asp">width

pixels

设置视频播放器的宽度。

canvas 元素用于在网页上绘制图形。

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 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 代码：

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 元素：

Your browser does not support the canvas element.

</canvas>

实例 - 圆形

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

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 元素：

Your browser does not support the canvas element.

</canvas>

实例 - 渐变

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

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 元素：

Your browser does not support the canvas element.

</canvas>

实例 - 图像

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

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 元素：

Your browser does not support the canvas element.

</canvas>

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

· localStorage - 没有时间限制的数据存储

· sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

实例1

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

下面的例子对用户访问页面的次数进行计数：

实例2

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：

实例1

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

下面的例子对用户在当前 session 中访问页面的次数进行计数：

实例2

if (sessionStorage.pagecount)

{

sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

}

else

{

sessionStorage.pagecount=1;

}

document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

</script>