HTML5基础（一）

前端

一、新特性介绍

1.用于绘画的canvas元素
2.用于媒介回放的video和audio元素
3.对本地离线存储更好的支持
4.新的特殊内容：article、footer、header、nav、section
5.新的表单控件：calendar、date、time、email、url、search

二、视频

1.当前video元素支持三种视频格式：Ogg、MPEG4、WebM，Ogg适用于Firefox、Opera和Chrome浏览器；MPEG4适用于Safari和IE9+浏览器。
2.属性：
1）autoplay：autoplay="autoplay"表示视频就绪后马上播放
2）controls:controls="controls"表示向用户显示视频控件，比如播放按钮
3）width和height：设置视频播放器的宽度和高度
4）src属性：要播放视频的URL
3.实例：

<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.//用于视频无法显示时提示
</video>

4.视频DOM：

<video>元素同样拥有方法、属性和事件，其中的方法用于播放（play方法）、暂停（pause方法）以及加载（load方法）等。其中的属性（比如时长（duration）、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放（play事件）、已暂停（pause事件），已停止（ended事件），等等。

三、音频

1.audio元素支持三种音频格式：Ogg Vorbis、MP3、Wav。IE8不支持audio元素。同样、Ogg适用于Firefox、Opera、Chrome浏览器，MP3和Wav适用于Safari。
2.实例：

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

audio元素允许多个source元素。source元素可以链接到不同的音频文件，浏览器将使用第一个可是别的格式。

四、拖放

IE9、Firefox、Opera12、Chrome、Safari5支持。拖放时，要同时设置被拖元素和容器元素相关事件和方法。

五、画布Canvas和SVG

1.Canvas：
1.定义：
Canvas元素使用JavaScript在网页上绘制图像，一般先创建canvas元素，然后用相应的JavaScript方法指定图像相关数值来达到绘图的目的。
2.实例：
先创建canvas元素

<canvas id="myCanvas" width="200" height="100">
Your browser does not support canvas
</canvas>

然后通过JavaScript绘图

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");//创建context对象，getContext("2d")获取内建的HTML5对象，拥有多种方法
cxt.fillStyle="#FF0000";//颜色渲染
cxt.fillRect(0,0,150,75);//形状、位置、尺寸的确定
</script>

2.SVG:
1.定义：SVG指可伸缩矢量图形，SVG图像在放大或改变尺寸的情况下其图像质量不会有损失
2.优点：可通过文本编辑器来创建和修改
3.浏览器支持：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
4.实例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

3.canvas和SVG的比较：
1.SVG是使用XML描述2D图形的语言，Canvas是通过JavaScript绘制的2D**图形**。
2.SVG支持事件处理器，可以为某个元素添加JavaScript事件处理；Canvas不支持事件处理

六、Web存储

HTML5采用Javascript来存储和访问数据，并且数据不是由每个服务器请求传递的，而只在请求时使用数据，能在不影响网站性能的情况下存储大量数据。
1.localStorage：
没有时间限制的数据存储
2.sessionStorage：
针对一个session的数据存储。当用户关闭浏览器后，数据就会被删除。