热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html页面如何划分部分,【HTML】Frameset的使用来看看我是怎么划分网页的吧!

1.一个简单的HTML文件一个普通HTML文件的结构可以非常简单,你看:标题网页内容我们可以把以上所示代码保存在一个后缀为.html的文件里(比如dem

1.一个简单的 HTML 文件

一个普通 HTML 文件的结构可以非常简单,你看:

标题

网页内容

我们可以把以上所示代码保存在一个后缀为.html的文件里(比如demo.html),然后双击在浏览器打开就可以看到效果了。

05c3a0ad81cc9eb7b6377cb35ecf671a.png

大家可以看到,网页内容是写在

标签之间的,body就好像是一个盛放网页内容的容器,也就是我们浏览网页时所能看到的部分。

某人说了,兄弟你这body不好使啊,我要是想同时看三部片 三篇文章还得打开三个网页来回切换不方便啊,能不能给我整到一个页面里,方便我“学习”!

2.body 的替身 frameset

你body干不了的事,我frameset可以,滚开,我上!

标题

如此,body被干下去了,frameset说了,一山不容二虎,你我必走一个。

不能将

标签与 标签同时使用!

但是这frameset虽然强大,但它需要的条件也多,要想一个页面改成同时显示三个页面,就得划分一下地盘,既然是划地盘,你得告诉我按什么比例去划分吧。

所以再给它加个属性,给我竖着分,各占50%:

给我横着分,上边40%,剩下的(*)是下边:

地盘划分完成了,里面该显示片 学习内容了,frameset又说了,显示可以,不要在我这里乱涂乱画,你有两个区域,给你分配两个秘书(frame),把你要展示的那个什么片的地址,不是,学习内容,告诉我的秘书(frame的src),他们会帮你显示的,其它的就不用你操心了。

那就左边显示百度,右边显示hao123吧:

da1e0afc18ca401c0612ad41d265ca97.png

还真可以,把第二种情况给我看看:

869bb1e8964a8d04e9f952df4578d735.png

嗯,现在好像挺好的了,但是这中间的分界线好像可以随便移动啊(鼠标放到分界线上可以左右或者上下拖动改变区域大小),那不行,你不能随便改变我的地盘大小,这时候秘书(frame)说了,给我点好处,我说了算:

给第一个秘书送上了noresize="noresize",现在第一个区域大小就定住了,第二个区域也就根据第一个的区域大小决定了,就一道墙,你动不了了,我还动啥。

某人:”别忘了我们的约定,我要同时显示三个页面。“

frameset:“显示三个是可以,但总共就这么点地方,还被你分成了两个部分,那你说接下来怎么分。”

某人:”把上面的部分再给我分成两部分。“

frameset:“没问题,那我得再叫个兄弟“。

可以看到,frameset为了完成任务,把它的第一个秘书给开除了,让它的兄弟顶上,相当于又扮演它的角色,而且还有两个秘书。

因为第一个收礼的秘书(frame)被开除了,这上下区域的分界线又可以随便被更改了,没办法,给掌管上下地盘的第二个秘书再送一次吧,又想了想,还是一次性办利索吧,给掌管左右区域大小的秘书也送上点礼吧。

77a920a87a2b54c3f60ed4f3de904181.png

被弄下岗的body看了之后很生气,凭什么,你frameset虽然牛B,但是不一定所有浏览器都认可,而我body才是公认的男神!

如果浏览器不支持框架,给不支持框架的浏览器添加 标签。

那就给body点面子,当浏览器不支持frameset的时候,再找个助理把body请出来给大家说明一下。

您的浏览器不支持框架

不过,假如你添加包含一段文本的 标签,就必须将这段文字嵌套于 标签内。

完。

本文地址:https://blog.csdn.net/ZhangJiWei_2019/article/details/107541378



推荐阅读
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • Windows 系统下 MySQL 8.0.11 的安装与配置
    本文详细介绍了在 Windows 操作系统中安装和配置 MySQL 8.0.11 的步骤,包括环境准备、安装过程以及后续配置,帮助用户顺利完成数据库的部署。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 在Windows系统上安装VMware Workstation 2022的详细步骤
    本文将详细介绍如何在Windows系统上安装VMware Workstation 2022。包括从官方网站下载软件、选择合适的版本以及安装过程中的关键步骤。此外,还将提供一些激活密钥供参考。 ... [详细]
  • 360SRC安全应急响应:从漏洞提交到修复的全过程
    本文详细介绍了360SRC平台处理一起关键安全事件的过程,涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例,展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • 本文详细介绍了 BERT 模型中 Transformer 的 Attention 机制,包括其原理、实现代码以及在自然语言处理中的应用。通过结合多个权威资源,帮助读者全面理解这一关键技术。 ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 题库来源:安全生产模拟考试一点通公众号小程序G3锅炉水处理报名考试是安全生产模拟考试一点通生成的,G3锅炉水处理证模拟考试题库是根据G3锅炉水处理最新 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 本文介绍如何在 Unity 的 XML 配置文件中,将参数传递给自定义生命周期管理器的构造函数。我们将详细探讨 CustomLifetimeManager 类的实现及其配置方法。 ... [详细]
author-avatar
拍友2502887597
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有