HTML学习笔记：（二）框架实例

2、 框架实例

注意：frameset不能和body标签共存
<frameset>元素是用于创建框架页面的，它允许在一个浏览器窗口中显示多个HTML页面。然而，<frameset>是一种较旧的方式来构建网页，它不符合现代Web标准（比如HTML5）。HTML5不推荐使用<frameset>，因为它有许多限制，并且可能被未来的浏览器弃用。

2.1、垂直框架：

  • 尺寸可调整（鼠标放置在相交处）
  • cols 标签
<html>
<!--垂直框架cols-->
<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

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

2.2、水平框架：

  • 尺寸可调整（鼠标放置在相交处）
  • rows 标签
<html>
<!--水平框架rows -->
<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
    <!--设置不支持提示noframes -->
  <noframes>
  <body>您的浏览器不支持该框架</body>
  </noframes>
</frameset>
</html>

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

2.3、混合框架的使用：

  • 尺寸可调整（鼠标放置在相交处）
<html>
<!--混合框架的使用 rows+cols-->
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

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

2.4设置尺寸不可拖动修改

  • noresize="noresize"实现尺寸不可拖动修改
<html>
<!--混合框架之设置尺寸不可拖动改变 设置frame_a的尺寸不能改变-->
<frameset cols="25%,25%,50%">
<frame src="/example/html/frame_a.html" noresize="noresize">
<frame src="/example/html/frame_b.html" >
<frame src="/example/html/frame_c.html" >
</frameset>
</html>

2.5 设置尺寸自适应

  • 星号标签实现自适应
<html>
<!--混合框架之设置尺寸不可拖动改变 设置frame_a的尺寸不能改变-->
<frameset cols="25%,*,*">
<frame src="/example/html/frame_a.html" >
<frame src="/example/html/frame_b.html" >
<frame src="/example/html/frame_c.html" >
</frameset>
</html>

运行效果：
A占25%，B和C平分剩余空间
在这里插入图片描述

2.6、iframe内联框架的使用（用于网页中显示网页）

标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。

iframe的各种方法

  • <iframe src="URL"></iframe>  其中URL可为文件可为链接

（1）URL=文本
创建iframe_content.html文件

<html>
<body>
<p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>

  <p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>

  <p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>

  <p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
</body>
</html>

创建iframe.html文件，实现效果

<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动  auto、yes-->
<iframe src="iframe_content.html" width="300px" height="300px"></iframe>
</html>

运行效果：
在这里插入图片描述
（2）URL=链接

<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动  auto、yes-->
<iframe src="https://www.baidu.com" width="500px" height="300px"></iframe>
</html>

运行效果：
在这里插入图片描述
（3） URL=链接 实现内联效果 （点击修改iframe中的内容）

<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动  auto、yes-->
<iframe src="frame_a.html" name="framea" width="300px" height="300px"></iframe>
<p><a href="https://www.baidu.com" target="framea">百度</a></p>
</html>

运行效果：
原始效果：
在这里插入图片描述
点击百度：
在这里插入图片描述

2.7、锚的使用(设置页面默认展示位置)+页面跳转

【HTML】使用框架导航跳转到指定的节
frame_list.html

<html>
<body>
<h1>Chapter 1</h1>
<p>这是一句话</p>
<h1>Chapter 2</h1>
<p>这是一句话</p>
<h1>Chapter 3</h1>
<p>这是一句话</p>
<h1>Chapter 4</h1>
<p>这是一句话</p>
<h1>Chapter 5</h1>
<p>这是一句话</p>
<h1>Chapter 6</h1>
<p>这是一句话</p>
<h1>Chapter 7</h1>
<p>这是一句话</p>
<h1>Chapter 8</h1>
<p>这是一句话</p>
<h1>Chapter 9</h1>
<p>这是一句话</p>

<h1 ><a name="C10">Chapter 10</a></h1>
<p>这是一句话</p>
<h1>Chapter 11</h1>
<p>这是一句话</p>
<h1>Chapter 12</h1>
<p>这是一句话</p>
<h1>Chapter 13</h1>
<p>这是一句话</p>
<h1>Chapter 14</h1>
<p>这是一句话</p>
<h1>Chapter 15</h1>
<p>这是一句话</p>
<h1>Chapter 16</h1>
<p>这是一句话</p>
<h1>Chapter 17</h1>
<p>这是一句话</p>
</body>
</html>

frame_miao.html

<html>
<body>
<a href="frame_list.html" target="showframe">没有锚的链接</a>
<br >
<a href="frame_list.html#C10" target="showframe">带锚的链接</a>
</body>
</html>

frame_link.html

  • 注意此处设置name
<html>
<frameset cols="200,*">

<frame src="frame_miao.html" >
<frame src="frame_list.html" name="showframe">

</frameset>
</html>

运行效果：
（1）没有带锚的
在这里插入图片描述

（2）带锚的
在这里插入图片描述

