HTML基础教程（8）——HTML框架

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

实例

垂直框架
本例演示：如何使用三份不同的文档制作一个垂直框架。

<html>

<frameset cols="25%,50%,25%">

  <frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
  <frame src="../example/html/frame_b.html" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
  <frame src="../example/html/frame_c.html" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">

</frameset>

</html>

水平框架
本例演示：如何使用三份不同的文档制作一个水平框架。

<html>

<frameset rows="25%,50%,25%">

  <frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
  <frame src="../example/html/frame_b.html" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
  <frame src="../example/html/frame_c.html" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">

</frameset>

</html>

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签（<frameset>）

  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

编者注：frameset 标签也被某些文章和书籍译为框架集。

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

基本的注意事项 - 有用的提示：

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

更多实例

如何使用 <noframes> 标签
本例演示：如何使用 <noframes> 标签。

<html>

<frameset cols="25%,50%,25%">
  <frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
  <frame src="../example/html/frame_b.html" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
  <frame src="../example/html/frame_c.html" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>

</html>

混合框架结构
本例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。

<html>

<frameset rows="50%,50%">

<frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="../example/html/frame_b.html" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
<frame src="../example/html/frame_c.html" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">
</frameset>

</frameset>

</html>

含有 noresize="noresize" 属性的框架结构
本例演示 noresize 属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。

<html>

<frameset rows="50%,50%">

<frame noresize="noresize" src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame noresize="noresize" src="../example/html/frame_b.html" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
<frame noresize="noresize" src="../example/html/frame_c.html" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">
</frameset>

</frameset>

</html>

导航框架
本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。

<html>

<frameset cols="120,*">

<frame src="../example/html/html_contents.html" tppabs="http://www.w3school.com.cn/example/html/html_contents.html">
<frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html"
name="showframe">

</frameset>

</html>

内联框架
本例演示如何创建内联框架（HTML 页中的框架）。

<html>

<body>

<iframe src="../i/eg_landscape.jpg" tppabs="http://www.w3school.com.cn/i/eg_landscape.jpg"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>

</body>
</html>

跳转至框架内的一个指定的节
本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识。

<html>

<frameset cols="20%,80%">

 <frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
 <frame src="../example/html/link.html#C10" tppabs="http://www.w3school.com.cn/example/html/link.html#C10">

</frameset>

</html>

使用框架导航跳转至指定的节
本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

<html>

<frameset cols="180,*">

<frame src="../example/html/content.html" tppabs="http://www.w3school.com.cn/example/html/content.html">
<frame src="../example/html/link.html" tppabs="http://www.w3school.com.cn/example/html/link.html" name="showframe">

</frameset>

</html>

HTML基础教程（8）——HTML框架

时间： 2024-11-05 13:44:17

HTML基础教程（8）——HTML框架的相关文章

ASP.NET Core 配置 EF SQLite 支持 - ASP.NET Core 基础教程 - 简单教程，简单编程

原文:ASP.NET Core 配置 EF SQLite 支持 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 配置 EF SQLite 支持 上一章节我有提到 macOS 版的 Visual Studio Community 没有携带 LocalDB,也就是说 LocalDB 暂时不支持 macOS 系统 虽然我可以在 Windows 上继续完成接下来的教程,但我觉得还是感觉不妥,如果其它使用苹果笔记本的人要去哪里找 Windows 的电脑 我临时改变

Swift版iOS游戏框架Sprite Kit基础教程下册

Swift版iOS游戏框架Sprite Kit基础教程下册 试读下载地址:http://pan.baidu.com/s/1qWBdV0C 介绍:本教程是国内唯一的Swift版的Spritekit教程.本教程基于Xcode 6.1+iOS 8.1开发环境,采用Swift语言,详细讲解Sprite Kit游戏开发的各种知识,帮助读者尽快iOS游戏开发的技能. 目录 第7章  音频和视频 1 7.1  背景音乐 1 7.1.1  添加背景音乐 1 7.1.2  控制背景音乐 5 7.1.3  设置音乐

