1. 程式人生 > 實用技巧 >html框架和內聯框架分別的語法

html框架和內聯框架分別的語法

HTML 框架

通過使用框架,你可以在同一個瀏覽器視窗中顯示不止一個頁面。

例項

垂直框架
本例演示:如何使用三份不同的文件製作一個垂直框架。
水平框架
本例演示:如何使用三份不同的文件製作一個水平框架。

(可以在本頁底端找到更多例項。)

框架

通過使用框架,你可以在同一個瀏覽器視窗中顯示不止一個頁面。每份HTML文件稱為一個框架,並且每個框架都獨立於其他的框架。

使用框架的壞處:

  • 開發人員必須同時跟蹤更多的HTML文件
  • 很難列印整張頁面
框架結構標籤(<frameset>)
  • 框架結構標籤(<frameset>)定義如何將視窗分割為框架
  • 每個 frameset 定義了一系列行或列
  • rows/columns 的值規定了每行或每列佔據螢幕的面積

編者注:frameset 標籤也被某些文章和書籍譯為框架集。

框架標籤(Frame)

Frame 標籤定義了放置在每個框架中的 HTML 文件。

在下面的這個例子中,我們設定了一個兩列的框架集。第一列被設定為佔據瀏覽器視窗的 25%。第二列被設定為佔據瀏覽器視窗的 75%。HTML 文件 "frame_a.htm" 被置於第一個列中,而 HTML 文件 "frame_b.htm" 被置於第二個列中:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

  

基本的注意事項 - 有用的提示:

假如一個框架有可見邊框,使用者可以拖動邊框來改變它的大小。為了避免這種情況發生,可以在 <frame> 標籤中加入:noresize="noresize"。

為不支援框架的瀏覽器新增 <noframes> 標籤。

重要提示:不能將 <body></body> 標籤與 <frameset></frameset> 標籤同時使用!不過,假如你新增包含一段文字的 <noframes> 標籤,就必須將這段文字巢狀於 <body></body> 標籤內。(在下面的第一個例項中,可以檢視它是如何實現的。)

的。)

更多例項

如何使用 <noframes> 標籤
本例演示:如何使用 <noframes> 標籤。
混合框架結構
本例演示如何製作含有三份文件的框架結構,同時將他們混合置於行和列之中。
含有 noresize="noresize" 屬性的框架結構
本例演示 noresize 屬性。在本例中,框架是不可調整尺寸的。在框架間的邊框上拖動滑鼠,你會發現邊框是無法移動的。
導航框架
本例演示如何製作導航框架。導航框架包含一個將第二個框架作為目標的連結列表。名為 "contents.htm" 的檔案包含三個連結。
內聯框架
本例演示如何建立內聯框架(HTML 頁中的框架)。
跳轉至框架內的一個指定的節
本例演示兩個框架。其中的一個框架設定了指向另一個檔案內指定的節的連結。這個"link.htm"檔案內指定的節使用 <a name="C10"> 進行標識。
使用框架導航跳轉至指定的節
本例演示兩個框架。左側的導航框架包含了一個連結列表,這些連結將第二個框架作為目標。第二個框架顯示被連結的文件。導航框架其中的連結指向目標檔案中指定的節。

HTML Iframe

iframe 用於在網頁內顯示網頁。

新增 iframe 的語法

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

足球錄影回放

URL指向隔離頁面的位置。

Iframe - 設定高度和寬度

height 和 width 屬性用於規定 iframe 的高度和寬度。

屬性值的預設單位是畫素,但也可以用百分比來設定(比如 "80%")。

例項

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

  

Iframe - 刪除邊框

frameborder 屬性規定是否顯示 iframe 周圍的邊框。

設定屬性值為 "0" 就可以移除邊框:

例項

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

NBA錄影回放

使用 iframe 作為連結的目標

iframe 可用作連結的目標(target)。

連結的 target 屬性必須引用 iframe 的 name 屬性:

例項

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.xxxxx.com.cn" target="iframe_a">xxxxx.com.cn</a></p>

  

HTML iframe 標籤

標籤描述
<iframe> 定義內聯的子視窗(框架)