Home > Article > Web Front-end > How to use frames in html
HTML framework allows the creation of multiple document areas in the document window for organizing website content. To create frames, use the <frameset> tag to specify rows or columns, and the tag to specify the source of each frame. Frames can be nested, using the name attribute to name the frame for JavaScript manipulation. However, it is recommended to use modern technologies such as flexible grids instead of frames.
Usage of frames in HTML
In HTML, frames specify that multiple documents can be accommodated in the document window s position. Frames are often used to organize different parts of a website into logical partitions.
Create a frame
To create a frame, use the <frameset>
tag and specify the row or column of the frame:
<code class="html"><frameset rows="20%, 80%"> <frame src="header.html"> <frame src="content.html"> </frameset></code>
The example above creates a two-line frameset where "header.html" occupies the top 20% and "content.html" occupies the bottom 80%.
Nested Frames
A frameset can be nested within another frameset, allowing the creation of more complex partitions. For example:
<code class="html"><frameset cols="50%, 50%"> <frameset rows="50%, 50%"> <frame src="menu.html"> <frame src="content1.html"> </frameset> <frame src="content2.html"> </frameset></code>
This example creates a 50/50 column frameset, where the left frameset contains a 50/50 row frameset for Menu and Content1, and the right frameset The set contains "Content 2".
Naming the frame
In order to reference the frame and operate on it (such as changing the source or refreshing the content), you can use the name
attribute to name each a frame. For example:
<code class="html"><frame name="header" src="header.html"> <frame name="content" src="content.html"></code>
Frame operations in JavaScript
JavaScript can access and manipulate frames through the window.frames
object array. For example:
<code class="javascript">window.frames[0].location = "new_header.html"; //更改第一个框架的源 window.frames["content"].reload(); //刷新“content”框架</code>
Note: Frames are no longer a recommended practice for HTML as it can cause accessibility issues and complexity. Modern website design should use more modern technologies such as flexible grids and responsive layouts.
The above is the detailed content of How to use frames in html. For more information, please follow other related articles on the PHP Chinese website!