首页 > 代码库 > HTML5与CSS3的新特性

HTML5与CSS3的新特性

  一、HTML5新特性

  1、视频

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

  视频格式的支持:

格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.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>
属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

  关于视频的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>
属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
preloadpreload如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
srcurl要播放的音频的 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=http://www.mamicode.com/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的新特性