HTML进阶-4.1 iframe & flash

最新推荐文章于 2022-07-07 02:07:48 发布

夏赞恩

最新推荐文章于 2022-07-07 02:07:48 发布

阅读量2.6k

点赞数

分类专栏：前端学习文章标签： html css css3

原文链接：https://www.bilibili.com/video/BV1yx411d7Rc?p=38&spm_id_from=pageDriver

版权

前端学习专栏收录该内容

49 篇文章

订阅专栏

文章目录

iframe元素
在页面中使用flash

iframe元素

框架页-通常用于在网页中嵌入另一个页面。
如下，将斗鱼的页面嵌入到了该网页中：

<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://douyu.com">斗鱼</a>
    <a href="https://www.taobao.com">淘宝</a>
    <iframe src="https://www.douyu.com"></iframe> 
</body>

在这里插入图片描述

iframe是个可替换元素，具有如下特点：

通常是行盒
通常显示的内容取决于元素的属性，如src属性
css不能完全控制其中的样式，如可控制嵌入页面的高宽，却无法控制页面内的样式
具有行块盒的特点

利用target在当前页面打开别人的网站，不用跳转到别人的网站。

<body> 
    <a href="https://www.baidu.com" target="myframe">百度</a>
    <a href="https://douyu.com" target="myframe">斗鱼</a>
    <a href="https://www.taobao.com" target="myframe">淘宝</a>
    <iframe name="myframe" src="https://www.douyu.com"></iframe>
</body>

在这里插入图片描述

iframe可用来放别人网站的视频，即链接到别人的网站播放其网站上的视频。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        iframe{
            width: 1000px;
            height: 600px;
        }
    </style>
</head>
<body>
    <!-- 从b站链接过来的视频，复制视频嵌入代码即可 -->
      <iframe src="//player.bilibili.com/player.html?aid=210330523&bvid=BV1fa411B7o5&cid=474664504&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>

在页面中使用flash

通常使用object，embed元素嵌入flash
object，embed元素都是可替换元素
object元素：

需要设置两个属性，第一个是data属性（设置嵌入资源的位置），第二个是type属性（指明嵌入资源的类型，如图片，音频，视频，flash等）。type属性是有一个标准的，该标准为多用途互联网邮件类型MIME(Multipurpose Internet Mail Extensions)，比如，资源是一个jpg图片，MIME：image/jpeg。再比如资源是一个falsh，MIME：application/x-shockwave-flash。

object中可以加子元素，如param参数（可以理解为内置信息）

<body>
	<object data="./example.swf" type="application/x-shockwave-flash">
        <param name="quality" value="high">
    </object> 
</body>

embed元素：

  <embed quality="high" src="./example.swf" type="application/x-shockwave-flash"> 
  ```

因为有的浏览器只能识别object元素，有的浏览器只能识别embed元素，因此兼容的写法如下：

<body>
    <!-- 兼容的写法 -->
    <object data="./example.swf" type="application/x-shockwave-flash">
        <!-- 参数 -->
        <param name="quality" value="high">
        <embed quality="high" src="./example.swf" type="application/x-shockwave-flash">
    </object>
</body>