HTML5简介
HTML5是下一代的 HTML。
什么是HTML5?
HTML5将成为HTML、XHTML以及HTML DOM的新标准。
HTML的上一个版本诞生于1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5支持。
HTML5是如何起步的?
HTML5是W3C与WHATWG合作的结果。
W3C指World Wide Web Consortium,万维网联盟。
WHATWG指Web Hypertext Application Technology Working Group。
WHATWG致力于web表单和应用程序,而W3C专注于XHTML 2.0。在2006 年,双方决定进行合作,来创建一个新版本的HTML。
为HTML5建立的一些规则:
- 新特性应该基于HTML、CSS、DOM以及JavaScript
- 减少对外部插件的需求(比如Flash)
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5应该独立于设备
- 开发进程应对公众透明
新特性
HTML5中的一些有趣的新特性:
- 用于绘画的canvas元素
- 用于媒介回放的video和audio元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如article、footer、header、nav、section
- 新的表单控件,比如calendar、date、time、email、url、search
浏览器支持
最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5特性。Internet Explorer 9 将支持某些HTML5特性。
HTML5视频
许多时髦的网站都提供视频。HTML5提供了展示视频的标准。
Web上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过video元素来包含视频的标准方法。
视频格式
当前,video元素支持两种视频格式:
Internet Explorer | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
---|---|---|---|---|---|
Ogg | √ | √ | √ | ||
MPEG4 | √ | √ |
Ogg:带有Thedora 视频编码和Vorbis 音频编码的Ogg文件
MPEG4:带有H.264 视频编码和AAC 音频编码的MPEG 4文件
如何工作
如需在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>
Internet Explorer
Internet Explorer 8不支持video元素。在IE9中,将提供对使用MPEG4的video元素的支持。
video标签的属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用”autoplay”,则忽略该属性。 |
src | url | 要播放的视频的URL。 |
width | pixels | 设置视频播放器的宽度。 |
HTML5音频
HTML5提供了播放音频的标准。
Web上的音频
直到现在,仍然不存在一项旨在网页上播放音频的标准。
今天,大多数音频是通过插件(比如Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5规定了一种通过audio元素来包含音频的标准方法。
audio元素能够播放声音文件或者音频流。
音频格式
当前,audio元素支持三种音频格式:
Internet Explorer | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
---|---|---|---|---|---|
Ogg Vorbis | √ | √ | √ | ||
MP3 | √ | √ | |||
Wav | √ | √ | √ |
如何工作
如需在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>
Internet Explorer
Internet Explorer 8不支持audio元素。在IE 9中,将提供对audio元素的支持。
audio标签的属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用”autoplay”,则忽略该属性。 |
src | url | 要播放的音频的URL。 |
HTML5 Canvas
canvas元素用于在网页上绘制图形。
什么是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)。意思是:在画布上绘制150×75的矩形,从左上角开始(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>
HTML5 Web存储
在客户端存储数据
HTML5提供了两种在客户端存储数据的新方法:
- localStorage – 没有时间限制的数据存储
- sessionStorage – 针对一个session的数据存储
之前,这些都是由cookie完成的。但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。
在HTML5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5使用JavaScript来存储和访问数据。
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>
HTML5 Input类型
HTML5新的Input类型
HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型:
- url
- number
- range
- Date pickers(date, month, week, time, datetime, datetime-local)
- search
- color
浏览器支持
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
× | × | 9.0 | × | × | |
url | × | × | 9.0 | × | × |
number | × | × | 9.0 | × | × |
range | × | × | 9.0 | 4.0 | 4.0 |
Date | pickers | × | × | 9.0 | × |
search | × | × | × | × | × |
color | × | × | × | × | × |
注:Opera对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。
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搜索。
search域显示为常规的文本域。
HTML5表单元素
HTML5的新的表单元素:
HTML5拥有若干涉及表单的元素和属性。
本章介绍以下新的表单元素:
- datalist
- keygen
- output
浏览器支持
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
datalist | × | × | 9.5 | × | × |
keygen | × | × | 10.5 | 3.0 | × |
output | × | × | 9.5 | × | × |
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表单属性
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" />
HTML5标准属性
所有HTML5标签均支持下面列出的属性,仅有少数例外。
HTML5标准属性
HTML5中新的标准属性。
注释:HTML 4.01不再支持accesskey属性。
属性 | 值 | 描述 |
---|---|---|
accesskey | character | 规定访问元素的键盘快捷键。 |
class | classname | 规定元素的类名(用于规定样式表中的类)。 |
contenteditable | boolean | 规定是否允许用户编辑内容。 |
contextmenu | menu_id | 规定元素的上下文菜单。 |
data-yourvalue | value | 创作者定义的属性,HTML文档的创作者可以定义他们自己的属性,必须以”data-” 开头。 |
dir | ltr rtl |
规定元素中内容的文本方向。 |
draggable | true false auto |
规定是否允许用户拖动元素。 |
hidden | hidden | 规定该元素是无关的,被隐藏的元素不会显示。 |
id | id | 规定元素的唯一ID。 |
item | empty url |
用于组合元素。 |
itemprop | url group |
value用于组合项目。 |
lang | language_code | 规定元素中内容的语言代码。 |
spellcheck | true false |
规定是否必须对元素进行拼写或语法检查。 |
style | style_definition | 规定元素的行内样式。 |
subject | id | 规定元素对应的项目。 |
tabindex | number | 规定元素的tab键控制次序。 |
title | text | 规定有关元素的额外信息。 |
HTML5事件属性
标准事件属性
HTML4增加了通过事件触发浏览器中行为的能力,比如当用户点击某个元素时启动一段JavaScript。
下面的表格列出了可插入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 | 当文档执行撤销操作时运行脚本。 |
onunload | script | 当用户离开文档时运行脚本。 |
表单事件
由HTML表单内部的动作触发的事件。
适用于所有HTML5元素,不过最常用于表单元素中:
属性 | 值 | 描述 |
---|---|---|
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 | 当滚动元素滚动元素的滚动条时运行脚本。 |
媒介事件
由视频、图像以及音频等媒介触发的事件。
适用于所有HTML5元素,不过在媒介元素(诸如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 | 当媒介已停止播放但打算继续播放时运行脚本。 |