编程笔记 html5cssjs 011 HTML页面划分

编程笔记 html5&css&js 011 HTML页面划分

  • HTML的框架、区块和布局是什么,它们之前的关系是怎样的?
  • 框架
  • 注意

接下来要看一下网页内的划分。通过框架、区块及布局等方式,将网页从一个长方形整体划分为若干个部分,以合理展示需要的内容。

HTML的框架、区块和布局是什么,它们之前的关系是怎样的?

HTML的框架、区块和布局是用来组织和排列网页内容的元素和技术。
框架(Frames)是一种在网页中创建多个独立的窗口或视图的技术。它允许将一个网页分割成几个区域,每个区域可以显示不同的内容,并且允许用户在这些区域之间进行交互。框架使用<frame><frameset><iframe>等元素来定义和实现。
区块(Sections)是网页中的独立内容块,用于将相关的内容按照逻辑顺序组织在一起。HTML5引入了一些特定的语义化元素,如<header><footer><nav><section><article>等,用于定义和标记不同类型的区块。
布局(Layout)是指在网页中进行页面元素排列和定位的过程。HTML中的布局可以使用CSS来实现,通过设置元素的样式属性,如positionfloatdisplay等,来控制元素的位置和大小。布局的目的是使网页内容更具吸引力、易读性和易用性。
框架、区块和布局之间的关系是:框架提供了一种分割网页内容的方式,将整个页面分割成多个独立的区域;区块是在框架或整个页面中划分出的独立内容块;而布局则用于安排和定位这些区块和其他页面元素的位置和大小。框架是在整个页面结构上进行区域分割的基础,而布局则是在每个区块内部进行元素排列的方式。
这像不像人类争夺领土,兹事体大啦,搞不好会产生争端的。

框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
框架结构标签()
框架结构标签()定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
编者注:frameset 标签也被某些文章和书籍译为框架集。
框架标签(Frame)
Frame 标签定义了放置在每个框架中的 HTML 文档。

<html>
<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>

注意

在现时流行的布局中,较少使用框架。接下来不再详细探讨。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MIT线性代数笔记-第31讲-线性变换及对应矩阵

目录 31.线性变换及对应矩阵打赏 31.线性变换及对应矩阵 线性变换相当于是矩阵的抽象表示&#xff0c;每个线性变换都对应着一个矩阵 例&#xff1a; 考虑一个变换 T T T&#xff0c;使得平面上的一个向量投影为平面上的另一个向量&#xff0c;即 T : R 2 → R 2 T:R^2 \to R…

用ChatGPT挑选钻石!著名珠宝商推出-珠宝GPT

根据Salesforce最新发布的第五版《互联网购物报告》显示&#xff0c;ChatGPT等生成式AI的出现、快速发展&#xff0c;对零售行业和购物者产生了较大影响。可有效简化业务流程实现降本增效&#xff0c;并改善购物体验。 著名珠宝商James Allen为了积极拥抱生成式AI全面提升销售…

软件测试/测试开发丨Python闭包函数和计时器学习笔记

闭包函数 闭包的内部函数中&#xff0c;对外部作用域的变量进行引用闭包无法修改外部函数的局部变量闭包可以保存当前的运行环境 # 普通方法实现 def output_student(name, gender, grade1):print(F"新学期开学啦&#xff0c;学生{name}是{gender}&#xff0c;他是{grad…

mysql事务的注意

mysql默认自动提交&#xff0c;开启一个事务的时候也就是 set autocommit 0&#xff1b; 关闭了自动提交&#xff0c; 我们有时候会在执行一个操作的时候&#xff0c;显式的进行锁表操作 比如显式的 写锁表&#xff1a; lock table aaa write &#xff1b; 这个时候 需要…

AI时代下,如何看待“算法利维坦”?

ChatGPT的浪潮从2022年袭来后&#xff0c;至今热度不减&#xff0c;呈现出蓬勃发展的趋势。AI家居、医疗、教育、金融、公益、农业、艺术......AI真的已经走进了生活的方方面面&#xff0c;我们仿佛已经进入了AI时代&#xff0c;势不可挡。人工智能水平如此之高&#xff0c;不禁…

websocket 方法封装

