简单代码示例：列出一些今天你可以拿来测试的新特性
<form>
<fieldset>
<legend>New Attributes</legend>
<p>
<label>Required:</label>
<input type="text" required="true">
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>AutoFocus:</label>
<input type="text" autofocus="true">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>PlaceHolder:</label>
<input type="text" placeholder="This Will Show in WebKit">
<small>Works in Chrome & Safari</small>
</p>
<p>
<label>Input Pattern:</label>
<input type="text" pattern="[0-9][A-Z]{3}" required title="Enter a digit followed by three uppercase letters"/>
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>Multiple Files:</label>
<input type="file" multiple>
<small>Works in Chrome, Safari & Firefox</small>
</p>
<p>
<label>List:</label>
<input type="text" list="colors">
<datalist>
<option value="Red">
<option value="Green">
<option value="Blue">
</datalist>
<small>Works in Opera</small>
</p>
</fieldset>
<fieldset>
<legend>New Input Types</legend>
<p>
<label>Email:</label>
<input type="email">
<small>Works in Opera</small>
</p>
<p>
<label>URL:</label>
<input type="url">
<small>Works in Opera</small>
</p>
<p>
<label>Number:</label>
<input type="number" min="1" max="10" step="1" value="1">
<small>Works in Opera</small>
</p>
<p>
<label>Range:</label>
<input type="range" min="-100" max="100" value="0" step="10">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>Time:</label>
<input type="time" step="900">
<small>Works in Opera</small>
</p>
<p>
<label>Date:</label>
<input type="date">
<small>Works in Opera</small>
</p>
<p>
<label>Month:</label>
<input type="month">
<small>Works in Opera</small>
</p>
<p>
<label>Week:</label>
<input type="week">
<small>Works in Opera</small>
</p>
<p>
<label>DateTime:</label>
<input type="datetime">
<small>Works in Opera</small>
</p>
</fieldset>
<div><button>Submit</button></div>
</form>
在我们的 DEMO 中的出现的特性，都顺利地运行在 Opera 上，但你仍需要使用 Chrome 或 Safari 来看其他小部分功能的实际运行状态（View Demo）。
了解更多:
工具 & 资源列表:
不需要插件的视频和音频
HTML5 对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外，评论点集中在浏览器提供商对音频/视频格式的不同选择。如果你准备使用HTML5的 和 ，使你熟悉下面这些视频/音频的解码器和浏览器支持是非常重要的：
音频: ogg (ogg, oga), mp3, wav,
AAC
视频: ogg (ogv), H.264 (mp4)
另外你还需要留意一下 Google 的 VP8 视频解码，这个将被作为一个开源格式来结束（格式选择的）纷争。HTML5 提供的一个解决方案是，让你可以指定多个不同格式的源文件，以便于用户浏览器选择它认识的文件。对于 < IE9 和旧浏览器，你将需要一个折衷的解决方案。
当你第一次尝试 HTML5 的音频/视频，你可能会想知道这些可能对你有帮助的东东：
你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。
如果你使用 Safari 来检测 HTML5 的音频/视频支持，需要安装 QuickTime Player，没有QuickTime Player 的 Safari 什么都不能播放。
简单代码示例：音频标记 (View Demo)
<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>
简单代码示例：视频标记 (View Demo)
<video controls preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>
尽管相对于要依赖第三方插件已经迈了一大步，但上面提供的示例，只是一个开始。由于各个浏览都提供了不同外观的控制栏，你可能会希望改变他们以适应你的设计。看看下面例子如何利用 DOM API 来创造一个属于你自己的自定义控制栏。
简单代码示例：拥有自定义控制栏的视频 (View Demo)
<video preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>
<script>
var video = document.getElementsByTagName('video')[0];
function toggleMute() {
video.muted = !video.muted;
}
</script>
<p>
<a href="JavaScript:video.play();">Play</a> |
<a href="JavaScript:video.pause();">Pause</a> |
<a href="JavaScript:toggleMute();">Sound On/Off</a>
</p>
你还可以利用 DOM API 来为音频/视频做更多。而且如果你乐意添加一些其他的东西，将会把这个带向一个完全不同的级别。例如，你可以把视频放到了 HTML5 canvas
元素中。这将会允许你读取一个视频的像素数据、控制、和帧，并做一些你想做的好玩的东东。（自己看看：Blowing up HTML5 Video, Ambilight for HTML5 Video）
了解更多：
跨浏览器解决方案：
Javascript 交互：
处理 HTML5 视频的 Mootools
编码、转换工具：
基于 JavaScript 的 2D 绘画
HTML5 中最让人兴奋的特性是 <canvas> — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常，但你将需要一些编程的经验来绘制形状、图表、动画、游戏、图片作品等。
在除 IE 外的所有现代浏览器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用 ExplorerCanvas 这个 Javascript 解决方案来为 IE 添加这个新特性。
简单示例代码: 基于指令的 HTML5 Canvas 2D 绘画 (View Demo)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Demo</title>
<link href="html5reset.css" type="text/css" />
<link href="html5simple.css" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// Draw Rectangle
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect (10, 10, 100, 100);
// Draw Circle
ctx.fillStyle = "rgb(0,255,0)";
ctx.beginPath();
ctx.arc(125,100,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
// Draw Custom Shape With Lines
ctx.fillStyle = "rgb(0,0,255)";
ctx.beginPath();
ctx.moveTo(125,100);
ctx.lineTo(175,50);
ctx.lineTo(225,150);
ctx.fill();
ctx.closePath();
// Draw Image From External File
var myImage = new Image();
myImage.onload = function(){
ctx.drawImage(myImage, 220, 10);
}
myImage.src = "sample.jpg";
}
}
</script>
<style type="text/css">
canvas {
border: 5px solid #ccc;
background: #000;
}
</style>
</head>
<body>
<header>
<h1>HTML5 Canvas Demo</h1>
</header>
<figure>
<canvas>Fallback content, in case the browser does not support Canvas.</canvas>
<figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
</figure>
</body>
</html>
了解更多:
工具 & 资源列表：
示例 & 应用：
让内容可编辑
相关文章
精彩导读
热门资讯
关注我们
