1.iframe

HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。

2.frame嵌套单页面

<!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: 800px;
            height: 600px;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <!-- iframe标签作用：在一个页面中嵌套另一个页面 -->
    <iframe src="https://www.jd.com" frameborder="0"></iframe>
</body>
</html>

3.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: 800px;
            height: 600px;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <!-- 
        a标签的target属性
            在本页面打开链接   : __self
            在新页面打开链接   : __blank
            在iframe中打开链接 : iframe标签的name属性值   
     -->
    <a target="myIframe" href="./index1.html">页面1</a>
    <a target="myIframe" href="./index2.html">页面2</a>
    <a target="myIframe" href="./index3.html">页面3</a>
    <!-- iframe标签作用：在一个页面中嵌套另一个页面 -->
    <iframe name="myIframe" src="./index1.html" frameborder="0"></iframe>
</body>
</html>

iframe标签嵌套网页

1.iframe

2.frame嵌套单页面

3.iframe嵌套多页面