frameset标签的用法

本文介绍了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!此番类型,说是都市仙侠,感觉就是都市爽文~

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

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

最后,祝在座的各位,学业事业生活顺顺利利!

<think>我们被要求回答关于HTMLframeset标签的使用方法。根据用户提供的引用,frameset标签用于创建分割页面的布局结构,但已被HTML5弃用。不过,用户仍然想了解其用法。 引用内容总结: [^1]: Frameset标签用于创建分割页面的布局结构,将网页分割成多个独立的区域(frame),每个区域显示不同的网页内容。虽然现在不推荐使用,但有助于理解旧版网站。 [^2]: frameset标签成对出现,使用时不应用body标签。需要声明支持框架的文档类型。属性cols(水平框架)rows(垂直框架)取值可以是像素px或百分比%。 [^3]: 主要设计网站后台页面。使用frameset不能使用body标签。rows属性横向切分,cols纵向切分,多个值用逗号隔开,切分几部分就需要几个frame标签。 [^4]: frameset元素定义框架集,用于组织多个窗口(框架),每个框架有独立文档。使用cols或rows属性指定列数或行数。 因此,我们可以这样组织回答: 1. 介绍frameset标签的基本概念现状(已弃用)。 2. 使用frameset的基本步骤: - 文档类型声明(注意不是HTML5的声明) - 使用frameset标签替代body标签 - 使用rows或cols属性定义分割方式 - 使用frame标签定义每个框架的内容(通过src属性指定页面) 3. 提供示例代码。 4. 注意事项(如不能使用body标签,每个frame需要指定src等)。 同时,根据引用[2],文档类型声明应该使用XHTML 1.0 Frameset。 示例代码结构: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>框架示例</title> </head> <frameset cols="25%,75%"> <frame src="frame_a.html"> <frame src="frame_b.html"> </frameset> </html> 注意:frameset标签HTML5中已不再支持,所以这个示例使用的是XHTML 1.0 Frameset文档类型。 另外,还可以展示一个同时有行列的嵌套框架示例。 最后,提醒用户现在更推荐使用iframe或CSS布局来替代frameset。 根据要求,生成相关问题。</think>### HTML Frameset标签使用详解 `<frameset>`是HTML中用于创建多窗口布局的标签,可将浏览器窗口分割为多个独立的框架(frame),每个框架可加载不同网页内容。虽然HTML5已弃用此标签,但了解其用法对维护旧系统仍有价值。 #### 一、基本用法 1. **文档声明** 必须使用XHTML框架文档类型(非标准HTML5): ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> ``` 2. **核心结构** ```html <html> <head> <title>框架示例</title> </head> <frameset cols="25%,75%"> <!-- 纵向分割 --> <frame src="menu.html"> <!-- 左侧框架 --> <frame src="content.html"> <!-- 右侧框架 --> </frameset> </html> ``` **关键点**: - 禁止使用`<body>`标签 - 框架数量必须与`cols/rows`定义的分区数匹配 - 每个`<frame>`需通过`src`指定加载的页面 [^1][^3] #### 二、布局控制属性 | **属性** | **功能** | **值示例** | **说明** | |----------|----------|------------|----------| | `cols` | 纵向分割 | `"200, *"` | 固定左侧200px,右侧自适应 | | `rows` | 横向分割 | `"20%, 80%"` | 上方占20%高度 | | `border` | 边框粗细 | `border="1"` | 框架间分隔线粗细 | | `frameborder` | 是否显示边框 | `frameborder="0"` | 0=隐藏,1=显示 | **混合布局示例**(嵌套分割): ```html <frameset rows="20%,*"> <!-- 先横向分割 --> <frame src="header.html"> <frameset cols="30%,70%"> <!-- 再纵向分割 --> <frame src="sidebar.html"> <frame src="main.html"> </frameset> </frameset> ``` #### 三、Frame标签属性 ```html <frame src="page.html" name="contentFrame" noresize="noresize" scrolling="auto" > ``` - `name`:框架命名(用于超链接定位) - `noresize`:禁止用户调整框架大小 - `scrolling`:滚动条控制(`auto|yes|no`) #### 四、框架间通信 1. **超链接定位** 在菜单页设置链接: ```html <a href="about.html" target="contentFrame">关于我们</a> ``` 点击后内容将在名为`contentFrame`的框架中打开 2. **嵌套框架访问** 通过`parent`对象跨框架访问: ```javascript // 在子框架中访问父框架元素 parent.document.getElementById('header') ``` #### 五、注意事项 1. **已弃用标签** HTML5标准已移除`<frameset>`,推荐替代方案: ```html <!-- 现代替代方案 --> <div class="container"> <iframe src="menu.html"></iframe> <iframe src="content.html"></iframe> </div> ``` 结合CSS Grid/Flexbox布局实现响应式分割 2. **主要缺点**: - 无法被搜索引擎有效索引 - 移动设备兼容性差 - 浏览器前进/后退功能异常 - 存在安全风险(点击劫持)[^1][^4] 3. **适用场景** 仅建议用于遗留系统维护,如: - 传统后台管理系统 - 企业内部旧版应用 - 历史项目兼容性维护 > **最佳实践**:新项目应使用`<div>`+CSS布局或`<iframe>`替代,并通过PostMessage API实现框架通信。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值