<!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>
浙公网安备 33010602011771号