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="html5.js"></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>转载于:https://blog.51cto.com/dunizb/798005
总结
- 上一篇： Redo Log 和Checkpoint
- 下一篇： 原型界面演示浏览器设置：ie6浏览器需将