Hxp的前端学习 - HTML - 标签分类 - frameset标签详解

最新推荐文章于 2023-05-09 20:19:15 发布

无名X

最新推荐文章于 2023-05-09 20:19:15 发布

阅读量677

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/hwc3737/article/details/109180467

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

标签分类 - frameset标签详解

原文链接：https://blog.csdn.net/hwc3737/article/details/109180467

<frameset>标签（用于定义一个框架集）

与<frame>标签搭配使用，实现对浏览器界面的分割，使得一个较为复杂的界面划分为多个简单的界面。每一个<frame>标签便相当于一个框架，每个框架有自己独立的html文档。

属性：

Ⅰ. border（设置边框间距宽度）

<!-- 具体数值，单位px可以省略 -->
<frameset border="2">

Ⅱ. bordercolor（设置边框间距颜色）

<frameset bordercolor="red">

Ⅳ. frameborder（设置是否显示框架边框，可选值0，1，默认1，为0时无法调整尺寸）

<frameset frameborder="0">

Ⅴ. rows（纵向分割页面，定义各个框架的高度）
Ⅵ. cols （横向分割页面，定义各个框架的宽度）

① 可选值：整数数字（单位为px但无需写）、百分比、*（自动扩充）
② 以逗号隔开各个框架对应的值
③ 两个属性在一个框架集内不能同时存在，同时设置时在后面的属性将被忽略

<!-- 第一个框架占20%宽度，另一个自动扩充 -->
<frameset cols="20%,*">
	<frame>
	<frame>
<frameset>

<!-- 第一个框架占20%宽度，第二和第三平分剩下的宽度空间 -->
<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）

<!-- 设置为no时即使超出屏幕显示也无法滚动 -->
<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（设置框架高度）

<!-- 可选值：数值（px可省略）、百分比 -->
<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>