2.7.2 html实现简单导航栏

frame_content.html

  •  <meta charset="utf-8"/>不设置的话，title文字在浏览器上显示乱码

<html>
<head>
<meta charset="utf-8"/>
<title>导航栏之导航部分</title>

<body> 
<a href="frame_a.html" target="content">FrameA</a>
<br >
<a href="frame_b.html" target="content">FrameB</a>
<br >
<a href="frame_c.html" target="content">FrameC</a>
<br >
</head>
</body>
</html>

frame_a.html

<html>
<body bgcolor="yellow">
<h1>FrameA</h1>
</body>
</html>

然后frame_navigation bar.html

<html>
<head>
<title>导航栏Demo</title>
<frameset cols="25%,*">
<frame src="frame_content.html"></frame>
<frame src="frame_a.html" name="content"> </frame>
</frameset>
</html>

运行frame_navigation bar.html效果：
在这里插入图片描述
点击左侧FrameA 右侧变为frame_a.html里面的内容
点击左侧FrameB 右侧变为frame_b.html里面的内容
点击左侧FrameC 右侧变为frame_c.html里面的内容

  • target的效果即为：
    将name对应的文件内容修改为target对应的内容

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/558052.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【VTKExamples::Meshes】第 十四期 ExtractEdges

【VTKExamples::Meshes】第 十四期 ExtractEdges

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ：870202403 公众号：VTK忠粉 前言 本文分享VTK样例ExtractEdges，并解析接口vtkExtractEdges，希望对各位小伙伴有所帮助！ 感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！ 你的点赞就是我的动力(＾Ｕ＾)ノ~…
阅读更多...
深入理解JAVA垃圾收集器CMS,G1工作流程原理 GC流程图 什么社会触发Minor GC？触发MinorGC过程。Full GC 过程。

深入理解JAVA垃圾收集器CMS,G1工作流程原理 GC流程图 什么社会触发Minor GC？触发MinorGC过程。Full GC 过程。

java CMS&#xff0c;G1垃圾收集器工作流程原理浅析 JVM内存空间基础知识点&#xff08;基于JDk1.8&#xff09; 1.方法区&#xff1a;逻辑概念&#xff0c;元空间&#xff0c;方法区主要用于存储类的信息、常量池、方法数据、方法代码等。方法区逻辑上属于堆的一部分&#xf…
阅读更多...
Github 2024-04-15 开源项目日报Top10

Github 2024-04-15 开源项目日报Top10

