8.内联框架-HTML基础

一、iframe标签

在HTML中，我们可使用iframe标签来创建包含另外一个文档的内嵌框架（即行内框架、内联框架）。

1.何为内嵌框架?

内嵌框架就是在当前页面再嵌入另外一个网页。

2.语法格式

<iframe src='链接页面地址' width='数值' height='数值'></iframe>

（1）说明

src必选属性，用于定义链接页面的地址。
width、height：可选属性，，分别用于定义框架的宽度、高度。

（2）示例

① 例1-嵌入一个页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>内嵌框架</title>
    </head>
    <body>
        <iframe src='https://www.jianshu.com/p/8a24f0ea7161' width='666' height='361'></iframe>
    </body>
</html>

iframe标签示例1.png

可以看到，iframe标签功能就是让当前页面嵌入另外一个页面。

② 例2-嵌入多个页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>内嵌框架</title>
    </head>
    <body>
        <iframe src='https://www.jianshu.com/p/8a24f0ea7161' width='666' height='361'></iframe>
        <iframe src='https://www.jianshu.com/p/0fa294fbb778' width='666' height='361'></iframe>
    </body>
</html>

iframe标签示例2.png

例1我们嵌入了一个页面，我又尝试嵌入多个页面，也是可以实现的。所以说，iframe标签不仅可以让当前页面嵌入一个页面，也可以嵌入多个页面。

3.语义化

其实涉及内嵌框架的标签还有 frameset、frame，但这些在HTML5标准中已被舍弃。 对于内嵌（内联）框架，只需掌握iframe标签标签即可。此外，在HTML5标准中iframe标签还被赋予了很多新的定义，自己一定要去看看。