HTML5的新功能

huangwenhui5000

浏览: 67711 次
性别:
来自: 南京

最近访客更多访客>>

It螺丝钉

wukunlsy

随枫而弑

tinguo002

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5的新功能

3.1.1 输入框自动获取焦点实现
在网页加载完成是，光标自动聚焦在用户需要输入的地方，比如邮箱登陆页面的输入用户名，之前我们需要在网页 onload 的时候来用 javascript 代码指定某个输入框获取焦点的做法，现在html 5直接支持在输入框中加入autofocus属性。

3.1.2 文本框的输入提示实现
之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息，而在HTML5中我们只需写下如下代码即可实现

<input type="email" id="uemail" name="uemail"

placeholder="example@domain.com"required />

实现效果如图3-1所示。

图3-1 输入提示示例

在类型后面增加一个placeholder属性，属性的值就是提示框里的值。

3.1.3 表单验证功能
1）判断必填项：

有些表单项是表单内必填项，和以往相比现在只需要在表单项中增加一个属性，required即可。

示例代码如下：

<input type="text" id="username" name="username" required autofocus />如果此项为空，则会有相应提示，效果如图3-2所示。

图3-2 必填项提示图

如果此项为空，则会有相应提示，

2）判断数据格式

在HTML5中，对数据格式的校验，也是属于内建类型，相应的表单项类型会有相应的内建验证规则，不需要我们额外编写JavaScript代码来实现。

代码如下

代码Input type="email" 浏览器会自调用内建的Email验证代码，验证当前的输入项是法合法，效果如图3-3所示。

图3-3 Email格式判断示例

3.1.4 滑动块输入的实现
在输入数字类型等可变值时，我们也可以通过拖动滑动块的形式来选择合适的值，特别是在选择颜色值时，拖动滑动块改变颜色的RGB值，更为直观可行。

Range滑动块代码实现如下：

效果如图3-4所示。

图3-4 滑动块示例

可以直接拖动，可以设置最小值、最大值、以及每拖动一格的步长。Min及max属性设置滑动块的最小值与最大值，Step设置滑动块拖动的步长

3.1.5 数字输入框实现

除了3.1.4的滑动块可以输入数值外，HTML5还有另一种数据输入类型Number，使用此属性可以能过点击输入框后面的增加或减少小按钮来调整要输入的数值。实现代码如下：

效果如图3-5所示。

图3-5 数字输入示例

用如此少的代码，就能实现如此有趣的功能，HTML5到来如何能不让大家心动。

3.1.6 输入框下拉提示实现
请看HTML5对表单下拉输入框的截图展示，由此我们输入表单的时候，可以很方便的从预设值中选择要输入的信息。

下拉提示的核心代码如下：

</datalist>

效果如图3-6所示。

图3-6 下拉提示示例

可以用作现在很流行的ajax输入提示，也可以当作是一个可编辑的下拉菜单。即可自行输入，也可以直接下拉选择。但是使用用脚本代码也太过于烦索，HTML5可以很好解决这个问题。

3.1.7 日期选择框实现
它可以让我们很方便的使用日期选择框，不需要我们再用很复杂的JavaScript代码来实现了。

该选择框的核心代码如下：

Date 表单项可以让我们直接选择日期，方便我们输入日期选择框效果如图3-7所示。

图3-7 日期选择框示例

3.1.8 文件上传功能块实现
使用此功能我们可以很轻松的上传文件

代码如下：

效果如图3-8所示

图3-8 文件上传示例

Accept是文件接受的类型，可以用‘*’指代所以有文件

3.2 对视频和音频的支持
视频和音频是我们在互联网上使用最频烦最多的，然而网站开发人员却要因为插件不同编写大量重复性代码，对用户来说也要装多种插件，如今HTML5内建支持视频音频。

3.2.1 Video属性列表
W3C公布的HTML5标准草案中<Video>中的属性和描述如表3-1所示。

表3-1 video属性表

属性
值
描述

autoplay
true | false
如果是 true，则视频在就绪后马上播放。

controls
true | false
如果是 true，则向用户显示控件，比如播放按钮。

height
pixels
设置视频播放器的高度。

loopend
numeric value
定义在视频流中循环播放停止的位置，

loopstart
numeric value
定义在视频流中循环播放的开始位置。

playcount
numeric value
定义视频片段播放多少次。默认是 1。

poster
url
在视频播放之前所显示的图片的 URL。

src
url
要播放的视频的 URL。

