Home >Web Front-end >HTML Tutorial >How to use HTML framework
How to use HTML framework
- 墨辰丷Original
- 2018-06-04 15:40:338103browse
A browser document window can only display one web page file, but you can display more than one page in the same browser window by using frames. This article will introduce the HTML frame
1. Frame
A browser document window can only display one web page file, but you can display more than one page in the same browser window by using frames. Pages that use frames mainly include two parts, one is the frame set, and the other is the specific frame file.
Frames are mostly used for the layout of website backends or intranet systems.
1. Frame set (f900b4fc197b16ab214eecf015bb6bd2eb5f059992a0ae0ef16884cb75644e40): is a file used to define this HTML document as a frame mode and set how the window is divided. In layman's terms, a frameset is a file that stores the frame structure and is also an entry file for accessing frame files. If a web page consists of two left and right frames, then in addition to the two left and right web page files, there is also a general frame set file. In pages that use frames, the 6c04bd5ca3fcae76e30b72ad730ca86d tag is replaced by the frame tag f900b4fc197b16ab214eecf015bb6bd2. Each frame contained in the frame page is defined through the 04a0d55efbbfd646a993fbc01f262c57 tag.
rows attribute: Split the window horizontally. Horizontally split windows are to cut the page in the horizontal direction, that is, to divide the page into multiple windows arranged up and down. Rows can take multiple values, each value represents the horizontal width of a frame window, and its unit can be pixels or a percentage of the browser. However, it should be noted that generally when several rows values are set, several frames are required, that is, a corresponding number of 04a0d55efbbfd646a993fbc01f262c57 parameters are required.
<html>
<head>
<title>水平分割窗口的效果</title>
</head>
<frameset rows="30%,70%">
<frame>
<frame>
</frameset>
</html>cols attribute: vertically split window. Vertically splitting a window means dividing the page into multiple windows in the vertical direction, that is, dividing the page into multiple windows arranged left and right. cols can take multiple values, each value represents the horizontal width of a frame window, and its unit can be pixels or a percentage of the browser. Similar to the horizontal split window, generally setting several cols values requires several frames, that is, several 04a0d55efbbfd646a993fbc01f262c57 parameters.
<html>
<head>
<title>垂直分割窗口的效果</title>
</head>
<frameset cols="20%,55%,25%">
<frame>
<frame>
<frame>
</frameset>
</html>frameborder attribute: Set the border. By default, there is a border line around the frame window, and the display of the border line can be adjusted through the frameborder parameter. The syntax is:
29e2a31840934c23bf66f5be8a1ad256 or 9a12e5cd7cb59577c86ad3c788ebb056. The value of frameborder can only be 0 or 1. If the value is 0, the border line will be hidden; if the value is 1, the border line will be displayed. Setting it in frameset will be effective for the entire frame, and setting it in frame will be effective only for the current frame.
<html> <head> <title>设置框架窗口的边框显示效果</title> </head> <frameset rows="20%,55%,25%"> <frame frameborder="1"> <frameset cols="35%,65%" frameborder="0"> <frame > <frame> </frameset> <frame frameborder="0"> </frameset> </html>
framespacing attribute: The border width of the frame. The border width of the frame is 1 pixel by default, and its size can be adjusted through the parameters framespacing.
Syntax: fbabb6aab0d2bcfaa03587bef546c79c
Description: The frame width is the width of the lines between the borders on the page, in pixels. This parameter can only be used for framesets and is not valid for a single frame.
<html>
<head>
<title>设置框架的边框宽度</title>
</head>
<frameset rows="30%,70%" framespacing="10">
<frame>
<frameset cols="20%,55%,25%" framespacing="30">
<frame>
<frame>
<frame>
</frameset>
</frameset>
</html>bordercolor property: The border color of the frame. Use the parameter bordercolor to set the border color of the frameset.
Syntax: f0d0dc684c56fd837e4f665fba7d841a
Description: This parameter is also only valid for the entire frameset, not for a single frame.
<html>
<head>
<title>设置框架的边框颜色</title>
</head>
<frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF">
<frame>
<frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF">
<frame>
<frame>
<frame>
</frameset>
</frameset>
</html>2. Frame (04a0d55efbbfd646a993fbc01f262c57) and src attributes.
Each page in the frame structure is a separate text, and these files are set through the src parameter.
Syntax: 99be37cc1a05da87f1a8212d8d5e6318
Description: The page file is where the specific content of the frame page is located. For frames that do not have a source file set, it is just blank. The page has no effect. The source file of the page can be a normal HTML file, or it can be an image or other file.
<html>
<head>
<title>设置页面源文件</title>
</head>
<frameset rows="30%,70%">
<frame src="pic01.gif">
<frame src="src01.html">
</frameset>
</html>3.37f861bd36cef5b6406eba87d20a5bab23a17d2cc9873ab460d73d80ccc8d7a4 tag
##37f861bd36cef5b6406eba87d20a5bab23a17d2cc9873ab460d73d80ccc8d7a4 tag is used to display when the browser does not support frames Page content.
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
</html>
2. Floating frame (d5ba1642137c3f32f4f4493ae923989c)
The floating frame is a more special frame, which is used in the browser There are sub-windows nested in the window, that is, the entire page is not a frame page, but it contains a frame window. Display the corresponding page content within the frame window. Floating frames are also called inline frames, and hence the name. Syntax: 2a9681e1aa611d2fbf4512bbc31d4065065276f04003e4622c4fe6b64f465b88 Description: Similar to the ordinary frame structure, the floating frame can also set many parameters, such as name, scrolling, frameborder, etc. But compared with ordinary frames, floating frames do not contain framespacing and bordercolor parameters.src属性：浮动框架中最基本的参数就是src，它用来设置浮动框架页面的源文件地址，也是浮动框架页面必需的参数。因为只有设置了源文件的内容，浮动框架才有意义。语法：290763ae73a8bb3b5c012455bf37fc39
width和height属性：在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是在浮动框架中，是插入到普通HTML页面中的，可以调整整个框架的大小。语法：1ae60c9a2f4a841f9b41850969e580f3，页面的宽度和高度值都以像素为单位。
<html> <body> <iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe> <p>一些老的浏览器不支持 iframe。</p> <p>如果得不到支持，iframe 是不可见的。</p> </body> </html>
三、一个框架布局的示例
<html>
<head>
<title>框架主页面 </title>
</head>
<frameset rows="20%,*"><!--框架集，控件文件的容器-->
<frame name="topFame" src="3.html" noresize/>
<frameset cols="240px,*">
<frame name="leftFrame" src="1.html"/>
<frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/>
</frameset>
<noframes>
<!--noframes标记当中可以包含body标记-->
<body>
该页面不支持frameset标签！
</body>
</noframes>
</frameset>
</html>四、链接如何跳出框架
在网站后台布局中，框架用得比较多。在很多时候，我们需要跳出框架，重新加载页面。那么链接如何才能跳出框架呢？其实，只需要指定3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed标签的target属性为"_top"即可实现。下面是一个简单的例子。
<html> <body> <p>被锁在框架中了吗？</p> <a href="/index.html" target="_top">请点击这里！</a> </body> </html>
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
相关推荐：
HTML框架标签frameset、frame、iframe、noframes
The above is the detailed content of How to use HTML framework. For more information, please follow other related articles on the PHP Chinese website!