梧桐下的四叶草

人生最重要的一点是,永远不要迷失自己。

(4)HTML5-Web应用程序


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


阅读更多

扫码向博主提问

去开通我的Chat快问

zsc2014030403015

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • php
  • html
  • Linux
版权声明:本文为博主原创文章,转载必须声明出处,thank。 https://blog.csdn.net/zsc2014030403015/article/details/52353770
文章标签: html5 javascript
个人分类: HTML5
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

(4)HTML5-Web应用程序

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