主页 > 洞察 > 开发资讯 > 微信开发
  • H5开发(二):HTML5 SVG 教程、事件、表单

    adinnet / 2017-08-30 13:57 /微信开发

    HTML5 事件

    当用户访问我们的网站时,他们会点击文本,图片,链接,将鼠标悬停在某些东西上面等等。这些都是 JavaScript 调用事件的例子。

    我们可以在 JavaScript 或者 vbscript 中编写事件处理程序,然后把这些事件处理程序指定为事件标签属性的值。下面列出了 HTML5 规范定义的各种事件属性。

    当任意事件发生在 HTML5 元素上时,下列属性可以用来触发任何作为值提供的 JavaScript 和 vbscript 代码。

    这里我们只涵盖元素特定的事件,后面的章节会详细讨论这些元素。

    属性描述
    offlinescript文档进入离线状态时触发。
    onabortscript事件中断时触发。
    onafterprintscript文档被打印后触发。
    onbeforeonloadscript文档载入前触发。
    onbeforeprintscript文档被打印前触发。
    onblurscript窗口失去焦点时触发。
    oncanplayscript媒体停止缓冲,可以开始播放时触发。
    oncanplaythroughscript媒体可以播放到结束时触发,无需停止缓冲。
    onchangescript元素发生变化时触发。
    onclickscript鼠标点击触发。
    oncontextmenuscript上下文菜单被触发时触发。
    ondblclickscript双击鼠标时触发。
    ondragscript元素被拖动时触发。
    ondragendscript拖拽操作结束时触发。
    ondragenterscript元素被拖拽到有效放置目标时触发。
    ondragleavescript元素离开有效放置目标时触发。
    ondragoverscript元素被拖放到有效目标上时触发。
    ondragstartscript拖拽操作开始时触发。
    ondropscript拖动的元素被放置时触发。
    ondurationchangescript媒体时长改变时触发。
    onemptiedscript媒体资源元素突然清空时触发。
    onendedscript媒体到达终点时触发。
    onerrorscript发生错误时触发。
    onfocusscript窗口获得焦点时触发。
    onformchangescript表单变化时触发。
    onforminputscript表单获得用户输入时触发。
    onhaschangescript文档变化时触发。
    oninputscript元素获得用户输入时触发。
    oninvalidscript元素失效时触发。
    onkeydownscript键盘按下时触发。
    onkeypressscript键盘按下并释放时触发。
    onkeyupscript按键释放时触发。
    onloadscript载入文档时触发。
    onloadeddatascript载入媒体数据时触发。
    onloadedmetadatascript媒体元素的媒体数据载入时触发。
    onloadstartscript浏览器开始载入媒体数据时触发。
    onmessagescript消息被触发时触发。
    onmousedownscript鼠标按键被按下时触发。
    onmousemovescript鼠标指针移动时触发。
    onmouseoutscript鼠标指针移出元素时触发。
    onmouseoverscript鼠标指针移入元素时触发。
    onmouseupscript鼠标按键释放时触发。
    onmousewheelscript鼠标滚轮转动时触发。
    onofflinescript文档进入离线状态时触发。
    onoinescript文档上线时触发。
    ononlinescript文档上线时触发。
    onpagehidescript窗口隐藏时触发。
    onpageshowscript窗口变得可见时触发。
    onpausescript媒体数据暂停时触发。
    onplayscript媒体数据开始播放时触发。
    onplayingscript媒体数据播放时触发。
    onpopstatescript窗口历史信息改变时触发。
    onprogressscript浏览器获取媒体数据时触发。
    onratechangescript媒体数据的播放比率改变时触发。
    onreadystatechangescriptready-state 改变时触发。
    onredoscript文档执行 redo 操作时触发。
    onresizescript调整窗口尺寸时触发。
    onscrollscript元素的滚动条滚动时触发。
    onseekedscript媒体元素的 seeking 属性不在为真并结束时触发。
    onseekingscript媒体元素的 seeking 属性为真,seeking 开始时触发。
    onselectscript元素被选中时触发。
    onstalledscript获取媒体数据发生错误时触发。
    onstoragescript载入文档时触发。
    onsubmitscript表单提交时触发。
    onsuspendscript浏览器获取媒体数据,但获取整个媒体文件中止时触发。
    ontimeupdatescript媒体播放位置改变时触发。
    onundoscript文档执行 undo 操作时触发。
    onunloadscript用户离开文档时触发。
    onvolumechangescript媒体音量发生变化,包括设置为“静音”时触发。
    onwaitingscript媒体停止播放,等待恢复时触发。

    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 编码时间(包括时,分,秒,和分秒)。
    rangerange 类型适用于应该包含某个范围内数值的输入字段。
    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:

    1. 在 FireFox 地址栏中输入 about:config。

    2. 在出现警告消息的地方点击 “I'll be careful, I promise!” 按钮(确保遵守它)。

    3. 在页面顶部的过滤器中输入 html5.enable。

    4. 默认可能被禁用了,因此要点击它切换它的值为 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界面设计