您的位置：首页 > Web前端 > HTML

【HTML】4.Frameset框架

2016-05-09 20:27 537 查看

定义

框架标签<frameset><frame><iframe>
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
<frame> 标签定义 frameset中的一个特定的窗口（框架）。
frameset 中的每个框架都可以设置不同的属性，比如border、scrolling、noresize 等等。

设计步骤

关于HTMLframeset框架的设计步骤：
1、切掉body标签
2、frameset cols rows 按照百分比分剩余部分给*
3、子标签：frame src你要引入的页面路径 name
在你引入的页面里面->a target属性->name
Demo<html>

<head>

<title>HTMLframeset框架</title>

<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>

</head>

<framesetrows="10%,*,10%">

<framesrc="top.html"></frame>

<framesetcols="10%,*">

<framesrc="menu.html">

</frame>

<framesrc="main.html" name="main"></frame>

</frameset>

<framesrc="bottom.html"></frame>
</frameset>

</html>

锚点

概念：同页面内跳转。由于业务大，一张网页放不开，故使用锚点进行跳转。大家熟悉的淘宝、京东等1F/2F/3F等就是用的锚点技术。

命名一个锚点：="label"><anameText to be displayed</a>链接到锚点：

<aname="http://www.w3schools.com
/html_links.asp#label">Jumpto the label</a>

创建邮件链接<a href="mailto:test@163.com?subject=AboutHTML">

发邮件给我</a>

内嵌框架

内嵌框架或者叫内帧，使用框架，它的作用是在一网页中间插入一个框窗以显示另一个文件。
frameset标签
<frameset>标签定义了如何将窗口拆分成框架。
每个frameset标签定义了一组行和列。
行/列的值指明了每个行/列在屏幕上所占的大小。<iframesrc="http://www.baidu.com" width="300px" height="300px"></iframe><noframes>的作用：可为那些不支持框架的浏览器显示文本。

<a href=“5.htm”>5.htm</a>超链接

图片作为链接：

<a href="lastpage.htm">
<img border="0"src=".\images\next.gif">
</a>

target属性(定义从什么地方打开链接地址)

<ahref="http://www.163.com/"target="_blank">163!</a>

不符合标准网页设计的理念,不赞成使用. 取值
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开
target，中文"目标"的意思
Demohtml>

<head>

<title>HTML内嵌页面</title>

<metahttp-equiv="content-type" content="text/html;charset=utf-8"/>

</head>

<body>



<ahref="http://www.baidu.com" target="htmlIF">百度一下</a>

<br/>

<br/>

<br/>

<br/>

<br/>

<iframesrc="http://www.taobao.com" name="htmlIF"width="100%" height="500px"></iframe>

</body>

</html>

业务思想

Frameset框架的使用很有利于今后工作中遇到的一些多页面显示在一个页面中，便于浏览和阅读。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航