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

news2024/11/27 2:34:58

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.coloradmin.cn/o/1604111.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue 一键更换主题颜色

vue 一键更换主题颜色

这里提供简单的实现步骤&#xff0c;具体看自己怎么加到项目中 我展示的是vue2 vue3同理 在 App.vue 添加 入口处直接修改 #app { // 定义的全局修改颜色变量--themeColor:#008cff; } // 组件某些背景颜色需要跟着一起改变&#xff0c;其他也是同理 /deep/ .ant-btn-primar…
阅读更多...
气膜室内滑雪场：解决冬季运动难题-轻空间

气膜室内滑雪场：解决冬季运动难题-轻空间

在社会主义的旗帜下&#xff0c;人们对环境保护的意识不断增强&#xff0c;全民健身的倡导推动了体育事业的蓬勃发展&#xff0c;也为新建筑业带来了机遇。在环保气膜中进行运动&#xff0c;确实能够体会到许多优点&#xff1a;没有严寒酷暑、飞沙走石和雾霾的困扰。在这里&…
阅读更多...
Halo自定义页面

Halo自定义页面

在使用Halo后台维护项目&#xff0c;有的页面是固定的&#xff0c;但内容需要一些自定义样式&#xff0c;内容动态编辑生成&#xff0c;这个时候就需要自定义页面; Halo版本 版本&#xff1a;2.121.首先在theme.yaml中添加自定义页面并指定文件名 spec:customTemplates:page:…
阅读更多...
HTML学习笔记：链接target属性

HTML学习笔记：链接target属性

关于target的使用&#xff1a; <a href"https://www.baidu.com" target"_parent">网址链接</a>其中关于target四个特殊目标的理解&#xff0c;W3school上的解释为&#xff1a; HTML 标签的 target 属性 其中_black和_self两个属性很好理解&…
阅读更多...
好用且免费的无需搭梯子的长文本场景对话大模型

好用且免费的无需搭梯子的长文本场景对话大模型

这款ai工具最近爆火&#xff0c;Kimi支持200万字无损上下文&#xff0c;在长上下文窗口技术上再次取得突破&#xff0c;引燃人工智能领域新一轮投资热情。我也是支持国货&#xff0c;抱着试一试的心态使用&#xff0c;确实不错&#xff0c; China&#x1f402;&#x1f37a;
阅读更多...
1分钟搞定NumPy对ndarray快速排序和文件IO操作

1分钟搞定NumPy对ndarray快速排序和文件IO操作

1.快速排序 np.sort() 与 ndarray.sort() 都可以&#xff0c;但有区别&#xff1a; np.sort()&#xff1a;不改变原数组&#xff0c;创建一个新的数组&#xff0c;开辟新的内存空间 ndarray.sort()&#xff1a;改变原数组&#xff0c;不多占内存空间 ​# 导包import numpy a…
阅读更多...
移动端图片转表格文字的应用推荐

移动端图片转表格文字的应用推荐

移动端的应用程序中&#xff0c;有许多可以识别图片中文字和表格的应用。以下是一些常见的&#xff1a; 1. **金鸣表格文字识别**&#xff1a;金鸣表格文字识别是一款专业的OCR应用&#xff0c;可以识别图像中的文字和表格&#xff0c;以及各类证件和票据的结构化识别&#xff…
阅读更多...
PHP01——php快速入门 之 在Mac上使用phpstudy快速搭建PHP环境

PHP01——php快速入门 之 在Mac上使用phpstudy快速搭建PHP环境

PHP01——php快速入门 之 在Mac上使用phpstudy快速搭建PHP环境 0. 前言1. 下载小皮面板1.1 下载phpstudy&#xff08;小皮面板&#xff09;1.2 启动、简单访问1.2.1 启动Apache1.2.2 访问1.2.3 访问自定义文件或页面 2. 创建网站2.1 创建网站2.2 可能遇到的问题2.2.1 hosts权限…
阅读更多...
Hbase的简单学习一

Hbase的简单学习一

一 Hbase的搭建与安装 1.1 安装 1.准备好文件&#xff0c;上传到Linux上 2.解压文件 tar zxvf hbase-2.2.7-bin.tar.gz -C ../ ../是解压到的路径 1.2 配置文件 1.配置环境变量 去etc/profile目录下 export HBASE_HOME/usr/local/soft/hbase-2.2.7 export PATH$PATH:$H…
阅读更多...
openlayers 入门教程（六）：controls 篇

openlayers 入门教程（六）：controls 篇

目录 一、常用的控件 二、使用控件方法 三、添加删除control 的基本方法 四、control示例 1 比例尺 - ScaleLine 2 鹰眼/缩小图 - OverviewMap 3 全屏 - FullScreen 4 版权信息 - Attribution 5 旋转地图 - Rotate 6 放大缩小 - Zoom 7 缩放滑块控件 - ZoomSlider …
阅读更多...
数据库服务的运行与登录