start
numeric value
定义播放器在音频流中开始播放的位置。

width
pixels
设置视频播放器的宽度

由上表可以看出，通过浏览器本身对视频的支持，能够完成常用的视频操作

3.2.2 video标签实现
以下是视频在完全支持<Video>浏览器中的通用代码，通过如此简短的代码，我们便能在自己的网站上，嵌入我们的视频，丰富我们的页面。

核心代码如下：

您的浏览器不支持<Video>标签！请您使用最新Firefox,Opera,Safari,Chrome浏览器观看！

</video>

在chrome浏览器里的视频播放效果如图3-9所示。

图3-9 视频播放示例

视频标签的控件很简单，只有播放/暂停按钮，进度栏可以拖动先择播放，还有音量控制器。互动功能有些简单，可以通过添加额外的代码获取更多的互动控制，但是满足基本的视频播放不成问题。

关于各浏览器对视频格式的支持情况请看第一章2.2.2小节各浏览器对HTML5音频视频格式的支持速查表

测试显示：Firefox3.6与IE8支持不好，Chrome与Opera能很正常显示，但是支持不同的格式。

3.3.3 Audio的属性
W3C公布的HTML5标准草案中<Audio>中的属性和描述如表3-2所示。

表3-2 Audio属性表

属性
值
描述

autoplay
true | false
如果是 true，则音频在就绪后马上播放。

controls
true | false
如果是 true，则向用户显示控件，比如播放按钮。

end
numeric value
定义播放器在音频流中的何处停止播放。

loopend
numeric value
定义在音频流中循环播放停止的位置

loopstart
numeric value
定义在音频流中循环播放的开始位置。

src
url
所播放音频的 url。

start
numeric value
定义播放器在音频流中开始播放的位置。

3.3.2 Audio标签实现
以下是视频在完全支持<audio>浏览器中的通用代码

您的浏览器不支持<audio>标签！请您使用最新Firefox,Opera,Safari,Chrome浏览器观看！

</audio>

对音频的支持，各浏览器较统一，除了IE外都支持MP3程式，在音频方面对<audio>的应用不会有格式的障碍。播放效果如图3-10所示。

图3-10 音频播放示例

关于各浏览器对音频格式的支持情况请看第一章2.2.2小节各浏览器对HTML5音频视频格式的支持速查表

测试显示：Firefox3.6与IE6支持不好，Chrome与Opera能很正常显示。

测试结果：IE浏览器不支持，Firefox3.6也不支持，只有Chrome 和 Safari浏览器支持.

第4章 canvas绘图功能实现
HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。Canvas 元素也是最值得研究的地方，因此单独列出来一章研究。每一个 canvas 元素都有一个"上下文( context ) (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。

大部分的浏览器都支持 2D canvas 上下文,它包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Chrome,Opera,Safari 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas .下面就分别介绍基于HTML5的2D与3D绘图功能的强大

4.1 Canvas元素的 2D context API
本节主要实现如何使用基本 canvas 函数，如绘制线条、形状、处理图像和文字等

4.1.1 基本图形绘制
首先创建 canvas 的方法，在 HTML 页面中添加 <canvas> 元素，设置Canvas的width和height属性。示例代码如下。

Fallback content, in case the browser does not support Canvas.

</canvas>

为了能在 JavaScript 中引用元素，最好在创建<canvas>标签时给元素设置 ID ，设定高度和宽度等属性。

创建好了画布后，要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas元素，然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形

// 找到canvas元素.

var elem = document.getElementById('myCanvas');

// i在其它浏览器里

if (elem && elem.getContext) {

//获取canvas2D上下文.

var context = elem.getContext('2d');

if (context) {

// 你需要确定该图形的起始坐标点（x,y）,高度，宽度

context.fillRect(0, 0, 150, 100);

}

可以把上面代码放置在文档 head 部分中，或者放在外部文件中。

核心代码如下:

window.addEventListener('load', function () {

// 找到canvas元素.

var elem = document.getElementById('myCanvas');

if (!elem || !elem.getContext) {

return;

}

//获取canvas2D上下文.

var context = elem.getContext('2d');

if (!context) {

return;

}

context.fillStyle = '#00f';

context.fillRect(0, 0, 150, 100);

}, false);

// --></script>

将该代码放入支持HTML5的浏览器中会显示一个蓝色的矩行该代码显示效果如4-1图所示。

图4-1 基本图形绘制效果

4.1.2 图形美化
通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla()（若浏览器支持，如 Opera10 和 Firefox 3)。

