2.HTML5新增的其他元素

標籤：res   表徵圖   oninput   menu   request   圖例   script   for   瀏覽器   

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元素配合使用，可以製作出輸入值的下拉式清單。(使用Google瀏覽器)

　　　　<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新增的其他元素