HTML <frame> 标签详解

HTML基础 2022-06-02 09:40:34小码哥的IT人生shichen

HTML <frame> 标签

HTML5 中不支持

<frame> 标签在 HTML 4 中用于在 <frameset> 中定义特定的窗口（框架）。

实例

简单的三框架页面：

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

完整实例【亲自试一试】：

<html>
<frameset cols="25%,50%,25%">
  <frame src="/demo/example/html/frame_a.html">
  <frame src="/demo/example/html/frame_b.html">
  <frame src="/demo/example/html/frame_c.html">
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有浏览器都支持 <frame> 标签。

定义和用法

<frame> 标签定义 frameset 中的一个特定的窗口（框架）。

frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。

HTML 与 XHTML 之间的差异

在 HTML 中，<frame> 标签没有结束标签。

在 XHTML 中，<frame> 标签必须被正确地关闭。

提示和注释：

注释：如果您希望验证包含框架的页面，请确保 doctype 被设置为 "Frameset DTD"。阅读更多有关 DOCTYPE 的内容。

重要事项：您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！

可选的属性

属性	值	描述
frameborder	0 1	规定是否显示框架周围的边框。
longdesc	URL	规定一个包含有关框架内容的长描述的页面。
marginheight	pixels	定义框架的上方和下方的边距。
marginwidth	pixels	定义框架的左侧和右侧的边距。
name	name	规定框架的名称。
noresize	noresize	规定无法调整框架的大小。
scrolling	yes no auto	规定是否在框架中显示滚动条。
src	URL	规定在框架中显示的文档的 URL。

标准属性

id, class, title, style

如需完整的描述，请访问标准属性。

TIY 实例

完整实例【垂直框架】：

<html>
<frameset cols="25%,50%,25%">
  <frame src="/demo/example/html/frame_a.html">
  <frame src="/demo/example/html/frame_b.html">
  <frame src="/demo/example/html/frame_c.html">
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例【水平框架】：

<html>
<frameset rows="25%,50%,25%">
  <frame src="/demo/example/html/frame_a.html">
  <frame src="/demo/example/html/frame_b.html">
  <frame src="/demo/example/html/frame_c.html">
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例【如何使用 <noframes> 标签】：

<html>
<frameset cols="25%,50%,25%">
  <frame src="/demo/example/html/frame_a.html">
  <frame src="/demo/example/html/frame_b.html">
  <frame src="/demo/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例【混合框架结构】：

<html>
<frameset rows="50%,50%">
<frame src="/demo/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/demo/example/html/frame_b.html">
<frame src="/demo/example/html/frame_c.html">
</frameset>
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例【含有 noresize="noresize" 属性的框架结构】：

<html>
<frameset cols="50%,*,25%">
  <frame src="/demo/example/html/frame_a.html" noresize="noresize" />
  <frame src="/demo/example/html/frame_b.html" />
  <frame src="/demo/example/html/frame_c.html" />
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例【导航框架】：

<html>
<frameset cols="120,*">
  <frame src="/demo/html/content.html">
  <frame src="/demo/example/html/frame_a.html" name="showframe">
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例【内联框架】：

<html>
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例【跳转至框架内的一个指定的节】：

<html>
<frameset cols="20%,80%">
 <frame src="/demo/example/html/frame_a.html">
 <frame src="/demo/example/html/link.html#C10">
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例【使用框架导航跳转至指定的节】：

<html>
<frameset cols="180,*">
<frame src="/demo/html/content.html">
<frame src="/demo/example/html/link.html" name="showframe">
</frameset>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

上一篇HTML <form> 标签详解下一篇HTML <frameset> 标签详解

小码哥的IT人生

HTML <frame> 标签详解

HTML <frame> 标签

HTML5 中不支持

实例

完整实例【亲自试一试】：

浏览器支持

定义和用法

HTML 与 XHTML 之间的差异

提示和注释：

可选的属性

标准属性

TIY 实例

完整实例【垂直框架】：

完整实例【水平框架】：

完整实例【如何使用 <noframes> 标签】：

完整实例【混合框架结构】：

完整实例【含有 noresize="noresize" 属性的框架结构】：

完整实例【导航框架】：

完整实例【内联框架】：

完整实例【跳转至框架内的一个指定的节】：

完整实例【使用框架导航跳转至指定的节】：

tags标签云

Web前端栏目导航

最新文章

热门文章

HTML <frame> 标签 详解

HTML <frame> 标签

HTML5 中不支持

实例

完整实例【亲自试一试】：

浏览器支持

定义和用法

HTML 与 XHTML 之间的差异

提示和注释：

可选的属性

标准属性

TIY 实例

完整实例【垂直框架】：

完整实例【水平框架】：

完整实例【如何使用 <noframes> 标签】：

完整实例【混合框架结构】：

完整实例【含有 noresize="noresize" 属性的框架结构】：

完整实例【导航框架】：

完整实例【内联框架】：

完整实例【跳转至框架内的一个指定的节】：

完整实例【使用框架导航跳转至指定的节】：

相关阅读

tags标签云

Web前端栏目导航

最新文章

热门文章

HTML <frame> 标签详解