网页学习——创建HTML框架（frameset、frame、iframe）_html frame-程序员宅基地

框架标签是一种与网页布局密切相关的标签，通过使用框架，可以在同一个浏览器窗口显示多个页面。

1、框架集标签 < frameset >

< frameset >元素中的cols、row属性，用于将页面划分。

cols 属性定义框架集中的列数目和尺寸
rows 属性定义框架集中的行数目和尺寸
border 属性设置框架边框的宽度
bordercolor 属性设定框架边框的颜色

两者的取值单位可以是像素（绝对大小），可以是百分比（相对大小），也可以是*（表示除了以划分部分的尺寸后剩余的尺寸）。

例（建立一个简单框架）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<frameset rows="300,*" border="20" bordercolor="blue">
			<noframes>
				<body>你的浏览器不支持显示框架</body>
			</noframes>
			<frame src="a.html" />
			<frameset cols="40%,*" border="10" bordercolor="green">
				<frame src="b.html" />
				<frame src="c.html" />
			</frameset>
		</frameset>
</html>

注意：使用 frameset 标签时不能写在 body 标签内，否则容易无效。

上面的< noframes > 标签为那些不支持框架的浏览器显示替代文本。即当浏览器不能处理框架时，就会显示该元素中的文本，这些文本包含在< body >元素中。

运行效果如下（因为框架中引入的网页名是我随意取的不存在网页，所有显示为404）：
在这里插入图片描述

2、框架标签 < frame >

语法格式：

<frame name="f1" src="a.html" scrolling="auto" noresize="noresize"/>

< frame >框架标签的若干属性：

src 属性设置框架中要显示的网页的URL地址
name 属性设置框架名称、来唯一标识框架
scrolling 属性设置框架是否显示滚动条，属性值可为：yes、no、auto
noresize 属性设置是否可以调整窗口大小，属性值只可取：noresize

使用超链接中的target属性来控制框架跳转显示：
超链接< a >元素中的target属性可以设置在何处打开链接页面，有五个取值：

_blank：在新窗口中打开目标文=文档
_self：在当前框架或窗口打开目标文档，默认值
_parent：在父框架集中显示被打开的目标文档
_top：跳出所有框架集，在整个窗口中打开目标文档
框架名称：在指定框架中打开目标文档

3、浮动框架标签 < iframe >

< iframe >是一种可以嵌在网页中任意部分的框架形式，也称为浮动框架。
语法格式：

<iframe src="aa.html" id="iframe1" width="100" height="100" frameborder="1" scrolling="auto"></iframe>

属性值说明：

src 设置框架中要显示的网页的URL地址
id 用于唯一标识 iframe 框架
width 设置浮动框架的宽度
height 设置浮动框架的高度
frameborder 设置是否显示边框，0 为不显示，1 为显示
scrolling 设置是否显示滚动条，属性值可为：yes、no、auto

注意：< iframe >标签一般写在 body 标签内，而不是写在框架集标签中

此外，可以在 iframe 起始和结束标签中加入替代文本，当浏览器不支持 iframe 元素时，显示这些替代文本给出说明。

例（iframe的使用）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；
		怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《
		谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”
		野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。</p>
		<iframe src="img/bg.png" width="300" height="300">浏览器不支持使用iframe标签噢！</iframe>
	</body>
</html>

运行结果如下：
在这里插入图片描述
例（frameset、frame的使用）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="10%,*" border="10" bordercolor="#5555ff" >
		<frame name="fa" src="a.html" scrolling="no"/>
		<frameset cols="10%,*">
			<frame name="fb" src="b.html" />
			<frame name="fc"/>
		</frameset>
	</frameset>
</html>

运行效果如下：
在这里插入图片描述

本文链接：https://blog.csdn.net/m0_53156691/article/details/124640140

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Linux查看登录用户日志_怎么记录linux设备发声的登录和登出-程序员宅基地

文章浏览阅读8.6k次。一、Linux记录用户登录信息文件1　　/var/run/utmp----记录当前正在登录系统的用户信息；2　　/var/log/wtmp----记录当前正在登录和历史登录系统的用户信息；3　　/var/log/btmp：记录失败的登录尝试信息。二、命令用法1.命令last，lastb---show a listing of la_怎么记录linux设备发声的登录和登出

第四章笔记：遍历--算法学中的万能钥匙-程序员宅基地

文章浏览阅读167次。摘要：1. 简介 2. 公园迷宫漫步 3. 无线迷宫与最短（不加权）路径问题 4. 强连通分量1. 简介在计算机科学裡，树的遍历（也称为树的搜索）是圖的遍歷的一种，指的是按照某种规则，不重复地访问某种樹的所有节点的过程。具体的访问操作可能是检查节点的值、更新节点的值等。不同的遍历方式，其访问节点的顺序是不一样的。两种著名的基本遍历策略：深度优先搜索（DFS）和广度优先搜索（B...

【案例分享】使用ActiveReports报表工具，在.NET MVC模式下动态创建报表_activereports.net 实现查询报表功能-程序员宅基地

文章浏览阅读591次。提起报表，大家会觉得即熟悉又陌生，好像常常在工作中使用，又似乎无法准确描述报表。今天我们来一起了解一下什么是报表，报表的结构、构成元素，以及为什么需要报表。什么是报表简单的说：报表就是通过表格、图表等形式来动态显示数据，并为使用者提供浏览、打印、导出和分析的功能，可以用公式表示为：报表 = 多样的布局 + 动态的数据 + 丰富的输出报表通常包含以下组成部分：报表首页：在报表的开..._activereports.net 实现查询报表功能

Ubuntu18.04 + GNOME xrdp + Docker + GUI_docker xrdp ubuntu-程序员宅基地

文章浏览阅读6.6k次。最近实验室需要用Cadence，这个软件的安装非常麻烦，每一次配置都要几个小时，因此打算把Cadence装进Docker。但是Cadence运行时需要GUI，要对Docker进行一些配置。我们实验室的服务器运行的是Ubuntu18.04，默认桌面GNOME，Cadence装进Centos的Docker。安装Ubuntu18.04服务器上安装Ubuntu18.04的教程非常多，在此不赘述了安装..._docker xrdp ubuntu

iOS AVFoundation实现相机功能_ios avcapturestillimageoutput 兼容性 ios17 崩溃-程序员宅基地

文章浏览阅读1.8k次，点赞2次，收藏2次。首先导入头文件#import 导入头文件后创建几个相机必须实现的对象 /** * AVCaptureSession对象来执行输入设备和输出设备之间的数据传递 */ @property (nonatomic, strong) AVCaptureSession* session; /** * 输入设备 */_ios avcapturestillimageoutput 兼容性 ios17 崩溃

Oracle动态性能视图--v$sysstat_oracle v$sysstat视图-程序员宅基地

文章浏览阅读982次。按照OracleDocument中的描述，v$sysstat存储自数据库实例运行那刻起就开始累计全实例(instance-wide)的资源使用情况。类似于v$sesstat，该视图存储下列的统计信息：1>.事件发生次数的统计(如：user commits)2>._oracle v$sysstat视图

随便推点

Vue router报错：NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}的解决方法_navigationduplicated {_name: 'navigationduplicated-程序员宅基地

文章浏览阅读7.6k次，点赞2次，收藏9次。我最近做SPA项目开发动态树的时候一直遇到以下错误：当我点击文章管理需要跳转路径时一直报NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}这个错误但是当我点击文章管理后，路径跳转却是成功的<template> <div> 文章管理页面 <..._navigationduplicated {_name: 'navigationduplicated', name: 'navigationduplic