HTML学习笔记之框架实例（二）

文阿花

已于 2024-04-17 15:53:53 修改

阅读量1k

点赞数 1

分类专栏： HTML 文章标签： html

于 2021-03-19 16:04:54 首次发布

本文链接：https://blog.csdn.net/wz_1992/article/details/115008772

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

2、框架实例

注意：frameset不能和body标签共存
<frameset>元素是用于创建框架页面的，它允许在一个浏览器窗口中显示多个HTML页面。然而，<frameset>是一种较旧的方式来构建网页，它不符合现代Web标准（比如HTML5）。HTML5不推荐使用<frameset>，因为它有许多限制，并且可能被未来的浏览器弃用。

2.1、垂直框架：

尺寸可调整（鼠标放置在相交处）
cols 标签

<html>
<!--垂直框架cols-->
<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

运行效果：
在这里插入图片描述

2.2、水平框架：

尺寸可调整（鼠标放置在相交处）
rows 标签

<html>
<!--水平框架rows -->
<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
    <!--设置不支持提示noframes -->
  <noframes>
  <body>您的浏览器不支持该框架</body>
  </noframes>
</frameset>
</html>

运行效果：
在这里插入图片描述

2.3、混合框架的使用：

尺寸可调整（鼠标放置在相交处）

<html>
<!--混合框架的使用 rows+cols-->
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

运行效果：
在这里插入图片描述

2.4设置尺寸不可拖动修改

noresize="noresize"实现尺寸不可拖动修改

<html>
<!--混合框架之设置尺寸不可拖动改变 设置frame_a的尺寸不能改变-->
<frameset cols="25%,25%,50%">
<frame src="/example/html/frame_a.html" noresize="noresize">
<frame src="/example/html/frame_b.html" >
<frame src="/example/html/frame_c.html" >
</frameset>
</html>

2.5 设置尺寸自适应

星号标签实现自适应

<html>
<!--混合框架之设置尺寸不可拖动改变 设置frame_a的尺寸不能改变-->
<frameset cols="25%,*,*">
<frame src="/example/html/frame_a.html" >
<frame src="/example/html/frame_b.html" >
<frame src="/example/html/frame_c.html" >
</frameset>
</html>

运行效果：
A占25%，B和C平分剩余空间
在这里插入图片描述

2.6、iframe内联框架的使用（用于网页中显示网页）

标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。

iframe的各种方法

<iframe src="URL"></iframe>  其中URL可为文件可为链接

（1）URL=文本
创建iframe_content.html文件

<html>
<body>
<p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>

  <p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>

  <p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>

  <p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
</body>
</html>

创建iframe.html文件，实现效果

<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动  auto、yes-->
<iframe src="iframe_content.html" width="300px" height="300px"></iframe>
</html>

运行效果：
在这里插入图片描述
（2）URL=链接

<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动  auto、yes-->
<iframe src="https://www.baidu.com" width="500px" height="300px"></iframe>
</html>

运行效果：
在这里插入图片描述
（3） URL=链接实现内联效果（点击修改iframe中的内容）

<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动  auto、yes-->
<iframe src="frame_a.html" name="framea" width="300px" height="300px"></iframe>
<p><a href="https://www.baidu.com" target="framea">百度</a></p>
</html>

运行效果：
原始效果：
在这里插入图片描述
点击百度：

2.7、锚的使用(设置页面默认展示位置)+页面跳转

【HTML】使用框架导航跳转到指定的节
frame_list.html

<html>
<body>
<h1>Chapter 1</h1>
<p>这是一句话</p>
<h1>Chapter 2</h1>
<p>这是一句话</p>
<h1>Chapter 3</h1>
<p>这是一句话</p>
<h1>Chapter 4</h1>
<p>这是一句话</p>
<h1>Chapter 5</h1>
<p>这是一句话</p>
<h1>Chapter 6</h1>
<p>这是一句话</p>
<h1>Chapter 7</h1>
<p>这是一句话</p>
<h1>Chapter 8</h1>
<p>这是一句话</p>
<h1>Chapter 9</h1>
<p>这是一句话</p>

<h1 ><a name="C10">Chapter 10</a></h1>
<p>这是一句话</p>
<h1>Chapter 11</h1>
<p>这是一句话</p>
<h1>Chapter 12</h1>
<p>这是一句话</p>
<h1>Chapter 13</h1>
<p>这是一句话</p>
<h1>Chapter 14</h1>
<p>这是一句话</p>
<h1>Chapter 15</h1>
<p>这是一句话</p>
<h1>Chapter 16</h1>
<p>这是一句话</p>
<h1>Chapter 17</h1>
<p>这是一句话</p>
</body>
</html>

frame_miao.html

<html>
<body>
<a href="frame_list.html" target="showframe">没有锚的链接</a>
<br >
<a href="frame_list.html#C10" target="showframe">带锚的链接</a>
</body>
</html>

frame_link.html

注意此处设置name

<html>
<frameset cols="200,*">

<frame src="frame_miao.html" >
<frame src="frame_list.html" name="showframe">

</frameset>
</html>

运行效果：
（1）没有带锚的
在这里插入图片描述

（2）带锚的
在这里插入图片描述

2.7.2 html实现简单导航栏

frame_content.html

 <meta charset="utf-8"/>不设置的话，title文字在浏览器上显示乱码

<html>
<head>
<meta charset="utf-8"/>
<title>导航栏之导航部分</title>

<body> 
<a href="frame_a.html" target="content">FrameA</a>
<br >
<a href="frame_b.html" target="content">FrameB</a>
<br >
<a href="frame_c.html" target="content">FrameC</a>
<br >
</head>
</body>
</html>

frame_a.html

<html>
<body bgcolor="yellow">
<h1>FrameA</h1>
</body>
</html>

然后frame_navigation bar.html

<html>
<head>
<title>导航栏Demo</title>
<frameset cols="25%,*">
<frame src="frame_content.html"></frame>
<frame src="frame_a.html" name="content"> </frame>
</frameset>
</html>

运行frame_navigation bar.html效果：
在这里插入图片描述
点击左侧FrameA 右侧变为frame_a.html里面的内容
点击左侧FrameB 右侧变为frame_b.html里面的内容
点击左侧FrameC 右侧变为frame_c.html里面的内容

target的效果即为：
将name对应的文件内容修改为target对应的内容

文阿花

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
HTML学习笔记之框架实例（二）

4、列表属性F:\Html\MyHtmls1\list\html_list.html4.1 简单的无需列表使用ul标签实现无需列表<html><body><h4>这是一个简单无序列表 ul标签表示无序 </h4><ul><li>苹果</li><li>香蕉</li><li>葡萄</li></ul>
复制链接

扫一扫