网页制作08-html,css,javascript初认识のhtml使用框架结构，请先建立站点！
框架一般由框架集和框架组成。
框架集就像一个大的容器，包括所有的框架，是框架的集合。
框架是框架集中一个独立的区域用于显示一个独立的网页文档。
框架集是文件html，它定义一组框架的布局和属性，包括框架的数目，框架的大小和位置，以及在每个框架中初始显示的页面的URL。
框架结构是将两个或两个以上的网页组合起来。
框架最常用的用途就是导航，一组框架，通常包括一个含有导航条的框架和另一个显示主要内容的框架。
由于一个框在里面，一般有几个网页，所以在这里我们建立一个站点来管理这些网站资源。
一、建立站点
二、建立框架网页如下：
三、效果预览
1、打开index.html未点击时：
2、在index的left框架中点击链接后：
四、实操代码：
1、index.html：建立框架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head><frameset rows="15%,70%,15%" frameborder="yes" framespacing="10" bordercolor="#F3AF13"><frame src="top.html" scrolling="no"></frame><frameset cols="20%,80%" border="3" bordercolor="#F3AF13"><frame src="left.html" noresize></frame><frame src="main.html" name="main" marginheight="10" marginwidth="20"></frame></frameset><frame src="bottom.html"></frame><frame src="UntitledFrame-2"></frameset>
<noframes>此内容在浏览器不支持框架效果下所显示！</noframes>
</html>2、top.html：顶部框架内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>top</title>
</head><body><p>top...</p><h3 align="center">hello this is a headline</h3>
</body>
</html>3、bottom.html：底部框架内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><p>bottom^</p><p align="right">以上内容部分摘自网络,本文章以演示为主。</p>
</body>
</html>4、left.html：左侧框架内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><p>left</p><p><a href="01布偶.html" target="main">1.布偶猫</a></p><p><a href="02英短蓝猫.html" target="main">2.英短蓝猫</a></p><p>3.英短银渐层</p><p>4.美国短毛猫</p><p>5.暹罗猫</p><p>6.加菲猫</p><p>7.斯芬克斯猫</p><p>8.缅因猫</p></body>
</html>5、main.html（框架主要内容初始显示，后期点击left.html中的链接会被覆盖）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><p>main</p><img src="猫咪封面.jpg" width="90%" align="center">
</body>
</html>6、02英短蓝猫
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><h1><strong>2、英短蓝猫，其实就是英国短毛猫的彩色变种。</strong></h1><hr><img src="英短蓝猫.jpg" height="300" align="right">
<p><strong>品相特征：</strong>脑袋圆，发腮明显，毛发短，尾巴短，四肢短且粗壮，被毛颜色呈蓝灰色。</p>
<p><strong>体重范围：</strong>成年英短正常体重普遍在10斤上下。</p>
<p><strong>性格特点：</strong>性格温润，十分黏人，极爱撒娇。</p>
<p><strong>喂养建议:</strong>英短蓝猫属于本身极易发胖的猫，稍不注意就会被养成“蓝猪”，体重过胖后对蓝猫健康威胁非常大，因此，主人日常一定要控制好他的体重，不要被他的撒娇本事迷惑，动不动就给好吃的。</p>
<p><strong>参考价格：</strong>参考价格：1500~8000元。</p><hr><!--后面的内容是最后一章的内容浮动框架的演示-->
<p><a href="缅因猫.jpeg" target="if">浮动链接按钮</a></p>
<iframe src="01布偶.html" width="400" align="right" scrolling="yes" name="if"></iframe>
</body>
</html>五、部分框架标记属性
1、设置框架集的属性frameset
框架页面的结构是在框架集中设置的。
可以根据框架的分割方式，分为水平分割窗口，垂直分割窗口和嵌套分割窗口。
1)、水平分割窗口。
水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。
<frameset rows="15%,70%,15%" >
<frame src="top.html"></frame>
frameset rows这里是将页面分为三部分，其中的百分数是可以改变的，也可以用像素值设定
frame是引用网页内容
2)、垂直分割窗口。
<frameset cols="20%,80%" >
<frame src="left.html"></frame>
<frame src="main.html" name="main"></frame></frameset><frame src="bottom.html"></frame></frameset>
frameset cols是把页面分成左右两个部分，其中的百分号可以换成像素值
这里的name命名要记一下，是用来方便后面超链接设定打开方式target引用的
3)、嵌套分割窗口。
嵌套分割：一个页面中既有水平分割的框架，又有垂直分割的框架。
如果是用百分号的话。按照本文的例子代码书写即可。
如果是用到像素值的话,未知的数值用*代替
<frameset rows="80，*" cols="*"
2、框架的边框frameborder
<framese frameborder="是否显示"
显示：yes或者1
隐藏：NO或者0
在frameset设置将会对整个框架集有效，在frame中设置，则只对当前框架有效。
3、框架的边框宽度framespacing
<framese framespacing="10"
默认情况下框架的边框宽度是1，边框宽度只能对框架及使用对单个框架无效。以像素为单位。
4、框架的边框颜色
<framese bordercolor="#F3AF13"
5、设置窗口属性frame
Frame用来定义每一个单独的框架，页面，框架页面的属性设置都在frame标记进行。
1）页面源文件：src
<frame src="left.html"></frame>
2）页面名称name
页面名称是为了便于页面的查找和链接，所提供的一个属性。例如一个左右框架结构，左侧为链接，右侧为正文，当单击左侧链接以后要在右侧框架中打开正文，此时就需要用到 Free的name属性。
<frame name="页面名称"
3）禁止调整窗口的尺寸，noresize
没有属性值，添加属性后就不能拖动边框，反之无需指定此属性。
4)边框与页面内容的水平边距marginwidth
5)边框与页面内容的垂直边距marginheight
水平边距用于设置页面的左右边缘与框架、边框的距离。
垂直边距，用来设置页面的上下边缘与框架边缘的距离。
<frame marginheight="10" marginwidth="20">
6)控制框架滚动条显示scrolling
yes:一直显示滚动条。
no:无论什么情况都不显示滚动条。
auto:系统默认值。ta会根据具体内容来调整。
<frame scrolling="no">
7)不支持框架标记noframes
如果遇到不支持框架结构的浏览器，或者用户关闭了浏览器的框架显示功能，此时就需要用noframes来设置替换的内容告知浏览者，其浏览器无法打开框架页面。
<noframes>此内容在浏览器不支持框架效果下所显示！</noframes>
6、浮动框架。Iframe
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的此窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。 Iframe框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置。
1）页面源文件：src
<iframe src="left.html"></iframe>
此处在02英短蓝猫.html上浅加示例：
2）浮动框架的宽，高，对齐方式width,hight,align
<iframe src="01布偶.html" width="400" align="right"></iframe>
3）浮动框架滚动条显示属性scrolling
同一般框架，这里不展开
4）创建框架链接(详见上文）
index.html中：
<frame src="main.html" name="main" marginheight="10" marginwidth="20"></frame>
left.html中：
<a href="02英短蓝猫.html" target="main">2.英短蓝猫</a>
5）浮动框架的链接
方法同普通框架链接，把浮动框架当成main.html就行。
<p><a href="缅因猫.jpeg" target="if">浮动链接按钮</a></p>
<iframe src="01布偶.html" width="400" align="right" scrolling="yes" name="if"></iframe>
相关文章：
网页制作08-html,css,javascript初认识のhtml使用框架结构，请先建立站点！
框架一般由框架集和框架组成。 框架集就像一个大的容器，包括所有的框架，是框架的集合。 框架是框架集中一个独立的区域用于显示一个独立的网页文档。 框架集是文件html，它定义一组框架的布局和属性，包括框架的数目，框架…...
【Vscode 使用】集合1
一、使用make工具管理工程 windows下，下载mingw64，配置好mingw64\bin 为 Win10系统全局变量后。 在mingw64/bin目录下找到mingw32-make.exe工具。复制一份改名为：make.exe，没错，就是那么简单，mingw64自带m…...
文章精读篇——用于遥感小样本语义分割的可学习Prompt
题目：Learnable Prompt for Few-Shot Semantic Segmentation in Remote Sensing Domain 会议：CVPR 2024 Workshop 论文：10.48550/arXiv.2404.10307 相关竞赛：https://codalab.lisn.upsaclay.fr/competitions/17568 年份&#…...
解决 kubeasz 安装k8s集群跨节点pod 无法使用cluster ip通讯问题
问题描述 使用kubeasz搭建k8s集群后使用的配置文件 # etcd cluster should have odd member(s) (1,3,5,...) [etcd] 192.168.xx.22# master node(s) [kube_master] 192.168.xx.22# work node(s) [kube_node] 192.168.xx.9 192.168.xx.22# [optional] harbor server, a privat…...
Docker 搭建 Nginx 服务器
系列文章目录 Docker 搭建 Nginx 服务器 系列文章目录前言一、准备工作二、设置 Nginx 容器的目录结构三、启动一个临时的 Nginx 容器来复制配置文件四、复制 Nginx 配置文件到本地目录五、删除临时 Nginx 容器六、创建并运行 Nginx 容器，挂载本地目录七、修改 ngin…...
Spring AI + 大模型开发应用
JAVA SpringAI 大模型开发AI应用DEMO 前言JAVA项目创建示例 前言 在当今快速发展的技术领域，人工智能（AI）已经成为推动创新和变革的重要力量。然而，AI应用的开发过程往往复杂且耗时，需要开发者具备深厚的技术背景和丰…...
【C++11】 并发⽀持库
🌈 个人主页：Zfox_ 🔥 系列专栏：C从入门到精通 目录 前言：🚀 并发⽀持库一：🔥 thread库 二：🔥 this_thread 三：🔥 mutex 四࿱…...
Windows 11【1001问】如何下载Windows 11系统镜像
随着科技的不断进步，操作系统也在不断地更新换代。Windows 11作为微软最新一代的操作系统，带来了许多令人兴奋的新特性与改进，如全新的用户界面、更好的性能优化以及增强的安全功能等。对于想要体验最新技术或者提升工作效率的用户来说&#…...
视觉分析之边缘检测算法
9.1 Roberts算子 Roberts算子又称为交叉微分算法，是基于交叉差分的梯度算法，通过局部差分计算检测边缘线条。 常用来处理具有陡峭的低噪声图像，当图像边缘接近于正45度或负45度时，该算法处理效果更理想。 其缺点是对边缘的定位…...
蓝桥杯 2013 省 B 翻硬币
题目背景 小明正在玩一个“翻硬币”的游戏。 题目描述 桌上放着排成一排的若干硬币。我们用 * 表示正面，用 o 表示反面（是小写字母，不是零），比如可能情形是 **oo***oooo，如果同时翻转左边的两个硬币&…...
深度学习-6.用于计算机视觉的深度学习
Deep Learning - Lecture 6 Deep Learning for Computer Vision 简介深度学习在计算机视觉领域的发展时间线 语义分割语义分割系统的类型上采样层语义分割的 SegNet 架构软件中的SegNet 架构数据标注 目标检测与识别目标检测与识别问题两阶段和一阶段目标检测与识别两阶段检测器…...
【大模型】蓝耘智算云平台快速部署DeepSeek R1/R3大模型详解
目录 一、前言 二、蓝耘智算平台介绍 2.1 蓝耘智算平台是什么 2.2 平台优势 2.3 应用场景 2.4 对DeepSeek 的支持 2.4.1 DeepSeek 简介 2.4.2 DeepSeek 优势 三、蓝耘智算平台部署DeepSeek-R1操作过程 3.1 注册账号 3.1.1 余额检查 3.2 部署DeepSeek-R1 3.2.1 获取…...
《计算机视觉》——图像拼接
图像拼接 图像拼接是将多幅有重叠区域的图像合并成一幅全景或更大视角图像的技术，以下为你详细介绍： 原理：图像拼接的核心原理是基于图像之间的特征匹配。首先，从每幅图像中提取独特的特征点，如角点、边缘点等&#x…...
Go入门之接口
type Usber interface {start()stop() } type Phone struct {Name string }func (p Phone) start() {fmt.Println(p.Name, "启动") } func (p Phone) stop() {fmt.Println(p.Name, "关机") } func main() {p : Phone{Name: "华为手机",}var p1 U…...
element实现需同时满足多行合并和展开的表格
element实现需同时满足多行合并和展开的表格 需求描述: 以下面这张图为例，此表格的“一级表格”这一行可能存在多行数据，这种情况下需要将“一级指标”，“一级指标扣分xxx”,“一级指标关联xxx”这三列数据的行展示根据后面数据（…...
气象干旱触发水文（农业）干旱的概率及其触发阈值的动态变化-贝叶斯copula模型
前言 在干旱研究中，一个关键的科学问题是：在某一地区发生不同等级的气象干旱时，气象干旱会以何种概率引发不同等级的水文干旱、农业干旱和地下水干旱？换句话说，气象干旱的不同程度会分别引发其他类型干旱的哪种等级&a…...
系统学习算法：专题十二 记忆化搜索
什么是记忆化搜索，我们先用一道经典例题来引入，斐波那契数 题目一： 相信一开始学编程语言的时候，就一定碰到过这道题，在学循环的时候，我们就用for循环来解决，然后学到了递归，我们又…...
c++入门-------命名空间、缺省参数、函数重载
C系列 文章目录 C系列前言一、命名空间二、缺省参数2.1、缺省参数概念2.2、 缺省参数分类2.2.1、全缺省参数2.2.2、半缺省参数 2.3、缺省参数的特点 三、函数重载3.1、函数重载概念3.2、构成函数重载的条件3.2.1、参数类型不同3.2.2、参数个数不同3.2.3、参数类型顺序不同 前言…...
豆包、扣子等产品如何与CSDN合作？
要实现CSDN开发者社区与豆包、扣子等产品的深度合作，构建创作者Agent生态体系，可通过以下结构化方案实现技术、生态与商业价值的闭环（含具体实施路径与数据指标）： 一、战略合作框架搭建 开放平台互通 建立三方API网关&…...
51单片机测试题AI作答测试（DeepSeek Kimi）
单片机测试题 DeepSeek Kimi 单项选择题 （10道） 6题8题判断有误 6题判断有误 智谱清言6题靠谱，但仔细斟酌，题目出的貌似有问题，详见 下方。 填空题 （9道） 脉宽调制（Pulse …...
Java实际上只有值传递
在 Java 中，实际上只有值传递，这可以从基本数据类型和引用数据类型两个方面来看。 基本概念 值传递：指在方法调用时，将实际参数的值复制一份传递给形式参数，在方法内部对形式参数的修改不会影响到实际参数。引用传递…...
解析HTML时需要注意什么？
在使用PHP爬虫解析HTML内容时，需要注意以下几个关键点，以确保数据提取的准确性和程序的稳定性。以下是一些重要的注意事项和最佳实践： 1. 选择合适的解析工具 PHP提供了多种工具来解析HTML，但选择合适的工具可以简化开发过程并提…...
去耦电容的作用详解
在霍尔元件的实际应用过程中，经常会用到去耦电容。去耦电容是电路中装设在元件的电源端的电容，其作用详解如下： 一、基本概念 去耦电容，也称退耦电容，是把输出信号的干扰作为滤除对象。它通常安装在集成电路…...
2024-2025 学年广东省职业院校技能大赛 “信息安全管理与评估”赛项 技能测试试卷（二）
2024-2025 学年广东省职业院校技能大赛 “信息安全管理与评估”赛项 技能测试试卷（二） 第一部分：网络平台搭建与设备安全防护任务书第二部分：网络安全事件响应、数字取证调查、应用程序安全任务书任务 1：应急响应&…...
深入剖析：基于红黑树实现自定义 map 和 set 容器
🌟 快来参与讨论💬，点赞👍、收藏⭐、分享📤，共创活力社区。🌟 在 C 标准模板库（STL）的大家庭里，map和set可是超级重要的关联容器成员呢😎&#x…...
20-R 绘图 - 饼图
R 绘图 - 饼图 R 语言提供来大量的库来实现绘图功能。 饼图，或称饼状图，是一个划分为几个扇形的圆形统计图表，用于描述量、频率或百分比之间的相对关系。 R 语言使用 pie() 函数来实现饼图，语法格式如下： pie(x, l…...
第438场周赛：判断操作后字符串中的数字是否相等、提取至多 K 个元素的最大总和、判断操作后字符串中的数字是否相等 Ⅱ、正方形上的点之间的最大距离
Q1、判断操作后字符串中的数字是否相等 1、题目描述 给你一个由数字组成的字符串 s 。重复执行以下操作，直到字符串恰好包含 两个 数字： 从第一个数字开始，对于 s 中的每一对连续数字，计算这两个数字的和 模 10。用计算得到的新…...
STM32F4 adc扫描模式采集实验
做adc采集的时候用扫描模式发现读数据时只能读到一个通道的数据，想显示其他几个通道的数据只能进行多次单个扫描，违背了扫描模式的本意，故用ai做了一个将扫描数据用dma储存在内存的adc三通道采集实验，若有巨佬发现有错望告知。 代…...
软考教材重点内容 信息安全工程师 第17章 网络安全应急响应技术原理与应用
17.1 网络安全应急响应概述 网络安全应急响应是针对潜在发生的网络安全事件而采取的网络安全措施。 17.1.1 网络安全应急响应概念 网络安全应急响应是指为应对网络安全事件，相关人员或组织机构对网络安全事件进行监测、预警、分析、响应和恢复等工作。 17.2.3 网络安…...
点击修改按钮图片显示有问题
问题可能出在表单数据的初始化上。在 ave-form.vue 中，我们需要处理一下从后端返回的图片数据，因为它们可能是 JSON 字符串格式。 vue:src/views/tools/fake-strategy/components/ave-form.vue// ... existing code ...Watch(value)watchValue(v: any) …...