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

HML5的更多相关文章

  1. html和html5详解

    最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词.可能有人会问,这两者有什么关系呢?随着这移动互联网快速发展的时代,尤其是4G时代已经来临的时刻,加上微软对"XP系统" ...

  2. 移动web app开发必备 - 异步队列 Deferred

    背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...

  3. angularJs

    学了差不多一个礼拜,感觉这个库还是很不错的,在应用中一些小笔记,其实这些笔记现在来看确实很基础,但是把这个博客当成我自己的一个记录历程,所以我也把这点笔记拿上来: 1.是一个js框架,是一个以js语言 ...

  4. 超酷震撼 HTML5/CSS3动画应用及源码

    HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...

  5. HTML 多媒体

    1.多媒体简介 Web 上的多媒体指的是音效.音乐.视频和动画,多媒体有多种不同的格式,它可以是听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在互联网上,几乎在所有网站都能发现嵌 ...

  6. HTML5游戏开发技术基础整理

    随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...

  7. 深入了解使用egret.WebSocket

    概念 本教程不讲解TCP/IP协议,Socket属于哪层,消息包体怎么设计等,主讲 egret.WebSocket 使用示例 与 protobuf 使用示例. 在使用egret.WebSocket之前 ...

  8. 异步队列 Deferred

    异步队列 Deferred 背景: 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe ...

  9. HTML5编程之旅系列一：HTML5 Geolocation 初探

    让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息.使用HTML5 Geolocation API(地理定位 API),可以请求用户共享他们的位置信息. HT ...

随机推荐

  1. sublime配置python

    Sublime Text 2作为一款轻量级的编辑器,特点鲜明.方便使用,愈发受到普罗大众的喜爱.我个人近期也開始用了起来.同一时候,我近段时间还在学习Python的相关东西.所以開始用ST2来写Pyt ...

  2. BZOJ 1002 FJOI 2007 轮状病毒 暴力+找规律+高精度

    题目大意: 思路:基尔霍夫矩阵求生成树个数,不会. 可是能够暴力打表.(我才不会说我调试force调试了20分钟... CODE(force.cc): #include <cstdio> ...

  3. 为什么用卷积滤波，而不是非常easy的在频率领域内进行数据的频率处理

    卷积.为了更好的"动态"滤波. 问题来了.为什么用卷积滤波.而不是非常easy的在频率领域内进行数据的频率处理? 为了强调我觉得的答案,已经用blog标题给出了.卷积.为了更好的& ...

  4. 一个美丽的java烟花程序

    <img src="http://img.blog.csdn.net/20150625104525974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  5. UINavigationBar的系统渲染方式

    昨天想手工实现一下类知乎日报的Navigation Bar的动态颜色改变,但不管怎么设置Navigation Bar的 backgroundColor barTintColor alpha參数都达不到 ...

  6. js的一些常用判断小实验

    下面是小实验案例 // 0 if(undefined) { console.log('1'); } else { console.log('0'); } // 0 if(null) { console ...

  7. git帮助命令

    git帮助命令 零.自己实例 cd D://software/code/PHP/phpStudy/PHPTutorial/WWW/github/m_Orchestrate git checkout - ...

  8. How Blink works

    How Blink works Author: haraken@ Last update: 2018 Aug 14 Status: PUBLIC Working on Blink is not eas ...

  9. mini vimrc

    Mini version: set enc=utf-8 ffs=unix,dos,mac lm=zh_CN.utf-8 set nu nowb nocp nowrap ru nobk sm is no ...

  10. 使用python制作二维码

    python-qrcode是个用来生成二维码图片的第三方模块,主要依赖的是 PIL 模块和 qrcode 库.(PIL模块只支持python2.7及以下版本,python3之后无法使用,官方推荐pyt ...