码迷,mamicode.com
首页 > Web开发 > 详细

HTML5与CSS3的新特性

时间:2015-01-05 00:32:09      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:

  一、HTML5新特性

  1、视频

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

  视频格式的支持:

格式IEFirefoxOperaChromeSafari
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 9Firefox 3.5Opera 10.5Chrome 3.0Safari 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来辅助处理,一个拖放的步骤如下:

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

  <img draggable="true" />

  第二步:什么被拖动了

  分别调用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 的应用都不快)
最适合图像密集型的游戏,其中的许多对象会被频繁重绘 不适合游戏应用

 

HTML5与CSS3的新特性

标签:

原文地址:http://www.cnblogs.com/guangshan/p/4202454.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!