• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5学习笔记简明版(4):新元素之meter,datalist,keygen,output

HTML5学习笔记简明版(4):新元素之meter,datalist,keygen,output

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,新元素等相关知识,匿名希望在学习及工作中可以帮助到您

video

通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。

过去(及目前),我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中,但这种方式要求浏览器安装有Flash插件,并支持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的方式:

<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>标签有如下几个常用属性:

Autoplay: 用来设定视频是否在页面加载后自动播放。

Src: 为视频指定文件链接或下载路径,当浏览器不支持<video>标签或发生某种播放错误时,可以提供给用户进行下载。

Autobuffer: 用来设定视频是否自动缓冲;如果设定,那么页面加载之后,视频会自动下载缓冲,当用户点击播放按钮后,至少已经有一部分视频可以直接观看而无需等待了。

Poster: 用来为视频设置一个“相框默认图片”性质的背景图片;当视频无法正常加载播放时可以向用户呈现。

Controls: 用来设置是否为视频添加控制条,例如“播放”、“暂停”等;控制条的外观可以自定义。

Loop: 用来设置视频是否循环播放。

Width , Height: 用来控制视频的宽度与高度。

虽然<video>元素备受关注且大有潜力,不过距离被主流浏览器全面支持仍有待时日;目前,如果一定有必要使用<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

HTML5中的新元素标签<audio>是被大家等待已久的,它有原生支持音频播放的功能,而不需要浏览器安装额外的扩展;目前支持<audio>元素的浏览器主要有Safari 4,Firefox 3.5和Chrome 3。

<audio>元素标签的一些常用属性:

src:音频文件路径。

autobuffer:设置是否在页面加载时自动缓冲音频。

autoplay:设置音频是否自动播放。

loop:设置音频是否要循环播放。

controls:设置是否显示播放控制面板。

可以看到这些属性和<video>元素标签的属性很类似。下面我们来看一个代码范例:

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

这段代码可以在Firefox 3.5和Chrome 3中正常工作,对于Safari 4来说要使用ogg格式的音频文件替换掉mp3文件。不过,鉴于W3C的HTML5定义规范并没有最终完成,这些格式限制也许在将来会有所变化。

根据定义规范,以下几种API方法是可以使用的:

play():播放音频

pause():暂停播放

canPlayType():命令浏览器判断当前音频文件是否可以被播放

buffered():设定文件需要缓冲部分的开始与结束时间点。

另外,我们可以使用<source>元素标签来配合<audio>;<source>用来指定多个音频文件,如果当前浏览器不支持第一个文件,那么<audio>会自动尝试播放下面一个<source>中指定的文件;我们还可以在它们后面加上目前常规的<embed>代码来加载Flash播放器,作为后备方案;范例如下:

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

meter

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

Value:表示当前标量的实际值;如果不做指定,那么<meter>标签中的第一个数字就会被认为是其当前实际值,例如<meter>2 out of 10</meter>中的“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>

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2017-08-06html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
  • 2018-12-03HTML5中对dir属性的解释与规定
  • 2017-08-06深入解析HTML5 Canvas控制图形矩阵变换的方法
  • 2018-12-03通过HTML5和WebGL来制作2D游戏
  • 2018-12-03canvas游戏开发学习之八:组合
  • 2018-12-03[HTML5游戏开发]挑战横版ACT(三):遇红颜英雄亦多情
  • 2018-12-03详解HTML5网络拓扑图整合OpenLayers实现GIS地图应用(图)
  • 2017-08-06HTML5文档结构标签
  • 2018-12-03HTML5特性检测-检测技术
  • 2018-12-03html5获取手机GPS信息的示例代码分享

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS3 画基本图形,圆形、椭圆形、三角形等
    • html5文件拖拽上传的示例代码分享
    • 谷歌浏览器小字体处理方案即12px以下字体_html5教程技巧
    • Web开发和设计上容易被忽视的8个错误
    • HTML5 placeholder(空白提示)属性介绍
    • 浅析移动设备HTML5页面布局
    • HTML5的download属性详细介绍和使用实例_html5教程技巧
    • REM相对单位使用案例分享
    • HTML5基本布局
    • HTML5 canvas基本绘图之绘制线条

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有