数据库服务的运行与登录

打开数据库服务 数据库服务: SQL Server(MSSQLServer) 运行在服务器端的应用程序, 提供数据的存储 / 处理和事务等在使用DBMS的客户端之前必须首先打开该服务 客户端连接到服务器 关于客户端 / 服务器端的说明 客户端 : 数据库管理系统(DBMS), 应用程序服务器端 : 安装的数据…
阅读更多...
MyEclipse 2019安装包（亲测可用）

MyEclipse 2019安装包（亲测可用）

目录 一、软件简介 二、软件下载 一、软件简介 MyEclipse是一款功能强大的企业级集成开发环境&#xff08;IDE&#xff09;&#xff0c;它是在Eclipse的基础上通过添加自己的插件开发而成的。MyEclipse主要用于Java、Java EE以及移动应用的开发&#xff0c;并提供了对多种语言…
阅读更多...
23 种设计模式

23 种设计模式

设计模式 1、工厂方法 消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：如何创建及如何向客户端提供。 2、建造者模式 建造模式：将产品的内部表象和产品的生成过程分割开来，从而使一…
阅读更多...
云服务器安装Mysql、MariaDB、Redis、tomcat、nginx

云服务器安装Mysql、MariaDB、Redis、tomcat、nginx

前置工作 进入根目录 cd / 都在/usr/local/src文件夹&#xff09; 上传压缩包 rz 压缩包 Mysql 1.下载并安装MySQL官方的 Yum Repository wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noarch.rpm yum…
阅读更多...
什么是Spring Security？具有哪些功能？

什么是Spring Security？具有哪些功能？

本篇将带你快速了解什么是Spring Security&#xff0c;通过入门案例以及相关原理和类的分析让你快速入门。 一、概述 官网&#xff1a;https://spring.io/projects/spring-security Spring Security是一个Java框架&#xff0c;用于保护应用程序的安全性。它提供了一套全面的安全…
阅读更多...
【洛谷 P3366】【模板】最小生成树 题解（无向图+边集数组+Kruskal算法+最小生成树+并查集+路径压缩）

【洛谷 P3366】【模板】最小生成树 题解（无向图+边集数组+Kruskal算法+最小生成树+并查集+路径压缩）

【模板】最小生成树 题目描述 如题&#xff0c;给出一个无向图&#xff0c;求出最小生成树&#xff0c;如果该图不连通&#xff0c;则输出 orz。 输入格式 第一行包含两个整数 N , M N,M N,M&#xff0c;表示该图共有 N N N 个结点和 M M M 条无向边。 接下来 M M M 行…
阅读更多...
每日学习笔记：C++ STL算法之容器赋值与替换元素

每日学习笔记：C++ STL算法之容器赋值与替换元素

本文API 赋值 fill(beg, end, newValue) fill_n(beg, num, newValue) generate(beg, end, op) generate_n(beg, num, op) iota(beg, end, startValue) 替换元素 replace(beg, end, oldValue, newValue) replace_if(beg, end, op, newValue) replace_copy(sourceBeg, sourceEnd,…
阅读更多...
3个最常用的游戏资产优化技巧【BLENDER】

3个最常用的游戏资产优化技巧【BLENDER】

创建视频游戏资产既具有挑战性又富有回报。 经过一些研究并根据我的经验&#xff0c;这里有三个技巧可以帮助你使用 Blender 优化游戏资产。 在 Blender 中优化游戏资源的三种技术可以归结为拥有高效的 3D 模型拓扑、通过烘焙优化纹理&#xff0c;以及最后通过 Blender 节点的…
阅读更多...
恢复回收站删除的文件？5个恢复技巧收藏好！

恢复回收站删除的文件？5个恢复技巧收藏好！

电脑回收站是一个重要的系统工具&#xff0c;它为用户提供了便捷的文件和文件夹管理功能&#xff0c;主要功能有存储临时删除的文件、恢复已删除的文件等。它能帮助用户更好地管理和控制电脑文件和文件夹。 在使用电脑的过程中&#xff0c;我们难免会遇到误删文件的情况&#…
阅读更多...
使用python进行网站答题操作

使用python进行网站答题操作

介绍&#xff1a; 使用Python和DrissionPage模块编写自动化脚本&#xff0c;以模拟人的行为访问网站并获取题目答案进行自动答题。这个脚本似乎是为答题网站设计的&#xff0c;通过监控特定数据包地址来获取题目答案&#xff0c;并模拟点击正确答案进行答题。 代码中的逻辑包…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023