27、HTML进阶——iframe元素以及在页面中使用flash

lvh98

已于 2022-08-02 22:13:13 修改

阅读量444

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html 前端

于 2022-07-07 02:07:48 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/125650939

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

iframe元素以及在页面中使用flash

文章目录

iframe元素以及在页面中使用flash

1. iframe元素

内联框架元素，通常用于在网页中嵌入另一个html页面。

页面上的每个<iframe>都需要增加内存和其它计算资源，这是因为每个浏览上下文都拥有完整的文档环境。

1.1 属性

src：被嵌套页面的url地址；
frameborder：取值为1或0，取1表示显示边框，取0表示不显示，这个属性已不建议使用，因为可以用CSS属性border来代替；
width：指定iframe元素的宽度；
height：指定iframe元素的高度；
name：用于定位嵌入的浏览上下文的名称；超链接的target属性若写iframe的name，则在iframe的内联框架中打开链接的网页。
title：标识框架的主要内容，这样可以极大方便使用辅助技术（例如屏幕阅读器）浏览网页的人。

<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://douyu.com" target="myframe">斗鱼</a>
<a href="https://www.taobao.com" target="myframe">淘宝</a>
<div>
	<iframe style="width:300px; height:100px;" name="myframe" src="https://www.tmall.com" frameborder="1"></iframe>
</div>

iframe_exp

iframe元素通常用于在网页中嵌入别人网页中的视频。

<iframe style="width:1000px; height:600px;" frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=e0041mr5c9b" allowFullScreen="true"></iframe>

iframe_exp2

这里嵌入的视频并不是直接把别人网页上的视频搬运过来，其实还是内嵌了其他网页，只不过只显示了那个网页中的视频部分。

1.2 iframe和frame元素

<frame>元素也用于在页面中内嵌另外的html页面，但是目前<frameset>和<frame>元素已经从web标准中删除，<frame> 的使用不应提倡，因为有一些缺点，比如性能问题，以及使用屏幕阅读器的用户缺少可访问性。

frame元素必须作为frameset的子元素。

iframe和frame元素的区别：

frame元素不能脱离frameset元素单独使用，而iframe可以
frame不能放在body元素中
frame的高度只能通过frameset控制，而iframe可以自己控制

2. 可替换元素

iframe是一个可替换元素。

mdn中的解释：

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 iframe 元素，可能具有自己的样式表，但它们不会继承父文档的样式。CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。

可替换元素的特点：

通常行盒
通常显示的内容取决于元素的属性
CSS不能完全控制其中的样式
具有行块盒的特点

3. 在页面中使用flash

要在页面中嵌入flash，需要用到两个元素：

<object>元素：HTML嵌入对象元素，表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。
<embed>元素：将外部内容嵌入文档中的指定位置。

它们都是可替换元素

MIME(Multipurpose Internet Mail Extensions) 多用途互联网邮件类型：

比如，资源是一个jpg图片，MIME：image/jpeg。

例子中，嵌入的是flash小游戏，其文件后缀名为.swf，则可以查找MIME参考手册找到其相应的type。

常见MIME类型列表：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

mime

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