Concise version of HTML5 study notes (4): new elements: meter, datalist, keygen, output

video

Through the

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
  <param name="allowfullscreen" value="true" />
  <embed type="application/x-shockwave-flash" width="425" height="344"
  src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
  </embed>
</object>

HTML5 method:

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
  <p>
    Try this page in Safari  4! Or you can
    <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>
    instead.
  </p>
</video>

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
  <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab">
    <param value="http://www.youtube.com/demo/google_main.mp4">
    <param value="true">
    <param value="false">
    <embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360"
    autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
    </embed>
  </object>
</video>

audio

The new element tag

<audio src="elvis.ogg" controls autobuffer></audio>

This code can work normally in Firefox 3.5 and Chrome 3. For Safari 4, the mp3 file must be replaced with an audio file in ogg format. However, given that the W3C's HTML5 definition specification has not been finalized, these format restrictions may change in the future.

According to the definition specifications, the following API methods can be used:

play(): play audio

pause(): pause playback

canPlayType(): Commands the browser to determine whether the current audio file can be played

buffered(): Sets the start and end time points of the buffered part of the file.

In addition, we can use the element tag to match

<audio controls autobuffer>
  <source src="elvis.ogg" />
  <source src="elvis.mp3" />
  <!-- now include flash fall back -->
</audio>

meter

meter元素标签用来表示范围已知且可度量的等级标量或分数值，如磁盘使用量比例、关键词匹配程度等。需要注意的是，不可以用来表示那些没有已知范围的任意值，例如重量、高度，除非已经设定了它们值的范围。元素共有6个属性：

Value：表示当前标量的实际值；如果不做指定，那么标签中的第一个数字就会被认为是其当前实际值，例如2 out of 10中的“2”；如果标签内没有数字，那么标量的实际值就是0。

Min：当前标量的最小值；如不做指定则为0。

Max：当前标量的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。

Low：当前标量的低值区；必须小于或等于标量的高值区数字；如果低值区数字小于标量最小值，那么它会被认为是最小值。

High：当前标量的高值区。

Optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。

来看一些代码范例；首先，不设定任何属性的状况：

<p>Your score is:  <meter>2 out of 10</meter></p>

然后呢，可以增加最大值与最小值的属性设定：

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>

增加了低值区、高值区和最佳值的属性设定：

<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

这时的最大值会被认为是100%或1。

下面这段代码可以用作节日倒计时：

<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>

标签中的内容可以不包含任何数字，这时最大值会被认为是1；可以参考以下的代码：

<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

datalist

datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。

<input list="browsers">
<datalist id="browsers">
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>

keygen

标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output

标签定义不同类型的输出，比如脚本的输出。例如：

<form action="" method="get">
    <p>
        10 + 5 = <output name="sum"></output>
    </p>
    <button type="submit">计算</button>
</form>

<script type="text/javascript">
(function() {
    var f = document.forms[0];

if ( typeof f[&#39;sum&#39;] !== &#39;undefined&#39; ) {
        f.addEventListener(&#39;submit&#39;, function(e) {
            f[&#39;sum&#39;].value = 15;
            e.preventDefault();
        }, false);
    } else {
        alert(&#39;你的浏览器尚未准备好！&#39;);
    }
})();
</script>

以上就是HTML5学习笔记简明版（4）：新元素之meter,datalist,keygen,output的内容，更多相关内容请关注PHP中文网（www.php.cn）！