iOS游戏框架Sprite Kit基础教程——Swift版上册

iOS游戏框架Sprite Kit基础教程--Swift版上册 试读下载地址:http://pan.baidu.com/s/1qWBdV0C  介绍:本教程是国内唯一的Swift版的Spritekit教程.本教程基于Xcode 6.1+iOS 8.1开发环境,采用Swift语言,详细讲解Sprite Kit游戏开发的各种知识,帮助读者尽快iOS游戏开发的技能. 目录 目  录 第1章  编写第一个Sprite Kit程序 1 1.1  Sprite Kit介绍 1 1.1.1  什么是Sprit

swift语言注册非免费苹果账号iOS游戏框架Sprite Kit基础教程

swift语言注册非免费苹果账号iOS游戏框架Sprite Kit基础教程 1.2.3  注册非免费苹果账号swift语言注册非免费苹果账号iOS游戏框架Sprite Kit基础教程 免费的苹果账号在开发应用程序时会受到了很多的限制,如真机测试等,所以需要注册一个非免费的苹果账号.以下是注册非免费的苹果账号的具体步骤本文选自iOS游戏框架Sprite Kit基础教程: (1)在Safari中输入网址(https://developer.apple.com/programs/),按下回车,如图1.

iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序

iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序 程序是为了实现特定目标或解决特定问题而用计算机语言编写的命令序列的集合.本章将以编写第一个Sprite Kit程序为主线,为开发者讲解什么是Sprite Kit.苹果账号的注册.Xcode的下载和安装.编写程序.调试等内容.选自iOS游戏框架Sprite Kit基础教程Swift版上册大学霸 1.1  Sprite Kit介绍 从iOS 7开始添加了Sprite Kit.本节将为开发者讲解什么是Sprite Ki

ASP.NET Core 配置 EF 框架服务 - ASP.NET Core 基础教程 - 简单教程，简单编程

原文:ASP.NET Core 配置 EF 框架服务 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 配置 EF 框架服务 上一章节中我们了解了 Entity Framework 的基本工作原理和 DbContext ,我们也创建了一个自己的 HelloWorldDBContext. 本章节我们就来讲讲如何设置我们的 EF 框架来链接到 SQLite 数据库 配置 EF 框架服务 要让我们的 EF 框架的 DBContext 能够运行起来,我们需要更改一

ASP.NET Core 使用 EF 框架查询数据 - ASP.NET Core 基础教程 - 简单教程，简单编程

原文:ASP.NET Core 使用 EF 框架查询数据 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 使用 EF 框架查询数据 上一章节我们学习了如何设置和初始化数据库,以及如何创建迁移代码和应用迁移代码.本章节我们就学习如何使用 EF 框架来查询数据库,至于添加和修改,后面的章节中我们会慢慢学习到 添加测试数据 我们首先使用 SQLite Studio 添加三条数据 ID Name 1 李白 2 杜甫 3 白居易 使用 SQLite Studio

Xamarin图表开发基础教程（3）OxyPlot框架

Xamarin图表开发基础教程(3)OxyPlot框架 Xamarin.Android中使用OxyPlot框架 在Xamarin.Android平台上实现图表显示需要完成以下的步骤: 1.添加OxyPlot.Xamarin.Android组件 打开Xamarin.Android项目,使用Nuget将OxyPlot.Xamarin.Android组件添加到项目的引入中. 2.布局PlotView视图 在界面布局axml文件中,使用PlotView视图进行布局,其语法形式如下: <OxyPlot.X

Xamarin图表开发基础教程（4）OxyPlot框架

Xamarin图表开发基础教程(4)OxyPlot框架 XamaminAndroid中绘制线图OxyPlotAndroidDemo [示例1-1:OxyPlotAndroidDemo]下面实现线图的绘制.具体的操作步骤如下: (1)打开Xamarin.Android项目. (2)将OxyPlot.Xamarin.Android组件添加到项目中的引入中. (3)打开activity_main.axml文件,使用PlotView进行布局.代码如下: <?xml version="1.0&quo