左右框架简单互动(FrameSet、Frame)

HTML框架应用实例

最新推荐文章于 2024-08-28 17:41:35 发布

原创最新推荐文章于 2024-08-28 17:41:35 发布 · 981 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#框架 #xhtml #html #文档 #浏览器

其它技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的HTML框架应用实例，展示了如何使用<frameset>和<frame>标签实现页面布局，使得左侧导航栏的链接点击后能在右侧区域加载相应内容。

Hi,各位好，欢迎又来我的博客(http://blog.youkuaiyun.com/csdbfans)。

今天我呢，想来讲讲框架(Frame)。由于详细的内容别人已经在我前头说过，我呢，也不跟别人去抢到嘴的蛋糕，欢迎你们去这位老兄家里作客（http://blog.sina.com.cnsblog_515326f901009r4x.html）。

我呀，只讲源代码，让你们从代码中去发掘事实的真相。下面将为你展示左右框架，通过点击左边框架的链接，让右边的区域显示链接所对应的内容。

首先，是创建一个Main.html文件，此文件主要是摆放<frameset>、<frame>标签（记得此文件是没有<body>、</body>标签的），让浏览器的浏览地址不可变

Main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Main Page</title> </head> <frameset cols=120,*> <frame src="First.html" name="left"> <frame src="#" name="right"> </frameset> </html>

这里面是指在此页面里把页面分成两部分，因为<frameset是两列（cols=120,* ）来的，也就是左跟右两列。

下面给出左列First.html的源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <a href="1.html" target="right">First One</a> <a href="2.html" target="right">Second One</a> </body> </html>

上面的两段源代码，个人觉得你要看清哪个是用了name,哪个是用了target。target的意思就是目标，它是在找name字跟它相等的区域。

也就是说<a href="1.html" target="right">First One</a>这段的意思是你在点击链接的时候，会把1.html的内容显示在name值为target值的区域。反正读下来很别扭。看效果最实在了。下面呢，我给出两个显示的内容页面：

分别为1.html和2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> Hi, you select <font color="red">First one</font>, thank you very much! </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> Hi, you select <font color="blue">Second one</font>, thank you very much! </body> </html>

我不知道放上去的源代码有没有出错，因为刚刚就发现有些地方的代码加多了。

如果你发现出错了，请与我联系，谢谢各位的支持与厚爱·