当前位置: 首页 > news >正文

HTML 框架

HTML 框架


<iframe>标签规定一个内联框架。

 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

 iframe 语法:

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

 该URL指向不同的网页,将窗口内容显示为URL地址指向页面。

 

Iframe - 设置高度与宽度


heightwidth属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%").

实例

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

尝试一下 »
 

Iframe - 移除边框


frameborder属性用于定义iframe表示是否显示边框。

 设置属性值为 "0" 移除iframe的边框:

实例

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

尝试一下 »
 

使用 iframe 来显示目录链接页面


iframe可以显示一个目标链接的页面

 目标链接的属性必须使用iframe的属性,如下实例:

实例

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

尝试一下 »
 

HTML iframe 标签


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

iframe 标准属性


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

HTML <frameset>标签 - HTML5 不支持


<frameset>标签在一个页面中设置一个或多个框架,用<frameset></frameset>代替了<body></body>,不能出现在body标签里。

 <frameset> 语法:

<frameset>

<frame src="menu.html">

<frame src="content.html">

</frameset>

  • frameset- 建立框架的标记,将在其中定义各个框架。
  • frame src- 指示框架显示内容URL地址。
 

<frameset> - 设置行列比例


<frameset>标签中我们使用rows设置行的占页面的百分比;cols设置列的所占百分比。

实例

<frameset rows="20%,*">

<frame src="title.html">

<frameset cols="30%,*">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</frameset>


尝试一下 »
  • frameset cols- 确定每个框架列所占百分比。在前面的示例中,我们已经确定第一框架将占据所示区域的 30%,并且我们使用“*”符号来指示剩余百分比。
  • frameset rows- 确定将显示的每个框架行所占百分比。在前面的示例中,我们选择第一框架为 20%,剩下的剩余空间将在menu.htmlcontent.html之间划分。
 

<frameset> - 设置边框 


 框架有一些边框线,大多数时候都不需要。<frameset>标签中我们使用frameborderframespacing属性可以擦除它们。

注意:framesetframeborder是相同的属性。

实例

<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>


尝试一下 »
  • frameborder-设置边框, 0 值表示没有边框
  • border- 修改边框的粗细(由 Netscape 浏览器使用)
  • framespacing- 修改边框的粗细(由 Internet Explorer 浏览器使用)
 

<frame> - 设置名字 - HTML5 不支持 


<frame>标签中我们使用name属性命名每个框架,而不是内容页面。

实例

<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>


尝试一下 »

<frame> - 设置滚动


<frame>标签中我们使用noresize设置禁止用户拖拉框架大小;scrolling用于设置滚动条是否显示。

实例

<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>


尝试一下 »
  • noresize- 不允许用户更改其尺寸。
  • scrolling- 设置滚动条是否显示。
http://www.lryc.cn/news/30678.html

相关文章:

  • Rust特征(Trait)
  • 详解七大排序算法
  • Vue+ECharts实现可视化大屏
  • 百度Apollo规划算法——轨迹拼接
  • 6. unity之脚本
  • flink-note笔记:flink-state模块中broadcast state(广播状态)解析
  • vue——预览PDF
  • 数据库复习
  • vscode插件推荐
  • THUPC2023初赛总结
  • unity知识点小结02
  • 总线(四)Modbus总线 协议
  • Cadence Allegro 导出Component Report详解
  • 程序猿成长之路之密码学篇-DES算法详解
  • maven生命周期、阶段与默认绑定插件梳理
  • 【数学基础】
  • 网上电子商城的设计与实现
  • 2023thupc总结
  • 【数据库】MySQL数据库基础
  • grid了解
  • 2023年全国最新工会考试精选真题及答案13
  • 初识HTML技术
  • 我们为什么要用消息队列?
  • Linux进程控制
  • PMP项目管理引论介绍
  • 计算机视觉废钢堆提取问题
  • 判断水仙花数-课后程序(Python程序开发案例教程-黑马程序员编著-第二章-课后作业)
  • 目标检测: 数据增强代码详解
  • 第二讲:ambari编译复盘,如何实现一次性成功编译ambari
  • Windows下jdk安装与卸载-超详细的图文教程