智慧场景数字孪生开发资讯设计沙龙

主页 > 洞察 > 开发资讯 > 微信开发

常见问题84 APP开发1348 微信开发61 网站开发196 APP行业动态181 APP运营16 课件制作8 小程序开发343 小程序运营8 新媒体运营65

开发方案: 幼教数字化内容课件; 大屏数据可视化; 新零售渠道中台; 医疗健康

最新文章: 1.微信二次开发可以实现哪些功能？; 2.2017小程序新增7大功能解读; 3.浅析二次微信开发可实现的功能; 4.游戏类微信小程序开发前景; 5.微信公众号开发：连接商业与用户的新桥梁

热门文章

最新标签: IT人力外包; 智慧楼宇解决方案; 数字孪生; 数据可视化

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 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

本文标签：

上一篇：H5开发（三）：HTML5 MathML 教程、Web 存储、Web SQL 数据库下一篇：浅谈：智能电视app和UI界面设计