在html开发中，框架可以实现在一个页面中展示多个独立的文档内容，早期常用frameset、frame等传统框架标签，不过现在更推荐使用iframe标签来实现页面嵌入功能，兼容性更好且使用更灵活。
传统html框架标签介绍
传统的框架标签主要包括<frameset>和<frame>，不过这类标签已经在html5中被废弃，不建议在新项目中使用。如果需要了解其用法，可以参考以下说明：
<frameset>用于定义框架集，会替代body标签作为页面主体，通过rows或cols属性划分页面区域，每个区域用<frame>标签指定要加载的页面路径。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>传统框架示例</title>
</head>
<frameset cols="20%,80%">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</html>
需要注意的是，使用frameset的页面不能包含body标签，否则框架会失效，而且这类标签无法被搜索引擎很好地抓取，也不利于响应式布局适配。
iframe框架标签基本语法
iframe是现在主流的html嵌入框架标签，它可以在当前页面中嵌入另一个完整的html文档，不需要替换body标签，使用起来更加灵活。基本语法如下：
<iframe src="嵌入页面的路径" 属性名="属性值"></iframe>
其中src属性是必填项，用于指定要嵌入的页面地址，可以是相对路径也可以是绝对路径。
iframe常用属性说明
iframe有很多实用的属性，可以根据需求调整嵌入框架的样式和行为，常用属性如下表：
| 属性名 | 说明 |
|---|---|
| width | 设置框架的宽度，单位可以是px或者百分比 |
| height | 设置框架的高度，单位可以是px或者百分比 |
| frameborder | 设置是否显示框架边框，0为不显示，1为显示，默认是1 |
| scrolling | 设置是否显示滚动条，可选值yes、no、auto，默认是auto |
| allowfullscreen | 是否允许框架内内容全屏显示，值为true时允许 |
iframe嵌入代码完整示例
下面是一个实际的使用示例，在页面中嵌入一个指定大小的外部页面，并且隐藏边框和滚动条：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe嵌入示例</title>
<style>
.container {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h3>嵌入的外部页面内容</h3>
<!-- 嵌入ipipp.com的首页，设置宽高800*500，无边框无滚动条 -->
<iframe src="https://ipipp.com" width="800" height="500" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
如果需要嵌入本地页面，只需要把src的属性值改成对应的本地html文件路径即可，比如src="test.html"。
使用iframe的注意事项
- 部分网站会设置X-Frame-Options响应头，禁止被其他站点用iframe嵌入，如果遇到嵌入后页面无法显示的情况，可以检查目标站点是否有相关限制。
- iframe加载的内容如果和主页面不同源，会存在跨域问题，无法直接通过js操作iframe内的DOM元素。
- 不要过度使用iframe，过多嵌入框架会影响页面的加载速度，也不利于SEO优化。
- 如果需要适配移动端，建议给iframe设置max-width:100%的属性，避免框架宽度超出屏幕。
常见问题解答
iframe嵌入的页面怎么自适应高度？
可以通过js监听嵌入页面的加载完成事件，动态获取嵌入页面的高度，然后赋值给iframe的height属性，示例代码如下：
// 主页面中的js代码
function adjustIframeHeight(iframe) {
// 获取iframe内文档的高度
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var height = iframeDoc.body.scrollHeight;
// 设置iframe高度
iframe.height = height + 'px';
}
怎么禁止iframe被其他站点嵌入？
可以在服务端的响应头中添加X-Frame-Options字段，设置为DENY表示禁止所有站点嵌入，设置为SAMEORIGIN表示只允许同域名站点嵌入。
总结：html框架的实现现在更推荐使用iframe标签，传统框架标签已经逐渐被淘汰。掌握iframe的基本语法和常用属性，就可以满足大部分页面嵌入的需求，使用时注意跨域和性能相关的问题即可。