H5开发（二）：HTML5 SVG 教程、事件、表单
adinnet/2017-08-30 13:57/微信开发
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 线条
下面是一个 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 多边形
下面是一个 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 渐变
下面是一个 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 中会生成如下结果：
