[第五季]5.HTML框架标签

最新推荐文章于 2024-04-19 19:26:15 发布

低调的嚣张的程序员

最新推荐文章于 2024-04-19 19:26:15 发布

阅读量352

点赞数

分类专栏： 007 HTML&CSS

本文链接：https://blog.csdn.net/zeephom/article/details/76353109

版权

007 HTML&CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

1.左右结构和超链接
①创建左右两列,左边一列30%
②创建一个menu页面作为左边目录栏,
设置添加图书,查询图书并各自设置超链接
③创建两个页面,第一个为添加图书,第二个为查找图书.
④右边框架取个名字,然后设置左边超链接为框架内打开.
2.左右分栏,再右边上下分栏
①建立页面
②设置左右风格,分别30%和70%.这里注意有新知识.
3.内联框架
①在第1个页面的查找图书的页面设置将qq首页嵌入.
②设置宽度为100%,高度为90%,设置框架线为0;

5.自测代码

这个测试的代码和课堂上的没有什么不一样,就不写上来了.

2.课堂笔记

1.基础知识和左右两列
(1)框架
col=column=列
row=row=列
(2)左右两列,左边是菜单,在右面显示结果.
不要把框架的定义放在body中.
(3)frame属性
<frame src="" frameborder=0>
这个属性只能是0或者1.
(4)左边菜单,右边页面
添加图书
查询图书
(5)添加超链接
addbook
searchbook
(6)建立两个html
addbook.html
searchbook.html
(7)想在框架页中打开
先取名字,然后在menu中target="right"
2.分为左右两栏,右面分为上下两栏
(1)框架里面再新建框架(注意这里frameset=rows)
3.<noframe>=浏览器不支持框架
4.内敛框架:可以将一个页面嵌入进来
(1)<iframe src="http://www.qq.com" width="100%" height="90%" frameborder=0>

3.课程效果图

这里写图片描述

1.代码

myhtml.html代码

<html>
<head>
<title>这是主窗口</title>
</head>
<frameset cols="20%,*">
    <frame src="menu.html" frameborder=1>
    <frame src="" frameborder=1 name="right">
</frameset>
<body>
</body>
</html>

memu.html代码

<p><a href="addbook.html" target="right">添加图书</a></p>
<p><a href="searchbook.html" target="right">查询图书</a></p>

addbook.html代码

这是添加图书的页面

searchbook.html代码

这是查找图书的页面
<br>
<iframe src="http://www.qq.com" width="100%" height="90%" frameborder=0>
</br>

testframe.html代码

<html>
<head>
<title>框架测试页</title>
</head>
<frameset cols="30%,70%">
    <frame src="">
    <frameset rows="50%,*">
        <frame src="">
        <frame src="">
    </frameset>
</frameset>
</html>