首页手记 html基础04-框架(<framset...

html基础04-框架(<framset>)、<a>同（异）页面跳转

标签：

Html/CSS Html5

HTML <a> 标签的 target 属性

<a href='' target=''> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

语法<a 属性=”属性值”>内容</a>

属性

l 链接的地址 href=”链接的地址url”,url绝对地址相对地址（必备属性）

l Target 打开目标文件的窗口

_blank 在新的窗口中打开目标文件

_self 默认的打开方式，在原来的窗口中打开目标文件（原来的窗口被覆盖）

Name定义锚点的名称

同一个页面的不同区域直接跳转

定义锚点

<a name=”自定义名称”></a>在<a></a>可不加内容，给链接中的target用

跳转锚点（点击跳转锚点-->定义锚点）

框架（将页面划分不同的区域，显示不同的html页面）

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

· 开发人员必须同时跟踪更多的HTML文档

· 很难打印整张页面

框架结构标签（<frameset>）

· 框架结构标签（<frameset>）定义如何将窗口分割为框架

· 每个 frameset 定义了一系列行或列

· rows/cols 的值规定了每行或每列占据屏幕的面积

对页面进行划分区域

框架标签（<Frame>）

Frame 标签通过src属性定义了放置在每个框架中的 HTML 文档。

填充区域

基本的注意事项 - 有用的提示：

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

frameborder='1/0' 1显示边框 0不显示边框

border 自定义边框

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body>标签与<frameset></frameset>标签同时使用！不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。

案例：

1.页面的框架分布

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网站后台系统显示页面</title>
</head>
<!--将网页分成两部分（上下）-->
<frameset rows="20%,*">
    <frame class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="top.html" noresize="noresize"/>
    <!--将下部分又分为左右两部分-->
    <frameset cols="20%,*">
        <frame class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="left.html" />
        <!--接收来自left的锚点跳转-->
        <frame name="right" />
    </frameset>
</frameset>
</html>

2.top.html(框架的上部内容)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body >
<h2 align="center">欢迎您进入木子大大后台管理系统！！</h2>
</body>
</html>

3.left.html（下部框架左侧内容）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h4 align="center">
    <!--点击链接会将rightform.html的页面在框架的右部分显示-->
    <!--在此相当于我们自定义了一个页面锚点的跳转（自定义target的值必须要在框架中接收）-->
    <a href="rightform.html" target="right">会员管理</a><br>
    <!--点击链接会在新窗口中打开被链接文档-->
    <a href="commodity.html" target="_blank">商品管理</a><br>
    <!--点击链接会在相同的框架中打开被链接文档。-->
    <a href="brand.html" target="_self">品牌管理</a><br>
    <!--点击链接会在父框架集中打开被链接文档。-->
    <a href="class.html" target="_parent">分类管理</a><br>
    <!--点击链接会在整个窗口中打开被链接文档。-->
    <a href="-top.html" target="_top">赠品管理</a><br>
    <a href="qita.html">……</a>
</h4>
</body>
</html>

4.其他的HTML页面（为了简单给的图片）

rightform.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1" width="600" height="400" bgcolor="aqua">
    <tr>
        <td >id</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>手机号</td>
    </tr>
    <tr>
        <td>1</td>
        <td>木子大大</td>
        <td>男</td>
        <td>22</td>
        <td>12345678900</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

commodity.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../img/regist_bg.jpg" />
</body>
</html>

brand.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../img/big01.jpg" />
</body>
</html>

class.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../img/okwu.jpg" />
</body>
</html>

top.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../img/ad.jpg" />
</body>
</html>

qita.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body a>
<h3 align="center">
    <a href="">优惠一</a><br />
    <a href="">优惠二</a><br />
    <a href="">优惠三</a>
</h3>
</body>
</html>

上面代码中的HTML页面的跳转可用下列应用：

Name定义锚点的名称

同一个页面的不同区域直接跳转（比如我看小说章节的跳转）

定义锚点

<a name=”自定义名称”></a>快跳过来<a></a>不加内容，给链接中的target用

跳转锚点（我们点击就跳转到我们自定义的锚点）

案例：点击跳转锚点就跳转到定义锚点（部分）