<!doctype html> <html> <head> <meta charset="utf-8"> <title>html5</title> </head> <body> <canvas>定义图形，该标签基于JavaScript的绘图api</canvas> <audio>定义音频</audio> <video>定义视频</video> <source src="多媒体资源""> <embed src="定义插件资源"> <track src="定义文本轨道"> <datalist id="list"> <option> 定义input下拉例表,用list属性接受 </option> </datalist> <keygen>用于客户端验证 <output for="id id2"></output> <article> 定义页面独立内容区域</article> <aside>定义页面侧边栏内容</aside> <bdi></bdi> <command>定义命令按钮 <details>用于描述文档部分的细节</details> <summary> 包含details </summary> <figure> 规定独立流的内容 </figure> <figcaption> 定义figure的标题 </figcaption> <footer> 定义页脚 </footer> <header> 定义文档头部 </header> <mark> 定义带有几号的文本 </mark> <meter> 定义度量衡</meter> <nav>定义导航</nav> <progress value="" max="">定义进度条</progress> <ruby>ruby的注释</ruby> <rt></rt> <rp></rp> <section>定义文档片段</section> <time></time> <wbr> <canvas id="mycanvas" width="300" height="300" style="boder:1px solid black"> 你的浏览器不支持canvas </canvas> <script> var c=document.getElementById("mycanvas"); var ctx =c.getContext("2d"); ctx.fillStyle="#fff000"; ctx.fillRect(0,0,159,75); ctx.moveTo(0,0); ctx.lineTo(200,100) ctx.stroke(); ctx.beginPath(); ctx.arc(95,50,40,0,2*math.PI); ctx.font="30px"; ctx.fillText("hello word",10,50); ctx.strokeText('hello world'); color=ctx.createLinearGradient(0,0,200,0); color.addColorStop(0,"red"); color.addColorStop(1,"green"); ctx.fillStyle=color; ctx.fillRect(10,10,10,200); rolor = ctx.createRadiaGradient(78,9,9,90,4); rolor.addColorStop(0,"red"); rolor.addColorStop(1,"green"); ctx.fillStyle=rolor; ctx.fillRect(10,2,3,12); var img = document.getElementById("imge"); ctx.drawImage(img,101,0); </script> <div id="div1" ondrop="drop(event)" ondragover ="allowDrop(event)"></div> <img id="drag1" src ="/imges/logo.png" draggable="true" ondragstart="drag(event)" width = "338" height="400"> <script type="text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <div id="demo"></div> <script type="text/javascript"> var x =document.getElementById("demo"); function getLocation(){ if(navigator.getLocation){ navigator.geoLocation.getCurrentPosition(showPosition); } else{ x.innerHTML="该浏览器不支持定位"; } } function showPosition(position){ x.innerHTML ="纬度" + position.coords.latitude + "<br>经度" + position.coords.longitude; } </script> <video width="800" height="400" controls> <soure src="movi.mp4" type="video/mp4"> <source src="movi.ogg" type="video/ogg"> </video> <audio contols> <source src= "horse.ogg" type = "audio/ogg"> </audio> <input type="date" > <input type="datetime"> <input type="datetime-local"> <input type="email"> <input type="number"> <input type="range"> <input type="search"> <input tyep="time"> <input type="url" > <input type ="week"> <input list="browsers"> <datalist id="browsers"> <option value="IE">IE</option> <option value="">IE</option> <option value="IE">IE</option> <option value="IE">IE</option> <option value="IE">IE</option> </datalist> <form action = "demo_keygen.asp" method="get"> 用户名：<input type=text> 密码：<keygen name="security"> <input type="submite"> </form> <form ion = "demo-from.php" autocomplete="on"> fisrt name: <input type=text name=fname> last name:<input type=text name=lname> <input type = submit> </form> <form novalidate=""></form> <input type=text autofocus> <script type="text/javascript"> if(typeof(storage) !=="undefined"){ alert("支持localstorage") }else{ alert("抱歉不支持localstorage") } localStorage.sitename=''; document.getElementById( ).innerHTML= localStorage.sitename; localStorage.removeItem( ); localStorage.setItem(key,value) localStorage.getItem(key); localStorage.removeItem(key); localStorage.clear(; localStorage.key(index); function save(){ var siteurl = document.getElementById("siteurl"); var sitename=document.getElementById("sitename"); localStorage.setItem(sitename,siteurl); alert("添加成功") } function find(){ var search_site=document.getElementById("search_site").value; var sitename = localStorage.getItem(search_site); find_result=document.getElementById("find_result"); find_result.innerHTML=search_site + "的网址是：" +sitename; } </script> </body> </html>