HTML5 的新的表单元素：
HTML5 拥有若干涉及表单的元素和属性?/p>
本章介绍以下新的表单元素Q?/p>
- datalist
- keygen
- output
览器支?/h2>
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| datalist | No | No | 9.5 | No | No |
| keygen | No | No | 10.5 | 3.0 | No |
| output | No | No | 9.5 | No | No |
datalist 元素
datalist 元素规定输入域的选项列表?/p>
列表是通过 datalist 内的 option 元素创徏的?/p>
如需?datalist l定到输入域Q请用输入域?list 属性引?datalist ?idQ?/p>
实例
Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3School" value="http://www.W3School.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /></datalist>
提示Q?/span>option 元素永远都要讄 value 属性?/p>
keygen 元素
keygen 元素的作用是提供一U验证用L可靠Ҏ?/p>
keygen 元素是密钥对生成器（key-pair generatorQ。当提交表单Ӟ会生成两个键Q一个是U钥Q一个公钥?/p>
U钥Qprivate keyQ存储于客户端，公钥Qpublic keyQ则被发送到服务器。公钥可用于之后验证用户的客L证书Qclient certificateQ?/p>
目前Q浏览器Ҏ元素的糟p的支持度不以使其成ؓ一U有用的安全标准?/p>
实例
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> output 元素
output 元素用于不同cd的输出，比如计算或脚本输出：
实例
<output id="result" onforminput="resCalc()"></output>
]]>
web worker 是运行在后台?JavaScriptQ不会媄响页面的性能?/span>
什么是 Web WorkerQ?/h2>
当在 HTML 面中执行脚本时Q页面的状态是不可响应的，直到脚本已完成?/p>
web worker 是运行在后台?JavaScriptQ独立于其他脚本Q不会媄响页面的性能。您可以l箋做Q何愿意做的事情：点击、选取内容{等Q而此?web worker 在后台运行?/p>
览器支?/h2>
所有主浏览器均支?web workerQ除?Internet Explorer?/p>
HTML5 Web Workers 实例
下面的例子创Z一个简单的 web workerQ在后台计数Q?/p>
计数Q?output id="result" style="margin: 0px; padding: 0px; border: 0px; font-weight: bold; font-size: 12px; line-height: normal; font-family: Verdana, Arial, Helvetica, sans-serif; color: #0000cc;">
?Web Worker 支持
在创?web worker 之前Q请用L览器是否支持它Q?/p>
if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. } 创徏 web worker 文g
现在Q让我们在一个外?JavaScript 中创建我们的 web worker?/p>
在这里，我们创徏了计数脚本。该脚本存储?"demo_workers.js" 文g中：
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); 以上代码中重要的部分?nbsp;postMessage() Ҏ - 它用于向 HTML 面传回一D|息?/p>
注释Q?/span>web worker 通常不用于如此简单的脚本Q而是用于更耗费 CPU 资源的Q务?/p>
创徏 Web Worker 对象
我们已经有了 web worker 文gQ现在我们需要从 HTML 面调用它?/p>
下面的代码检是否存?workerQ如果不存在Q? 它会创徏一个新?web worker 对象Q然后运?"demo_workers.js" 中的代码Q?/p>
if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } 然后我们可以从 web worker 发生和接收消息了?/p>
?web worker d一?"onmessage" 事g监听器：
w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; }; ?web worker 传递消息时Q会执行事g监听器中的代码。event.data 中存有来?event.data 的数据?/p>
l止 Web Worker
当我们创?web worker 对象后，它会l箋监听消息Q即使在外部脚本完成之后Q直到其被终止ؓ止?/p>
如需l止 web workerQƈ释放览?计算源，请?terminate() ҎQ?/p>
w.terminate();
完整?Web Worker 实例代码
我们已经看到?.js 文g中的 Worker 代码。下面是 HTML 面的代码：
实例
<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br /><br /> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html> Web Workers ?DOM
׃ web worker 位于外部文g中，它们无法讉K下例 JavaScript 对象Q?/p>
- window 对象
- document 对象
- parent 对象
]]>
使用 HTML5Q通过创徏 cache manifest 文gQ可以轻村֜创徏 web 应用的离U版本?/span>
什么是应用E序~存QApplication CacheQ？
HTML5 引入了应用程序缓存，q意味着 web 应用可进行缓存，q可在没有因特网q接时进行访问?/p>
应用E序~存为应用带来三个优势：
- ȝ览 - 用户可在应用ȝ时用它?/li>
- 速度 - 已缓存资源加载得更快
- 减少服务器负?- 览器将只从服务器下载更新过或更改过的资源?/li>
览器支?/h2>
所有主浏览器均支持应用程序缓存，除了 Internet Explorer?/p>
HTML5 Cache Manifest 实例
下面的例子展CZ带有 cache manifest ?HTML 文档Q供ȝ览Q：
实例
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> Cache Manifest 基础
如需启用应用E序~存Q请在文档的 <html> 标签中包?manifest 属性：
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
每个指定?manifest 的页面在用户对其讉K旉会被~存。如果未指定 manifest 属性，则页面不会被~存Q除非在 manifest 文g中直接指定了该页面）?/p>
manifest 文g的徏议的文g扩展名是Q?.appcache"?/p>
h意，manifest 文g需要配|?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">正确?MIME-typeQ即 "text/cache-manifest"。必d web 服务器上q行配置?/p>
Manifest 文g
manifest 文g是简单的文本文gQ它告知览器被~存的内容（以及不缓存的内容Q?/p>
manifest 文g可分Z个部分：
- CACHE MANIFEST - 在此标题下列出的文g在首次下蝲后进行缓?/li>
- NETWORK - 在此标题下列出的文g需要与服务器的q接Q且不会被缓?/li>
- FALLBACK - 在此标题下列出的文g规定当页面无法访问时的回退面Q比?404 面Q?/li>
CACHE MANIFEST
W一行，CACHE MANIFESTQ是必需的：
CACHE MANIFEST /theme.css /logo.gif /main.js
上面?manifest 文g列出了三个资源：一?CSS 文gQ一?GIF 囑փQ以及一?JavaScript 文g。当 manifest 文g加蝲后，览器会从网站的根目录下载这三个文g。然后，无论用户何时与因特网断开q接Q这些资源依然是可用的?/p>
NETWORK
下面?NETWORK 节规定文g "login.asp" 永远不会被缓存，且离U时是不可用的：
NETWORK: login.asp
可以使用星号来指C所有其他资?文g都需要因特网q接Q?/p>
NETWORK: *
FALLBACK
下面?FALLBACK 节规定如果无法建立因特|连接，则用 "offline.html" 替代 /html5/ 目录中的所有文Ӟ
FALLBACK: /html5/ /404.html
注释Q?/span>W一?URI 是资源，W二个是替补?/p>
更新~存
一旦应用被~存Q它׃保持~存直到发生下列情况Q?/p>
- 用户清空览器缓?/li>
- manifest 文g被修改（参阅下面的提C）
- q序来更新应用~存
实例 - 完整?Manifest 文g
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
重要的提C：?"#" 开头的是注释行Q但也可满其他用途。应用的~存会在?manifest 文g更改时被更新。如果您~辑了一q图片，或者修改了一?JavaScript 函数Q这些改变都不会被重新缓存。更新注释行中的日期和版本号是一Uɋ览器重新缓存文件的办法?/p>
关于应用E序~存的注?/h2>
L心缓存的内容?/p>
一旦文件被~存Q则览器会l箋展示已缓存的版本Q即使您修改了服务器上的文g。ؓ了确保浏览器更新~存Q您需要更?manifest 文g?/p>
注释Q?/span>览器对~存数据的容量限制可能不太一P某些览器设|的限制是每个站?5MBQ?/p>
]]>
在客L存储数据
HTML5 提供了两U在客户端存储数据的新方法：
- localStorage - 没有旉限制的数据存?/li>
- sessionStorage - 针对一?session 的数据存?/li>
之前Q这些都是由 cookie 完成的。但?cookie 不适合大量数据的存储，因ؓ它们由每个对服务器的h来传递，q?cookie 速度很慢而且效率也不高?/p>
?HTML5 中，数据不是由每个服务器h传递的Q而是只有在请求时使用数据。它使在不媄响网站性能的情况下存储大量数据成ؓ可能?/p>
对于不同的网站，数据存储于不同的区域Qƈ且一个网站只能访问其自n的数据?/p>
HTML5 使用 JavaScript 来存储和讉K数据?/p>
localStorage Ҏ
localStorage Ҏ存储的数据没有时间限制。第二天、第二周或下一q之后，数据依然可用?/p>
如何创徏和访?localStorageQ?/p>
实例
<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname); </script>
下面的例子对用户讉K面的次数进行计敎ͼ
实例
<script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else {localStorage.pagecount=1; } document.write("Visits "+localStorage.pagecount+ " time(s)."); </script>
sessionStorage Ҏ
sessionStorage Ҏ针对一?session q行数据存储。当用户关闭览器窗口后Q数据会被删除?/p>
如何创徏q访问一?sessionStorageQ?/p>
实例
<script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname); </script>
下面的例子对用户在当?session 中访问页面的ơ数q行计数Q?/p>
实例
<script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else {sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session."); </script>
]]>
HTML5 GeolocationQ地理定位）用于定位用户的位|?/span>
定位用户的位|?/h2>
HTML5 Geolocation API 用于获得用户的地理位|?/p>
鉴于该特性可能R犯用L隐私Q除非用户同意，否则用户位置信息是不可用的?/p>
览器支?/h2>
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位?/p>
注释Q?/span>对于拥有 GPS 的设备，比如 iPhoneQ地理定位更加精?/p>
HTML5 - 使用地理定位
请?getCurrentPosition() Ҏ来获得用L位置?/p>
下例是一个简单的地理定位实例Q可q回用户位置的经度和U度?/p>
实例
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> 例子解释Q?/p>
- 是否支持地理定?/li>
- 如果支持Q则q行 getCurrentPosition() Ҏ。如果不支持Q则向用hCZD|息?/li>
- 如果getCurrentPosition()q行成功Q则向参数showPosition中规定的函数q回一个coordinates对象
- showPosition() 函数获得q显C经度和U度
上面的例子是一个非常基的地理定位脚本，不含错误处理?/p>
处理错误和拒l?/h2>
getCurrentPosition() Ҏ的第二个参数用于处理错误。它规定当获取用户位|失败时q行的函敎ͼ
实例
function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } 错误代码Q?/p>
- Permission denied - 用户不允许地理定?/li>
- Position unavailable - 无法获取当前位置
- Timeout - 操作时
在地图中昄l果
如需在地图中昄l果Q您需要访问可使用l纬度的地图服务Q比如谷歌地图或癑ֺ地图Q?/p>
实例
function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />"; } 在上例中Q我们用返回的l纬度数据在h地图中显CZ|（使用静态图像）?/p>
上面的链接向您演C如何用脚本来昄带有标记、羃攑֒拖曳选项的交互式地图?/p>
l定位置的信?/h2>
本页演示的是如何在地图上昄用户的位|。不q，地理定位对于l定位置的信息同样很有用处?/p>
案例Q?/p>
- 更新本地信息
- 昄用户周围的兴点
- 交互式R载导航系l?(GPS)
getCurrentPosition() Ҏ - q回数据
若成功，?getCurrentPosition() Ҏq回对象。始l会q回 latitude、longitude 以及 accuracy 属性。如果可用，则会q回其他下面的属性?/p>
| 属?/th> | 描述 |
|---|---|
| coords.latitude | 十进制数的纬?/td> |
| coords.longitude | 十进制数的经?/td> |
| coords.accuracy | 位置_ֺ |
| coords.altitude | hQvq面以上以米?/td> |
| coords.altitudeAccuracy | 位置的v拔精?/td> |
| coords.heading | 方向Q从正北开始以度计 |
| coords.speed | 速度Q以c?每秒?/td> |
| timestamp | 响应的日?旉 |
Geolocation 对象 - 其他有趣的方?/h2>
watchPosition() - q回用户的当前位|，ql返回用L动时的更C|（像汽R上的 GPSQ?/p>
clearWatch() - 停止 watchPosition() Ҏ
下面的例子展C?watchPosition() Ҏ。您需要一台精的 GPS 讑֤来测试该例（比如 iPhoneQ：
实例
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> ]]>
Canvas ?SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的?/span>
SVG
SVG 是一U?XML 描述 2D 囑Ş的语a?/p>
SVG Z XMLQ这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附?JavaScript 事g处理器?/p>
?SVG 中，每个被绘制的囑Ş均被视ؓ对象。如?SVG 对象的属性发生变化，那么览器能够自动重现图形?/p>
Canvas
Canvas 通过 JavaScript 来绘?2D 囑Ş?/p>
Canvas 是逐像素进行渲染的?/p>
?canvas 中，一旦图形被l制完成Q它׃会l得到浏览器的关注。如果其位置发生变化Q那么整个场景也需要重新绘Ӟ包括M或许已被囑Ş覆盖的对象?/p>
Canvas ?SVG 的比?/h2>
下表列出?canvas ?SVG 之间的一些不同之处?/p>
Canvas
- 依赖分L?/li>
- 不支持事件处理器
- q文本渲染能力
- 能够?.png ?.jpg 格式保存l果囑փ
- 最适合囑փ密集型的游戏Q其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事g处理?/li>
- 最适合带有大型渲染区域的应用程序（比如h地图Q?/li>
- 复杂度高会减慢渲染速度QQ何过度?DOM 的应用都不快Q?/li>
- 不适合游戏应用
]]>
HTML5 支持内联 SVG?/span>
什么是SVGQ?/h2>- SVG 指可伸羃矢量囑Ş (Scalable Vector Graphics)
- SVG 用于定义用于|络的基于矢量的囑Ş
- SVG 使用 XML 格式定义囑Ş
- SVG 囑փ在放大或改变寸的情况下其图形质量不会有损失
- SVG 是万l网联盟的标?/li>
SVG 的优?/h2>
与其他图像格式相比（比如 JPEG ?GIFQ，使用 SVG 的优势在于：
- SVG 囑փ可通过文本~辑器来创徏和修?/li>
- SVG 囑փ可被搜烦、烦引、脚本化或压~?/li>
- SVG 是可伸羃?/li>
- SVG 囑փ可在M的分辨率下被高质量地打印
- SVG 可在囑փ质量不下降的情况下被攑֤
览器支?/h2>
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG?/p>
?SVG 直接嵌入 HTML 面
?HTML5 中，您能够将 SVG 元素直接嵌入 HTML 面中：
实例
<!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> l果Q?/p>
如需学习更多有关 SVG 的知识，请阅L们的 SVG 教程?/p>
]]>
canvas 元素用于在网上l制囑Ş?/span>
什么是 CanvasQ?/h2>
HTML5 ?canvas 元素使用 JavaScript 在网上l制囑փ?/p>
d是一个矩形区域，您可以控制其每一像素?/p>
canvas 拥有多种l制路径、矩形、圆形、字W以及添加图像的Ҏ?/p>
创徏 Canvas 元素
?HTML5 面d canvas 元素?/p>
规定元素?id、宽度和高度Q?/p>
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘?/h2>
canvas 元素本n是没有绘图能力的。所有的l制工作必须?JavaScript 内部完成Q?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> JavaScript 使用 id 来寻?canvas 元素Q?/p>
var c=document.getElementById("myCanvas");然后Q创?context 对象Q?/p>
var cxt=c.getContext("2d"); getContext("2d") 对象是内建的 HTML5 对象Q拥有多U绘制\径、矩形、圆形、字W以及添加图像的Ҏ?/p>
下面的两行代码绘制一个红色的矩ŞQ?/p>
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle Ҏ其染成U色QfillRect Ҏ规定了Ş状、位|和寸?/p>
理解坐标
上面?fillRect Ҏ拥有参数 (0,0,150,75)?/p>
意思是Q在d上绘?150x75 的矩形，从左上角开?(0,0)?/p>
如下图所C，d?X ?Y 坐标用于在画布上对绘画进行定位?/p>
更多 Canvas 实例
下面的在 canvas 元素上进行绘ȝ更多实例Q?/p>
实例 - U条
通过指定从何处开始，在何处结束，来绘制一条线Q?/p>
JavaScript 代码Q?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> canvas 元素Q?/p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
实例 - 圆Ş
通过规定寸、颜色和位置Q来l制一个圆Q?/p>
JavaScript 代码Q?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> canvas 元素Q?/p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
实例 - 渐变
使用您指定的颜色来绘制渐变背景：
JavaScript 代码Q?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); 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); </script> canvas 元素Q?/p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
实例 - 囑փ
把一q图像放|到d上：
JavaScript 代码Q?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="flower.png" cxt.drawImage(img,0,0); </script> canvas 元素Q?/p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
]]>
拖放QDrag ?dropQ是 HTML5 标准的组成部分?/span>
拖放
拖放是一U常见的Ҏ，x取对象以后拖到另一个位|?/p>
?HTML5 中，拖放是标准的一部分QQ何元素都能够拖放?/p>
拖放是一U常见的Ҏ，x取对象以后拖到另一个位|?/p>
?HTML5 中，拖放是标准的一部分QQ何元素都能够拖放?/p>
览器支?/h2>Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放?/p>
注释Q?/span>?Safari 5.1.2 中不支持拖放?/p>
HTML5 拖放实例
下面的例子是一个简单的拖放实例Q?/p>
实例
<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
它看上去也许有些复杂Q不q我们可以分别研I拖放事件的不同部分?/p>
讄元素为可拖放
首先Qؓ了元素可拖动，?draggable 属性设|ؓ true Q?/p>
<img draggable="true" />
拖动什?- ondragstart ?setData()
然后Q规定当元素被拖动时Q会发生什么?/p>
在上面的例子中，ondragstart 属性调用了一个函敎ͼdrag(event)Q它规定了被拖动的数据?/p>
dataTransfer.setData() Ҏ讄被拖数据的数据类型和|
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中Q数据类型是 "Text"Q值是可拖动元素的 id ("drag1")?/p>
攑ֈ何处 - ondragover
ondragover 事g规定在何处放|被拖动的数据?/p>
默认圎ͼ无法数?元素攄到其他元素中。如果需要设|允许放|，我们必须L对元素的默认处理方式?/p>
q要通过调用 ondragover 事g?nbsp;event.preventDefault() ҎQ?/p>
event.preventDefault()
q行攄 - ondrop
当放|被拖数据时Q会发生 drop 事g?/p>
在上面的例子中，ondrop 属性调用了一个函敎ͼdrop(event)Q?/p>
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释Q?/h3>- 调用 preventDefault() 来避免浏览器Ҏ据的默认处理Qdrop 事g的默认行为是以链接Ş式打开Q?/li>
- 通过 dataTransfer.getData("Text") Ҏ获得被拖的数据。该Ҏ返回在 setData() Ҏ中设|ؓ相同cd的Q何数据?/li>
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到攄元素Q目标元素）?/li>
更多实例
- 来回拖放囄
- 如何在两?<div> 元素之间拖放囑փ?/dd>
]]>
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放?/p>
注释Q?/span>?Safari 5.1.2 中不支持拖放?/p>
下面的例子是一个简单的拖放实例Q?/p>
<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
它看上去也许有些复杂Q不q我们可以分别研I拖放事件的不同部分?/p>
首先Qؓ了元素可拖动，?draggable 属性设|ؓ true Q?/p>
<img draggable="true" />
然后Q规定当元素被拖动时Q会发生什么?/p>
在上面的例子中，ondragstart 属性调用了一个函敎ͼdrag(event)Q它规定了被拖动的数据?/p>
dataTransfer.setData() Ҏ讄被拖数据的数据类型和|
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中Q数据类型是 "Text"Q值是可拖动元素的 id ("drag1")?/p>
ondragover 事g规定在何处放|被拖动的数据?/p>
默认圎ͼ无法数?元素攄到其他元素中。如果需要设|允许放|，我们必须L对元素的默认处理方式?/p>
q要通过调用 ondragover 事g?nbsp;event.preventDefault() ҎQ?/p>
event.preventDefault()
当放|被拖数据时Q会发生 drop 事g?/p>
在上面的例子中，ondrop 属性调用了一个函敎ͼdrop(event)Q?/p>
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
- 调用 preventDefault() 来避免浏览器Ҏ据的默认处理Qdrop 事g的默认行为是以链接Ş式打开Q?/li>
- 通过 dataTransfer.getData("Text") Ҏ获得被拖的数据。该Ҏ返回在 setData() Ҏ中设|ؓ相同cd的Q何数据?/li>
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到攄元素Q目标元素）?/li>
- 调用 preventDefault() 来避免浏览器Ҏ据的默认处理Qdrop 事g的默认行为是以链接Ş式打开Q?/li>
- 通过 dataTransfer.getData("Text") Ҏ获得被拖的数据。该Ҏ返回在 setData() Ҏ中设|ؓ相同cd的Q何数据?/li>
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到攄元素Q目标元素）?/li>
更多实例
- 来回拖放囄
- 如何在两?<div> 元素之间拖放囑փ?/dd>
- 来回拖放囄
- 如何在两?<div> 元素之间拖放囑փ?/dd>
]]>
HTML5 提供了播N频的标准?/span>
Web 上的音频
直到现在Q仍然不存在一Ҏ在网上播放音频的标准?/p>
今天Q大多数音频是通过插gQ比?FlashQ来播放的。然而，q所有浏览器都拥有同L插g?/p>
HTML5 规定了一U通过 audio 元素来包含音频的标准Ҏ?/p>
audio 元素能够播放声音文g或者音频流?/p>
音频格式
当前Qaudio 元素支持三种音频格式Q?/p>
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
如何工作
如需?HTML5 中播N频，您所有需要的是：
<audio src="song.ogg" controls="controls"> </audio>
control 属性供d播放、暂停和音量控g?/p>
<audio> ?</audio> 之间插入的内Ҏ供不支持 audio 元素的浏览器昄的：
实例
<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
上面的例子用一?Ogg 文gQ适用于Firefox、Opera 以及 Chrome 览器?/p>
要确保适用?Safari 览器，音频文g必须?MP3 ?Wav cd?/p>
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>
Internet Explorer
Internet Explorer 8 不支?audio 元素。在 IE 9 中，提供对 audio 元素的支持?/p>
<audio> 标签的属?/h2>
| 属?/th> | ?/th> | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在qA后马上播放?/td> |
| controls | controls | 如果出现该属性，则向用户昄控gQ比如播放按钮?/td> |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放?/td> |
| preload | preload | 如果出现该属性，则音频在面加蝲时进行加载，q备播放?/p> 如果使用 "autoplay"Q则忽略该属性?/p> |
| src | url | 要播攄音频?URL?/td> |
相关面
参考手册：HTML 5 <audio> 标签
]]>
HTML5 <video> - 使用 DOM q行控制
HTML5 <video> 元素同样拥有Ҏ、属性和事g?/p>
其中的方法用于播放、暂停以及加载等。其中的属性（比如旉、音量等Q可以被d或设|。其中的 DOM 事g能够通知您，比方_<video> 元素开始播放、已暂停Q已停止Q等{?/p>
下例中简单的ҎQ向我们演示了如何?<video> 元素Q读取ƈ讄属性，以及如何调用Ҏ?/p>
实例
频创建简单的播放/暂停以及调整寸控gQ?/p>
上面的例子调用了两个ҎQplay() ?pause()。它同时使用了两个属性：paused ?width?/p>
HTML5 <video> - Ҏ、属性以及事?/h2>
下面列出了大多数览器支持的视频Ҏ、属性和事gQ?/p>
| Ҏ | 属?/th> | 事g |
|---|---|---|
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | videoWidth | progress |
| canPlayType | videoHeight | error |
| duration | timeupdate | |
| ended | ended | |
| error | abort | |
| paused | empty | |
| muted | emptied | |
| seeking | waiting | |
| volume | loadedmetadata | |
| height | ||
| width |
注释Q?/span>在所有属性中Q只?videoWidth ?videoHeight 属性是立即可用的。在视频的元数据已加载后Q其他属性才可用?/p>
]]>
许多旉的网站都提供视频。HTML5 提供了展C频的标准?/span>
您的浏览器是否支持 HTML5 视频Q?/p>
Web 上的视频
直到现在Q仍然不存在一Ҏ在网上昄视频的标准?/p>
今天Q大多数视频是通过插gQ比?FlashQ来昄的。然而，q所有浏览器都拥有同L插g?/p>
HTML5 规定了一U通过 video 元素来包含视频的标准Ҏ?/p>
视频格式
当前Qvideo 元素支持三种视频格式Q?/p>
| 格式 | 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 文g
MPEG4 = 带有 H.264 视频~码?AAC 音频~码?MPEG 4 文g
WebM = 带有 VP8 视频~码?Vorbis 音频~码?WebM 文g
如何工作
如需?HTML5 中显C频，您所有需要的是：
<video src="movie.ogg" controls="controls"> </video>
control 属性供d播放、暂停和音量控g?/p>
包含宽度和高度属性也是不错的L?/p>
<video> ?</video> 之间插入的内Ҏ供不支持 video 元素的浏览器昄的：
实例
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
上面的例子用一?Ogg 文gQ适用于Firefox、Opera 以及 Chrome 览器?/p>
要确保适用?Safari 览器，视频文g必须?MPEG4 cd?/p>
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>
Internet Explorer
Internet Explorer 8 不支?video 元素。在 IE 9 中，提供对使用 MPEG4 ?video 元素的支持?/p>
<video> 标签的属?/h2>
| 属?/th> | ?/th> | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在qA后马上播放?/td> |
| controls | controls | 如果出现该属性，则向用户昄控gQ比如播放按钮?/td> |
| height | pixels | 讄视频播放器的高度?/td> |
| loop | loop | 如果出现该属性，则当媒介文g完成播放后再ơ开始播放?/td> |
| preload | preload | 如果出现该属性，则视频在面加蝲时进行加载，q备播放?/p> 如果使用 "autoplay"Q则忽略该属性?/p> |
| src | url | 要播攄视频?URL?/td> |
| width | pixels | 讄视频播放器的宽度?/td> |
相关面
参考手册：HTML 5 <video> 标签
]]>
HTML5 是下一代的 HTML?/span>
本教E向您讲?HTML5 中的新特性?/span>
每一章中的实?/h2>
通过我们?HTML ~辑器，您能够编?HTMLQ然后点L钮来查看l果?/p>
实例
<!DOCTYPE HTML> <html> <body> <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> </body> </html>
L?TIY 按钮来查看它是如何工作的?/p>
现在开始学?HTML5 Q?/p>
]]>