标签分类 - frameset标签详解
原文链接：https://blog.csdn.net/hwc3737/article/details/109180467
<frameset>标签（用于定义一个框架集）
与<frame>标签搭配使用，实现对浏览器界面的分割，使得一个较为复杂的界面划分为多个简单的界面。每一个<frame>标签便相当于一个框架，每个框架有自己独立的html文档。
属性：
Ⅰ. border（设置边框间距宽度）
<frameset border="2">
Ⅱ. bordercolor（设置边框间距颜色）
<frameset bordercolor="red">
Ⅳ. frameborder（设置是否显示框架边框，可选值0，1，默认1，为0时无法调整尺寸）
<frameset frameborder="0">
Ⅴ. rows（纵向分割页面，定义各个框架的高度） Ⅵ. cols （横向分割页面，定义各个框架的宽度）
① 可选值：整数数字（单位为px但无需写）、百分比、*（自动扩充） ② 以逗号隔开各个框架对应的值 ③ 两个属性在一个框架集内不能同时存在，同时设置时在后面的属性将被忽略
<frameset cols="20%,*">
<frame>
<frame>
<frameset>
<frameset cols="20%,*,*">
<frame>
<frame>
<frame>
<frameset>
<frameset rows="120,*">
<frame>
<frameset cols="20%,*">
<frame>
<frame>
</frameset>
</frameset>
附带标签：
①<frame>标签（用于定义一个框架，每个框架有自己独立的文档）
属性：
name（定义框架名称）
<frame name="head">
src（定义在此框架中显示的文档的路径）
<frame name="head" src="./views/head.html">
noresize（禁止框架调整尺寸，只要设置一项，将导致整个框架集无法调整尺寸）
<frame name="head" src="./views/head.html" noresize>
scrolling（设置是否显示滚动条，可选值：auto、yes、no，默认auto）
<frame name="head" src="./views/head.html" scrolling="no">
marginheight（设置框架内部上下间距）
<frame name="head" src="./views/head.html" marginheight="0">
marginwidth（设置框架内部左右边距）
<frame name="head" src="./views/head.html" marginwidth="0">
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="50%,*">
<frame name="baidu" src="https://www.baidu.com/">
<frameset cols="50%,*">
<frame name="sougou" src="https://www.sogou.com/">
<frame name="360" src="https://hao.360.com/">
</frameset>
</frameset>
</html>
效果：
<iframe>标签（定义一个内联框架，即行内框架）
属性：
name（定义框架名称）src（定义在此框架中显示的文档的路径）width（设置框架宽度）height（设置框架高度）
<iframe width="100%" height="200"></iframe>
frameborder（设置是否显示框架边框，可选值0，1，默认1）marginheight（设置框架内部上下间距）marginwidth（设置框架内部左右边距）scrolling（设置是否显示滚动条，可选值：auto、yes、no，默认auto）
以下为H5新属性，仅部分兼容：
srcdoc（规定所定义的 HTML 内容显示在行内框架中）
<iframe src="./html/main.html" srcdoc="<p>你好</p>"></iframe>
与src的关联：
如果浏览器支持 srcdoc 属性，则展示srcdoc所规定的内容。 如果浏览器不支持 srcdoc 属性，则相应地会显示在 src 属性（若已设置）中规定的文件。
seamless（规定 <iframe> 看上去像是包含文档的一部分，无边框或滚动条）
<iframe src="./html/main.html" seamless></iframe>
sandbox（设置对应行内框架的额外限制）
可选值value
“”（空）设置限制以下所有功能。allow-same-origin允许 iframe 内容被视为与包含文档有相同的来源。allow-top-navigation允许 iframe 内容从包含文档导航（加载）内容。allow-forms允许表单提交allow-scripts允许脚本执行
<iframe src="https://www.baidu.com/" sandbox=""></iframe>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
position: fixed;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="box">
<iframe src="https://www.baidu.com/" width="100%" height="100%" frameborder="0" sandbox=""></iframe>
</div>
</body>
</html>
效果：
报错提示表单提交等功能被限制
仅供参考学习，转载请注明出处。 欢迎留言指错。
