HTML之框架组合网页

最新推荐文章于 2024-08-18 19:12:17 发布

愤怒&高小一

最新推荐文章于 2024-08-18 19:12:17 发布

阅读量4.7k

点赞数 5

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

本文链接：https://blog.csdn.net/qq_45810848/article/details/107712844

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

框架组合网页

通过前面几章的学习，相信大家已经初略掌握了如何开发一个HTML页面。有时呢，我们可能会需要在一个HTML页面中显示多个页面的内容。要开发这种复杂的页面，我们需要使用框架技术。其可以将多个页面组合在一起，页面的结构可以重用，同时也方便布局。

框架是HTML很早就使用的一种技术。使用框架技术，我们可以达到一下几点优势：

在同一个窗口下显示多个页面，能有效地将多个页面组合在一起，但是各个页面间相互独立。
可以实现页面的重用。例如将网站的顶部和底部单独作为一个页面，方便其它页面的使用。
实现典型的**“目录结构”**，即左侧目录、右侧内容，当用户单击左侧窗口的目录时，在右侧窗口中显示具体内容。

常用的框架技术有这么两类：框架集（frameset），这是早期的框架技术，页面各窗口全部用框架（frame）实现，形成一个框架集。这种结构非常清晰，适用于整个页面都用框架是实现的场合；内嵌框架（iframe），页面中的部分内容用框架实现，通常用于在页面中引用站外的页面内容，使用比较灵活、方便。

一、框架集

在<frameset>框架下，我们可以将页面分隔为多个区域，每个区域显示不同的网页。修改页面时，也只需修改特定区域的页面即可，无需更新整个框架集中的所有页面。（这就是它的优势）。注意frameset标签会代替body标签。

<frameset cols="25%,50%,*" rows="50%,*" border="5">

这里的cols属性即页面的纵向分隔（ * 表示剩余的页面），rows属性则表示横向分隔。在<frameset>框架的子页面则用<frame>标签表示。

<frame scr="" name="" scrolling="" noresize="" border="">

scr属性类似于<img>标签的“src”，表示页面的路径。scrolling属性表示子页面是否显示滚条，noresize属性则表示是否允许调整框架窗口的大小。name属性则可配合target超链接使用。（都是很有用的）

<frameset>标签下不仅可以放置<frame>，也可以嵌套自身。即我们不仅可以按行组合框架、按列组合框架，也可以行列混合组合框架。如：

<frameset rows="25%,*" bordercolor="green">
    <frame src="top.html" name="top">
    <frameset cols="20%,*" >
        <frame src="left.html" name="left"/>
        <frame src="right.html" name="right"/>
    </frameset>
</frameset>

效果如下：

material.1

二、内嵌框架

iframe内嵌框架适用于将部分框架内嵌到页面的场合，通常用于引用其他网站的页面。使用它时，无需替代<body>标签。

<iframe src="" name="" frameborder="" scrolling="">

<body>
    <h1 align="center">网站检索</h1>
    <p align="center">
        <a href="http://www.google.com" target="main">Google-1</a>
        <a href="http://www.google.com" target="main">Google-2</a>
        <a href="http://www.google.com" target="main">Google-3</a>
    </p>
    <center>
        <iframe src="http://www.google.com" name="mian" width="1000px" height="300px" ></iframe>
    </center>
</body>