关闭

(4)HTML5-Web应用程序

标签: html5javascript
102人阅读 评论(0) 收藏 举报
分类:


<!doctype html>
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <!-- 《datalist》,使用此标签可以替代《input》标签增加下拉菜单,因此配合《input》标签调用“文字输入框”一起使用 -->
  <input id="Movie" list="movie"/>
  <datalist id="movie">
    <option value="星际效应">
    <option value="饥饿游戏">
    <option value="特务交锋">
  </datalist>

  <!-- 《keygen》,在送出窗体数据时会产生一组验证密钥,私钥会保存在客户端,公钥则会送到服务器端,可在需要验证身份时使用 keygen可使用属性autofocus:在网页加载时,自动获取focus。 disabled:使对象无法被选择 form:指定所属的窗体ID id:指定对象所属ID keytype:指定密钥的算法,有RSA,DSA,EC可选 name:数字字段名称 -->
  <form action="/example/html5/demo_form.asp" method="get">
      Username:<input type="text" name="usr_name" />
      Encryption:<keygen name="security" />
      <input type="submit" />
  </form>

  <!-- 《output》,可使用JavaScript输出计算后的结果。在例子中,先用“oninput”属性决定x变量的计算方式,接着用两种input类型“range”和“number”来输入数值,最后直接用《output》标签显示x计算后的结果。可使用属性: class:指定对象的类 for:指定与计算结果相关的id id:指定对象所属的id name:数字字段名称,建议与id相同 style:设置显示样式 -->
  <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="100">200+
<input type="number" id="b" value="100">=<output name="x" for="a b"></output>
  </form>

  <!-- 《meter》,使用此标签可以显示统计图表中的直方图,对于呈现如意将调查之类的相关信息非常有用 可以用的属性:max:范围内数值中最大的可能值 min:最小的可能值 value:代表当前的值 文字:当直方图无法正常显示时,会以文字代替-->
  <h1>订饭盒</h1>
  <p>荤45人</p>
  <meter value="9" min="0" max="10">9/10</meter><br>
  <p>素5人</p>
  <meter value="0.1">10%</meter>

  <!-- 《progress》此标签与《meter》的显示效果类似,但是比较适合用于表示动态改变的进度条,例如网页加载进度,因此,在使用上会配合JavaScript更新value属性,建立动态改变进度条的效果 可供使用属性:max:在范围内最大的可能值 value:代表当前的值 文字:当直方图无法正常显示时,会以文字代替-->
  <p>下载进度</p>
  <progress value="42" max="100"></progress>
 </body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:234104次
    • 积分:10241
    • 等级:
    • 排名:第1642名
    • 原创:777篇
    • 转载:186篇
    • 译文:1篇
    • 评论:37条
    博客专栏