要在页内显示另外的页面，此时我们就需要用到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>注意事项
-
跨域问题：由于
<iframe>可以加载来自不同源的文档，因此可能会遇到跨域资源共享（CORS）问题。这意味着，来自不同源的<iframe>可能会受到同源策略的限制，导致无法与父页面或与其他<iframe>进行某些交互。 -
安全性：
<iframe>可能被用于误导用户，例如通过加载看似可信但实际上包含恶意内容的页面。因此，在使用<iframe>时，应确保只加载可信的源。 -
可访问性：
<iframe>可能会对网站的可访问性造成负面影响，特别是当它们包含重要的内容或功能时。确保<iframe>内的内容对屏幕阅读器等辅助技术友好是很重要的。 -
SEO：搜索引擎优化（SEO）方面，
<iframe>中的内容通常不被搜索引擎视为父页面内容的一部分。这意味着，如果<iframe>包含对SEO重要的内容，那么这些内容可能不会被搜索引擎索引。 -
浏览器兼容性：虽然现代浏览器都支持
<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>运行结果：
