<!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. Java,泛型类型通配符和C#对照

    c#的泛型没有类型通配符,原因是.net的泛型是CLR支持的泛型,而Java的JVM并不支持泛型,仅仅是语法糖,在编译器编译的时候都转换成object类型 类型通配符在java中表示的是泛型类型的父类 ...

  3. ant安装配置问题：ANT_HOME is set incorrectly or ant could not be located. Please set ANT_HOME.

    项目用到ant 1.去官网下载:http://ant.apache.org/bindownload.cgi 2.解压至安装C盘 3.设置ANT_HOME.PATh.CLASSPATH ANT_HOME ...

  4. iOS开发系列之四 - UITextView 使用方法小结

    // 初始化输入框并设置位置和大小 UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(10, 10, 300, 1 ...

  5. 百度LBS开放平台个性化地图 制作一款独一无二的地图

    百度LBS开放平台个性化地图  制作一款独一无二的地图 天天用百度地图的亲们是否已不再满足仅仅看例如以下的地图样式了呢? 默认百度地图样式 是否特别渴望看特别不一样的地图呢.如带京城81号气息的午夜蓝 ...

  6. Android程序猿自己动手制作.9.png图片

    1:怎样制作9.png图片素材: 打开SDK工具文件夹下: draw9patch.zip  解压执行draw9patch.bat.有的直接搜索会有:draw9patch.bat. 双击执行后,例如以下 ...

  7. 电脑无法上网，DHCP客户端不能正确获取IP地址

    问题特征:DHCP服务器更新[保留]配置信息后,给一客户端绑定了新的IP地址;但客户端IP地址并未正确更新; 处理: 一.检查DHCP服务器配置; 1.MAC地址.IP地址均正确;并已“添加到筛选器” ...

  8. 我在看着你呢——shiro学习

    说实话开学第一周效率并不高.项目该结的都差不多结了,看来这毛病我是养成了.项目忙的要死的时候,想休息想停一停就不断往下扔包袱.一下没项目了开学了,反倒开始手痒,捉摸着写点什么代码.马上我的小mac就要 ...

  9. 详解：Linux Chrony 设置服务器集群同步时间

    导读: Chrony是一个开源的自由软件,像CentOS 7或基于RHEL 7操作系统,已经是默认服务,默认配置文件在 /etc/chrony.conf 它能保持系统时间与时间服务器(NTP)同步,让 ...

  10. QQ空间说说爬虫

    QQ空间说说爬虫 闲来无事,写了一个QQ空间的爬虫,主要是爬取以前的说说,然后生成词云. 这次采用的主要模块是selenium,这是一个模拟浏览器的模块,一开始我不想用这个模块写的,但是后面分析的时候 ...