通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。

可以使用 lineWidth 属性改变线条粗细。让我们看看使用了fillRect,
strokeRect clearRect 和其他的例子：

context.fillStyle = '#00f'; // 蓝色

context.strokeStyle = '#f00'; // 红色

context.lineWidth = 4; //改变线条粗细

context.fillRect (0, 0, 150, 50);

context.strokeRect(0, 60, 150, 50);

context.clearRect (30, 25, 90, 60);

此例子效果图见图4-2.

图4-2 图形效果图

4.1.3 路径绘图

通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。

要创建自定义形状，首先要使用 beginPath()才能开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。

下面代码为绘制曲线方法的关键代码：

<!--window.addEventListener('load', function () {

// 获取canvas无素.

Var elem=document.getElementById('myCanvas');

if (!elem || !elem.getContext) {

return;

}

// 获取canvas 2D内容

var context = elem.getContext('2d');

if (!context) {

return;

}

context.fillStyle = '#00f'; //填充样式为蓝色

context.strokeStyle = '#f00'; //填充线条为红色

context.lineWidth = 4; //填充线条宽度为4

// 画一条线和绘制贝塞尔曲线路径

context.beginPath();

context.moveTo(10, 10);

context.lineTo(100, 100);

context.moveTo(150, 100);

//前四个参数是两个控制点坐标，后两个参数是曲线终点坐标。

context.bezierCurveTo(180, 30, 250, 180, 300, 100);

//所绘的线必须经过Stroke()方法执行后才能显示出来

context.stroke();

//该动作必须要结束，否则下个绘图动作会以此图结束点为起点

context.closePath();

// 画一个圆角用arc函数.

context.beginPath();

// 定义: 圆点的X,y坐标，半径，以及角度，是否顺逆时针等

context.arc(125, 115, 30, 0, 360, false);

context.stroke();

context.closePath();

}, false);

// --></script>

将上述代码放到支持HTML5 <canvas>元素的浏览器中，显示效果如图4-3所示。

图4-3 路径绘图示例

4.1.4 Canvas图像处理
2D context API中ImageData 可以完成很多功能。下面特效实现了简单的颜色反转滤镜：

// 获取canvas像素数组

var imgd = context.getImageData(x, y, width, height);

var pix = imgd.data;

// 循环反转各个像素.

for (var i = 0, n = pix.length; i < n; i += 4) {

pix[i ] = 255 - pix[i ]; // 红色

/*因为图像读取模式使用的是RGB模式第个颜色的介素值区间为0~255，故用255减去当前像素值就可完成反转*/

pix[i+1] = 255 - pix[i+1]; // 绿色

pix[i+2] = 255 - pix[i+2]; // 蓝色

// i+3 是透明度的值

}

//画出反转后的图像

context.putImageData(imgd, x, y);

使用此滤镜前后的图像效果如图4-4所示。

图4-4 颜色反转滤镜

4.1.5 对文字的处理
对于文字API只有最有最新的 Chrome版本和 Firefox 才开始支持 Text API ，context 对象可以设置以下 text 属性：

font：文字字体，同 CSS font-family属性

textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.

textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,
alphabetic, ideographic, bottom。默认值：alphabetic.

有两个方法可以绘制文字： fillText 和 strokeText。第一个绘制带 fillStyle 填充的文字，后者绘制只有 strokeStyle 边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。

文字对齐属性影响文字与设置的
(x,y) 坐标的相对位置。

下面是一个在 canvas 中绘制"HeNan university" 文字的例子

context.fillStyle = '#00f';

context.font = 'italic 30px sans-serif';

context.textBaseline = 'top';

context.fillText ('HeNan University!', 0, 0);//参数0，0是文字绘制的起始坐标

context.font = 'bold 30px sans-serif';

context.strokeText('XuHui', 0, 50);

其效果图如图4-5所示。

图4-5 文字处理效果

4.2 Canvas元素的3D context API
HTML5标准将内建3D技术的支持，其中WebGL就是一项用于加速网页3D图形界面应用的通用技术标准。近日，Khronos联盟组织发布了WebGL标准的草案版本。标准的草案版本中使用了HTML5的有关技术来绘制OpenGL ES 2.0图像，这样便无需使用插件便可以达到将网页3D化的目的

4.2.1 3D canvas实现示例
尽管大多最近浏览器都支持HTML5标准（IE除外），但是还不是很完全，需要安装插件，或者官方发布的特殊支持浏览器。当然这只限于在探索研究使用，并不适合大部分用户，下面就以一个3D立方体来演示HTML5的3D绘图功能。

