HTML网页制作：[14]创建框架链接

来源：互联网 2023-03-16 19:19:35 191

这篇经验是和我的HTML网页制作系列的前两篇经验挂钩的。好吧，如果你还不知道什么是框架，请看我的第12,13篇《HTML网页制作》经验。

工具/原料

首先看下小编的目录架构

1.html将作为主页面

2.html将作为目录页面，里面有2个目录，分别是目录一和目录二

3.html为目录一将要链接的页面

4.html为目录二将要链接的页面

HTML网页制作：[14]创建框架链接

然后，看下1.html的代码

frameset cols="30%,70%" frameborder="yes" framespacing="1">frame src="2.html" name="left">frame src="3.html" name="right">

其中，name的意思是，指定frame的名字，他有什么用呢，看后面

HTML网页制作：[14]创建框架链接

再看2.html的代码

ul>li>a href="3.html" target="right">目录一/a>/li>li>a href="4.html" target="right">目录二/a>/li>/ul>

我创建了一个列表，然后目录一链接3.html，目录二链接4.html。

注意，有一个target的属性，他的值就是上面frame的名字。

意思是，点击目录一，将链接到3.html，然后将3.html显示在frame的名字为right的框架中

HTML网页制作：[14]创建框架链接

再来看下3.html的代码。

没什么可说的，显示几个字而已

HTML网页制作：[14]创建框架链接

再来看4.html的代码，也没什么可说的

HTML网页制作：[14]创建框架链接

5相关内容未经许可获取自百度经验

OK，来看1.html的网页效果

点击目录一，右侧将显示3.html的内容

HTML网页制作：[14]创建框架链接

点击目录二，右侧将显示4.html的内容

HTML网页制作：[14]创建框架链接

这个和上面基本相同。我也不想多说什么了。

iframe name="heihei" src="3.html">/iframe>

语法就是这样！

在另外一个地方，用target链接这个名字，就可以了！

OK，就是那么简单，当然，网页做的很粗糙，代码也未必符合规范，但是起到一个抱砖引玉的作用，先入门，然后再优化！

浮动框架iframe|下一篇：

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML 网页

上一篇：如何在html中调用js代码下一篇：html5编码格式