【前端学习之HTML&CSS进阶篇】-- HTML第一篇 -- iframe元素与flash

【前端学习之HTML&CSS进阶篇】-- HTML第一篇 – iframe元素与flash

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，而到了这篇博客，我们已经学习了所有的HTML和CSS的基础部分，进入到了前端的进阶部分，我们需要了解更多的有实际意义的HTML元素和更加复杂多样的CSS样式，从本届开始，让我们先来接触一下更多样的HTML元素。

一、iframe 元素

1. 概念

• 用处：在网页中嵌入另一个页面

• 用法：<iframe src="https://www.asoulfan.com/" frameborder="0"></iframe>

• 属性

1. scrolling：滚动条
2. framespacing：框架页边框到内部是否有空隙
3. frameborder：边框
4. allowfullscreen：允许全屏

2. 特点(可替换元素)

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

3. 应用

• 在网站中播放其他网站的视频/嵌入网页

实例：

    iframe{
        width: 100%;
        height: 500px;
    }

    <!-- 打开新网页 -->
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <!-- 在iframe窗口打开 -->
    <a href="https://douyu.com" target="myframe">斗鱼</a>
    <!-- 默认，原网页 -->
    <a href="https://www.asoulfan.com/">asoulfan</a>

    <iframe name="myframe" src="https://www.asoulfan.com/" frameborder="0"></iframe>
	<!-- 在此复制对应网站的视频代码 -->
    <iframe src="//player.bilibili.com/player.html?aid=979658389&bvid=BV1j44y1K7Eg&cid=548370362&page=1" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

二、在页面中使用flash

• 应用元素：object、embed(可替换元素)

1. object

• MIME: 多用途互联网邮件类型
  
  

例如，jpg的MIME：image/jpeg(在互联网中的文本确定资源类型)
搜索：Ctrl + f 搜索对应类型即可(百度百科): flash-“application/x-shockwave-flash”

    <!-- data--嵌入数据的路径、type--嵌入资源的类型 -->
    <object data="./example.swf" type="application/x-shockwave-flash">
        <!-- 参数 -->
        <param name="quality" value="high">
    </object>

2. embed

• 用法本质相同，只是写法不一样

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

总结

本节博客更多的是一种科普性质，这两种元素在现在的HTML书写中其实较少使用，flash更是早已被edge所禁用，所以我们大可以以一种学习的心态看待，在下一节中我们将会介绍表格元素和一些不那么常用的基本元素，在之后的博客注重对表单元素的学习，敬请期待