当前位置： 首页 > news >正文

编程笔记 html5cssjs 011 HTML页面划分

news 2025/12/15 21:50:06

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

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

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

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

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

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份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>

注意

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

相关文章：

编程笔记 html5cssjs 011 HTML页面划分

编程笔记 html5&css&js 011 HTML页面划分 HTML的框架、区块和布局是什么&#xff0c;它们之前的关系是怎样的&#xff1f;框架注意 接下来要看一下网页内的划分。通过框架、区块及布局等方式&#xff0c;将网页从一个长方形整体划分为若干个部分&#xff0c;以合理展示…...

编程日记 2023/12/29 9:56:39

Centos7：Jenkins+gitlab+node项目启动(2)

Centos7&#xff1a;Jenkinsgitlabnode项目启动(1) Centos7&#xff1a;Jenkinsgitlabnode项目启动(1)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启动(2) Centos7&#xff1a;Jenkinsgitlabnode项目启动(2)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启…...

编程日记 2023/12/29 9:55:38

Qt+Opencv：人脸检测

话接上一篇&#xff0c;我们仍使用在上篇《QtOpencv&#xff1a;Qt中部署opencv》创建的Qt项目来测试opencv提供的sample。 在正式开始本篇之前&#xff0c;我们先说做一下准备工作&#xff1a; 一、opencv官方文档 学习最权威和最可靠的方式&#xff0c;就是阅读官方文档和…...

编程日记 2023/12/29 9:53:36

ChatGPT在地学、GIS、气象、农业、生态、环境等领域中的高级应用

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…...

编程日记 2023/12/29 9:52:36

Unreal Engine游戏引擎的优势

在现在这个繁荣的游戏开发行业中&#xff0c;选择合适的游戏引擎是非常重要的。其中&#xff0c;Unreal Engine作为一款功能强大的游戏引擎&#xff0c;在业界广受赞誉。那Unreal Engine游戏引擎究竟有哪些优势&#xff0c;带大家简单的了解一下。 图形渲染技术 Unreal Engin…...

编程日记 2023/12/29 9:51:35

[OCR]Python 3 下的文字识别CnOCR

目录 1 CnOCR 2 安装 3 实践 1 CnOCR CnOCR 是 Python 3 下的文字识别&#xff08;Optical Character Recognition&#xff0c;简称OCR&#xff09;工具包。 工具包支持简体中文、繁体中文&#xff08;部分模型&#xff09;、英文和数字的常见字符识别&#xff0c;支持竖…...

编程日记 2023/12/29 9:49:33

字符串序列判定（100%用例）C卷 (JavaPythonNode.jsC语言C++)

输入两个字符串 S 和 L ，都只包含英文小写字母。 S 长度 <=100 ， L 长度 <=500,000 。判定 S 是否是 L 的有效字串。 判定规则： S 中的每个字符在 L 中都能找到（可以不连续），且 S 在Ｌ中字符的前后顺序与 S 中顺序要保持一致。（例如， S="ace" 是 L=&q…...

编程日记 2023/12/29 9:48:32

ERROR: No matching distribution found for torch==2.0.1解决方案

大家好&#xff0c;我是水滴~~ 本文主要介绍在安装 stable-diffusion-webui 时出现的 ERROR: No matching distribution found for torch2.0.1 问题的解决方案&#xff0c;希望能对你有所帮助。 《Python入门核心技术》专栏总目录・点这里 文章目录 问题描述解决方案离线安装 …...

编程日记 2023/12/29 9:47:31

ClickHouse基础知识（五）：ClickHouse的SQL 操作

基本上来说传统关系型数据库&#xff08;以 MySQL 为例&#xff09;的 SQL 语句&#xff0c;ClickHouse 基本都支持&#xff0c; 这里不会从头讲解 SQL 语法只介绍 ClickHouse 与标准 SQL&#xff08;MySQL&#xff09;不一致的地方。 1. Insert 基本与标准 SQL&#xff08;My…...

编程日记 2023/12/29 9:46:30

【Python基础】字符串

文章目录 [toc]什么是字符串索引示例索引越界 切片语法示例 字符串方法find()方法rfind()方法count()方法replace()方法 个人主页&#xff1a;丷从心 系列专栏&#xff1a;Python基础 什么是字符串 如下定义的变量url存储的是字符串类型的值 url www.baidu.com print(url)u…...

编程日记 2023/12/29 9:45:29

Linux中proc文件系统相关介绍

