HML5

<!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>