Community

Learn

Tools Library

AI Tools

Leisure

English

Table of Contents

Frameset

Frame

Iframe

Example

Home

Web Front-end

HTML Tutorial

What is the use of introducing HTML frames (Frames)?

What is the use of introducing HTML frames (Frames)?

零下一度

May 02, 2017 pm 03:16 PM

Using Frame, you can display multiple web pages in the browser window at the same time. A web page is set in each Frame, and the web pages in each Frame are independent of each other.

Frameset

Determines how to divide the Frame. has cols attributes and rows attributes. Use the cols attribute to distribute the Frame by columns; use the rows attribute to distribute the Frame by rows.

Frame

Use the tag to set the web page. There is a src attribute in , and the src value is the path and file name of the web page.

The purpose of the following code is to divide the Frameset into 2 columns. The first column is 25%, which means the width of the first column is 25% of the window width; the second column is 75%, which means the width of the first column. is 75% of the window width. a.html is displayed in the first column and b.html is displayed in the second column.

<frameset cols="25%,75%">
   <frame src="../asdocs/html_tutorials/Frame_a.html">
   <frame src="../asdocs/html_tutorials/Frame_b.html">
</frameset>

Copy after login

Iframe

Iframe means Inline Frame. Use to place the Frame within an HTML file.

Example

<html>

<frameset cols="25%,50%,25%">

<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">

</frameset>

</html>

Copy after login

This example shows how to display three web pages at the same time in the browser. The three web pages are distributed in columns.

<html>

<frameset rows="25%,50%,25%">

<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">

</frameset>

</html>

Copy after login

This example shows how to display three web pages at the same time in the browser. The three web pages are distributed in rows.

Mixed Frameset

<html>

<frameset rows="50%,50%">

<frame src="../asdocs/html_tutorials/Frame_a.html">

<frameset cols="25%,75%">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">
</frameset>

</frameset>

</html>

Copy after login

This example uses both the cols attribute and the rows attribute to flexibly distribute the Frame.

The noresize attribute in Frameset

<html>

<frameset rows="50%,50%">

<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_a.html">

<frameset cols="25%,75%">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_b.html">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_c.html">
</frameset>

</frameset>

</html>

Copy after login

Use the Noresize attribute to ensure the size of the Frame. If the noresize attribute is not used, you can use the mouse to move the border of the Frame to change the size of the Frame. If the noresize attribute is set, the border cannot be moved.

Frame for navigation

<html>
<frameset cols="120,*">

<frame src="../asdocs/html_tutorials/framelist.html">
<frame src="../asdocs/html_tutorials/Frame_a.html" name="showframe">

</frameset>
</html>

Copy after login

This example demonstrates how to create a Frame for navigation. This navigation Frame contains an HTML, and this HTML (code below) contains a list of web pages. Click on any item in the web page list, and the clicked web page will be displayed in the second Frame.

<HTML>
<HEAD>
<TITLE> humorlist.html </TITLE>
</HEAD>
<BODY>
<p><a href = "../asdocs/html_tutorials/Frame_a.html" target="showframe">笑话一<a></p>
<p><a href = "../asdocs/html_tutorials/Frame_b.html"  target="showframe">笑话二<a></p>
<p><a href = "../asdocs/html_tutorials/Frame_c.html"  target="showframe">笑话三<a></p>
</BODY>
</HTML>

Copy after login

Usage of Iframe

<html>
<body>
<p>用 IFRAME 可以在HTML文件里显示另一个网页。</p>

<p>这个 HTML 文档中使用 IFRAME 来显示另外一个叫Frame_a.html 的网页。</p>

<iframe src="../asdocs/html_tutorials/Frame_a.html"></iframe>

</body>
</html>

Copy after login

This example shows how to use iframe to embed a web page in an HTML file.

The above is the detailed content of What is the use of introducing HTML frames (Frames)?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7369

15

Java Tutorial

1628

14

CakePHP Tutorial

1355

52

Laravel Tutorial

1266

25

PHP Tutorial

1215

29

Show More

Related knowledge

Table Border in HTML

Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML

Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left

HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout

HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Ordered List

HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

How do you parse and process HTML/XML in PHP?

How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

Moving Text in HTML

Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button

HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles