首页 > 代码库 > HTML5与CSS3的新特性
HTML5与CSS3的新特性
一、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来辅助处理,一个拖放的步骤如下:
第一步:设置对象为可拖放的。
<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的新特性