首页 > 代码库 > 2.HTML5新增的其他元素

2.HTML5新增的其他元素

HTML5新增的其他元素:

  video元素用于定义视频。

  audio元素用于定义音频。

  embed元素用于插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

  mark元素主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。mark元素的一个比较经典的应用就是在搜索结果中向用户高亮显示搜索关键词。

  progress元素表示运行中的进程,可以使用process元素来显示JavaScript中消耗时间的函数的进程。   <progress value="http://www.mamicode.com/22" max="100"></progress> 

  meter元素表示度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围,即可以再元素的文本中,也可以在min/max属性中定义。

    <meter value="http://www.mamicode.com/9" min="0" max="10">9/10</meter><br>
    <meter value="http://www.mamicode.com/0.4">40%</meter>

  time元素用于表示日期或时间,也可以同时表示两者。

    <p>
      我们在每天早上 <time>9:00</time> 开始营业。
    </p>

    <p>
      我在 <time datetime="2010-02-14">情人节</time> 有个约会。
    </p>

  ruby元素表示ruby注释(中文注音或字符)。rt元素表示字符(中文注音或字符)的解释或发音。rp元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容

    <ruby>
      汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
      字 <rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>

    效果如下:

         技术分享

  wbr元素表示软换行。wbr元素与br元素的区别是:br元素是此处必须换行,二wbr元素是指浏览器窗口或父级元素的宽度足够宽是(没必要换行时),不进行换行,而当宽度不够时,主动在此处进行换行。wbr元素好像对字符型的语言用处比较大,但是对于中文,貌似没多大用处。 

    <p>
      如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
    </p>
    <p>
      如果想学习 AJAX,那么您必须熟悉 XML<br>Http<br>Request 对象。
    </p>

  canvas元素表示图形,比如图标和其他图像。这个元素本身没有行为,仅提供一块画布,但把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。

  command元素表示命令按钮,比如单选按钮、复选按钮或按钮。只有 IE 9 支持 <command> 标签

  details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示细节信息。summary元素应该是details原点的第一个子元素。目前只有 Chrome 和 Safari 6 支持 <details> 标签。

    <details>
      <summary>Copyright 2011.</summary>
      <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>

  效果如下:

      技术分享

      点击图标就展示P标签内容,如下图

      技术分享

  datalist元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。(使用谷歌浏览器)

    <form action="demo-form.php" method="get">
      <input list="browsers" name="browser">
      <datalist id="browsers">
        <option value="http://www.mamicode.com/Internet Explorer">
        <option value="http://www.mamicode.com/Firefox">
        <option value="http://www.mamicode.com/Chrome">
        <option value="http://www.mamicode.com/Opera">
        <option value="http://www.mamicode.com/Safari">
      </datalist>
      <input type="submit">
    </form>

    <p><strong>注意:</strong> Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。</p>

  datagrid元素表示可选数据的列表,它以树形列表的形式显示。https://www.quackit.com/html_5/tags/html_datagrid_tag.cfm

  keygen元素表示生成密钥。

    <form action="/example/html5/demo_form.asp" method="get">
      用户名:<input type="text" name="usr_name" />
      加密:<keygen name="security" />
      <input type="submit" />
    </form>

  output元素表示不同类型的输出,比如脚本的输出。 

    <form oninput="x.value=http://www.mamicode.com/parseInt(a.value)+parseInt(b.value)">0
      <input type="range" id="a" value="http://www.mamicode.com/50">100
      +

      <input type="number" id="b" value="http://www.mamicode.com/50">
      =<output name="x" for="a b"></output>
    </form>

    <p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p>

  source元素为媒介元素(比如video和audio)定义媒介资源。

    <audio controls>
      <source src="http://www.mamicode.com/i/horse.ogg" type="audio/ogg">
      <source src="http://www.mamicode.com/i/horse.mp3" type="audio/mpeg">
      您的浏览器不支持音频。
    </audio>

  menu元素表示菜单列表。当希望列出表单控件时使用该标签。

    <menu>
      <li><input type="checkbox" />Red</li>
      <li><input type="checkbox" />blue</li>
    </menu>

  dialog元素表示对话框。只有 Chrome 和 Safari 6 和支持 dialog 标签。

2.HTML5新增的其他元素