zl程序教程

您现在的位置是:首页 >  硬件

当前栏目

【web前端(三)】html_嵌入式框架

2023-09-11 14:20:37 时间

主页面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<table border="1">

             <!--iframe:向一个页面发送了一个请求,

              一个页面嵌套了另一个页面。

             -->

   <!--

              这里我们要注意,iframe不能写空标签,

              不然不显示框架。

             -->

             <!--src="left.html"链接当前页面的资源-->

<td><iframe name="left" src="left.html" frameborder="1"></iframe></td>

<td><iframe name="right" src="right.html" frameborder="1"></iframe></td>

</table>

</body>

</html>

 

 

默认页面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>默认页面</title>

</head>

<body>

right

right

right

right

right

<iframe src="content.html" name="aaa"></iframe>

</body>

</html>

 

 

父框架页面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>链接页面</title>

</head>

<body>

<!--

所有的框架的顶级框架是最大的这个页面的框架。

-->

<!-- href="content.html"作用是转接页面的标签-->

<!--

target="_top"显示最顶层,为顶级框架。

起作用是破坏了整个框架,

而来显示它自己的框架。

-->

<!--target="_blank"为新开一个窗口-->

<!--target="_parent"为链接到当前页面的父框架-->

<!--target="_search"-->

<!--target="_self"代表自身-->

<a href="content.html" target="_top">第一节</a>

 

<!--原来框架的默认页面为right right right right right,

这里将原来右边默认页面的内容替换掉了-->

<!--这样的好处就是,指定我们点击链接所要显示的页面-->

<a href="content.html" target="right">第一节</a>

<a>第一节</a>

<a>第二节</a>

<a>第三节</a>

</body>

</html>

 

 

父框架的链接页面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>父框架的链接页面</title>

</head>

<body>

content

    <a href="index-2.html" target="_parent">链接显示到父框架:</a>

</body>

</html>

 

 

操作结果:

1、点击主框架的第一个(紫色)链接

 

 

  1. 关闭页面,重新启动。点击主框架第二(紫色)链接。