1. 程式人生 > >2.HTML5新增的其他元素

2.HTML5新增的其他元素

單列 瀏覽器 fire explore 音頻 新增 按鈕 uri 度量

HTML5新增的其他元素:

  video元素用於定義視頻。

  audio元素用於定義音頻。

  embed元素用於插入各種多媒體,格式可以是Midi、Wav、AIFF、AU、MP3等。

  mark元素主要用來在視覺上向用戶呈現哪些需要突出顯示或高亮顯示的文字。mark元素的一個比較經典的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。

  progress元素表示運行中的進程,可以使用process元素來顯示JavaScript中消耗時間的函數的進程。 <progress value="22" max="100"></progress>

  meter元素表示度量衡,僅用於已知最大值和最小值的度量。必須定義度量的範圍,即可以再元素的文本中,也可以在min/max屬性中定義。

    <meter value="9" min="0" max="10">9/10</meter><br>
    <meter value="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="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="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=parseInt(a.value)+parseInt(b.value)">0
      <input type="range" id="a" value="50">100
      +

      <input type="number" id="b" value="50">
      =<output name="x" for="a b"></output>
    </form>

    <p><strong>註意:</strong> Internet Explorer 不支持 output 標簽。</p>

  source元素為媒介元素(比如video和audio)定義媒介資源。

    <audio controls>
      <source src="/i/horse.ogg" type="audio/ogg">
      <source src="/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新增的其他元素