HTML 中的 <iframe> 框架标签是一种内联框架元素,用于在网页中嵌入另一个 HTML 页面。
大多用于嵌入站外网页的情况。
HTML 框架标签主要分 2 种:框架集(frameset)和框架(frame)。
那我们一起来看看吧。
框架集是 HTML 标签中的一种,每个区域可以加载不同的 HTML 文档或网页内容。
当你使用 HTML 框架集时,会涉及到以下基本标签和语法结构:
来个简单案例吧:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>框架集布局示例</title>
- </head>
- <frameset cols="25%, 75%">
- <frame src="menu.html" name="menu">
- <frame src="content.html" name="content">
- <noframes>
- <body>
- <p>您的浏览器不支持框架,请升级浏览器。</p>
- </body>
- </noframes>
- </frameset>
- </html>
-
在这个示例中,我们使用<frameset>标签划分了两个框架,左侧占 25%,右侧占 75%。左侧框架加载了名为menu.html的菜单页面,右侧框架加载了名为content.html的内容页面。如果浏览器不支持框架,将显示<noframes>中的内容提示用户升级浏览器。
基本写法如下:
- <iframe src="https://news.baidu.com/" width="800" height="300" frameborder="0">></iframe>
-
<iframe> 常用的属性及其写法:
这些属性可以根据需要进行设置,以实现对 <iframe> 的定制和控制。
其实,相对来看,框架标签的SEO,兼容性和可控性都比较差,非站外网站,不再建议使用框架(frameset)和框架集(frameset)标签了。
随着 HTML5 的发展和现代 Web 技术的成熟,通常使用 CSS 布局和 JavaScript 就能实现复杂的页面布局和交互效果了。本文呢,作为大致了解即可。