Home Web Front-end HTML Tutorial How to use HTML iframe tag? Introduction to usage examples of HTML iframe tags

How to use HTML iframe tag? Introduction to usage examples of HTML iframe tags

Aug 28, 2018 pm 04:38 PM
html iframe

This article mainly introduces the details of the definition and use of iframe tags in HTML, as well as the attributes, advantages and disadvantages of HTML iframe tags. Let's take a look now

First let's take a look at the meaning of the HTML iframe tag:

The iframe tag creates an inline frame that contains another document (i.e. inline frames).

Let’s take a look at the attribute introduction of the iframe tag:

How to use HTML iframe tag? Introduction to usage examples of HTML iframe tags

Here are some examples:

<iframe src="http://www.php.cn" width="200" height="500"> 
这里使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问。 
</iframe>
Copy after login

Use pixels to define the size of the iframe

<iframe src="http://www.php.cn" width="20%" height="50%"> 
这里使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问。 
</iframe>
Copy after login

Use percentages to define the size of the iframe

html Advantages and disadvantages of iframe

Advantages: When reloading a page, you do not need to reload the entire page, only a frame page in the page needs to be reloaded (reduce data transmission and reduce the loading time of the web page);

The technology is simple and easy to use. It is mainly used for pages that do not require search engines to search;

Convenient development and reduce code duplication rate (such as the header and footer of the page);

Disadvantages: It will generate a lot of pages, which is not easy to manage;

is not easy to print;

Multi-frame pages will increase the number of service http requests;

Browse The back button of the browser is invalid, etc.;

html Use of iframe tag:

iframe tag, also called floating frame tag, you can use it to embed an HTML document in Displayed in an HTML.

The biggest feature that is different from the frame tag is that the HTML file referenced by this tag is not displayed independently from other HTML files

, but can be directly embedded in an HTML file, with The content of this HTML file is integrated with each other and

becomes a whole. In addition, the same content can be displayed multiple times on a page without having to write the content repeatedly.

An image metaphor is "painting" In the picture "TV.

The usage format of iframe tag is:

src: The path of the file, which can be an HTML file, text, ASP, etc.;

width, height: "In the picture Draw the width and height of the area;

scrolling: When the specified HTML file of SRC is not displayed in the specified area, the scrolling option,

If set to NO, it will not appear. Scroll bar; if it is Auto: the scroll bar will appear automatically; if it is Yes, it will be displayed;

frameBorder: the width of the area border. In order to integrate the "picture-in-picture" with adjacent content, it is often set to 0.

For example:

<Iframe src="http://www.php.cn/" width="250" height="200" scrolling="no" frameborder="0"></iframe>
Copy after login

[Editor’s recommendation]

How to write a relative path for the base tag in HTML? (Introduction to use included)

#html How to use the base tag? How to use the base tag (with examples)

The above is the detailed content of How to use HTML iframe tag? Introduction to usage examples of HTML iframe tags. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles