HTML5与CSS3的新特性

浏览数：36 / 时间：2015年06月09日

　　一、HTML5新特性

　　1、视频

　　在HTML5之前，网络上的视频大多都是使用Flash插件进行播放的，保险现在也仍然有很多。HTML5规定了一种通过video元素包含视频的标注方法。

　　视频格式的支持：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

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

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

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

　　video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式，示例：

<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>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

　　关于视频的javascript控制与事件。大体上有play()，pause()，load()三种方法，事件和属性详细参见HTML5 视频/DOM。

　　2、音频

　　和视频相同，之前也没有网页直接播放音频的标准，都是使用的插件。现在可以直接使用audio标签来加载音频文件了。

　　音频格式的支持：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

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

<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>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

　　事件与控制和视频的相同。

　　3、拖放

　　拖放（Drag 和 drop）是 HTML5 标准的组成部分，抓取对象以后拖到另一个位置。在 HTML5 中，任何元素都能够拖放。

　　示例如下：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/w3school_banner.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

　　看起来很复杂，但是分步分析要简单一下。

　　拖放一般情况下都需要借助javascript来辅助处理，一个拖放的步骤如下：

　　第一步：设置对象为可拖放的。

　　第二步：什么被拖动了

　　分别调用ondragstart 和 setData()，ondragstart是当拖动开始时执行的方法，上面的例子在拖动开始时调动drag(event)方法，传递进去一个event参数，这个event参数中包含被拖动的元素，也即本元素。

　　第三步：拖动时触发什么操作

　　调用event.dataTransfer.setData() 方法设置被拖数据的数据类型和值:

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

　　在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

　　第四步：放到何处

　　ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()。

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

　　这里定义了放置时触发什么事件（用于放置内容），被拖动到上面时触发什么事件（用于执行上面的preventDefault()方法）

　　第五步：进行放置

　　当放置被拖数据时，会发生 drop 事件。在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

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

　　调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

　　通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

　　被拖数据是被拖元素的 id ("drag1")

　　把被拖元素追加到放置元素（目标元素）中

　　其中event.target返回的是触发事件的目标，也即触发事件的元素。

　　4、画布

　　HTML5中又一个强大的功能，canvas 元素，用于在网页上绘制图形。

　　HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。利用画布和javascript可以制作一些简单的HTML5游戏。

　　使用方法：

<canvas id="myCanvas" width="200" height="100"></canvas>

　　canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

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

cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>

　　首先获取canvas对象，然后使用对象的getContext方法获取一个context对象，可以是2d的也可以是3d的。

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

　　坐标原点是左上角。

　　5、SVG矢量图形

　　一个直接画矢量图的方法出现在了HTML5中，他就是SVG元素。

　　HTML5 支持内联 SVG。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

　　与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

　　直接内联SVG：

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

　　更多更强大的功能参考：SVG教程

　　插播：SVG与canvas的区别：

　　Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

　　SVG 是一种使用 XML 描述 2D 图形的语言。

　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

　　Canvas 通过 JavaScript 来绘制 2D 图形。

　　Canvas 是逐像素进行渲染的。

　　在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

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