提示：运行该程序请使用Opera9.62支持3D绘图浏览器，其它浏览器不能正确显示。核心代码如下

Canvas not supported!

</canvas>

var canvas;

var context3d;

var rotation;

var texture;

var cube;

//渲染立方体

function render(){

context3d.beginScene();

context3d.translate(0,0,-5);

context3d.rotateY(rotation);

context3d.rotateX(rotation);

rotation += 2;

context3d.color = "white";

context3d.draw3DModel(cube);

context3d.endScene();

}

function onTick(){

render();

}

function onload(){

canvas = document.getElementById("canvas");

context3d = canvas.getContext("opera-3d");

//如果浏览器不支持3D,则会显示如下提示

if (!context3d)

{

alert("3d canvas not supported");

return;

}

logo = new Image();

logo.src = "operalogo.png";

texture = context3d.createTexture(logo);

context3d.texture = texture;

//绘图开始

cube = context3d.create3DModel();

cube.addVertex(-1, 1, 1, 0, 0); //绘制8个顶点

cube.addVertex(1, 1, 1, 1, 0);

cube.addVertex(-1, -1, 1, 0, 1);

cube.addVertex(1, -1, 1, 1, 1);

cube.addVertex(-1, 1, -1, 1, 1);

cube.addVertex(1, 1, -1, 0, 1);

cube.addVertex(-1, -1, -1, 1, 0);

cube.addVertex(1, -1, -1, 0, 0);

cube.addTriangle(0,1,2); //绘制三角形

cube.addTriangle(2,1,3);

cube.addTriangle(4,5,6);

cube.addTriangle(6,5,7);

cube.addTriangle(0,4,2);

cube.addTriangle(2,4,6);

cube.addTriangle(1,5,3);

cube.addTriangle(3,5,7);

cube.addTriangle(0,4,1);

cube.addTriangle(1,4,5);

cube.addTriangle(2,6,3);

cube.addTriangle(3,6,7);

rotation = 0;

setInterval(onTick, 10); //设置旋转时间间隔

}

document.onload = onload();

</script>

程序运行截图如图4-6所示。

图4-6 旋转的方块

4.4 本章小节
通过本章对<canvas>功能主要是2D的绘图功能，图片处理，文字处理，和3D的动画技术的研究，能够更深入一步了解浏览器绘图的原理，在最后综合前面所示，参考部分技术人员的示例，做了一个简短的HTML5示例。当然<canvas>的功能选不止这些，如需要进一步了解，请查阅相关资料。

结束语
HTML 5 是未来的 Web 的一部分。它的新元素会产生更干净更简单的代码，让页面更容易理解。Div 和 Span 仍然有用处，但是不会像以前那样频繁地使用它们了。许多页面不再需要它们了。

尽管目前并非所有浏览器都支持这些元素，但这是 HTML 引入大多数新元素之后的普遍情况，比如 img、table、object 等等。随着时间的推移，支持会逐渐完善。浏览器会忽略不认识的 HTML 元素，这意味着老式浏览器的用户仍然能够阅读 HTML 5 页面，他们的浏览方式与以前一样。现代浏览器的用户可以获得更好的用户体验，但是没有人会由于 HTML 5 新元素而妨碍浏览。

通过分析演示这些HTML5的新特性，让我如实感到技术的进步给开发人员带来的便利，给用户带来越来越多的良好体验，相信未来的网络将会浏览器的天下，或许我们的所有的操作都会浏览器上完成。作为程序员，发现并能掌握前沿的开发技术，对于提高自己，跟上技术进步的步伐都是必要的。虽然目前是不能普及，但是我们要看到其前景。我相信HTML5的前景是光明的。

不足之处是，个人对HTML5应用方面理解的不是透彻，时间和能力有限，没有做出更好的实例。而且就HTML5标准本身而言，因为处于草案研究阶段，各项功能指标并没有明确的定义，而且出于浏览器本身的局限，有些效果并不能很好的显示,需要多个浏览期相互配合才能完全表现出来。我期待着关于HTML5的草案能尽快确定下来，向全球推广，再配合CSS3.0和JavaScript的支持，未来的计算机，将会是浏览器的世界.

并由此可见，适时升级自己的浏览器，会给我们带来更好的用户体验，也希望本文能让大家更多的了解HTML5，了解我们未来不可或缺的标准。

分享到：