首页 > 软件开发 > HTML >

HTML快速入门【2】:框架的使用

来源:互联网 2023-03-16 19:19:41 214

框架的作用是将浏览器划分为若干个区域,而每个区域可以分别显示不同的网页。4HZ办公区 - 实用经验教程分享!

HTML快速入门【2】:框架的使用4HZ办公区 - 实用经验教程分享!

工具/原料

  • 浏览器/

方法/步骤

  • 1

    框架主要有两部分,即框架集(frameset)和框架(frame)。其中:4HZ办公区 - 实用经验教程分享!

    框架集是在一个文档内定义一组框架结构的HTML网页,其定义了在一个窗口中的显示的框架数、框架宽高、载入到内部的网页;4HZ办公区 - 实用经验教程分享!

    框架是指在网页上定义的一个显示区域。4HZ办公区 - 实用经验教程分享!

  • 2

    框架集标签:frameset>4HZ办公区 - 实用经验教程分享!

    框架标签:frame>4HZ办公区 - 实用经验教程分享!

  • 3

    框架集的基本格式如下:4HZ办公区 - 实用经验教程分享!

    html>4HZ办公区 - 实用经验教程分享!

    head>.../head>4HZ办公区 - 实用经验教程分享!

    frameset>4HZ办公区 - 实用经验教程分享!

    frame src="网页路径" name="框架名称">4HZ办公区 - 实用经验教程分享!

    ...4HZ办公区 - 实用经验教程分享!

    /frameset>4HZ办公区 - 实用经验教程分享!

    /html>4HZ办公区 - 实用经验教程分享!

  • 3该信息未经许可获取自百度经验
  • 框架的一些实例

  • 1

    下面我们需要建立以下几个文件,它们都在都一个目录下:4HZ办公区 - 实用经验教程分享!

    第一个是index.html 内容是:4HZ办公区 - 实用经验教程分享!

    html>4HZ办公区 - 实用经验教程分享!

    head>4HZ办公区 - 实用经验教程分享!

    title>FrameSet/title>4HZ办公区 - 实用经验教程分享!

    /head>4HZ办公区 - 实用经验教程分享!

    frameset rows="80,*" cols="*">4HZ办公区 - 实用经验教程分享!

    frame src="top.html" name="topFrame">4HZ办公区 - 实用经验教程分享!

    frameset cols="15%,85%" >4HZ办公区 - 实用经验教程分享!

    frame src="left.html" name="leftFrame">4HZ办公区 - 实用经验教程分享!

    frame src="1.html" name="rightFrame">4HZ办公区 - 实用经验教程分享!

    /frameset>4HZ办公区 - 实用经验教程分享!

    /frameset>4HZ办公区 - 实用经验教程分享!

    /html>4HZ办公区 - 实用经验教程分享!

  • 2

    第二个网页是top.html 内容是:4HZ办公区 - 实用经验教程分享!

    html>4HZ办公区 - 实用经验教程分享!

    body>4HZ办公区 - 实用经验教程分享!

    p align="center">Top/4HZ办公区 - 实用经验教程分享!

    /body>4HZ办公区 - 实用经验教程分享!

    /html>4HZ办公区 - 实用经验教程分享!

  • 3

    第三个网页是left.html 内容是:4HZ办公区 - 实用经验教程分享!

    html>4HZ办公区 - 实用经验教程分享!

    body>4HZ办公区 - 实用经验教程分享!

    p align="center">a href="1.html" target="rightFrame">Left 1/a>/4HZ办公区 - 实用经验教程分享!

    p align="center">a href="2.html" target="rightFrame">Left 2/a>/4HZ办公区 - 实用经验教程分享!

    /body>4HZ办公区 - 实用经验教程分享!

    /html>4HZ办公区 - 实用经验教程分享!

  • 4

    第四个第五个网页分别是1.html 2.html内容分别是:4HZ办公区 - 实用经验教程分享!

    html>4HZ办公区 - 实用经验教程分享!

    body>4HZ办公区 - 实用经验教程分享!

    p align="left">Left 1/4HZ办公区 - 实用经验教程分享!

    /body>4HZ办公区 - 实用经验教程分享!

    /html>4HZ办公区 - 实用经验教程分享!

    html>4HZ办公区 - 实用经验教程分享!

    head>4HZ办公区 - 实用经验教程分享!

    body>4HZ办公区 - 实用经验教程分享!

    p align="left">Left 2/4HZ办公区 - 实用经验教程分享!

    /body>4HZ办公区 - 实用经验教程分享!

    /html>4HZ办公区 - 实用经验教程分享!

  • 5

    运行效果如图,当点击左边的框架的链接时,将在右边的框架打开网页。4HZ办公区 - 实用经验教程分享!

    HTML快速入门【2】:框架的使用4HZ办公区 - 实用经验教程分享!

  • 注意事项

    • 如果出现乱码,请右键选择相应的编码格式4HZ办公区 - 实用经验教程分享!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!4HZ办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码