HTML5教程
HTML5简介
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专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。
为HTML5建立的一些规则：
•新特性应该基于HTML、CSS、DOM以及JavaScript。
•减少对外部插件的需求（比如Flash）
•更优秀的错误处理
•更多取代脚本的标记
•HTML5应该独立于设备
•开发进程应对公众透明
新特性
HTML5中的一些有趣的新特性：
•用于绘画的canvas元素
•用于媒介回放的video和audio元素
html input type属性
•对本地离线存储的更好的支持
•新的特殊内容元素，比如article、footer、header、nav、section
•新的表单控件，比如calendar、date、time、email、url、search
浏览器支持
最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。Internet Explorer 9将支持某些HTML5特性。
HTML5视频
许多时髦的网站都提供视频。HTML5提供了展示视频的标准。
Web上的视频
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5规定了一种通过video元素来包含视频的标准方法。
视频格式
当前，video元素支持两种视频格式：
Internet Explorer Firefox3.5Opera10.5Chrome3.0Safari3.0
Ogg X X X
MPEG4X X
Ogg=带有Thedora视频编码和Vorbis音频编码的Ogg文件
MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件
如何工作
如需在HTML5中显示视频，您所有需要的是：
<video src=""controls="controls">
</video>
control属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video>与</video>之间插入的内容是供不支持video元素的浏览器显示的：
实例
<video src=""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=""type="video/ogg">
<source src="movie.mp4"type="video/mp4">
Your browser does not support the video tag.
</video>
Internet Explorer
Internet Explorer8不支持video元素。在IE9中，将提供对使用MPEG4的video元素的支持。
<video>标签的属性
属性值描述
autoplay autoplay如果出现该属性，则视频在就绪后马上播放。
controls controls如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels设置视频播放器的高度。
loop loop如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src url要播放的视频的URL。width pixels设置视频播放器的宽度。
HTML5音频
HTML5提供了播放音频的标准。
Web上的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5规定了一种通过audio元素来包含音频的标准方法。
audio元素能够播放声音文件或者音频流。
视频格式
当前，audio元素支持三种音频格式：
Internet Explorer Firefox3.5Opera10.5Chrome3.0Safari3.0
Ogg Vorbis X X X
MP3X X
Wav X X X
如何工作
如需在HTML5中播放音频，您所有需要的是：
<audio src=""controls="controls">
</audio>
control属性供添加播放、暂停和音量控件。
<audio>与</audio>之间插入的内容是供不支持audio元素的浏览器显示的：
实例
<audio src=""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=""type="audio/ogg">
<source src="song.mp3"type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Internet Explorer
Internet Explorer8不支持audio元素。在IE9中，将提供对audio元素的支持。<audio>标签的属性
属性值描述
autoplay autoplay如果出现该属性，则音频在就绪后马上播放。
controls controls如果出现该属性，则向用户显示控件，比如播放按钮。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src url要播放的音频的URL。
HTML5Canvas
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 ElementById("myCanvas");
var Context("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript使用id来寻canvas元素：
var ElementById("myCanvas");
然后，创建context对象：
var Context("2d");
getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。