Home > Web Front-end > HTML Tutorial > Analysis on the use of frameset tag, frame tag and iframe tag

Analysis on the use of frameset tag, frame tag and iframe tag

巴扎黑
Release: 2017-06-27 09:59:31
Original
2741 people have browsed it


#frame is knowledge that must be mastered in web development. For example, backgroundarchitecture, partial refresh, and page segmentation are all uses of frames, especially for background page production. Using frames will give users a very comfortable experience.

frame knowledge points include (frameset tag, frame tag, iframe tag).

## 1. frameset

##1. Attributes

①border

Set the border thickness of the frame.

②bordercolor

##Set 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

Split the page vertically. There are three numerical representation methods: "30%, 30 (or 30px), *"; the number of values ​​represents the number of divided windows and the values ​​are separated by ",". "30%" means that the frame area occupies 30% of the entire 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,*" It means dividing the page into three parts, with the left part accounting for 30% of the page, the middle horizontal width being 200 pixels, and the rest of the page being the right part.

⑤rows

Split the page horizontally. The numerical representation method and meaning are the same as cols.


##⑥framespacing

##Setting frames and frames The remaining white space between them.

##2. Use case

Note 1:

cols and rows attributes should not be in the same used in labels. To implement the architecture below, the correct way to write the code is:


#< frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0">

## < frame src="???" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>

## < ;frameset cols="213,*" frameborder="no" border="0" framespacing="0">

##

## 

##[That is, if you want to use both cols and rows, you can use Frameset nested implementation】

Note 2:

means: the first frame occupies the entire browser 40% of the window, the remaining space is evenly divided between the other two frames.

#


means: the browser window is divided into four equal parts.

## 2. frame

1. Properties

##①name


Set the frame name. This property must be set.

②src

Set the name or path of the web page to be displayed by this frame. This property must be set.

##③scrolling


Set whether to display scroll bars. The setting values ​​are auto, yes, no.

④bordercolor


##Set the border of the frame color.

⑤frameborder


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

⑥noresize


##Set the frame size whether Can be adjusted manually.

⑦marginwidth

Set the width between the frame border and the content within it.

⑧marginhight

Sets the height between the frame boundary and the content within it.

⑨width

Set the frame width.

⑩height

Set the frame height.

2. Use case##

3. iframe

is a floating frame (frame), its common attributes are similar to frame, the other main ones are as follows (the same ones will not be listed)

1. Properties

①align

Set vertical Or horizontal alignment

②allowTransparency

Set or get

Object

Whether it can be transparent.

2. Use case

##Note:

The verification method of iframe tag is different from frameset and frame tag, it is XHTML 1.0 Transitional. And iframe is placed within the body tag, while frameset and frame are placed outside the body tag.

##4. Comprehensive example

##

Comprehensive example

##

##

##

##<span style="font-family:Microsoft YaHei"></span></span></p> <p style="text-indent:2em">##<body> <span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p> <p style="text-indent:2em"><p>Sorry, your browser does not support "frames"! </p><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p>##</body><p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span>#</noframes&gt ;</p><p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></frameset></p> <p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></html></p> <p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span>##[Explanation]</span></p> <p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei">##<noframes> flag pair is also placed flag pairs, used to display text or image information in browsers that do not support frames. This pair of tags is immediately followed by the pair of tags before any of the familiar tags can be used.

##One final point needs to be made:

If you write the code into VS as I wrote above and report an error, for example:


##or


#The solution is as follows :

Tools→Options→Text Editor→HTML→Verification→Internet Explorer 6.0

Okay, through the above content, if you practice more, you will gradually become familiar with the frame If you use it well, you will find that it is really good. As for the Event method of the frame series tag, it is generally not used very much. If necessary, you can check it yourself. [Haha, actually I haven’t used it yet]

The above is the detailed content of Analysis on the use of frameset tag, frame tag and iframe tag. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template