Home > Developer > Web Develop
Objective of this chapter: Mastering the Framework Structure <frameset><frame><iframe>
Mastering organizational elements: span and Div
This chapter focuses on: Frame structure <frameset><frame><iframe>
The difficulty of this chapter: frame construction
First, the frameworkUsing frames, you can display more than one HTML document in a single browser window. Such HTML documents are called frames pages, and they are independent of each other. ：
The disadvantages of using the framework are:
Frameset Tags:
Frame Tags:
In this example, there is a two-column section. The first one is set to 25% of the window width and the second one is set to 75% of the window width. The page "frame_a.htm" is placed in the first column, and "frame_b.htm" is placed in the second column.
Basic points of attention-useful tips:
If a frame has a visible border, the user can drag the border to change its size. If you do not want to change the size of the user, you can add: noresize= "Noresize" in the <frame> tag.
Write <noframes> tags for browsers that do not support frames.
More examples:
Hybrid frame:
<frameset rows= "50%,50%" >
<framesrc= "Frame_a.htm" >
<framesetcols= "25%,75%" >
<framesrc= "Frame_b.htm" >
<framesrc= "Frame_c.htm" >
</frameset>
</frameset>
This example shows how to put three pages in a frame in a mix of rows and columns.
A frame using the noresize= "Noresize" is used:
<frameset rows= "50%,50%" >
<framenoresize= "Noresize" src= "frame_a.htm" >
<framesetcols= "25%,75%" >
<framenoresize= "Noresize" src= "frame_b.htm" >
<framenoresize= "Noresize" src= "frame_c.htm" >
</frameset>
</frameset>
This example illustrates the Noresize property. This frame is non-resizable, move the mouse over the frame boundary and you will find that it cannot be resized.
Navigation frame:
<frameset cols= "120,*" >
<framesrc= "Frame_link.htm" >
<framesrc= "frame_a.htm" name= "Showframe" >
</frameset>
This example shows how to create a navigation frame. The navigation frame contains a series of links whose target pages are in the second frame. The file "Frame_links.htm" contains three links with the following code:
Inline frame:
<body>
<iframesrc= "Intro.htm" ></iframe>
<p>some older browsers don ' t supportiframes.</p>
<p>if They don ' t, the IFRAME would notbe visible.</p>
</body>
This example shows how to create an inline frame (a frame contained in an HTML page).
Jump to the specified section within the frame:
<frameset cols= "30%,70%" >
<framesrc= "Frame_a.htm" >
<framesrc= "FRAME_SECTION.HTM#C10" >
</frameset>
This example shows the two frames page. One of the sources is a specified section of a file that uses code <a name= "C10" > designation in the File "Frame_section.htm".
Use the navigation frame to jump to the specified section:
<framesetcols= "200,*" >
<framesrc= "Frame_linksection.htm" >
<frame src= "frame_section.htm" name= "Showframe" >
</frameset>
This example shows the two frames page. The navigation frame on the left contains a series of links that target the second frame ("frame_linksection.htm"), and the second frame shows the linked file ("Frame_section.htm"). A link in the navigation frame points to the specified section in the destination file. The HTML code in the file "Frame_link" is like this:
II. organizational elements: span and Divspan和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。
用span组织元素：
spanan element can be said to be a neutral element because it does not add anything to the document itself. But with CSS, span you can add visual effects to some of the text in your document.
Let's use a quote from Benjamin Franklin (Benjamin Franklin) to give an example:
Let's say we want to use red to emphasize the benefits of what Mr. Franklin believes is "Don't spend a day in sleep," and we can tag <span> each of these benefits with a label. Then we'll set these several span to the same class . In this way, we can define a specific style for this class later in the style table.
The corresponding CSS code is as follows:
To organize elements with Div:
As shown in the previous example, span the use is limited to one block element and div can be used to organize one or more block elements.
This distinction is removed div and span is similar to the organizational element. Let's take a look at an example.
The use of frames and layers in HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
