首頁 >web前端 >html教學 >HTML框架怎麼用

HTML框架怎麼用

墨辰丷原創: 2018-06-04 15:40:338089瀏覽

一個瀏覽器文件視窗只能顯示一個網頁文件，但可以透過使用框架，在同一個瀏覽器視窗中顯示不只一個頁面，本文就來介紹一下HTML框架

#一、框架

一個瀏覽器文件視窗只能顯示一個網頁文件，但是可以透過使用框架，在同一個瀏覽器視窗中顯示不只一個頁面。使用框架的頁面主要包含兩個部分，一個是框架集，另一個是具體的框架文件。

框架多用於網站後台或內網系統的佈局。

1.框架集（f900b4fc197b16ab214eecf015bb6bd2eb5f059992a0ae0ef16884cb75644e40）：就是用來定義這HTML檔為框架模式，並設定視窗如何分割的檔案。通俗一點地說，框架集就是存放框架結構的文件，也是存取框架文件的入口文件。如果網頁由左右二個框架組成，那麼除了左右二個網頁檔案之外，還有一個總的框架集檔。在使用框架的頁面中，6c04bd5ca3fcae76e30b72ad730ca86d主體標記被框架標記f900b4fc197b16ab214eecf015bb6bd2所取代。而對於框架頁面中包含的每一個框架，都是透過04a0d55efbbfd646a993fbc01f262c57標記來定義的。

rows屬性：水平分割視窗。水平分割視窗是將頁面沿著水平方向切割，也就是將頁面分成上下排列的多個視窗。 rows中可以取多個值，每個值表示一個框架視窗的水平寬度，它的單位可以是像素，也可以是佔瀏覽器的百分比。但要注意的是，一般設定了幾個rows的值，就需要有幾個框架，也就是需要有對應數量的04a0d55efbbfd646a993fbc01f262c57參數。

  <html>
  
  <head>
  
  <title>水平分割窗口的效果</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>

cols屬性：垂直分割視窗。垂直分割窗口就是將頁面沿著垂直方向分割成多個窗口，也就是將頁面分成左右排列的多個窗口。 cols中可以取多個值，每個值表示一個框架視窗的水平寬度，它的單位可以是像素，也可以是佔瀏覽器的百分比。與水平分割視窗向同，一般設定了幾個cols的值，就需要有幾個框架，也就是有幾個04a0d55efbbfd646a993fbc01f262c57參數。

  <html>
  
  <head>
  
  <title>垂直分割窗口的效果</title>
  
  </head>
  
<frameset cols="20%,55%,25%">
 
     <frame>
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>

frameborder屬性：設定邊框。在預設情況下，框架視窗的四周有一條邊框線，透過frameborder參數可以調整邊框線的顯示情況。語法為：

e9fada7525f50c9c4f7d63bf8b343836或dfeadd236234f65b3c84e0a8cf537d97。 frameborder的值只能為0或1。如果取值為0，那麼邊框線將會被隱藏；如果取值為1，邊框線將會顯示。在frameset中設定將會對整個框架有效，在frame中設定則只對當前這個框架有效。

  <html>
  
  <head>
  
  <title>设置框架窗口的边框显示效果</title>
  
  </head>
  
  <frameset rows="20%,55%,25%">
 
 <frame frameborder="1">
 
 <frameset cols="35%,65%" frameborder="0">
 
 <frame >
 
 <frame>
 
 </frameset>
 
 <frame frameborder="0">
 
 </frameset>
 
 </html>

framespacing屬性：框架的邊框寬度。框架的邊框寬度在預設情況下是1像素，透過參數framespacing可以調整其大小。

語法：9a2fe6294f285ca701a3795765d5908d

說明：邊框寬度就是在頁面中各個邊框之間的線條寬度，以像素為單位。而此參數只能對框架集使用，對單一框架無效。

  <html>
  
  <head>
  
  <title>设置框架的边框宽度</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10">
     <frame>
 
       <frameset cols="20%,55%,25%" framespacing="30">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>

bordercolor屬性：框架的邊框顏色。使用參數bordercolor可以設定框架集的邊框顏色。

