从零开始学web开发之html5-9.多媒体&10.浮动框架iframe

标签: html web
8人阅读 评论(0) 收藏 举报
分类:

1.多媒体embed

embed是H5新增的标签,它是一个自闭合标签。
H5中还有audio、video标签可用于网页的多媒体开发。
通过实践发现,embed不管如何设置,都会一打开网页就播放,视频与音频都是如此,非常不实用。

<1>.网页中插入音、视频

embed标签实现在线音频和视频的插入。
语法:

<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的调试"/>

src可以是音频或者视频的地址

<2>.插入背景音乐

IE中使用bgsound标签,但不支持其它浏览器,故同样可以embed标签实现背景音乐的插入。
语法:

<embed src="" hidden="" autostart="" loop=""/>
  • hidden: 布尔值,true表示隐藏播放器,即是背景音乐。
  • autostart:布尔值,ture表示页面一载入则自行播放。
  • loop:布尔值,true表示无限次播放(循环播放)。

<3>.插入Flash

同样使用embed标签实现插入Flash


2.浮动框架

<1>.简介

浮动框架iframe是一种较为特殊的框架,它是在浏览器窗口中嵌套子窗口,整个页面并不一定是框架页面,但要包含一个框架窗口。
iframe可以自定义宽高和指定放置位置。

语法:

<iframe src="源文件地址" width="浮动框架的宽" height="高"></iframe>

说明:
src属性是iframe的必需属性,定义框架的地址.宽与高是可选属性。

<2>.iframe滚动条

使用scrolling属性来控制,分为三种情况:根据需要显示、总是显示、不显示。
语法:

<iframe src="源文件地址" width="浮动框架的宽" height="高" scrolling="取值"></iframe>

说明:
scrolling属性取值如下。

属性值 说明
auto 默认值,自动显示滚动条
yes 总是显示滚动条
no 不显示滚动条

3.多媒体示例源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Boundless Learning</title>
    <meta name="keywords" content="web,csdn,prigdrems" />
    <meta name="description" content="从零开始学web开发" />
    <meta name="author" content="pigdreams" />
    <meta name="copyright" content="csdn-pigdreams博客版权所有,转载请注明出处!" />
</head>

<body>
    <h1>网页多媒体示例</h1>
    <div>
        <h2>1.插入音频</h2>
        <embed src="我很快乐.mp3" width="500px" height="50px"/>
    </div>
    <br/>
    <div>
        <h2>2.插入视频</h2>
        <embed src="callm.mp4" width="500px" height="300px"/>
    </div>
    <br/>
    <div>
        <h2>3.背景音乐</h2>
        <embed src="SheIsMySin.mp3" hidden="true" autostart="false" loop="false"/>
    </div>
    <br/>
    <div>
        <h2>4.插入Flash</h2>
        <embed src="travel.swf"  width="300px" height="200px">
    </div>
</body>

</html>

4.浮动框架示例源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Boundless Learning</title>
    <meta name="keywords" content="web,csdn,prigdrems" />
    <meta name="description" content="从零开始学web开发" />
    <meta name="author" content="pigdreams" />
    <meta name="copyright" content="csdn-pigdreams博客版权所有,转载请注明出处!" />
</head>

<body>
    <h1>浮动框架示例</h1>
    <div>
        <h2>框架1</h2>
        <iframe src="h5_p9.html"  width="500px"  height="500px" scrolling = "auto"></iframe>
        <strong><big>框架2</big></strong>
        <iframe src="media.html" width="450px" height="450px" scrolling = "yes"></iframe>
        <h2>框架3</h2>
        <iframe src="styling.html" width="450px" height="450px" scrolling = "no"></iframe>
    </div>

</body>

</html>

5.效果演示

这里写图片描述

查看评论

浮动框架iframe元素

代码如下:  案例1   案例2   浮动框架iframe       frameborder="0" name="window" scrolling="no">这是一个浮动框架,    如果您看到这...
  • dachongaixiaoyang
  • dachongaixiaoyang
  • 2016年12月08日 08:32
  • 234

浮动框架iframe

浮动框架式一种比较特别的框架,和frame比较类似。不过frame必须在frameset中才可以,而iframe不一样,首先, 他是一种内联框架,其次,他可以放在网页中的任何位置。 所以,ifram...
  • archer119
  • archer119
  • 2016年04月18日 18:54
  • 1353

浮动框架

  • cqhand
  • cqhand
  • 2006年01月31日 14:56
  • 609

从零开始,学习web前端之HTML5

HTML5
  • yuzhiqiang_1993
  • yuzhiqiang_1993
  • 2017年03月31日 11:36
  • 1663

iframe--浮动窗口

在上一篇文章中我们说到,frameset框架在使用时,该页面不允许出现body和body体。但有时我们需要在一个含有体的页面嵌入另外一个页面,形成画中画的效果,怎么处理?这时我们就用到iframe元素...
  • wangruihong8
  • wangruihong8
  • 2017年09月12日 20:13
  • 484

笔记 - 7、HTML - 内联(浮动)框架--iframe

HTML·浮动框架(内联框架):     可以写在页面中的任意位置。 属性:     src:引用页面的路径     width:设置框架的宽度     height:设置框架的高度 ...
  • zbs609202360
  • zbs609202360
  • 2016年03月30日 22:22
  • 584

Mysql5.6 从零开始学 读书笔记

第四章 数据库的基本操作 使用唯一约束 唯一约束可以确保一列或者几列不出现重复值 语法:字段名 数据类型 UNIQUE UNIQUE和PRIMARY KEY的区别:一个表中可以有多个字段声明为U...
  • sinat_32487221
  • sinat_32487221
  • 2017年08月15日 19:55
  • 428

《MySQL 5.6从零开始学(视频教学版)(配光盘)》

 http://product.dangdang.com/22893890.html
  • brucexia
  • brucexia
  • 2013年11月28日 17:04
  • 3570

[程序学习笔记]cocos2dx从零开始(1)--------渲染框架(一)

前言: 最近研究了一阵cocos2dx游戏引擎,在此把研究的成果分享给大家,以供大家共同学习和进步。 本文不会介绍cocos2dx的历史以及环境搭建(网上例子很多),我喜欢直奔主题,接下来讲一下coc...
  • hahahakonghee
  • hahahakonghee
  • 2013年07月05日 00:30
  • 4508

《MySQL 5.6从零开始学》读书笔记

第1章 初始MySQL MySQL的主要优势: 体积小速度快成本低:含社区版和企业版可移植性:可以在多个平台上运行丰富的接口:提供了用于C,Java,PHP,Python等语言的API支持查询语言...
  • Jlinglinglei
  • Jlinglinglei
  • 2016年05月11日 11:27
  • 2249
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 10万+
    积分: 1653
    排名: 3万+
    博客专栏
    最新评论