Tutorial on using the frameset tag in HTML

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
  1. < frameset   rows = "*"   cols = "180,*"   frameborder = 0   border = 0   >   
  2.   < frame   src = "left.html"   scrolling = "no" noresize > </ frame >   
  3.          < frame   src = "main.html"   name = "main" > </ frame >   
  4. </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
  1. < html >   
  2.   < head >   
  3.    < meta   charset = "utf-8" >   
  4.   </ head >   
  5.   < body   bgcolor = "#ffffd2" >   
  6.    < ul >   
  7.   < li > < a   href = "./reg.html"   target = "main" > Register User </ a > </ li >   
  8.   < li > < a   href = "./main.html"   target = "main" > Back to Home Page </ a > </ li >   
  9.    < ul >   
  10.   </ body >   
  11. </ 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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml"   xml:lang = "en" >   
  3.   
  4. < head >   
  5.      < meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >   
  6.      < title > haorooms blog frame standard demo </ title >   
  7. </ head >   
  8.   
  9. < frameset   row = "180,*" >   
  10.      < frame   name = "topFrame"   src = "topframe.html"   />   
  11.      < frameset   cols = "50%,50%" >   
  12.          < frame   src = "left.html"   name = "leftFrame"   />   
  13.          < frame   src = "right.html"   name = "rightFrame"   />   
  14.   
  15.      </frameset>​​   
  16.   
  17. </frameset>​​   
  18.   
  19. </ 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

Recommend

Sample code for implementing Google third-party login in Vue

Table of contents 1. Developer Platform Configura...

How to perform query caching in MySQL and how to solve failures

We all know that we need to understand the proper...

Docker+daocloud realizes automatic construction and deployment of front-end projects

Automated project deployment is more commonly use...

Introduction to Docker Quick Deployment of SpringBoot Project

1. Install Docker First open the Linux environmen...

A new CSS image replacement technique (background display and text moving off screen) to say goodbye to 9999px

-9999 px image replacement technology has been pop...

How to build and deploy Node project with Docker

Table of contents What is Docker Client-side Dock...

How to check PCIe version and speed in Linux

PCIE has four different specifications. Let’s tak...

js object-oriented method to achieve drag effect

This article shares the specific code for impleme...

WeChat applet + ECharts to achieve dynamic refresh process record

Preface Recently I encountered a requirement, whi...

mysql-8.0.16 winx64 latest installation tutorial with pictures and text

I just started learning about databases recently....

Introduction to using window.open, a jump menu that opens in a new window

Copy code The code is as follows: <pre> <...

JavaScript Closures Explained

Table of contents 1. What is a closure? 2. The ro...

TortoiseSvn Little Turtle Installation Latest Detailed Graphics Tutorial

There were always problems when installing tortoi...

Examples of common operations on MySQL foreign key constraints [view, add, modify, delete]

This article uses examples to describe common ope...

React+TypeScript project construction case explanation

React project building can be very simple, but if...