語法：a7d21f0a1180c7b5ed4c5abbf31b8de3

說明：此參數同樣只對整個框架集有效，對於單一框架無效。

  <html>
  
  <head>
  
  <title>设置框架的边框颜色</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF">
 
     <frame>
 
      <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>

2.框架（04a0d55efbbfd646a993fbc01f262c57）和src屬性。

框架結構中的各個頁面都是一個單獨的文字，而這些檔案是透過src參數設定的。

語法：a65191f5efc595a1aa23e743d3486d9f

#說明：頁面檔案是框架頁面的具體內容的所在，對於沒有設定來源檔案的框架，只是空白頁面，是沒有任何作用的。頁面的來源檔案可以是正常的HTML文件，也可以是圖片或其他的文件。

  <html>
  
  <head>
  
  <title>设置页面源文件</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame src="pic01.gif">
     <frame src="src01.html">
 
 </frameset>
 
 </html>

3.37f861bd36cef5b6406eba87d20a5bab23a17d2cc9873ab460d73d80ccc8d7a4標籤

37f861bd36cef5b6406eba87d20a5bab23a17d2cc9873ab460d73d80ccc8d7a4標籤用於瀏覽器不支援框架時顯示頁面內容。

  <html>
 <frameset cols="25%,50%,25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
  <noframes>
  <body>您的浏览器无法处理框架！</body>
  </noframes>
  </frameset>
 </html>

二、浮動框架（d5ba1642137c3f32f4f4493ae923989c）

浮動框架是一種較為特殊的框架，它是在瀏覽器窗口中嵌套子窗口，也就是整個頁面並不是框架頁面，但卻包含一個框架窗口。在框架視窗內顯示對應的頁面內容。浮動框架又叫內嵌框架（inline frame），並且因此而得名。

語法：bc1648c1bf51ae0c6df16d93c8681a89065276f04003e4622c4fe6b64f465b88　　

說明：與一般框架結構類似，浮動框架也可以設定許多參數，如name、 scrolling、frameborder等。但是與普通框架相比，浮動框架中不包含framespacing和bordercolor參數。

src属性：浮动框架中最基本的参数就是src，它用来设置浮动框架页面的源文件地址，也是浮动框架页面必需的参数。因为只有设置了源文件的内容，浮动框架才有意义。语法：290763ae73a8bb3b5c012455bf37fc39

width和height属性：在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是在浮动框架中，是插入到普通HTML页面中的，可以调整整个框架的大小。语法：1ae60c9a2f4a841f9b41850969e580f3，页面的宽度和高度值都以像素为单位。

 <html>
 <body>
<iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
 <p>一些老的浏览器不支持 iframe。</p>
 <p>如果得不到支持，iframe 是不可见的。</p>
 </body>
 </html>

三、一个框架布局的示例

  <html>
  <head>
      <title>框架主页面 </title>
  </head>
 <frameset rows="20%,*"><!--框架集，控件文件的容器-->
      <frame name="topFame" src="3.html" noresize/>
        <frameset cols="240px,*">
            <frame name="leftFrame" src="1.html"/>
      <frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/>
             
         </frameset>
        <noframes>
        <!--noframes标记当中可以包含body标记-->
         <body> 
             该页面不支持frameset标签！
         </body>
     </noframes>
  </frameset>
 </html>

四、链接如何跳出框架

在网站后台布局中，框架用得比较多。在很多时候，我们需要跳出框架，重新加载页面。那么链接如何才能跳出框架呢？其实，只需要指定3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed标签的target属性为"_top"即可实现。下面是一个简单的例子。

  <html>
  
  <body>
  
  <p>被锁在框架中了吗？</p> 
  
  <a href="/index.html"
  target="_top">请点击这里！</a> 
  
 </body>
 </html>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

相关推荐：

对HTML框架标签的作用总结

HTML框架标签的实例应用

HTML框架标签frameset、frame、iframe、noframes

介绍HTML框架(Frames)到底有什么用？

以上是HTML框架怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML製作表格的方法下一篇：HTML製作表格的方法

相關文章

看更多