當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5小例子

發布時間：2025/3/8 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5小例子小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.很酷的語音輸入(目前只有谷歌瀏覽器支持)

<!DOCTYPE html>

2.HTML5的INPUT標簽（火狐瀏覽器支持，不支持IE）

<!DOCTYPE html>

<html> <head>  <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>  <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

總結

以上是生活随笔為你收集整理的HTML5小例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

例子

上一篇： Redo Log 和Checkpoint
下一篇：深入理解JavaScript中的this