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

video

Through the 39000f942b2545a5315c57fa3276f220 tag, we can abandon Flash, which has not been very popular recently, and play video files directly on the page. Video files are naturally the most semantic file format, but this element tag also supports audio and images.

In the past (and currently), we usually have to use cumbersome and ugly code like the following to place videos on the page, but this method requires the browser to have the Flash plug-in installed and support JavaScript:

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

39000f942b2545a5315c57fa3276f220 tag has the following common attributes:

Autoplay: used to set whether the video will automatically play after the page is loaded.

Src: Specify a file link or download path for the video. When the browser does not support the 39000f942b2545a5315c57fa3276f220 tag or some playback error occurs, it can be provided to the user for download.

Autobuffer: Used to set whether the video is automatically buffered; if set, the video will be automatically downloaded and buffered after the page is loaded. When the user clicks the play button, at least part of the video can be watched directly without waiting. .

Poster: Used to set a "photo frame default picture" background image for the video; it can be presented to the user when the video cannot be loaded and played normally.

Controls: Used to set whether to add control bars to the video, such as "play", "pause", etc.; the appearance of the control bar can be customized.

Loop: Used to set whether the video plays in a loop.

Width, Height: Used to control the width and height of the video.

Although the 39000f942b2545a5315c57fa3276f220 element has attracted much attention and has great potential, it will still take some time before it is fully supported by mainstream browsers; currently, if it is absolutely necessary to use the 39000f942b2545a5315c57fa3276f220 tag, we can use something like The following nondescript code combination:

<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 b97864c2e0ef2353a16c4d64c7734e92 in HTML5 has been long-awaited. It has the function of natively supporting audio playback, and does not The browser needs to install additional extensions; currently, the browsers that support the b97864c2e0ef2353a16c4d64c7734e92 element include Safari 4, Firefox 3.5 and Chrome 3.

b97864c2e0ef2353a16c4d64c7734e92 Some common attributes of element tags:

src: Audio file path.

autobuffer: Set whether to automatically buffer audio when the page loads.

autoplay: Set whether the audio plays automatically.

loop: Set whether the audio should be played in a loop.

controls: Set whether to display the playback control panel.

You can see that these attributes are very similar to the attributes of the 39000f942b2545a5315c57fa3276f220 element tag. Let's take a look at a code example:

<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 e02da388656c3265154666b7c71a8ddc element tag to match b97864c2e0ef2353a16c4d64c7734e92; e02da388656c3265154666b7c71a8ddc is used to specify multiple audio files. If the current browser does not support the first file, then 0fd4398f488890dd90846aa3879b44bc will automatically try to play the file specified in the following e02da388656c3265154666b7c71a8ddc; we can also add the current conventional d8e2720730be5ddc9c2a3782839e8eb6 code after them to load the Flash player as a backup plan; the example is as follows:

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

meter

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

Value：表示当前标量的实际值；如果不做指定，那么49c6123c49c6be380cb91db06cd3bfa9标签中的第一个数字就会被认为是其当前实际值，例如49c6123c49c6be380cb91db06cd3bfa92 out of 106fd20bd7b615c56cbd536dc339c52b20中的“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>

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

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

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

49c6123c49c6be380cb91db06cd3bfa9标签中的内容可以不包含任何数字，这时最大值会被认为是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

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

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

output

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

<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）！