export default class WS {constructor(listener) {this.keepAlive 8000; // 心跳检测保活时间this.dogFood 0; // 心跳检测标志位this.watchDog -1; // 心跳检测定时器this.timeout -1; // 连接超时定时器this.ws null;this.url null;this.listener li…

OpenCV-Python(21):OpenCV中的轮廓性质

3.轮廓的性质 本文我们将主要学习基于轮廓来提取一些经常使用的对象特征。 3.1 长宽比 边界矩形的宽高比&#xff1a; x,y,w,h cv2.boundingRect(cnt) aspect_ratio float(w)/h 3.2 Extent 轮廓面积与边界矩形面积的比。 area cv2.contourArea(cnt) x,y,w,h cv2.bounding…

自己动手写自旋锁

自旋锁以其高效闻名。顾名思义&#xff0c;自旋即如果无法成功锁住锁资源则会一直循环尝试锁&#xff0c;这与互斥锁的行为较为不同&#xff08;互斥锁如果无法锁住则会挂起等待&#xff09;。但其特性也决定了其使用场景&#xff0c;对于简单几步即可完成对共享资源操作的场景…

K8S Ingress-Nginx导出TCP端口

ingress-nginx导出TCP端口 Exposing TCP and UDP services - Ingress-Nginx Controllerhttps://github.com/kubernetes/ingress-nginx/blob/main/docs/user-guide/exposing-tcp-udp-services.md helm upgrade ingress-nginx导出redis 6379端口&#xff08;这种方式最简单&…

王道考研计算机网络——应用层

如何为用户提供服务&#xff1f; CS/P2P 提高域名解析的速度&#xff1a;local name server高速缓存&#xff1a;直接地址映射/低级的域名服务器的地址 本机也有告诉缓存&#xff1a;本机开机的时候从本地域名服务器当中下载域名和地址的对应数据库&#xff0c;放到本地的高…

C语言实现RSA算法加解密

使用c语言实现了RSA加解密算法&#xff0c;可以加解密文件和字符串。 rsa算法原理 选择两个大素数p和q&#xff1b;计算n p * q;计算φ(n)(p-1)(q-1)&#xff1b;选择与φ(n)互素的整数d&#xff1b;由de1 mod φ(n)计算得到e&#xff1b;公钥是(e, n), 私钥是(d, n);假设明…

Microsoft .NET Framework 4.5.1 离线安装包

Microsoft .NET Framework 4.5.1 安装包&#xff1a; 一、离线安装包&#xff1a; 百度网盘 链接: https://pan.baidu.com/s/1IGEYT1vyruY6KFu6XEmerA 提取码: m6ix 离线安装包官方地址&#xff1a; https://www.microsoft.com/zh-cn/download/details.aspx?id40779 二、在…

如何在VSCode搭建ESP-IDF开发ESP32

文章目录 概要安装VScode安装ESP-IDF插件使用官方例程小结 概要 ESP-IDF(Espressif IoT Development Framework) 即乐鑫物联网开发框架&#xff0c;它基于 C/C 语言提供了一个自给自足的 SDK&#xff0c;可为在 Windows、Linux 和 macOS 系统平台上开发 ESP32 应用程序提供工具…

跳跃表原理及实现

一、跳表数据结构 跳表是有序表的一种&#xff0c;其底层是通过链表实现的。链表的特点是插入删除效率高&#xff0c;但是查找节点效率很低&#xff0c;最坏的时间复杂度是O(N)&#xff0c;那么跳表就是解决这一痛点而生的。 为了提高查询效率&#xff0c;我们可以给链表加上索…

天翼云云间高速实现租户跨地域内网互通

一、业务需求 用户业务在襄阳、武汉两个云池部署&#xff0c;希望通过云间高速产品将两个资源池云内资源通过云内专网实现内网互通。要求内网双向互通。 二、测试环境配置 云池vpc名称vpc网段子网内网ip/gweip主机名互联网带宽襄阳ceshi192.168.0.0/16192.168.1.0/24192.168.…

Android studio socket客户端应用设计

一、XML布局设计: <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/r…

unity学习笔记----游戏练习02

一、阳光值的展示和消耗 1.创建一个文本组件用于显示阳光的数值&#xff0c;然后在脚本中得到这个UI。 在SunManger中得到这个组件的引用 public TextMeshProUGUI sunPointText; 写一个用于更新显示的方法 public void UpdataSunPointText() { sunPointText.tex…

FileZilla的使用主动模式与被动模式

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《产品经理如何画泳道图&流程图》 ⛺️ 越努力 &#xff0c;越幸运 目录 一、FileZilla简介 1、FileZilla是什么&#xff1f; 2、FileZilla的应用场景 二、FileZilla的安装 1、下…

JVM篇:JVM内存结构

程序计数器 程序计数器英文名叫&#xff1a;Program Counter Register 作用&#xff1a;用来记录下一条jvm指令的地址行号。 先来查看一段jvm指令&#xff0c;这些指令对应的java代码就是输出1-5 操作系统运行该Java程序时具体流程如下 语言解释&#xff1a;源文件通过编译转…

光伏逆变器MPPT的作用、原理及算法

MPPT是逆变器非常核心的技术&#xff0c;MPPT电压在进行光伏电站设计时一项非常关键的参数。 一、什么是MPPT&#xff1f; &#xff08;单块光伏组件的I-V、P-V曲线&#xff09; 上图中&#xff0c;光伏组件的输出电压和电流遵循I-V曲线(绿色)、P-V曲线(蓝色)&#xff0c;如果…