HTML5（一）

1、<!DOCTYPE> 

      告知浏览器页面使用哪种html版本

2、<a></a>

发邮件方式一：<a href="mailto:[email protected]?Subject=Hello%20agin" target="_top">发邮件</a>

发邮件方式二：

    <a href="mailto:[email protected][email protected]&[email protected]&subjiect=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20%20summer%20party!" target="_top">发邮件2</a>

跳转到页面指定位置：  <a id="index">此处</a>

                                    <a href="#index">跳转到此处</a>

     注：单词之间空格用%20表示，以便浏览器解析，上述需安装邮件后才能使用

3、<abbr></abbr> 

     表示缩写词

     <abbr title="today is a good day">today</abbr>   当鼠标移动到today上时，title里的内容可以被显示出来

4、<video></video>

    视频，支持三种视频格式

     Ogg : 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

     MPEG4 : 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

     WebM : 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

     单个视频时：<video src="" controls="controls"></video>

     多个视频时：

             <video controls="controls">

                    <source src="" type="">   //type="video/ogg"  视频

                    <source src="" type="">    //type="video/mp4"   音频

             </vodeo>

      <video>属性： 

          controls : 提供播放，暂停，音量空间

          width / height :  音频播放器的宽/高

          autoplay : 视频在就绪后马上播放

          loop : 视频文件播放后，再次播放

          preload : 视频在页面加载时加载，并预备播放

         src : 要播放的url

    注：在<video></video>之间插入的内容不显示

5、<audio></audio>

音频，支持三种格式

Ogg Vorbis   /   MP3   /   Wav

除了属性中没有width/height，其余类似于<video>

6、Drag  /  drop  拖 / 放

例：   把某个图片拖动到某个框内

        <div id="div" ondrop="drop(event)" ondragover="allowdrop(event)"></div>

       <img id="img" src="" draggable="true" ondragstart="drag(event)"/>

        <script type="text/javascript">

               function drag(ev){

                     ev.dataTransfer.setData("Text",ev.target.id);   //数据类型是Text  值是可拖动元素的id

               }

               function drop(ev){

                    ev.preventDefault();   //避免浏览器对数据的默认处理(以链接形式打开)

                    var data = ev.dataTransfer.getData("Text");    //获得被拖动元素的数据

                     ev.target.appendChild(document.getElementById(data));

               }

               function allowdrop(ev){

                      ev.preventDefault();

               }

        </script>

      注： draggable 设置元素是否可拖动    

              ondragstart 当元素被拖动时，会发生什么

              setData()  设置元素被拖动的数据类型和值

              ondrop 当放置元素被拖动数据时，会发生drop事件

              ondragover 规定在何处放置被拖动的数据

7、Canvas 画布 使用js绘制图形

     <canvas id="canv" width="300px" height="300px"></canvas>

     <script type="text/javascript">

            var c=document.getElementById("canv");

            //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

            var cxt=c.getContext("2d");    

           //绘制矩形    fillStyle 方法将其染色，fillRect 方法规定了形状、位置和尺寸。(x,y,w,h)

           cxt.fillStyle="aqua";

           cxt.fillRect(10,10,50,60);

            //通过从何处开始到何处结束，绘制线

            cxt.moveTo(10,10);

            cxt.lineTo(50,100);

            cxt.lineTo(100,50);

            cxt.stroke();

            //绘制圆

            cxt.beginPath();

            cxt.arc(150,50,30,0,Math.PI*2,true);

            cxt.closePath();

            cxt.fill();

             //渐变

             var  grd=cxt.createLinearGradient(200,50,270,50);

              grd.addColorStop(0,"#FF0000");

              grd.addColorStop(1,"#00FF00");

               cxt.fillStyle=grd;

              cxt.fillRect(200,50,270,50);

     </script>

8、Web存储

localStorage : 没有时间限制的数据存储

sessionStorage : 针对一个session的数据存储

例：

     <script type="text/javascript">

          if(localStorage.pagecount){

               localStorage.pagecount=Number(localStorage.pagecount) + 1;

           }else{

                localStorage.pagecount=1;

           }

           document.write(localStorage.pagecount+"Times");

     </script>

注：把上述localStorage.pagecount改为sessionStorage.pagecount，就只会作用在一个session中