要在页内显示另外的页面，此时我们就需要用到HTML中的一些框架，比如<iframe> 或 <frame>或者其他的框架，我们以iframe为例说明

HTML中的<iframe>元素是一个内联框架，允许你在一个HTML文档中嵌入另一个HTML文档。<iframe>常用于在当前页面中嵌入其他网页、视频、广告、交互式应用程序等。

<iframe src="URL" width="宽度" height="高度"></iframe>

• src 属性指定了要嵌入的文档的URL。
• width 和 height 属性分别定义了<iframe>的宽度和高度，你可以使用像素值（如200px）或百分比（如100%）来设置。

<iframe src="https://www.example.com" width="600" height="400"></iframe>

注意事项

1. 跨域问题：由于<iframe>可以加载来自不同源的文档，因此可能会遇到跨域资源共享（CORS）问题。这意味着，来自不同源的<iframe>可能会受到同源策略的限制，导致无法与父页面或与其他<iframe>进行某些交互。

2. 安全性：<iframe>可能被用于误导用户，例如通过加载看似可信但实际上包含恶意内容的页面。因此，在使用<iframe>时，应确保只加载可信的源。

3. 可访问性：<iframe>可能会对网站的可访问性造成负面影响，特别是当它们包含重要的内容或功能时。确保<iframe>内的内容对屏幕阅读器等辅助技术友好是很重要的。

4. SEO：搜索引擎优化（SEO）方面，<iframe>中的内容通常不被搜索引擎视为父页面内容的一部分。这意味着，如果<iframe>包含对SEO重要的内容，那么这些内容可能不会被搜索引擎索引。

5. 浏览器兼容性：虽然现代浏览器都支持<iframe>，但在一些较旧的浏览器或移动设备上可能会遇到兼容性问题。

进阶用法

除了基本的src、width和height属性外，<iframe>还支持其他几个属性，如name（用于在<a>或<form>标签的target属性中指定<iframe>作为目标）、sandbox（提供额外的安全限制，如禁止表单提交、脚本执行等）、allowfullscreen（允许<iframe>内容在全屏模式下显示）等。

通过使用JavaScript和CSS，你还可以进一步控制<iframe>的样式和行为，实现更复杂的交互效果

例如：

    <div class="top">
        <span class="span1"><img src="./img/wuchang.png" class="img" ></span>
        <span class="span2">
        <h4>首页</h4>|
        <h4>孔子-仁义礼</h4>|
        <h4>孟子-仁义礼智</h4>|
        <h4>董仲舒-仁义礼智信</h4>
        </span>
    </div>
    <div class="middle">
        <ul>
            <li><a class="a1" href="./img/shouye.png" target="iframe">首页
            </a>
                <p class="p1">仁义礼智信为儒家‘五常’</p>
            </li>
            <li><a class="a2" href="./img/ren.png" target="iframe">仁 
            </a>
                <p class="p2">孔子提出“仁、义、礼” </p>
            </li>
            <li><a class="a3" href="./img/yi.png" target="iframe">义
            </a>
                <p class="p3">孟子延伸为“仁、义、礼、智”</p>
            </li>
            <li><a class="a4" href="./img/li.png" target="iframe">礼
            </a>
                <p class="p4">董仲舒扩充为“仁义礼智信”,后称“五常”</p>
            </li>
            <li><a class="a5" href="./img/zhi.png" target="iframe">智
            </a>
                <p class="p5">“智慧每个人都应该有，但是有些蠢货没有”</p>
            </li>
            <li><a class="a6" href="./img/xin.png" target="iframe">信
            </a>
                <p class="p6">信用每个人都应该有，但是有些人就是小丑</p>
            </li>
        </ul>
        <iframe class="iframe" name="iframe" src=".//img/shouye.png"></iframe>
    </div>
    <div class="under">

    </div>

运行结果：