2025年1月31日 星期五 甲辰(龙)年 冬月廿九 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 软件应用 > 开发工具(IDE)

HTML基础:框架标签详解

时间:01-24来源:作者:点击数:16

HTML 中的 <iframe> 框架标签是一种内联框架元素,用于在网页中嵌入另一个 HTML 页面。

大多用于嵌入站外网页的情况。

HTML 框架标签主要分 2 种:框架集(frameset)和框架(frame)。

那我们一起来看看吧。

一、框架集

框架集是 HTML 标签中的一种,每个区域可以加载不同的 HTML 文档或网页内容。

当你使用 HTML 框架集时,会涉及到以下基本标签和语法结构:

  1. <frameset>标签:用于定义框架集,即划分页面布局的容器。它可以包含多个<frame>标签,指定每个框架的位置和大小。示例:<frameset cols="25%, 75%">...</frameset>
  2. <frame>标签:用于定义单个框架,在<frameset>中使用。它的src属性指定要加载的页面或文档地址,name属性定义框架的名称。示例:<frame src="example.html" name="frame1">
  3. <noframes>标签:用于在不支持框架的浏览器中显示备用内容或提示信息。示例:<noframes><p>您的浏览器不支持框架,请升级浏览器。</p></noframes>

来个简单案例吧:

  • <!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> 常用的属性及其写法:

  1. name 属性:
    • 写法:name="frame_name"
    • 作用:用于指定 <iframe> 的名称,以便在表单提交、JavaScript 等场景中使用。
  2. width 属性:
    • 写法:width="value"
    • 作用:指定 <iframe> 的宽度,可以使用像素值、百分比或其他单位来表示宽度。
  3. height 属性:
    • 写法:height="value"
    • 作用:指定 <iframe> 的高度,可以使用像素值、百分比或其他单位来表示高度。
  4. src 属性:
    • 写法:src="URL"
    • 作用:指定要嵌入的页面的 URL 地址,告诉浏览器要加载的内容在哪里。
  5. frameborder属性:
    • 写法:frameborder="value",value 值只有 2 个,frameborder="1" - 显示边框;frameborder="0" - 不显示边框。
    • 作用:为 iframe 定义是否显示边框。

这些属性可以根据需要进行设置,以实现对 <iframe> 的定制和控制。

总结

其实,相对来看,框架标签的SEO,兼容性和可控性都比较差,非站外网站,不再建议使用框架(frameset)和框架集(frameset)标签了。

随着 HTML5 的发展和现代 Web 技术的成熟,通常使用 CSS 布局和 JavaScript 就能实现复杂的页面布局和交互效果了。本文呢,作为大致了解即可。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