HTML5

1.1.html5的新特性

用于绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储的更好支持
新的特殊内容元素，比如article,footer,header,nav,section
新的表单控件，比如calendar,date,time,email,url,search

2.1.视频类

当前，video元素支持三种视频格式：Ogg,MPEG4,WebM
在HTML5中显示视频，通过以下代码

<video src="movie.ogg" contrlos="controls">
</video>

tips:
1. control属性提供添加播放、暂停、音量控件
2. 也可以增加对于宽高的设定，通过width="400" height="400"
3. <video>和</video>之间可以插入内容以供不支持video元素的浏览器显示
4. 对于不同浏览器存在的支持视频格式问题，也可以通过添加多条链接来预防，代码如下

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

【video】标签的属性
1. autoplay [autoplay="autoplay" 自动播放]
2. controls [controls="controls" 显示控件]
3. height [height="300" 设置高度]
4. width [width="320" 设置宽度]
5. loop [loop="loop" 重复播放]
6. preload [preload="auto" 页面加载后载入视频，若设置了autoplay属性则忽略该属性]
7. src [src="movie.ogg" 规定要播放的视频的url，也可以使用<source>标签来设置]
HTML5 video + DOM 进行控制

3.1.音频类

<audio>标签类似与<video>标签。
使用代码如下

<audio src="song.ogg" controls="controls">
    Your browser does not support the audio tag.
</audio>

4.1.HTML5拖放（drag和drop）

简单拖放事件的分析

设置元素为可拖放
<img draggable="true">
拖动什么（ondragstart和setData()），然后规定当元素被拖动时，会发生什么

ondraggable属性调用一函数drag(event)，其规定了被拖动的数据
dataTransfer.setData()设置被拖数据的数据类型和值
如下例子中，数据类型是"Text",值是可拖动元素的id("drag1")

function drag(event)
{
    event.dataTransfer.setData("Text",event.target.id);
}

放到何处（ondragover），默认的无法将数据或元素放置到其他元素中，所以如果需要设置允许放置，我们必须阻止对元素的默认处理方式，即调用ondragover事件的event.preventDefault()
进行放置（ondrop）

通过dataTransfer.getdata("Text")方法获得被拖的数据，返回在setData()中设置为相同类型的任何数据。
被拖数据是被拖元素的id（“drag1”）

function drop(event)
{
    event.preventDataFault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
}

简单拖放事件的代码如下

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            function allowDrop(event)
            {
                event.preventDefault();
            }
            
            function drag(event)
            {
                event.dataTransfer.setData("Text",event.target.id);
            }
            
            function drop(event)
            {
                event.preventDefault();
                var data=event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    
    <body>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        
        ![](img_logo.gif)
    </body>
</html>

操作实例（一个图片拖到一个里面）：

<!doctype>
<html>
    <head>
        <style type="text/css">
            #div1 {
                width:198px;
                height:66px;
                padding:10px;
                border:1px;
                border-style;solid;
            }
        </style>
        
        <script type="text/javascript">
            function allowDrop(event)
            {
                event.preventDefault();
            }
            function drag(event)
            {
                event.dataTransfer.setData("Text",event.target.id);
            }
            function drop(event)
            {
                event.preventDefault();
                var data=event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <p>请将图片拖放到矩形中：</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br>
        ![](/i/eg_dragdrop_w3school.gif)
    </body>
</html>

来回拖放图片

<!DOCTYPE>
<html>
    <head>
        <style type="text/css">
            #div1, #div2
            {
                float:left;
                width:198px;
                height:66px;
                margin:10px;
                padding:10px;
                border:1px;
                border-style:solid;
            }
        </style>
        
        <script type="text/javascript">
            function allowDrop(event)
            {
                event.preventDefault();
            }
            function drag(event)
            {
                event.dataTransfer.setData("Text",event.target.id);
            }
            function drop(event)
            {
                event.preventDefault();
                var data=event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        ![](/i/eg_dragdrop_w3school.gif)
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </body>
</html>

5.1.canvas

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
添加canvas元素规定元素的id、宽度和高度
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas元素本身没有绘图能力，所有绘制工作必须在javascript内部完成
例如
1. javascript使用id来寻找canvas元素
  var c=document.getElementById("myCanvas");
2. 然后创建context对象。getContext（“2d”）对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
  var cxt=c.getContext("2d");
3. 绘制一个红色的矩形。fillStyle将其染成红色，fillRect规定了形状、位置和尺寸

cxt.fillstyle="#ff0000";
cxt.fillRect(0,0,150,75);

<script type="text/script">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
</script>

6.1.SVG

svg指可伸缩矢量图形scalable vector graphics
svg使用xml格式定义图形
svg是万维网联盟的标准

7.1.svg与canvas的比较

svg是一种使用xml描述2d图形的语言，其基于xml，即svg dom中的每个元素都是可用的，可为某个元素附加javascript事件处理器，在svg中，每个被绘制的图形均被视为对象。若svg对象的属性发生变化，那么浏览器能自动重现图形
canvas通过JavaScript绘制2D图形，为逐像素进行渲染，一旦图形被绘制完成，它就不会继续得到浏览器关注，若其位置发生变化，则整个场景也需要重新绘制包括任何或许已被图形覆盖的对象

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（如谷歌地图）
能够以.png或.jpg格式保存结果图形	复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

8.1.地理定位

使用getCurrentPosition()来获得用户的位置

9.1.Web存储

HTML5提供两种在客户端存储数据的新方法
localStorage 没有时间限制的数据存储
sessionStorage 针对一个session的数据存储
HTML5使用JavaScript来存储和访问数据

10.1.应用程序缓存Application Cache

通过创建cache manifest文件，来轻松的创建web应用的离线版本

11.1.Web Workers

Web Workers是运行在后台的JavaScript，独立于其他脚本。

12.1.服务器发送事件

HTML5服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

剩下的未看内容

修改于20171017

HTML5

1.1.html5的新特性

2.1.视频类

3.1.音频类

4.1.HTML5拖放（drag和drop）

5.1.canvas

6.1.SVG

7.1.svg与canvas的比较

8.1.地理定位

9.1.Web存储

10.1.应用程序缓存Application Cache

11.1.Web Workers

12.1.服务器发送事件

推荐阅读更多精彩内容