<!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. TI C66x DSP 四种内存保护问题 -之- 外设訪问corePac内部资源时的内存保护问题

    外设訪问corePac内部资源(L1,L2)时的内存保护等问题请參考以下两个blog.已经叙述的非常具体. "TI C66x DSP 系统events及其应用 - 2"," ...

  2. Android中App可分配内存的大小

    现在真实测试结果: 1,为了搞清楚每个应用程序在Android系统中最多可分配多少内存空间,我们使用了真机进行测试,测试机型为魅族MX4 Pro,3G内存. 测试方法是直接申请一块较大的内存空间,看应 ...

  3. 影响FPGA设计中时钟因素的探讨。。。转

    http://www.fpga.com.cn/advance/skill/speed.htm http://www.fpga.com.cn/advance/skill/design_skill3.ht ...

  4. base64格式的图片数据如何转成图片

    base64格式的图片数据如何转成图片 一.总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. // $base_img是获取到前端传递的值 $base_img ...

  5. LG Gram 2018 z980 白

    因为今年8代处理器i5的双核变成了四核,感觉是个换电脑的好时机,本来打算买macbook,但是6月的发布会并没有发布,于是开始寻找一些比较有特点的笔记本电脑. 了解了这样一款笔记本 LG GRAM 1 ...

  6. Vuejs2.0构建一个彩票查询WebAPP(1)

    说明:本人也是刚接触VUE.js,作为一个学习笔记,旨在与初学者共同学习.其中编程语法错误或者写作水平刺眼,还望轻喷. 使用工具:Visual Studio Code.技术栈为vue2+vuex+ax ...

  7. Scrapy中将数据保存至数据库

    一.在settings.py文件中配置数据库连接参数 # 数据库连接参数 DB_HOST = '192.168.183.1' DB_PORT = 3306 DB_USER = 'root' DB_PA ...

  8. PHP保留两位小数

    1.不四舍五入 $number = 23.43453;$english_format_number = number_format($number, 2, '.', '');echo $english ...

  9. 03015_DBUtils

    1.概述 (1)如果只使用JDBC进行开发,我们会发现冗余代码过多,为了简化JDBC开发,本案例我们讲采用apache commons组件一个成员:DBUtils : (2)DBUtils就是JDBC ...

  10. spark系统实现yarn资源的自动调度

    参考: http://blog.csdn.net/dandykang/article/details/48160953     对于Spark应用来说,资源是影响Spark应用执行效率的一个重要因素. ...