HTML framework


May 02, 2021 14:31 HTML


Table of contents


HTML framework


<iframe> an inline framework.

One inline framework is used to embed another document in the current HTML document.

By using frames, you can display more than one page in the same browser window.

iframe syntax:

<iframe src="URL"></iframe>

The URL to a different page and displays the contents of the window as a URL URL pointing to the page.


Iframe - Set height and width


height and width define the height and width of the iframe label.

Properties default to pixels, but you can specify that they are displayed proportionally (e.g.: 80%).

<iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>

Try it out . . .

Iframe - Remove the border


frameborder defines iframe indicates whether the border is displayed.

Set the property value to "0" to remove the border of the iframe

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Try it out . . .

Use iframe to display the directory link page


iframe can display a target link page

The properties of the target link must use iframe as follows:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href=" http://www.w3cschool.cn " target="iframe_a">W3CSCHOOL.CN</a></p>

Try it out . . .

HTML iframe tag


标签 说明
<iframe> 定义一个内联的 iframe

Iframe standard properties


属性 说明
class
规定元素的类名(classname)
id 规定元素的唯一 id
style 规定元素的行内样式(inline style)
title 规定元素的额外信息(可在工具提示中显示)


HTML slt;frameset-tags - HTML5 does not support


<frameset> sets one or more frames in a single </body> page, replacing the <frameset> </frameset> and <body> not appear in the body label.

syntax:

<frameset>

<frame src="menu.html">

<frame src="content.html">

</frameset>

  • frameset - Establishes a tag for the framework in which each framework is defined.
  • frame src - indicates the URL address of the content displayed by the frame.

- Set the ranks


<frameset> that we use rows to set rows in the label; the percentage of columns we set up in the cols

<frameset rows="20%,*">

<frame src="title.html">

<frameset cols="30%,*">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</frameset>


Try it out . . .
  • frameset cols - Determines the percentage of each frame column. In the previous example, we determined that the first frame would occupy 30% of the area “*” symbol to indicate the remaining percentage.
  • frameset rows - Determines the percentage of each frame line that will be displayed. In the previous example, we chose the first frame to be 20%, and the remaining menu.html the menu .html content and content.html

- Set the border


The frame has some border lines that are not required most of the time. <frameset> the frameborder framespacing to erase them.

Note: frameset frameborder same properties.

<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">

<frame src="title.html">

<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</frameset>


Try it out . . .
  • frameborder - Set the border, and a value of 0 indicates that there is no border
  • border - Modify the weight of the border (used by Netscape browser)
  • framespacing - Modify the weight of the border (used by Internet Explorer browser)

- Set the name


<frame> frame with name property, not the content page.

<frameset rows="20%,*">

<frame name="title" src="title.html">

<frameset cols="30%,*">

<frame name="menu" src="menu.html">

<name="content" src="content.html">

</frameset>

</frameset>


Try it out . . .

-lt;frame-gt; - Set scrolling


<frame> use the noresize setting to prevent the user from dragging the frame size; scrolling whether the scroll bar is displayed or not.

<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">

<frame src="title.html" noresize scrolling="no">

<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">

<frame src="menu.html" scrolling="auto" noresize>

<frame src="content.html" scrolling="yes" noresize>

</frameset>

</frameset>


Try it out . . .
  • noresize - Does not allow users to change their size.
  • scrolling - Set whether the scroll bar is displayed.