HTML5教程

什么是HTML5？

在这里我不说一些特别难懂的语言，我这里简单的解释一下，如果你学过HTML，那么就是HTML4，HTML5是针对现有的版本进行了一些丰富，把一些原先常用的标签进行了统一，还添加了一些以前没有的新标签来满足更复杂的功能，像原先网页上面的音乐播放器，现在都不需要通过flash插件来实现，仅仅通过HTML5编写程序来实现，可以说HTML5的出现是一个很大的进步。

给大家介绍一个HTML5学习的技术社区：HTML5伴侣

HTML5现在的局限？

最大的一个局限就是还没有完全支持，支持HTML5的现代浏览器：

但是还有些浏览器不支持，比如IE9之前的版本。

有些东西需要HTML5来实现，但是不能保证用户用的浏览器都支持HTML5，所以有些功能需要保证兼容性，所以这也是限制HTML5的一个原因。

另外的一个因素就是HTML5在移动端的表现没有想象中优越，有很多的开发者在移动端做了很多尝试，尤其是在移动端开发游戏，在动画效果的实现上面，流畅度没有得到很好地的保证，不过随着移动设备的硬件越来越快，所以在以后HTML5在移动端的劣势会被掩盖，当然并不是所有的移动端设备表现的都不好，HTML5在IOS平台下的表现就很不错，已经可以成为企业开发的一个选择，相反android就不尽人意。

HTML5的优势

HTML5最好的一个优势就是跨平台，如果你是开发者，你只要写一套程序就可以在任何地方运行，PC，移动端都可以，这个大大的节约了开发成本。

另外一个优点就是标准的统一，开发人员不需要再头疼浏览器的兼容性，不过在这之前得保证浏览器支持HTML5。

最后一个优点是站在用户的角度，在移动端你想要用一个APP，你得去下载，每次APP更新或者改版，用户很反感，用HTML5开发的只需要借助移动端浏览器打开，不需要用户下载，打开就可以直接用，用户头疼的更新问题也不用担心了。

以上都是我的废话，希望您不要对此感到反感，接下来我就正式来介绍HTML5。

HTML5新特性：

1.添加了canvas元素，这个元素可以帮助我们实现更炫更棒的动画效果，HTML5游戏就是通过这个canvas来实现的场景的渲染。

2.媒介元素，如video和audio元素。

3.本地离线存储的支持。

4.原先的标签更加分散和清晰，比如article，footer，header，nav等等。

5.新的表单元素属性，比如data，time，Email，url，search等。

HTML5视频

很多视频的网站都是通过flash插件来播放视频的，但是HTML5提供了对视频播放的支持。

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

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

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

标签使用

1

2

12

13浏览器不支持html5视频功能

14

IE9一下不支持video，IE9支持了MPEG4的video元素。

Video的属性选择

HTML5音频

HTML5支持音频（音乐）的标准，通过audio元素。

音频格式：

要确保适用于Safari浏览器，音频文件必须是MP3或Wav类型。

标签使用：

Yourbrowserdoesnotsupporttheaudiotag.

IE8不支持audio元素。在IE9中，将提供对audio元素的支持。

HTML5Canvas

Canvas元素可以实现绘制图形动画。

Canvas可以说是HTML5里面最重要的一个标签了，这个标签的出现让游戏开发更加容易，不过Canvas需要配合JavaScript使用。

元素创建

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

这个地方为什么要定义id属性呢？如果你对JS的DOM编程有一定了解的话，你就知道通过ID属性可以获取一个元素对象，从而可以通过JS来对元素进行操作。

如果你对DOM不熟悉的话，建议你先去看下相关的学习资料。

这里给你一个DOM学习的电子书下载链接：

JavaScript控制Canvas

varc=document.getElementById("myCanvas");

varcxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

JavaScript使用id来寻找canvas元素：

varc=document.getElementById("myCanvas");

然后，创建context对象：

varcxt=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)。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。