根据Github Trendings的统计，今日(2024-04-15统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Python项目4TypeScript项目2HTML项目1JavaScript项目1C++项目1Rust项目1Mojo项目1Fooocus: 图像生成软件 创建周期：188 天开发语言：Python协议…
阅读更多...
Mathtype用法记录

Mathtype用法记录

常用写法 公式编号 给公式插入编号的方法 手动修改公式编号为指定值 例如编号(8.3.1)修改为(8.3.7)&#xff0c;即章、节号不变&#xff0c;公式序号改为7。 可修改编号的域代码&#xff0c;比如(8.3.1)的域代码为&#xff1a; { { MACROBUTTON MTPlaceRef \* MERGEFORMAT…
阅读更多...
【星瑞格】SinoDB国产数据库安装初体验及学习指南

【星瑞格】SinoDB国产数据库安装初体验及学习指南

今天和大家一起来看看一款来自福建的国产数据库——SinoDB。本人很早就听说过这款数据库&#xff0c;而且星瑞格公司就在同一栋办公楼。虽然以前就已经对这颗国产数据库有一定的了解&#xff0c;并没有真正的去使用一把。随着数据库国产化改造工作的推进&#xff0c;身边的客户…
阅读更多...
使用docker配置CCM-SLAM

使用docker配置CCM-SLAM

一.Docker环境配置 1.拉取Docker镜像 sudo docker pull ubuntu:18.04拉取的为ununtu18版本镜像&#xff0c;环境十分干净&#xff0c;可以通过以下命令查看容器列表 sudo docker images 如果想删除多余的docker image&#xff0c;可以使用指令 sudo docker rmi -f <id&g…
阅读更多...
基于Java+SpringBoot+Vue前后端分离仓库管理系统

基于Java+SpringBoot+Vue前后端分离仓库管理系统

基于JavaSpringBootVue前后端分离仓库管理系统 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 &#…
阅读更多...
《QT实用小工具·三十二》九宫格炫酷主界面

《QT实用小工具·三十二》九宫格炫酷主界面

1、概述 源码放在文章末尾 项目实现了九宫格炫酷主界面&#xff0c;下面是项目demo演示&#xff1a; 项目部分代码如下&#xff1a; #pragma execution_character_set("utf-8")#include "frmmain.h" #include "ui_frmmain.h"frmMain::frmMain…
阅读更多...
Android Studio学习笔记——广播机制Broadcast

Android Studio学习笔记——广播机制Broadcast

Android Studio学习笔记——广播机制 5.1 广播机制简介5.2 接收系统广播5.2.1 动态注册监听网络变化5.2.2 静态注册实现开机启动 5.3 发送自定义广播5.3.1 发送标准广播5.3.2 发送有序广播 5.4 使用本地广播5.5 广播的最佳实践——强制下线功能 5.1 广播机制简介 安卓每个应用…
阅读更多...
百度网盘超级会员2024最新白嫖30天教程

百度网盘超级会员2024最新白嫖30天教程

百度网盘超级会员服务是百度网盘提供的一项高级服务&#xff0c;它为用户提供了许多特权和功能&#xff0c;旨在为用户带来更加便捷、高效的文件存储和管理体验。以下是关于百度网盘超级会员服务的详细介绍&#xff1a; 百度网盘VIP领取入口&#xff1a; 关注公众号回复&#x…
阅读更多...
在Linux操作系统中，修改文件目录权限常用的命令操作

在Linux操作系统中，修改文件目录权限常用的命令操作

修改文件的属主或者是属组 命令chown 用户名.用户组名&#xff0c;文件路径 如上图所示&#xff0c;使用命令 chown martin.caiwu /opt/test/1.txt 将文件1.txt的属主修改为martin 。 将文件1.txt的属组修改为caiwu 如上图所示&#xff0c;使用命令chown .jishu /opt/test/…
阅读更多...
【muduo源码学习】one-loop-per-thread核心原理

【muduo源码学习】one-loop-per-thread核心原理

在 TCP 网络编程中&#xff0c;这里我们特指在单机的环境下&#xff0c;主要关注两件事。第一&#xff0c;如何正确的处理TCP的连接和断开&#xff0c;以及正确处理数据的收发&#xff1b;在错综复杂的网络环境中&#xff0c;这并非易事&#xff0c;涉及很多细节。第二&#xf…
阅读更多...
过滤器和拦截器的样例

过滤器和拦截器的样例

拦截器实例代码&#xff0c;加上之后必须登录才能访问其他功能接口 package com.itheima.interceptors;import com.itheima.utils.JwtUtil; import com.itheima.utils.ThreadLocalUtil; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpSer…
阅读更多...
数据结构和算法：贪心

数据结构和算法：贪心

贪心算法 贪心算法是一种常见的解决优化问题的算法&#xff0c;其基本思想是在问题的每个决策阶段&#xff0c;都选择当前看起来最优的选择&#xff0c;即贪心地做出局部最优的决策&#xff0c;以期获得全局最优解。 贪心算法和动态规划都常用于解决优化问题。它们之间存在一…
阅读更多...
screen常用命令

screen常用命令

screen是一个在Linux系统中常用的命令行终端模拟器&#xff0c;它允许用户在一个单一终端会话中管理多个终端窗口。以下是一些常用的screen命令 1、创建一个新的screen会话并命名 screen -S <name>2、control a d &#xff1a;分离&#xff08;detach&#xff09;当前的…
阅读更多...
按从小到大顺序输出a, b, c（C语言）

按从小到大顺序输出a, b, c（C语言）

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;float a, b, c, t;//提示用户输入数据&#xff1b;printf("请输入数据a b c&#xff1a;");//获取用户输入数…
阅读更多...
[大模型]Qwen-7B-Chat 接入langchain搭建知识库助手

[大模型]Qwen-7B-Chat 接入langchain搭建知识库助手

Qwen-7B-Chat 接入langchain搭建知识库助手 环境准备 在autodl平台中租一个3090等24G显存的显卡机器&#xff0c;如下图所示镜像选择PyTorch–>2.0.0–>3.8(ubuntu20.04)–>11.8 接下来打开刚刚租用服务器的JupyterLab&#xff0c;并且打开其中的终端开始环境配置…
阅读更多...
鸿蒙嵌入式开发工程师“钱”景如何？

鸿蒙嵌入式开发工程师“钱”景如何？

鸿蒙嵌入式开发工程师前景如何&#xff1f;鸿蒙嵌入式开发工程师是指专门从事鸿蒙OS(HarmonyOS)在嵌入式设备上应用开发的工程师。随着鸿蒙OS的不断发展和应用场景的拓宽&#xff0c;鸿蒙嵌入式开发工程师的前景可以从以下几个方面进行展望&#xff1a; 1、鸿蒙嵌入式开发工程…
阅读更多...
数据结构（循环单链表

数据结构（循环单链表

目录 1. 讲解&#xff1a;2. C代码实现&#xff1a;小结&#xff1a; 1. 讲解&#xff1a; 循环链表又分为循环单链表、循环双链表。 2. C代码实现&#xff1a; #include <stdlib.h> #include <iostream> #include <stdio.h>using namespace std;#define E…
阅读更多...
【leetcode面试经典150题】61. 反转链表 II（C++）

【leetcode面试经典150题】61. 反转链表 II（C++）

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站