frameset标签的用法

最新推荐文章于 2025-07-11 10:39:29 发布

原创最新推荐文章于 2025-07-11 10:39:29 发布 · 3.5w 阅读

113 ·

CC 4.0 BY-SA版权

文章标签：

#html #frameset #frameset和body #不能共用

web前端原创专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML中的frameset标签及其用法。通过实例演示了如何利用frameset将浏览器窗口分为多个独立的HTML界面，并展示了如何结合超链接的target属性实现内容在特定框架内加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

frameset的用法

这是在下的第一篇博客，先以小c君自称了。小c君在学习<a> 标签的 target 属性时，发现它还有一个framename值。于是由此摸索发现了一个很好玩的标签——<frameset>。

<frameset></frameset>

一、首先来说一下，我总结的frameset标签的要点。

1.<frameset>元素：定义一个框架集，它被用来组织多个窗口。每个窗口都是一个独立的html界面。

2.<frameset>有两个参数，cols和rows。cols：列的数目和尺寸。rows：行的数目和尺寸。要特别注意的：<frameset>中只能用一个参数。要么是 rows，要么是 cols，不能同时定义。

例子：

a.把一个窗口横着平分成两个页面。

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

b.把一个窗口竖着平分成两个页面。

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

3.<frameset></frameset>和<body></body>不能一起使用，即不能出现在同一个html页面中。

4.用<frameset>标签前要将前言中的"DTD"改为"Frameset DTD"。

二、实例

我们要建三个HTML文档:

第一个文档里写超链接

第二个文档是空白文档（只包含前言）

第三个文档里写<frameset>框架集。

1.第一个页面2018-7-10.html中写几个超链接，并设置target="framename",这样链接就会跳转到name="framename"的页面中。

<body>
<div id="wrap">
<div id="head"><a id="animation" href="#">斗魂卫之玄月奇缘</a></div>
</br>
<p><a id="jianjie" target="framename" href="https://baike.baidu.com/item/%E6%96%97%E9%AD%82%E5%8D%AB%E4%B9%8B%E7%8E%84%E6%9C%88%E5%A5%87%E7%BC%98/22636536?fr=aladdin">作品简介</a></p>
</br>
<p><a id="introduction" target="framename" href="https://baike.baidu.com/item/%E4%B8%8A%E5%AE%98%E6%98%8E%E6%9C%88/22636538" >漂亮的小姐姐——上官明月简介</a>
</p>
</br>
<p><a id="mingyue" href="#">上官明月美颜盛世</a>
</p>
</div>
</body>

浏览一下：

2.第二个页面2018-7-10Frame-1.html是一个空白页面，只包含前言。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>只包含前言的页面，用于2018-7-10页面在框架右部分显示。</title>
</head>
<body>
</body>
</html>

浏览一下，应该是一片空白。

3.第三个页面2018-7-10Frame-2.html，定义frameset框架集。（注意此页面要将前言里的"DTD"改为"Frameset DTD"）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Frameset DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Frameset</title>
</head>
<frameset cols="50%,50%">            <!--将窗口竖着平分成两个页面-->
<frame src="2018-7-10.html"/>
<frame src="2018-7-10Frame-1.html" name="framename" />        <!-- name="framename",将第二个空白页面设为显示2018-7-10.html链接的页面-->
</frameset>
</html>

浏览一下：（右边界面点击作品简介，左边界面显示内容）

三、后记

写到这里，小c君的第一篇博客就要接近尾声了。

最后，再送在座的各位小伙伴一点福利。细心地小伙伴可能会发现第一个页面中，小c君一共写了三个链接，前两个都有链接地址，而最后一个是空连接。其实最后一个是图文链接，触发“上官明月美颜盛世”就能看到下面这张美图！

……没错，其实我就是个死肥宅

最近看了这部2018年6月19日开播新番玄月奇缘，突发灵感想把它加到博客中。一方面记录一下自己最近新学的知识，另一方面记录一下本肥宅的看番日常。粗略介绍一下这部番，剧情老套，台词尴尬，但在动画流畅度、特效和建模上做的挺好的。尤其是女主上官明月小姐姐的建模做的极佳，仿若天工开物，鬼斧神工，美啊！为建模师大大和上官小姐姐疯狂打call！此番类型，说是都市仙侠，感觉就是都市爽文~

感谢各位的观看，本肥……不，本人的第一篇博客至此结尾，喜欢的点赞啊~

菜鸟写博客，不足之处不吝赐教。

最后，祝在座的各位，学业事业生活顺顺利利！