HTML框架的简单使用--初入HTML3

最新推荐文章于 2024-04-05 14:19:04 发布

你的大数据学长

最新推荐文章于 2024-04-05 14:19:04 发布

阅读量4.2k

点赞数 6

分类专栏： HTML 文章标签： html5 html css javascript

本文链接：https://blog.csdn.net/qq_43198568/article/details/104211412

版权

HTML 专栏收录该内容

22 篇文章 7 订阅

订阅专栏

HTML框架的简单使用--初入HTML3

预计效果图
代码展示
关键代码解释
- frameset 示例
结果展示

预计效果图

在这里插入图片描述

代码展示

话不多说，先上代码，完整代码可在我的GitHub中找到，链接在此

frame_sets.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用框架实例</title>
</head>

<frameset rows="25%,75%">
    <frame name="a" src="./top.html">
    <frameset cols="25%,75%">
        <frame name="b" src="./left.html">
        <frame name="c" id="c" src="./right1.html">
    </frameset>
</frameset>
</html>

left.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>第2章 HTML语言</h1>
<br>
<p>
    <a href="./right1.html" target="c" style="font-size: x-large">2.1HTML基础知识</a>
</p>
<br>
<p>
    <a href="./right2.html" target="c" style="font-size: x-large">2.2HTML语言入门</a>
</p>
</body>
</html>

关键代码解释

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
注释：如果您希望验证某个包含框架的页面，请确保 DTD 被设置为 “Frameset DTD”
重要事项：您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！

frameset 示例

代码

<html>

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

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

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

</frameset>

</html>

代码解释

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

将整个网页上下平均分成两份

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

将该网页的上半部分置为网页https://www.w3school.com.cn/example/html/frame_a.html

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

将该网页的下半部分分成两部分，其中一份占1/4，一份占3/4
并将1/4的那一份置为网页https://www.w3school.com.cn/example/html/frame_b.html
将3/4的那一份置为网页https://www.w3school.com.cn/example/html/frame_c.html

示例结果展示

在这里插入图片描述

结果展示

当点击2.1HTML基础知识时，出现下图的页面
在这里插入图片描述
当点击2.2HTML语言入门时，出现下图的页面

你的大数据学长

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML框架的简单使用--初入HTML3

HTML框架的简单使用--初入HTML3预计效果图代码展示关键代码解释frameset 示例代码代码解释示例结果展示结果展示预计效果图代码展示话不多说，先上代码，完整代码可在我的GitHub中找到，链接在此frame_sets.html：<!DOCTYPE html><html lang="en"><head> <meta char...
复制链接

扫一扫