proc虚拟文件系统的工作原理 linux 内核是一个非常庞大、非常复杂的一个单独的程序&#xff0c;对于这样一个程序来说调试是非常复杂的。像kernel这样庞大的项目&#xff0c;给里面添加或者修改一个功能是非常麻烦的&#xff0c;因为添加一个功能可能会影响其他已经有的功能。…...

编程日记 2023/12/29 9:44:28

深入理解 YOLOv8：解析.yaml 配置文件目标检测、实例分割、图像分类、姿态检测

目录 yolov8导航 YOLOv8&#xff08;附带各种任务详细说明链接&#xff09; 引言 YOLOv8配置文件概览 yolov8.yaml 1. nc 2. scales 3. backbone 4. head yolov8-seg.yaml 1. 参数部分 2. 骨架&#xff08;Backbone&#xff09;部分 3. 头部&#xff08;Head&…...

编程日记 2023/12/29 9:40:24

oracle与mysql的分析函数(窗口函数)

分析函数定义 在SQL语句中&#xff0c;很多查询语句需要进行GROUP BY分组汇总&#xff0c;但是一旦经过分组&#xff0c;SELECT返回的记录数就会减少。为了保留所有原始行记录&#xff0c;并且仍可以进行分组数据分析&#xff0c;分析函数应运而生。 Oracle 8i 版本开始支持窗…...

编程日记 2023/12/29 9:37:22

《微信小程序开发从入门到实战》学习六十五

6.4 交互API 6.4.5 页面滚动API 使用wx.pageScrollTo接口可使页面自动滚动到目标位置。该接口介绍Object参&#xff0c;该参支持属性如下所示&#xff1a; scrollTop&#xff1a;必填&#xff0c;滚动到页面的目标位置&#xff0c;单位为px duration&#xff1a;滚动动画的…...

编程日记 2023/12/29 9:34:19

开箱即用的企业级数据和业务管理中后台前端框架Ant Design Pro 5的开箱使用和偏好配置

Ant Design Pro 介绍 Ant Design Pro 是一个开箱即用的企业级前端解决方案&#xff0c;基于 Ant Design 设计体系&#xff0c;提供了丰富的组件和功能&#xff0c;帮助开发者更快速地开发和部署企业级应用。 Ant Design Pro 使用 React、umi 和 dva 这三个主要的前端开发技术…...

编程日记 2023/12/29 9:24:11

怎么用Facebook找客户？Facebook开发客户攻略分享

跨境人最了解的电商平台之一就是Facebook了&#xff0c;说到Facebook&#xff0c;它拥有超过20亿的活跃用户&#xff0c;所以你可以在这个平台上面找到更多的潜在客户。今天的文章就主要分享用Facebook开发客户的方法&#xff0c;全是干货&#xff0c;建议收藏&#xff01; 一、…...

编程日记 2023/12/29 9:21:08

【Vue2+3入门到实战】（12）自定义指令的基本语法（全局、局部注册）、 指令的值、v-loading的指令封装 详细示例

目录 一、学习目标1.自定义指令 二、自定义指令1.指令介绍2.自定义指令3.自定义指令语法4.指令中的配置项介绍5.代码示例6.总结 三、自定义指令-指令的值1.需求2.语法3.代码示例 四、自定义指令-v-loading指令的封装1.场景2.需求3.分析4.实现5.准备代码 六、自定义指令总结 一、…...

编程日记 2023/12/29 9:17:05

Android studio socket客户端应用设计

一、XML布局设计&#xff1a; <?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…...

编程日记 2023/12/29 9:15:03

【UTC格式】Oracle低版本实现UTC格式转换

Oracle低版本实现UTC格式转换 文章目录 Oracle低版本实现UTC格式转换前言一、创建 FUNCTION&#xff08;GET_UTC_DATE&#xff09;二、使用步骤1.跨年日期2.跨月日期&#xff08;判断 闰年 or 平年、用于计算2月天数&#xff0c;正常大小月&#xff09;3.跨日日期3.正常日期 总…...

编程日记 2023/12/29 9:11:00

[BUG] Hadoop-3.3.4集群yarn管理页面子队列不显示任务

1.问题描述 使用yarn调度任务时&#xff0c;在CapacityScheduler页面上单击叶队列&#xff08;或子队列&#xff09;时&#xff0c;不会显示应用程序任务信息&#xff0c;root队列可以显示任务。此外&#xff0c;FairScheduler页面是正常的。 No matching records found2.原…...

编程日记 2023/12/29 9:08:58

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/12/15 5:20:48

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/12/14 9:58:04

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/12/14 21:52:48

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/12/5 1:20:46

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/12/9 13:14:46

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/12/9 4:55:04

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

编程新知 2025/12/10 3:07:34