• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > html5有哪些嵌入元素标签?

    html5有哪些嵌入元素标签?

    作者: 分类:HTML5与CSS3.0 点击: 162 次
    wordpress CMS主题:ssmay主题

      在html5中有很多嵌入元素可以使用,嵌入元素的主要作用就是把外部(外网或本网的其它文件夹)的一些有用资源插入到我们的网站页面上。这些嵌入元素非常有用,如:img这可是每一个网站所必不可少的。那么,html5都有哪些嵌入元素呢?

      1、img 嵌入图片

      img常用属性:

      src图片地址、alt图片说明、width图片宽、height图片高

      ismap 创建服务器端分区响应图
      usemap 关联<map>元素

      2、map 定义客户端分区响应图

      map需要结合img图片来实现分区响应图:

      <map>创建分区响应图
      <img src="http://wanlimm.com/map.png" alt="风景图" width="400" height="300" usemap="#mymap">
      <map name="mymap">
      <area shape="rect" coords="31,28,2,10" href="google.com" alt="多边形">
      <area shape="circle" coords="187,142,47" href="sogou.com" alt="方形">
      <area shape="poly" coords="7,26,0,66" href="ssmay.com" alt="圆形">
      </map>

      3、iframe框架嵌入一个文档

      html5已经基本抛弃了html4的frame框架。但是,依然延用iframe内联框架(行内框架)。<iframe>嵌入另一个文档,必须 target="in" 和 name="in"。

      <a href="http://wanlimm.com" target="in">高时银博客</a> 这里的target的值与 iframe的name值对应
      <a href="http://www.ssmay.com" target="in">ssmya主题演示站</a>
      <iframe src="http://xxxxxx.com" width="600" height="500" name="in"></iframe>

      通过上面的代码,我们点击高时银博客时,就会在iframe框架内显示高时银博客的页面;点击ssmay主题演示站,就会在iframe框架里显示对应的网站页面。

      4、embed 嵌入插件内容

      embed可以添加一个flash视频到网页中,如下代码,就是把土豆网的flash视频添加到了页面。embed的属性type:表示被插入内容的类型,src 表示文件路径。

      <embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=v.swf" type="application/x-shockwave-flash" width="480" height="400"></embed>

      5、<object>和<param>元素

      <object>元素和<embed>元素使用上基本一样,只不过object是html4的标准,而embed是html5的标准。

      但是object更强大,不仅可嵌入flash视频动画,还可以嵌入图片等其他内容。

      6.<progress>显示进度

      <progress>元素用来显示进度条,IE9 以及更低版本不支持此元素。我们可以结合JS代码来实现progress的动太进度条效果。

      <progress value="30" max="100"></progress>

      上面的代码表示:30%的进度。

      7.<meter>显示范围里的值,显示进度

      meter与progress有些类似,也是进度条效果。<meter>元素显示某个范围内的值。IE 浏览器不支持此元素。

      <meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

      参数说明:

      min 和 max 表示范围边界,
      low 表示小于它的值过低,
      high 表示大于它的值过高,
      optimum 表示最佳值,但不出现效果。

      8、video 视频元素

      video元素可以实现页面插件一个视频。如:

      <video src="test.webm" width="800" height="600" autoplay controls loop
      muted preload="none" poster="img.png"></video>

      因为各个浏览器认可的视频模式不一样,有的只认可mp4,有的只认可webm,所以我们还要做到兼容效果。兼容多个浏览器

      <video width="800" height="600" controls poster="img.png">
      <source src="test.webm">
      <source src="test.mp4">
      <object>这里引入 flash 播放器实现 IE9 以下,但没必要了</object>
      </video>

      解释:通过<source>元素引入多种格式的视频,让更多的浏览器保持兼容。

      video参数说明:

      src 视频资源的 URL
      width 视频宽度
      height 视频高度
      autoplay 设置后,表示立刻开始播放视频
      preload 设置后,表示预先载入视频。默认预先加载,preload="none"是不加载
      controls 设置后,表示显示播放控件。
      loop 设置后,表示反复播放视频
      muted 设置后,表示视频处于静音状态
      poster 指定视频数据载入时显示的图片,如poster="img.png"

      9、audio 音频元素

      跟video元素一样,存在兼容问题。所以我们也要做到兼容效果。兼容多个浏览器

      <audio controls>
      <source src="test.mp3">
      <source src="test.m4a">
      <source src="test.wav">
      </audio>

      参数说明:

      src 视频资源的 URL
      autoplay 设置后,表示立刻开始播放视频
      preload 设置后,表示预先载入视频
      controls 设置后,表示显示播放控件

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201808016399.html
    本文时间:2018-08-01 08:09:19
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.