Concise version of HTML5 study notes (4): new elements: meter, datalist, keygen, output-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

黄舟

Jan 21, 2017 pm 04:37 PM

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>

Copy after login

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>

Copy after login

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

Copy after login

audio

The new element tag

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

Copy after login

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>

Copy after login

meter

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

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

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

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

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

High：当前标量的高值区。

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

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

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

Copy after login

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

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

Copy after login

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

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

Copy after login

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

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

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

Copy after login

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

Copy after login

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>

Copy after login

keygen

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

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

Copy after login

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>

Copy after login

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn