溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用HTML框架

發(fā)布時間：2020-07-14 11:16:04 來源：億速云 閱讀：169 作者：Leah 欄目：web開發(fā)

怎么用HTML框架？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

一、框架

一個瀏覽器文檔窗口只能顯示一個網(wǎng)頁文件，但是可以通過使用框架，在同一個瀏覽器窗口中顯示不止一個頁面。使用框架的頁面主要包含兩個部分，一個是框架集，另一個就是具體的框架文件。

框架多用于網(wǎng)站后臺或者內(nèi)網(wǎng)系統(tǒng)的布局。

1.框架集（<frameset></frameset>）：就是用來定義這一HTML文件為框架模式，并設(shè)定視窗如何分割的文件。通俗一點地說，框架集就是存放框架結(jié)構(gòu)的文件，也是訪問框架文件的入口文件。如果網(wǎng)頁由左右二個框架組成，那么除了左右二個網(wǎng)頁文件之外，還有一個總的框架集文件。在使用框架的頁面中，<body>主體標(biāo)記被框架標(biāo)記<frameset>所代替。而對于框架頁面中包含的每一個框架，都是通過<frame>標(biāo)記來定義的。

rows屬性：水平分割窗口。水平分割窗口是將頁面沿水平方向切割，也就是將頁面分成上下排列的多個窗口。rows中可以取多個值，每個值表示一個框架窗口的水平寬度，它的單位可以是像素，也可以是占瀏覽器的百分比。但是要注意的是，一般設(shè)定了幾個rows的值，就需要有幾個框架，也就是需要有相應(yīng)數(shù)量的<frame>參數(shù)。

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

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

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

frameborder屬性：設(shè)置邊框。在默認(rèn)情況下，框架窗口的四周有一條邊框線，通過frameborder參數(shù)可以調(diào)整邊框線的顯示情況。語法為：

<frameset frameborder="是否顯示">或者<frame frameborder="是否顯示">。 frameborder的取值只能為0或1。如果取值為0，那么邊框線將會被隱藏；如果取值為1，邊框線將會顯示。在frameset中設(shè)置將會對整個框架有效，在frame中設(shè)置則只對當(dāng)前這個框架有效。

  <html>
  
  <head>
  
  <title>設(shè)置框架窗口的邊框顯示效果</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屬性：框架的邊框?qū)挾取？蚣艿倪吙驅(qū)挾仍谀J(rèn)情況下是1像素，通過參數(shù)framespacing可以調(diào)整其大小。

語法：<frameset framespacing="邊框?qū)挾?quot;>

說明：邊框?qū)挾染褪窃陧撁嬷懈鱾€邊框之間的線條寬度，以像素為單位。而這一參數(shù)只能對框架集使用，對單個框架無效。

  <html>
  
  <head>
  
  <title>設(shè)置框架的邊框?qū)挾?lt;/title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10">
     <frame>
 
       <frameset cols="20%,55%,25%" framespacing="30">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>

bordercolor屬性：框架的邊框顏色。使用參數(shù)bordercolor可以設(shè)置框架集的邊框顏色。

語法：<frameset bordercolor="顏色代碼">

說明：該參數(shù)同樣只對整個框架集有效，對于單個框架無效。

  <html>
  
  <head>
  
  <title>設(shè)置框架的邊框顏色</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.框架（<frame>）和src屬性。

框架結(jié)構(gòu)中的各個頁面都是一個單獨的文字，而這些文件是通過src參數(shù)進(jìn)行設(shè)置的。

語法：<frame src="頁面源文件地址">

說明：頁面文件是框架頁面的具體內(nèi)容的所在，對于沒有設(shè)置源文件的框架，只是空白頁面，是沒有任何作用的。頁面的源文件可以是正常的HTML文件，也可以是一個圖片或者其他的文件。

  <html>
  
  <head>
  
  <title>設(shè)置頁面源文件</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame src="pic01.gif">
     <frame src="src01.html">
 
 </frameset>
 
 </html>

3.<noframes></noframes>標(biāo)簽

<noframes></noframes>標(biāo)簽用于瀏覽器不支持框架時顯示頁面內(nèi)容。

  <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>

二、浮動框架（<iframe>）

浮動框架是一種較為特殊的框架，它是在瀏覽器窗口中嵌套子窗口，也就是整個頁面并不是框架頁面，但是卻包含一個框架窗口。在框架窗口內(nèi)顯示相應(yīng)的頁面內(nèi)容。浮動框架又叫內(nèi)聯(lián)框架（inline frame），并且因此而得名。

語法：<iframe src="頁面源文件"></iframe>　　

說明：與普通框架結(jié)構(gòu)類似，浮動框架也可以設(shè)置很多參數(shù)，如 name、scrolling、frameborder等。 但是與普通框架相比，浮動框架中不包含framespacing和bordercolor參數(shù)。

src屬性：浮動框架中最基本的參數(shù)就是src，它用來設(shè)置浮動框架頁面的源文件地址，也是浮動框架頁面必需的參數(shù)。因為只有設(shè)置了源文件的內(nèi)容，浮動框架才有意義。語法：<iframe src="頁面源文件">

width和height屬性：在普通框架結(jié)構(gòu)中，由于框架就是整個瀏覽器窗口，因此不需要設(shè)置其大小。但是在浮動框架中，是插入到普通HTML頁面中的，可以調(diào)整整個框架的大小。語法：<iframe src= src="浮動框架頁面源文件" width="頁面寬度" height="頁面高度">，頁面的寬度和高度值都以像素為單位。

 <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標(biāo)記當(dāng)中可以包含body標(biāo)記-->
         <body> 
             該頁面不支持frameset標(biāo)簽！
         </body>
     </noframes>
  </frameset>
 </html>

四、鏈接如何跳出框架

在網(wǎng)站后臺布局中，框架用得比較多。在很多時候，我們需要跳出框架，重新加載頁面。那么鏈接如何才能跳出框架呢？其實，只需要指定<a></a>標(biāo)簽的target屬性為"_top"即可實現(xiàn)。下面是一個簡單的例子。

  <html>
  
  <body>
  
  <p>被鎖在框架中了嗎？</p> 
  
  <a href="/index.html"
  target="_top">請點擊這里！</a> 
  
 </body>
 </html>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手