<!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. Looger级别

    Logger级别 日志记录器(Logger)是日志处理的核心组件.log4j具有5种正常级别(Level).日志记录器(Logger)的可用级别Level (不包括自定义级别 Level), 以下内容 ...

  2. python in操作引发 TypeError

    在看 networkx 源代码的时候认为疑惑.为什么外层 for 要注意 TypeError.里面就不用.相同是 in, 一直纠结 node 是不是有问题,比方 node 不能够被迭代什么的,那么里面 ...

  3. JSP编程技术5-购物车的实现-session会话对象

    首先十分感谢大家对我的文章的支持,我是个刚刚才找到自己方向的在校大学生,当然我的知识和能力有限,眼下正在努力恶补学习中.当我看到自己首次发表到CSDN首页的文章才几个小时阅读量就超过了100时,对我来 ...

  4. Lesson 2 Building your first web page: Part 2

    Tag Diagram You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag ...

  5. XML获取节点信息值

    XmlDocument doc = new XmlDocument(); doc.LoadXml(sreturn); XmlNode xNode = doc.SelectSingleNode(&quo ...

  6. web开发快速提高工作效率的一些资源

    前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来,后续持续跟新中...... 开发工具 H ...

  7. .js控制一次加载一张图片，加载完后再加载下一张

    js怎么控制一次加载一张图片,加载完后再加载下一张 (1)方法1 (1)方法2

  8. 【Codeforces Round #424 (Div. 2) B】Keyboard Layouts

    [Link]:http://codeforces.com/contest/831/problem/B [Description] 两个键盘的字母的位置不一样; 数字键的位置一样; 告诉你第一个键盘按某 ...

  9. UVA 11642 Fire!

    Fire! Time Limit: 1000ms Memory Limit: 131072KB This problem will be judged on UVA. Original ID: 116 ...

  10. leetcode 数据库十题记录

    题目从难到易记录.解题过程中,如果不太熟悉,可以将题目中的表自己手动录入到自己的数据库中,就方便学习,测试. 185. Department Top Three Salaries 要求就是查询出每个部 ...