<!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. javascript模拟类的最佳实践

    1:怎样模拟一个类 在sencha touch2 系列里面定义一个类和new出这个类的对象 Ext.define( "Animal", { config: { name: null ...

  2. wcf rest系列文章

    http://www.cnblogs.com/artech/archive/2012/02/15/wcf-rest.html 需要注意的是,发布的服务,可以在web behavior中指定显示help ...

  3. shrio 登录/退出

    身份验证,即在应用中谁能证明他就是他本人.一般提供如他们的身份ID一些标识信息来表明他就是他本人,如提供身份证,用户名/密码来证明. 在shiro中,用户需要提供principals (身份)和cre ...

  4. CORS support in Spring Framework--官方

    原文地址:https://spring.io/blog/2015/06/08/cors-support-in-spring-framework For security reasons, browse ...

  5. 【基础篇】DatePickerDialog日期控件的基本使用(二) ——分别获取年、月、日、时、分

    项目步骤: 1.在Main.xml布局文件中定义对应的组件,Main.xml内容如下: <?xml version="1.0" encoding="utf-8&qu ...

  6. HTTP 各种特性应用（二）

    一.Cookie 通过 Set-Cookie 设置. 下次浏览器请求就会带上. 键值对,可以设置多个. Cookie 属性 max-age 和 expires 设置过期时间 Secure 只在 htt ...

  7. React开发实时聊天招聘工具 -第六章 登陆注册(2)

    1.bodyParser和cookieParser:   const bodyParser = require('body-parser') const cookieParser = require( ...

  8. nginx下修改svn配置

    最近公司的SVN服务器地址做了变更,而我用的操作系统是Ubuntu操作系统,我也不想把以前下载的代码重新进行修改,我想通过修改svn地址,应该可以,终于在网上通过查找资料,找到了解决的方法:      ...

  9. 处理SpringMVC的时间错误：Field error in object 'sysDatumedetai' on field 'storagetime': rejected value [2017-11-27];

    错误: 十一月 27, 2017 8:26:11 下午 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service ...

  10. @Mapper 和 @MapperScan 区别

    1.@Mapper : 为了使接口被其他类引用,需要使用@Mapper注解,这种方式要求每一个mapper类都需要添加此注解,麻烦. package com.example.demo.dao; imp ...