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中显示视频，通过以下代码

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

• 【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，也可以使用标签来设置]
• HTML5 video + DOM 进行控制

3.1.音频类

• 标签类似与标签。
• 使用代码如下

4.1.HTML5拖放（drag和drop）

• 简单拖放事件的分析

1. 设置元素为可拖放
   
2. 拖动什么（ondragstart和setData()），然后规定当元素被拖动时，会发生什么

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

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

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

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

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

简单拖放事件的代码如下

    
        
    
    
    
        

        
        ![](img_logo.gif)
    

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

    
        
        
        
    
    
        
请将图片拖放到矩形中：
        

        

        ![](/i/eg_dragdrop_w3school.gif)
    

• 来回拖放图片

    
        
        
        
    
    
        

        ![](/i/eg_dragdrop_w3school.gif)
        
        
        

    

5.1.canvas

• canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
• 添加canvas元素规定元素的id、宽度和高度
  
• 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);

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