Tutorial on using the frameset tag in HTML

Frameset pages are somewhat different from ordinary Web pages. Although it still starts with <HTML> and the <HEAD> tag containing the title and other scripts, its content only represents the layout design of each page. Therefore, there is no need for a <BODY> element anymore, only a <frameset> tag.

Attribute Introduction
border: Sets the border thickness of the frame.

bordercolor: Sets the border color of the frame.

frameborder: Set whether to display the frame border. The setting values are only 0 and 1; 0 means no border, 1 means to display the border.

cols: Splits the page vertically. There are three ways to express the value: "30%, 30 (or 30px),"; the number of values represents the number of windows and the values are separated by ",". "30%" means that the frame area occupies 30% of the total browser page area; "30" means that the horizontal width of the area is 30 pixels; "" means that the area occupies the remaining page space. For example: cols="25%,200,*" means that the page is divided into three parts, the left part occupies 25% of the page, the horizontal width of the middle is 200 pixels, and the rest of the page is the right part.

rows: Divide the page horizontally. The numerical representation method and meaning are the same as cols.

framespacing: Set the blank space reserved between frames.

usage
Let’s take a look at this code:

XML/HTML CodeCopy content to clipboard

< frameset rows = "*" cols = "180,*" frameborder = 0 border = 0 >
< frame src = "left.html" scrolling = "no" noresize > </ frame >
< frame src = "main.html" name = "main" > </ frame >
</frameset>

This code means: a two-column frameset is set, the width of the left column is 180px, and noresize means the width remains fixed.

So, how do you use frame navigation to jump to a specified section? The following code is the navigation frame on the left:

XML/HTML CodeCopy content to clipboard

< html >
< head >
< meta charset = "utf-8" >
</ head >
< body bgcolor = "#ffffd2" >
< ul >
< li > < a href = "./reg.html" target = "main" > Register User </ a > </ li >
< li > < a href = "./main.html" target = "main" > Back to Home Page </ a > </ li >
< ul >
</ body >
</ html >

These links target the second frame. The second frame displays the linked document. A navigation frame in which links point to specified sections in the target file.

Let’s take a closer look at this example:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< title > haorooms blog frame standard demo </ title >
</ head >
< frameset row = "180,*" >
< frame name = "topFrame" src = "topframe.html" />
< frameset cols = "50%,50%" >
< frame src = "left.html" name = "leftFrame" />
< frame src = "right.html" name = "rightFrame" />
</frameset>
</frameset>
</ html >

The layout and the effects of each part of the selection area using js are as follows:
2016530120259070.png (799×559)

<<: JavaScript form validation example

>>: How to use Portainer to build a visual interface for Docker

Detailed explanation of the initialization mechanism in bash

Tutorial on using the frameset tag in HTML

Detailed explanation of the initialization mechanism in bash

The pitfalls encountered when learning Vue.js

How to solve the problem that scroll-view of WeChat applet cannot slide left and right

Several techniques for playing sounds with CSS

Summary of 7 pitfalls when using react

Analysis of multi-threaded programming examples under Linux

Docker data storage tmpfs mounts detailed explanation

VMware Workstation Pro 16 License Key with Usage Tutorial

Solve the problem that document.getElementBy series methods cannot obtain objects

Vue implements online preview of PDF files (using pdf.js/iframe/embed)

Recommend

Introduction to the usage of common XHTML tags

Example code for implementing the wavy water ball effect using CSS

How to implement Docker volume mounting

Linux kernel device driver kernel debugging technical notes collation

A brief discussion on the role of Vue3 defineComponent

When should a website place ads?

Summary of common docker commands

MySQL InnoDB monitoring (system layer, database layer)

Linux common text processing commands and vim text editor

Summary of common tool functions necessary for front-end development

Linux file systems explained: ext4 and beyond

Website front-end performance optimization: JavaScript and CSS

Summary of some practical little magic in Vue practice

How to find and delete duplicate records in MySQL

Detailed explanation of JavaScript Promise and Async/Await