zoukankan      html  css  js  c++  java
  • web前端之HTML中的框架

    框架

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

    使用框架的坏处:

    • 开发人员必须同时跟踪更多的HTML文档
    • 很难打印整张页面

    框架结构标签(<frameset>)

    • 框架结构标签(<frameset>)定义如何将窗口分割为框架
    • 每个 frameset 定义了一系列行或列
    • rows/columns 的值规定了每行或每列占据屏幕的面积

    垂直框架:

      

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>框架</title>
     6     </head>
     7     
     8         <frameset cols="25%,50%,25%">
     9             <frame src="0001.html"><frame />
    10             <frame src="0002.html"><frame />
    11             <frame src="0003.html"><frame />
    12         </frameset>
    13     
    14 </html>

    水平框架:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>框架</title>
     6     </head>
     7     
     8         <frameset rows="25%,50%,25%">
     9             <frame src="image/1.jpg"><frame />
    10             <frame src="image/2.jpg"><frame />
    11             <frame src="image/3.jpg"><frame />
    12         </frameset>
    13     
    14 </html>

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

    内联框架:

       iframe 用于在网页内显示网页。

    添加 iframe 的语法

    <iframe src="URL"></iframe>

    URL 指向隔离页面的位置。

    Iframe - 设置高度和宽度

    height 和 width 属性用于规定 iframe 的高度和宽度。

    属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。

    Iframe - 删除边框

    frameborder 属性规定是否显示 iframe 周围的边框。

    设置属性值为 "0" 就可以移除边框:

    使用 iframe 作为链接的目标

    iframe 可用作链接的目标(target)。

    链接的 target 属性必须引用 iframe 的 name 属性:

    程序演示:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>框架</title>
     6     </head>
     7         <body>
     8             <iframe src="image/wc.jpg" width="80%"  name="a_iframe"></iframe><br />
     9             <a href="http://www.cnblogs.com/ztyy04126/" target="a_iframe">http://www.cnblogs.com/ztyy04126/</a>
    10         </body>
    11 </html>
  • 相关阅读:
    如何通过npm编译Typescript代码
    TypeScript 中的':' 和'?:'的区别
    无法读取本地服务器JSON文件, 返回404错误
    Nodejs , npn 注册 包上传,更新,下载
    Java 字符流
    Java 字节流
    Java中的File类,递归是什么?
    JDBC工具类—如何封装JDBC
    JDBC的开发步骤
    vFor和vIf不要一起使用
  • 原文地址:https://www.cnblogs.com/ztyy04126/p/4909134.html
Copyright © 2011-2022 走看看