该博客详细介绍了 HTML5 的多种特性。涵盖 <video>、<audio> 标签的使用，拖放实例操作，Canvas 绘图、SVG 图形，地理定位、Web 存储、应用程序缓存等功能，还介绍了 HTML5 表单元素、属性及 <meta> 标签的相关知识。
如何工作
如需在 HTML5 中显示视频，您所有需要的是：
<video src="movie.ogg" controls="controls"> </video>
control 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：
实例
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
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>
<video> 标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
HTML5 <video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件：
| 方法 | 属性 | 事件 |
|---|---|---|
| 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 |
如何工作
如需在 HTML5 中播放音频，您所有需要的是：
<audio src="song.ogg" controls="controls"> </audio>
control 属性供添加播放、暂停和音量控件。
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：
实例
<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，音频文件必须是 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>
HTML5 拖放实例
下面的例子是一个简单的拖放实例：
实例
<!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" οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="drag(event)" width="336" height="69" />
</body>
</html>
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 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")
- 把被拖元素追加到放置元素（目标元素）
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
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);
</script>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
更多 Canvas 实例
下面的在 canvas 元素上进行绘画的更多实例：
实例 - 线条
通过指定从何处开始，在何处结束，来绘制一条线：
JavaScript 代码：
<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 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
实例 - 圆形
通过规定尺寸、颜色和位置，来绘制一个圆：
JavaScript 代码：
<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 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
实例 - 渐变
使用您指定的颜色来绘制渐变背景：
JavaScript 代码：
<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 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
实例 - 图像
把一幅图像放置到画布上：
JavaScript 代码：
<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 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
HTML 5 Canvas vs. SVG
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
HTML5 地理定位
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。
实例
<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>
例子解释：
- 检测是否支持地理定位
- 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
- 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
- showPosition() 函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本，不含错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：
实例
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;
}
}
错误代码：
- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时
在地图中显示结果
如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：
实例
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+"' />";
}
在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。
给定位置的信息
本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。
案例：
- 更新本地信息
- 显示用户周围的兴趣点
- 交互式车载导航系统 (GPS)
getCurrentPosition() 方法 - 返回数据
若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：
实例
<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>
HTML 5 Web 存储
在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：
实例
<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname); </script>
下面的例子对用户访问页面的次数进行计数：
实例
<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 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
实例
<script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname); </script>
下面的例子对用户在当前 session 中访问页面的次数进行计数：
实例
<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>
HTML 5 应用程序缓存
什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
HTML5 Cache Manifest 实例
下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：
实例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Cache Manifest 基础
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST /theme.css /logo.gif /main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：
NETWORK: login.asp
可以使用星号来指示所有其他其他资源/文件都需要因特网连接：
NETWORK: *
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：
FALLBACK: /html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
- 用户清空浏览器缓存
- manifest 文件被修改（参阅下面的提示）
- 由程序来更新应用缓存
实例 - 完整的 Manifest 文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注释
请留心缓存的内容。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
HTML 5 Web Workers
什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
检测 Web Worker 支持
在创建 web worker 之前，请检测用户的浏览器是否支持它：
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
创建 web worker 文件
现在，让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
注释：web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
创建 Web Worker 对象
我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。
下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
终止 Web Worker
当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
w.terminate();
完整的 Web Worker 实例代码
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：
实例
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button οnclick="startWorker()">Start Worker</button>
<button οnclick="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 位于外部文件中，它们无法访问下例 JavaScript 对象：
- window 对象
- document 对象
- parent 对象
HTML 5 服务器发送事件
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知：
实例
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
例子解释：
- 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
- 每接收到一次更新，就会发生 onmessage 事件
- 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
检测 Server-Sent 事件支持
在上面的 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}
服务器端代码实例
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。
PHP 代码 (demo_sse.php)：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
代码解释：
- 把报头 "Content-Type" 设置为 "text/event-stream"
- 规定不对页面进行缓存
- 输出发送日期（始终以 "data: " 开头）
- 向网页刷新输出数据
EventSource 对象
在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：
| 事件 | 描述 |
|---|---|
| onopen | 当通往服务器的连接被打开 |
| onmessage | 当接收到消息 |
| onerror | 当错误发生 |
HTML5 Input 类型
TML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时，会自动验证 email 域的值。
实例
E-mail: <input type="email" name="user_email" />
提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。
Input 类型 - url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
实例
Homepage: <input type="url" name="user_url" />
提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。
Input 类型 - number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定：
实例
Points: <input type="number" name="points" min="1" max="10" />
请使用下面的属性来规定对数字类型的限定：
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
请试一下带有所有限定属性的例子：亲自试一试
提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定：
实例
<input type="range" name="points" min="1" max="10" />
请使用下面的属性来规定对数字类型的限定：
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
下面的例子允许您从日历中选取一个日期：
实例
Date: <input type="date" name="user_date" />
输入类型 "month": 亲自试一试
输入类型 "week": 亲自试一试
输入类型 "time": 亲自试一试
输入类型 "datetime": 亲自试一试
输入类型 "datetime-local": 亲自试一试
Input 类型 - search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
HTML5 表单元素
HTML5 的新的表单元素：
HTML5 拥有若干涉及表单的元素和属性。
本章介绍以下新的表单元素：
- datalist
- keygen
- output
datalist 元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
实例
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>
提示：option 元素永远都要设置 value 属性。
keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
实例
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
output 元素
output 元素用于不同类型的输出，比如计算或脚本输出：
实例
<output id="result" onforminput="resCalc()"></output>
HTML5 的新的表单属性
本章讲解涉及 <form> 和 <input> 元素的新属性。
新的 form 属性：
- autocomplete
- novalidate
新的 input 属性：
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
浏览器支持
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | No | No | 10.0 | 3.0 | 4.0 |
| form | No | No | 9.5 | No | No |
| form overrides | No | No | 10.5 | No | No |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | No | No | 9.5 | No | No |
| min, max and step | No | No | 9.5 | 3.0 | No |
| multiple | No | 3.5 | No | 3.0 | 4.0 |
| novalidate | No | No | No | No | No |
| pattern | No | No | 9.5 | 3.0 | No |
| placeholder | No | No | No | 3.0 | 3.0 |
| required | No | No | 9.5 | 3.0 | No |
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
实例
<form action="demo_form.asp" method="get"autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email"autocomplete="off"/><br /> <input type="submit" /> </form>
注释：在某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有 <input> 标签的类型。
实例
User name: <input type="text" name="user_name" autofocus="autofocus" />
form 属性
form 属性规定输入域所属的一个或多个表单。
注释：form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id：
实例
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
注释：如需引用一个以上的表单，请使用空格分隔的列表。
表单重写属性
表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
表单重写属性有：
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
注释：表单重写属性适用于以下类型的 <input> 标签：submit 和 image。
实例
<form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit"formaction="demo_admin.asp"value="Submit as admin" /> <br /> <input type="submit"formnovalidate="true"value="Submit without validation" /> <br /> </form>
注释：这些属性对于创建不同的提交按钮很有帮助。
height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释：height 和 width 属性只适用于 image 类型的 <input> 标签。
实例
<input type="image" src="img_submit.gif"width="99"height="99"/>
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
实例
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：
实例
Points: <input type="number" name="points"min="0"max="10"step="3"/>
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。
实例
Select images: <input type="file" name="img" multiple="multiple" />
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.
实例
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
pattern 属性
pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
实例
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：
实例
<input type="search" name="user_search" placeholder="Search W3School" />
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
实例
Name: <input type="text" name="usr_name" required="required" />
按字母顺序排列的标签列表
new : HTML5 中的新标签。
| 标签 | 描述 |
|---|---|
| <!--...--> | 定义注释。 |
| <!DOCTYPE> | 定义文档类型。 |
| <a> | 定义超链接。 |
| <abbr> | 定义缩写。 |
| <acronym> | HTML 5 中不支持。定义首字母缩写。 |
| <address> | 定义地址元素。 |
| <applet> | HTML 5 中不支持。定义 applet。 |
| <area> | 定义图像映射中的区域。 |
| <article> | 定义 article。 |
| <aside> | 定义页面内容之外的内容。 |
| <audio> | 定义声音内容。 |
| <b> | 定义粗体文本。 |
| <base> | 定义页面中所有链接的基准 URL。 |
| <basefont> | HTML 5 中不支持。请使用 CSS 代替。 |
| <bdi> | 定义文本的文本方向，使其脱离其周围文本的方向设置。 |
| <bdo> | 定义文本显示的方向。 |
| <big> | HTML 5 中不支持。定义大号文本。 |
| <blockquote> | 定义长的引用。 |
| <body> | 定义 body 元素。 |
| <br> | 插入换行符。 |
| <button> | 定义按钮。 |
| <canvas> | 定义图形。 |
| <caption> | 定义表格标题。 |
| <center> | HTML 5 中不支持。定义居中的文本。 |
| <cite> | 定义引用。 |
| <code> | 定义计算机代码文本。 |
| <col> | 定义表格列的属性。 |
| <colgroup> | 定义表格列的分组。 |
| <command> | 定义命令按钮。 |
| <datalist> | 定义下拉列表。 |
| <dd> | 定义定义的描述。 |
| <del> | 定义删除文本。 |
| <details> | 定义元素的细节。 |
| <dfn> | 定义定义项目。 |
| <dir> | HTML 5 中不支持。定义目录列表。 |
| <div> | 定义文档中的一个部分。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义的项目。 |
| <em> | 定义强调文本。 |
| <embed> | 定义外部交互内容或插件。 |
| <fieldset> | 定义 fieldset。 |
| <figcaption> | 定义 figure 元素的标题。 |
| <figure> | 定义媒介内容的分组，以及它们的标题。 |
| <font> | HTML 5 中不支持。 |
| <footer> | 定义 section 或 page 的页脚。 |
| <form> | 定义表单。 |
| <frame> | HTML 5 中不支持。定义子窗口（框架）。 |
| <frameset> | HTML 5 中不支持。定义框架的集。 |
| <h1> to <h6> | 定义标题 1 到标题 6。 |
| <head> | 定义关于文档的信息。 |
| <header> | 定义 section 或 page 的页眉。 |
| <hgroup> | 定义有关文档中的 section 的信息。 |
| <hr> | 定义水平线。 |
| <html> | 定义 html 文档。 |
| <i> | 定义斜体文本。 |
| <iframe> | 定义行内的子窗口（框架）。 |
| <img> | 定义图像。 |
| <input> | 定义输入域。 |
| <ins> | 定义插入文本。 |
| <keygen> | 定义生成密钥。 |
| <isindex> | HTML 5 中不支持。定义单行的输入域。 |
| <kbd> | 定义键盘文本。 |
| <label> | 定义表单控件的标注。 |
| <legend> | 定义 fieldset 中的标题。 |
| <li> | 定义列表的项目。 |
| <link> | 定义资源引用。 |
| <map> | 定义图像映射。 |
| <mark> | 定义有记号的文本。 |
| <menu> | 定义菜单列表。 |
| <meta> | 定义元信息。 |
| <meter> | 定义预定义范围内的度量。 |
| <nav> | 定义导航链接。 |
| <noframes> | HTML 5 中不支持。定义 noframe 部分。 |
| <noscript> | 定义 noscript 部分。 |
| <object> | 定义嵌入对象。 |
| <ol> | 定义有序列表。 |
| <optgroup> | 定义选项组。 |
| <option> | 定义下拉列表中的选项。 |
| <output> | 定义输出的一些类型。 |
| <p> | 定义段落。 |
| <param> | 为对象定义参数。 |
| <pre> | 定义预格式化文本。 |
| <progress> | 定义任何类型的任务的进度。 |
| <q> | 定义短的引用。 |
| <rp> | 定义若浏览器不支持 ruby 元素显示的内容。 |
| <rt> | 定义 ruby 注释的解释。 |
| <ruby> | 定义 ruby 注释。 |
| <s> | HTML 5 中不支持。定义加删除线的文本。 |
| <samp> | 定义样本计算机代码。 |
| <script> | 定义脚本。 |
| <section> | 定义 section。 |
| <select> | 定义可选列表。 |
| <small> | 将旁注 (side comments) 呈现为小型文本。 |
| <source> | 定义媒介源。 |
| <span> | 定义文档中的 section。 |
| <strike> | HTML 5 中不支持。定义加删除线的文本。 |
| <strong> | 定义强调文本。 |
| <style> | 定义样式定义。 |
| <sub> | 定义下标文本。 |
| <summary> | 定义 details 元素的标题。 |
| <sup> | 定义上标文本。 |
| <table> | 定义表格。 |
| <tbody> | 定义表格的主体。 |
| <td> | 定义表格单元。 |
| <textarea> | 定义 textarea。 |
| <tfoot> | 定义表格的脚注。 |
| <th> | 定义表头。 |
| <thead> | 定义表头。 |
| <time> | 定义日期/时间。 |
| <title> | 定义文档的标题。 |
| <tr> | 定义表格行。 |
| <track> | 定义用在媒体播放器中的文本轨道。 |
| <tt> | HTML 5 中不支持。定义打字机文本。 |
| <u> | HTML 5 中不支持。定义下划线文本。 |
| <ul> | 定义无序列表。 |
| <var> | 定义变量。 |
| <video> | 定义视频。 |
| <xmp> | HTML 5 中不支持。定义预格式文本。 |
所有 HTML 5 标签均支持下面列出的属性，仅有少数例外。
HTML 5 标准属性
NEW：HTML 5 中新的标准属性。
注释：HTML 4.01 不再支持 accesskey 属性：
| 属性 | 值 | 描述 |
|---|---|---|
| accesskey | character | 规定访问元素的键盘快捷键 |
| class | classname | 规定元素的类名（用于规定样式表中的类）。 |
| contenteditable |
| 规定是否允许用户编辑内容。 |
| contextmenu | menu_id | 规定元素的上下文菜单。 |
| data-yourvalue | value | 创作者定义的属性。 HTML 文档的创作者可以定义他们自己的属性。 必须以 "data-" 开头。 |
| dir |
| 规定元素中内容的文本方向。 |
| draggable |
| 规定是否允许用户拖动元素。 |
| hidden | hidden | 规定该元素是无关的。被隐藏的元素不会显示。 |
| id | id | 规定元素的唯一 ID。 |
| item |
| 用于组合元素。 |
| itemprop |
| 用于组合项目。 |
| lang | language_code | 规定元素中内容的语言代码。语言代码参考手册。 |
| spellcheck |
| 规定是否必须对元素进行拼写或语法检查。 |
| style | style_definition | 规定元素的行内样式。 |
| subject | id | 规定元素对应的项目。 |
| tabindex | number | 规定元素的 tab 键控制次序。 |
| title | text | 规定有关元素的额外信息。 |
全局事件属性
HTML 4 增加了通过事件触发浏览器中行为的能力，比如当用户点击某个元素时启动一段 JavaScript。
如果需要学习更多有关使用这些事件进行编程的内容，请学习我们的 JavaScript 教程 和 DHTML 教程。
下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性。
- Window 事件属性 - Window Event Attributes
- 表单事件 - Form Events
- 键盘事件 - Keybord Events
- 鼠标事件 - Mouse Events
- 媒介事件 - Media Events
new：HTML 5 中的新的事件属性。
Window 事件属性
window 对象触发的事件。
适用于 <body> 标签：
| 属性 | 值 | 描述 |
|---|---|---|
| onafterprint | script | 在打印文档之后运行脚本 |
| onbeforeprint | script | 在文档打印之前运行脚本 |
| onbeforeonload | script | 在文档加载之前运行脚本 |
| onblur | script | 当窗口失去焦点时运行脚本 |
| onerror | script | 当错误发生时运行脚本 |
| onfocus | script | 当窗口获得焦点时运行脚本 |
| onhaschange | script | 当文档改变时运行脚本 |
| onload | script | 当文档加载时运行脚本 |
| onmessage | script | 当触发消息时运行脚本 |
| onoffline | script | 当文档离线时运行脚本 |
| ononline | script | 当文档上线时运行脚本 |
| onpagehide | script | 当窗口隐藏时运行脚本 |
| onpageshow | script | 当窗口可见时运行脚本 |
| onpopstate | script | 当窗口历史记录改变时运行脚本 |
| onredo | script | 当文档执行再执行操作（redo）时运行脚本 |
| onresize | script | 当调整窗口大小时运行脚本 |
| onstorage | script | 当文档加载加载时运行脚本 |
| onundo | script | 当 Web Storage 区域更新时（存储空间中的数据发生变化时） |
| onunload | script | 当用户离开文档时运行脚本 |
表单事件
由 HTML 表单内部的动作触发的事件。
适用于所有 HTML 5 元素，不过最常用于表单元素中：
| 属性 | 值 | 描述 |
|---|---|---|
| onblur | script | 当元素失去焦点时运行脚本 |
| onchange | script | 当元素改变时运行脚本 |
| oncontextmenu | script | 当触发上下文菜单时运行脚本 |
| onfocus | script | 当元素获得焦点时运行脚本 |
| onformchange | script | 当表单改变时运行脚本 |
| onforminput | script | 当表单获得用户输入时运行脚本 |
| oninput | script | 当元素获得用户输入时运行脚本 |
| oninvalid | script | 当元素无效时运行脚本 |
| onreset | script | 当表单重置时运行脚本。HTML 5 不支持。 |
| onselect | script | 当选取元素时运行脚本 |
| onsubmit | script | 当提交表单时运行脚本 |
键盘事件
由键盘触发的事件。
适用于所有 HTML 5 元素：
| 属性 | 值 | 描述 |
|---|---|---|
| onkeydown | script | 当按下按键时运行脚本 |
| onkeypress | script | 当按下并松开按键时运行脚本 |
| onkeyup | script | 当松开按键时运行脚本 |
鼠标事件
由鼠标或相似的用户动作触发的事件。
适用于所有 HTML 5 元素：
| 属性 | 值 | 描述 |
|---|---|---|
| onclick | script | 当单击鼠标时运行脚本 |
| ondblclick | script | 当双击鼠标时运行脚本 |
| ondrag | script | 当拖动元素时运行脚本 |
| ondragend | script | 当拖动操作结束时运行脚本 |
| ondragenter | script | 当元素被拖动至有效的拖放目标时运行脚本 |
| ondragleave | script | 当元素离开有效拖放目标时运行脚本 |
| ondragover | script | 当元素被拖动至有效拖放目标上方时运行脚本 |
| ondragstart | script | 当拖动操作开始时运行脚本 |
| ondrop | script | 当被拖动元素正在被拖放时运行脚本 |
| onmousedown | script | 当按下鼠标按钮时运行脚本 |
| onmousemove | script | 当鼠标指针移动时运行脚本 |
| onmouseout | script | 当鼠标指针移出元素时运行脚本 |
| onmouseover | script | 当鼠标指针移至元素之上时运行脚本 |
| onmouseup | script | 当松开鼠标按钮时运行脚本 |
| onmousewheel | script | 当转动鼠标滚轮时运行脚本 |
| onscroll | script | 当滚动元素滚动元素的滚动条时运行脚本 |
媒介事件
由视频、图像以及音频等媒介触发的事件。
适用于所有 HTML 5 元素，不过在媒介元素（诸如 audio、embed、img、object 以及 video）中最常用：
| 属性 | 值 | 描述 |
|---|---|---|
| onabort | script | 当发生中止事件时运行脚本 |
| oncanplay | script | 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 |
| oncanplaythrough | script | 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本 |
| ondurationchange | script | 当媒介长度改变时运行脚本 |
| onemptied | script | 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本 |
| onended | script | 当媒介已抵达结尾时运行脚本 |
| onerror | script | 当在元素加载期间发生错误时运行脚本 |
| onloadeddata | script | 当加载媒介数据时运行脚本 |
| onloadedmetadata | script | 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本 |
| onloadstart | script | 当浏览器开始加载媒介数据时运行脚本 |
| onpause | script | 当媒介数据暂停时运行脚本 |
| onplay | script | 当媒介数据将要开始播放时运行脚本 |
| onplaying | script | 当媒介数据已开始播放时运行脚本 |
| onprogress | script | 当浏览器正在取媒介数据时运行脚本 |
| onratechange | script | 当媒介数据的播放速率改变时运行脚本 |
| onreadystatechange | script | 当就绪状态（ready-state）改变时运行脚本 |
| onseeked | script | 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本 |
| onseeking | script | 当媒介元素的定位属性为真且定位已开始时运行脚本 |
| onstalled | script | 当取回媒介数据过程中（延迟）存在错误时运行脚本 |
| onsuspend | script | 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本 |
| ontimeupdate | script | 当媒介改变其播放位置时运行脚本 |
| onvolumechange | script | 当媒介改变音量亦或当音量被设置为静音时运行脚本 |
| onwaiting | script | 当媒介已停止播放但打算继续播放时运行脚本 |
[1]：定位属性的英文译文是：seeking attribute。
HTML 5 Canvas 参考手册
描述
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
颜色、样式和阴影
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回用于阴影的模糊级别 |
| shadowOffsetX | 设置或返回阴影距形状的水平距离 |
| shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建线性渐变（用在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上） |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
线条样式
| 属性 | 描述 |
|---|---|
| lineCap | 设置或返回线条的结束端点样式 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 |
| lineWidth | 设置或返回当前的线条宽度 |
| miterLimit | 设置或返回最大斜接长度 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 创建矩形 |
| fillRect() | 绘制“被填充”的矩形 |
| strokeRect() | 绘制矩形（无填充） |
| clearRect() | 在给定的矩形内清除指定的像素 |
路径
| 方法 | 描述 |
|---|---|
| fill() | 填充当前绘图（路径） |
| stroke() | 绘制已定义的路径 |
| beginPath() | 起始一条路径，或重置当前路径 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 |
| closePath() | 创建从当前点回到起始点的路径 |
| lineTo() | 添加一个新点，然后在画布中创建从该点到最后指定点的线条 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
| isPointInPath() | 如果指定的点位于当前路径中，则返回 true，否则返回 false |
转换
| 方法 | 描述 |
|---|---|
| scale() | 缩放当前绘图至更大或更小 |
| rotate() | 旋转当前绘图 |
| translate() | 重新映射画布上的 (0,0) 位置 |
| transform() | 替换绘图的当前转换矩阵 |
| setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
文本
| 属性 | 描述 |
|---|---|
| font | 设置或返回文本内容的当前字体属性 |
| textAlign | 设置或返回文本内容的当前对齐方式 |
| textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
| 方法 | 描述 |
|---|---|
| fillText() | 在画布上绘制“被填充的”文本 |
| strokeText() | 在画布上绘制文本（无填充） |
| measureText() | 返回包含指定文本宽度的对象 |
图像绘制
| 方法 | 描述 |
|---|---|
| drawImage() | 向画布上绘制图像、画布或视频 |
像素操作
| 属性 | 描述 |
|---|---|
| width | 返回 ImageData 对象的宽度 |
| height | 返回 ImageData 对象的高度 |
| data | 返回一个对象，其包含指定的 ImageData 对象的图像数据 |
| 方法 | 描述 |
|---|---|
| createImageData() | 创建新的、空白的 ImageData 对象 |
| getImageData() | 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 |
| putImageData() | 把图像数据（从指定的 ImageData 对象）放回画布上 |
合成
| 属性 | 描述 |
|---|---|
| globalAlpha | 设置或返回绘图的当前 alpha 或透明值 |
| globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存当前环境的状态 |
| restore() | 返回之前保存过的路径状态和属性 |
| createEvent() | |
| getContext() | |
| toDataURL() |
HTML 5 <meta> 标签
定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 5 中，不再支持 scheme 属性。
在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。
在 HTML 4.01 中，不得不这么写：
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
在 HTML 5 中，这样就够了：
<meta charset="ISO-8859-1">
提示和注释
提示：请使用 CSS 来定义列表的类型。
例子
定义针对搜索引擎的关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
定义对页面的描述：
<meta name="description" content="免费的 web 技术教程。" />
定义页面的最新版本：
<meta name="revised" content="David, 2008/8/8/" />
每 5 秒刷新一次页面：
<meta http-equiv="refresh" content="5" />
属性
| 属性 | 值 | 描述 | 4 | 5 |
|---|---|---|---|---|
| charset | character encoding | 定义文档的字符编码。 | 5 | |
| content | some_text | 定义与 http-equiv 或 name 属性相关的元信息。 | 4 | 5 |
| http-equiv |
| 把 content 属性关联到 HTTP 头部。 | 4 | 5 |
| name |
| 把 content 属性关联到一个名称。 | 4 | 5 |
| scheme | some_text | 定义用于翻译 content 属性值的格式。不支持。 | 4 |
全局属性
<meta> 标签支持 HTML 5 中的全局属性。
事件属性
<meta> 标签支持 HTML 5 中的事件属性。
- bars
- edit
- arrow-l
- arrow-r
- arrow-u
- arrow-d
- delete
- plus
- minus
- check
- gear
- refresh
- forward
- back
- grid
- star
- alert
- info
- home
- search
扫一扫
7169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
