编程笔记 html5cssjs 011 HTML页面划分

news/2024/11/13 4:21:45/

编程笔记 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.ppmy.cn/news/1287112.html

相关文章

【elk-day01】es和kibana搭建及验证---Mac-Docker

Mac系统使用Docker下载搭建和验证eskibana Docker下载安装es安装es验证kibana安装kibana验证 Docker下载安装 Docker Desktop官网安装下载地址 说明一下为什么要安装desktop版本的docker&#xff0c;因为docker作为工具使用&#xff0c;我们需要的是开箱即用&#xff0c;没有必…

WPF 消息日志打印帮助类:HandyControl+NLog+彩色控制台打印+全局异常捕捉

文章目录 前言相关文章Nlog配置HandyControl配置简单使用显示效果文本内容 全局异常捕捉异常代码运行结果 前言 我将简单的HandyControl的消息打印系统和Nlog搭配使用&#xff0c;简化我们的代码书写 相关文章 .NET 控制台NLog 使用 WPF-UI HandyControl 控件简单实战 C#更改…

用linux中定时任务Crontab,向企业微信群通过机器人发送消息

1.使用yum命令安装Crontab&#xff1a;这个很关键&#xff0c;没有安装的话会提示命令not found yum install vixie-cron yum install crontabs 注&#xff1a;vixie-cron软件包是cron的主程序&#xff1b; crontabs软件包是用来安装、卸装、或列举用来驱动 cron 守护进程的表…

企业招商与迅腾文化:精准触达消费者的奥秘

企业招商与迅腾文化&#xff1a;精准触达消费者的奥秘 在当今的商业环境中&#xff0c;企业招商的成功与否往往取决于品牌与消费者之间的有效沟通。如何根据市场变化和企业战略部署通过迅腾文化助力一步步精确触达目标受众&#xff0c;传递品牌的核心价值和独特卖点&#xff0…

Java版商城:Spring Cloud+SpringBoot b2b2c电子商务平台,多商家入驻、直播带货及免 费 小程序商城搭建

随着互联网的快速发展&#xff0c;越来越多的企业开始注重数字化转型&#xff0c;以提升自身的竞争力和运营效率。在这个背景下&#xff0c;鸿鹄云商SAAS云产品应运而生&#xff0c;为企业提供了一种简单、高效、安全的数字化解决方案。 鸿鹄云商SAAS云产品是一种基于云计算的软…

postman使用-03发送请求

文章目录 请求1.新建请求2.选择请求方式3.填写请求URL4.填写请求参数get请求参数在params中填写&#xff08;填完后在url中会自动显示&#xff09;post请求参数在body中填写&#xff0c;根据接口文档请求头里面的content-type选择body中的数据类型post请求参数为json-选择raw-选…

vscode调试 反汇编c/c++ 查看汇编代码gdb/lldb

先看下流程&#xff01; 先看下流程&#xff01; 有问题请留言&#xff01; 文章目录 必备F5开启调试左侧侧边栏->确保打开回调栈右键函数栈->查看反汇编 方法二&#xff1a;手动输入命令查看 必备 使用c/c 插件&#xff0c;这应该是必备的。 F5开启调试 左侧侧边栏-&…

【占用网络】OccNet: Scene as Occupancy 适用于检测、分割和规划任务 ICCV2023

前言 本文分享“占用网络”方案中&#xff0c;具有代表性的方法&#xff1a;OccNet。 它以多视角相机为核心&#xff0c;首先生成BEV特征&#xff0c;然后通过级联结构和时间体素解码器重建生成3D占用特征。 构建一个通用的“3D占用编码特征”&#xff0c;用以表示3D物理世界…