HTML 框架

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

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

实例:
1、 <noframes> 标签
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

<html>

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

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

</frameset>

</html>

2、混合框架结构

<html>

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

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

</frameset>

</html>

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

<html>

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

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

</frameset>

</html>

4、导航框架

<html>

<frameset cols="120,*">

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

</frameset>

</html>

5、内联框架

<html>

<body>
    <iframe src="http://www.w3school.com.cn/example/html/frame_a.html"></iframe>
    <p>一些老的浏览器不支持 iframe。</p>
    <p>如果得不到支持,iframe 是不可见的。</p>
</body>

</html>

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

<html>

<frameset cols="20%,80%">
    
    <frame src="http://www.w3school.com.cn/example/html/frame_a.html"></frame>
    <frame src="http://www.w3school.com.cn/example/html/link.html#C10"></frame>

</frameset>

</html>

7、内联框架
iframe 的语法

<iframe src="URL"></iframe>

iframe 设置高度和宽度

<html>

<body>
    <iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" width="200" height="200"></iframe>
    <p>某些老式的浏览器不支持内联框架。</p>
    <p>如果不支持,则 iframe 是不可见的。</p>

</body>

</html>

iframe 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框:

<html>

<body>
    <iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" width="200" height="200" frameborder="0"></iframe>
    <p>某些老式的浏览器不支持内联框架。</p>
    <p>如果不支持,则 iframe 是不可见的。</p>

</body>

</html>

使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性:

<html>

<body>
    <iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" width="200" height="200" name="iframe_a"></iframe>
    <p><a href="http://www.w3school.com.cn/example/html/frame_a.html" target="iframe_a">W3School.com.cn</a></p>
    <p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>
</body>

</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,329评论 1 41
  • 2017-09-07摘抄自W3school-HTML 框架希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自...
    moralok阅读 389评论 0 1
  • 普通框架 概念框架技术:将一个浏览器窗口划分成若干个小窗口,每个小窗口显示一个独立的网页。 框架集和框架页框架集<...
    小虎哥阅读 1,583评论 0 11
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,089评论 0 1
  • 又到岁末,按惯例再回顾一下一年来所走过的路,以便来年继续努力。2016年是我进入退休生活的第三个年头,这一年...
    独钓寒江1954阅读 1,019评论 0 0