Home > Article > Web Front-end > In-depth analysis of HTML5 inline frame-iFrame

In-depth analysis of HTML5 inline frame-iFrame

零下一度Original: 2017-05-25 11:53:582808browse

The following editor will bring you an in-depth analysis of HTML5 inline frame iFrame. I hope to be helpful. Come and have a look with the editor, I wish you all a happy game

Since frame and frameset are rarely used now, they are outdated and have been replaced by p+CSS, so here is just an example to illustrate. The inline frame iFrame that is still in use

The so-called iFrame inline frame, my understanding is that a web page is nested inside the web page, and it can be nested level by level.

The example is as follows:

The example consists of index.html and iframe1.html, iframe2.html, iframe3 .html composition

First upload a rendering, followed by the complete code.

After clicking

The complete code is as follows

index.html

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<!--注意，这里没有body元素-->
index   
<a href="www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
<br/>
<iframe src="iframe1.html" frameborder="1" width="800px" height="800px"></iframe>
</html>

##iframe1.html

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe1</title>
</head>
<body bgcolor="red">
iFrame1   
<a href="www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
<br/>
<iframe src="iframe2.html" frameborder="0" width="600px" height="600px"></iframe>
</body>
</html>

iframe2.html

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe2</title>
</head>
<body bgcolor="green">
iFrame2   
<a href="www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
<br />
<iframe src="iframe3.html" frameborder="0" width="400px" height="400px"></iframe>
</body>
</html>

iframe3.html

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe3</title>
</head>
<body bgcolor="yellow">
iFrame3   
<a href="www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a></body>
</html>

It seems that the mainstream websites do not use this This kind of layout has a relatively small scope of application.

【Related recommendations】

Free h5 online video tutorial

HTML5 full version manual

HTML5 actual combat and analysis of delay script

HTML5 game framework cnGameJS development record-detailed explanation of resource loading module code

HTML5 actual combat and analysis of HTMLDocument changes

The above is the detailed content of In-depth analysis of HTML5 inline frame-iFrame. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：Detailed introduction to the download attribute in HTML5Next article：Detailed introduction to the download attribute in HTML5

See more

In-depth analysis of HTML5 inline frame-iFrame

Related articles