HTML5小例子
1.很酷的语音输入(目前只有谷歌浏览器支持)
<!DOCTYPE html>
<html>
<head>
<!--<link href="/html.js" />-->
<title>HTML5 </title>
<style>
</style>
</head>
<body>
请输入：<input type=text x-webkit-speech />
</body>
</html>
2.HTML5的INPUT标签（火狐浏览器支持，不支持IE）
<!DOCTYPE html>
<html>
<head>
<!--<link href="/html.js" />-->
<title>HTML5 </title>
<style>
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
E-mial格式自动验证：
<input type="email" name="email" /><br/>
url自动验证：
<input type="url" /><br/>
数字自动验证：
<input type="number" max="9" min="-9" step="1"/><br/>
<input type="submit" name="Submit" value="提交" /><br/>
滑动条：
<input type="range" min="1" max="10" />
</form>
<br/>
选择下拉填充：
<input id="search" type="url" list="searchlist" required />
<datalist id="searchlist">
<option value="http://www.google.com" label="谷歌" />
<option value="http://www.yahoo.com" label="雅虎" />
<option value="http://www.baidu.com" label="百度" />
</datalist>
<input type="button" name="button" value="GO" /><br/>
<hr>
<input type="datetime">
</body>
</html>
2.HTML的画图功能（火狐浏览器支持，不支持IE）
<!DOCTYPE HTML>
<html>
<head>
<!--[if IE]>
<script src=\'#\'" /script>
<![endif]-->
<title>画布</title>
<style></style>
</head>
<body>
<canvas id="myCanvas">HTML5 图形</canvas>
<canvas id="can">HTML5 图形</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='green';
ctx.fillRect(10,10,180,200);
ctx.strokeStyle="red";
ctx.clearRect (20, 20, 90, 90);
ctx.strokeRect(30,30,50,50);
var canv = document.getElementById('can');
if (canv.getContext)
{
var c = canv.getContext('2d');
c.strokeStyle='#00f';
c.beginPath();
c.arc(100,100,50,180,0.5*Math.PI, true);
c.stroke();
}
</script>
</body>
</html>