HTML5 事件
当用户访问我们的网站时，他们会点击文本，图片，链接，将鼠标悬停在某些东西上面等等。这些都是 JavaScript 调用事件的例子。
我们可以在 JavaScript 或者 vbscript 中编写事件处理程序，然后把这些事件处理程序指定为事件标签属性的值。下面列出了 HTML5 规范定义的各种事件属性。
当任意事件发生在 HTML5 元素上时，下列属性可以用来触发任何作为值提供的 JavaScript 和 vbscript 代码。
这里我们只涵盖元素特定的事件，后面的章节会详细讨论这些元素。
| 属性 | 值 | 描述 |
|---|
| offline | script | 文档进入离线状态时触发。 |
| onabort | script | 事件中断时触发。 |
| onafterprint | script | 文档被打印后触发。 |
| onbeforeonload | script | 文档载入前触发。 |
| onbeforeprint | script | 文档被打印前触发。 |
| onblur | script | 窗口失去焦点时触发。 |
| oncanplay | script | 媒体停止缓冲，可以开始播放时触发。 |
| oncanplaythrough | script | 媒体可以播放到结束时触发，无需停止缓冲。 |
| onchange | script | 元素发生变化时触发。 |
| onclick | script | 鼠标点击触发。 |
| oncontextmenu | script | 上下文菜单被触发时触发。 |
| ondblclick | script | 双击鼠标时触发。 |
| ondrag | script | 元素被拖动时触发。 |
| ondragend | script | 拖拽操作结束时触发。 |
| ondragenter | script | 元素被拖拽到有效放置目标时触发。 |
| ondragleave | script | 元素离开有效放置目标时触发。 |
| ondragover | script | 元素被拖放到有效目标上时触发。 |
| ondragstart | script | 拖拽操作开始时触发。 |
| ondrop | script | 拖动的元素被放置时触发。 |
| ondurationchange | script | 媒体时长改变时触发。 |
| onemptied | script | 媒体资源元素突然清空时触发。 |
| onended | script | 媒体到达终点时触发。 |
| onerror | script | 发生错误时触发。 |
| onfocus | script | 窗口获得焦点时触发。 |
| onformchange | script | 表单变化时触发。 |
| onforminput | script | 表单获得用户输入时触发。 |
| onhaschange | script | 文档变化时触发。 |
| oninput | script | 元素获得用户输入时触发。 |
| oninvalid | script | 元素失效时触发。 |
| onkeydown | script | 键盘按下时触发。 |
| onkeypress | script | 键盘按下并释放时触发。 |
| onkeyup | script | 按键释放时触发。 |
| onload | script | 载入文档时触发。 |
| onloadeddata | script | 载入媒体数据时触发。 |
| onloadedmetadata | script | 媒体元素的媒体数据载入时触发。 |
| onloadstart | script | 浏览器开始载入媒体数据时触发。 |
| onmessage | script | 消息被触发时触发。 |
| onmousedown | script | 鼠标按键被按下时触发。 |
| onmousemove | script | 鼠标指针移动时触发。 |
| onmouseout | script | 鼠标指针移出元素时触发。 |
| onmouseover | script | 鼠标指针移入元素时触发。 |
| onmouseup | script | 鼠标按键释放时触发。 |
| onmousewheel | script | 鼠标滚轮转动时触发。 |
| onoffline | script | 文档进入离线状态时触发。 |
| onoine | script | 文档上线时触发。 |
| ononline | script | 文档上线时触发。 |
| onpagehide | script | 窗口隐藏时触发。 |
| onpageshow | script | 窗口变得可见时触发。 |
| onpause | script | 媒体数据暂停时触发。 |
| onplay | script | 媒体数据开始播放时触发。 |
| onplaying | script | 媒体数据播放时触发。 |
| onpopstate | script | 窗口历史信息改变时触发。 |
| onprogress | script | 浏览器获取媒体数据时触发。 |
| onratechange | script | 媒体数据的播放比率改变时触发。 |
| onreadystatechange | script | ready-state 改变时触发。 |
| onredo | script | 文档执行 redo 操作时触发。 |
| onresize | script | 调整窗口尺寸时触发。 |
| onscroll | script | 元素的滚动条滚动时触发。 |
| onseeked | script | 媒体元素的 seeking 属性不在为真并结束时触发。 |
| onseeking | script | 媒体元素的 seeking 属性为真，seeking 开始时触发。 |
| onselect | script | 元素被选中时触发。 |
| onstalled | script | 获取媒体数据发生错误时触发。 |
| onstorage | script | 载入文档时触发。 |
| onsubmit | script | 表单提交时触发。 |
| onsuspend | script | 浏览器获取媒体数据，但获取整个媒体文件中止时触发。 |
| ontimeupdate | script | 媒体播放位置改变时触发。 |
| onundo | script | 文档执行 undo 操作时触发。 |
| onunload | script | 用户离开文档时触发。 |
| onvolumechange | script | 媒体音量发生变化，包括设置为“静音”时触发。 |
| onwaiting | script | 媒体停止播放，等待恢复时触发。 |
HTML5 表单 2.0
Web 表单 2.0 就是 HTML4 表单特性的一个扩展。HTML5 中的表单元素和属性相比 HTML4 提供了更大程度的语义标记，移除了大量 HTML4 中需要的繁琐脚本和样式。
HTML4 中的 <input> 元素
HTML4 输入框元素使用 type 属性指定数据类型。HTML4 提供了下列类型：
| 类型 | 描述 |
|---|
| text | 自由形式的文本字段，名义上没有换行符。 |
| password | 用于敏感信息的自由形式的文本字段，名义上没有换行符。 |
| checkbox | 预定义列表中的一组零个或多个值。 |
| radio | 一个枚举值。 |
| submit | 一个自由形式的启动表单的按钮。 |
| file | 带有 MIME 类型的任意文件以及可选的文件名。 |
| image | 一个坐标，相对于特定图片的尺寸，额外的语义是它必须是更后选中的值，同时启动表单提交。 |
| hidden | 默认不显示给用户的任意字符串。 |
| select | 枚举值，类似 radio 类型。 |
| textarea | 自由形式的文本字段，名义上没有换行的限制。 |
| button | 自由形式的按钮，可以启动按钮相关的任何事件。 |
下面是一个使用标注标签，单选按钮以及提交按钮的简单示例：
...
<form action="http://example.com/cgiscript.pl" method="post">
<p>
<label for="firstname">first name: </label>
<input type="text" id="firstname"><br />
<label for="lastname">last name: </label>
<input type="text" id="lastname"><br />
<label for="email">email: </label>
<input type="text" id="email"><br>
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female<br>
<input type="submit" value="send"> <input type="reset">
</p>
</form>
...
HTML5 中的 <input> 元素
除了上面提到的属性，HTML5 给输入框元素的 type 属性引入了几个新值。如下表所列。
注意： 请使用更新版的 Opera 浏览器运行下面所有例子。
| 类型 | 描述 |
|---|
| datetime-local | 按照 ISO 8601 编码的日期和时间（包括年，月，日，时，分，秒，分秒），不带时区信息。 |
| month | 由 ISO 8601 编码的年和月组成的日期。 |
| time | 按照 ISO 8601 编码时间（包括时，分，秒，和分秒）。 |
| range | range 类型适用于应该包含某个范围内数值的输入字段。 |
| url | 只接受 URL 值。这个类型适用于应该包含一个 URL 地址的输入字段。如果尝试提交一个简单的文本，它会强制要求输入 http://www.example.com 或者 http://example.com 格式的 URL 地址。 |
<output> 元素
HTML5 还引入了一个新元素 <output>，用来表示不同类型的输出结果，比如输出由脚本所写。
还可以用 for 属性指定输出元素和文档中影响计算的其他元素之间的关系（比如，作为输入源或者参数）。for 属性的值是一个由空格分隔的其他元素的 IDs 列表。
required 属性
现在，我们不需要使用 JavaScript 处理诸如空文本框永远不能被提交的这类客户端验证了，因为 HTML5 引入了一个叫做 required 的新属性，可以按照如下方式使用，它会保证输入框有值：
<input type="text" name="search" required/>
这个属性只有更新版的 Mozilla，Safari 以及 Chrome 浏览器支持。
便于学习这一概念 - 请进行<a rel="nofollow" href="http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-57.htm" "="" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration: none;">在线练习。
HTML5 SVG 教程
SVG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。
SVG 主要用于矢量类型的图表，比如饼图，X，Y 坐标系统中的二维图等等。
SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准，你可以在 Adobe SVG 阅读器 以便能够在浏览器中查看 SVG。
在 HTML5 中嵌入 SVG
HTML5 允许我们直接使用 __<svg>...</svg> 标签嵌入 SVG，下面是简单的语法：
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
FireFox 3.7 还引入了一个配置选项（"about:config"），可以通过下列步骤启用 HTML5：
在 FireFox 地址栏中输入 about:config。
在出现警告消息的地方点击 “I'll be careful, I promise!” 按钮（确保遵守它）。
在页面顶部的过滤器中输入 html5.enable。
默认可能被禁用了，因此要点击它切换它的值为 true。
现在，FireFox HTML5 解析器应该启用了，然后可以实验下面的例子。
HTML5 - SVG 圆
下面是一个 SVG 示例的 HTML5 版本，用 <circle> 标签绘制一个圆：
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
在启用 HTML5 的更新版 FireFox 中会生成如下结果：
![HTML5 SVG Circle]()
HTML5 - SVG 线条
下面是一个 SVG 示例的 HTML5 版本，用 <line> 标签绘制一个线条：
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100"
style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>
你可以使用 style 属性给它设置额外的样式信息，比如笔画，填充色，笔画宽度等等。
在启用 HTML5 的更新版 FireFox 中会生成如下结果：
![HTML5 SVG Line]()
HTML5 - SVG 多边形
下面是一个 SVG 示例的 HTML5 版本，用 <polygon> 标签绘制一个多边形：
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>
在启用 HTML5 的更新版 FireFox 中会生成如下结果：
![HTML5 SVG Polygon]()
HTML5 - SVG 渐变
下面是一个 SVG 示例的 HTML5 版本，用 <ellipse> 标签绘制一个椭圆，使用 <radialGradient> 标签定义一个 SVG 径向渐变。
我们可以以类似的方式用 <linearGradient> 标签创建 SVG 线性渐变。
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50"
style="fill:url(#gradient)" />
</svg>
</body>
</html>
在启用 HTML5 的更新版 FireFox 中会生成如下结果：
![HTML5 SVG Gradient Ellipse]()
