HTML框架_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

一、框架
一個(gè)瀏覽器文檔窗口只能顯示一個(gè)網(wǎng)頁文件,但是可以通過使用框架,在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁面。使用框架的頁面主要包含兩個(gè)部分,一個(gè)是框架集,另一個(gè)就是具體的框架文件。
框架多用于網(wǎng)站后臺(tái)或者內(nèi)網(wǎng)系統(tǒng)的布局。
1.框架集(<frameset></frameset>):就是用來定義這一HTML文件為框架模式,并設(shè)定視窗如何分割的文件。通俗一點(diǎn)地說,框架集就是存放框架結(jié)構(gòu)的文件,也是訪問框架文件的入口文件。如果網(wǎng)頁由左右二個(gè)框架組成,那么除了左右二個(gè)網(wǎng)頁文件之外,還有一個(gè)總的框架集文件。在使用框架的頁面中,<body>主體標(biāo)記被框架標(biāo)記<frameset>所代替。而對(duì)于框架頁面中包含的每一個(gè)框架,都是通過<frame>標(biāo)記來定義的。
rows屬性:水平分割窗口。水平分割窗口是將頁面沿水平方向切割,也就是將頁面分成上下排列的多個(gè)窗口。rows中可以取多個(gè)值,每個(gè)值表示一個(gè)框架窗口的水平寬度,它的單位可以是像素,也可以是占瀏覽器的百分比。但是要注意的是,一般設(shè)定了幾個(gè)rows的值,就需要有幾個(gè)框架,也就是需要有相應(yīng)數(shù)量的<frame>參數(shù)。
<html> <head> <title>水平分割窗口的效果</title> </head> <frameset rows="30%,70%"> <frame> <frame> </frameset> </html>
cols屬性:垂直分割窗口。垂直分割窗口就是將頁面沿垂直方向分割成多個(gè)窗口,也就是將頁面分成左右排列的多個(gè)窗口。cols中可以取多個(gè)值,每個(gè)值表示一個(gè)框架窗口的水平寬度,它的單位可以是像素,也可以是占瀏覽器的百分比。與水平分割窗口向同,一般設(shè)定了幾個(gè)cols的值,就需要有幾個(gè)框架,也就是有幾個(gè)<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,那么邊框線將會(huì)被隱藏;如果取值為1,邊框線將會(huì)顯示。在frameset中設(shè)置將會(huì)對(duì)整個(gè)框架有效,在frame中設(shè)置則只對(duì)當(dāng)前這個(gè)框架有效。
<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ū)挾染褪窃陧撁嬷懈鱾€(gè)邊框之間的線條寬度,以像素為單位。而這一參數(shù)只能對(duì)框架集使用,對(duì)單個(gè)框架無效。
<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ù)同樣只對(duì)整個(gè)框架集有效,對(duì)于單個(gè)框架無效。
<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)中的各個(gè)頁面都是一個(gè)單獨(dú)的文字,而這些文件是通過src參數(shù)進(jìn)行設(shè)置的。
語法:<frame src="頁面源文件地址">
說明:頁面文件是框架頁面的具體內(nèi)容的所在,對(duì)于沒有設(shè)置源文件的框架,只是空白頁面,是沒有任何作用的。頁面的源文件可以是正常的HTML文件,也可以是一個(gè)圖片或者其他的文件。
<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)簽用于瀏覽器不支持框架時(shí)顯示頁面內(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>
二、浮動(dòng)框架(<iframe>)
浮動(dòng)框架是一種較為特殊的框架,它是在瀏覽器窗口中嵌套子窗口,也就是整個(gè)頁面并不是框架頁面,但是卻包含一個(gè)框架窗口。在框架窗口內(nèi)顯示相應(yīng)的頁面內(nèi)容。浮動(dòng)框架又叫內(nèi)聯(lián)框架(inline frame),并且因此而得名。
語法:<iframe src="頁面源文件"></iframe>
說明:與普通框架結(jié)構(gòu)類似,浮動(dòng)框架也可以設(shè)置很多參數(shù),如 name、scrolling、frameborder等。 但是與普通框架相比,浮動(dòng)框架中不包含framespacing和bordercolor參數(shù)。
src屬性:浮動(dòng)框架中最基本的參數(shù)就是src,它用來設(shè)置浮動(dòng)框架頁面的源文件地址,也是浮動(dòng)框架頁面必需的參數(shù)。因?yàn)橹挥性O(shè)置了源文件的內(nèi)容,浮動(dòng)框架才有意義。語法:<iframe src="頁面源文件">
width和height屬性:在普通框架結(jié)構(gòu)中,由于框架就是整個(gè)瀏覽器窗口,因此不需要設(shè)置其大小。但是在浮動(dòng)框架中,是插入到普通HTML頁面中的,可以調(diào)整整個(gè)框架的大小。語法:<iframe src= src="浮動(dòng)框架頁面源文件" width="頁面寬度" height="頁面高度">,頁面的寬度和高度值都以像素為單位。
<html> <body> <iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe> <p>一些老的瀏覽器不支持 iframe。</p> <p>如果得不到支持,iframe 是不可見的。</p> </body> </html>
三、一個(gè)框架布局的示例
<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)站后臺(tái)布局中,框架用得比較多。在很多時(shí)候,我們需要跳出框架,重新加載頁面。那么鏈接如何才能跳出框架呢?其實(shí),只需要指定<a></a>標(biāo)簽的target屬性為"_top"即可實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單的例子。
<html> <body> <p>被鎖在框架中了嗎?</p> <a href="/index.html" target="_top">請(qǐng)點(diǎn)擊這里!</a> </body> </html>
相關(guān)文章
HTML圖片img標(biāo)簽_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了HTML圖片img標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2017-06-21HTML中錨點(diǎn)的使用_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
什么是HTML錨點(diǎn),錨點(diǎn)應(yīng)該如何用?這篇文章主要為大家詳細(xì)介紹了HTML中錨點(diǎn)的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-21HTML中div和span比較_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了HTML中div和span比較,分別介紹了div和span的用法和比較,有興趣的可以了解一下2017-06-21什么是HTML_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
HTML是超文本標(biāo)記語言,是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言,本文詳細(xì)的介紹了html的發(fā)展和基本概念,有興趣的可以了解一下2017-06-21HTML數(shù)據(jù)提交post_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
HTTP/1.1 協(xié)議規(guī)定的 HTTP 請(qǐng)求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。其中 POST 一般用來向服務(wù)端提交數(shù)據(jù),本文主要討論 POST 提交數(shù)據(jù)2017-06-21HTML超鏈接a標(biāo)簽_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
<a>是超鏈接標(biāo)簽,什么是超鏈接呢?這篇文章主要介紹了HTML超鏈接a標(biāo)簽的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-21HTML常用格式標(biāo)簽_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了HTML常用格式標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2017-06-20HTML簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
什么是HTML?什么是超鏈接?這篇文章主要為大家詳細(xì)介紹了HTML的最基礎(chǔ)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-21HTML表格_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
在html中繪制表格使用table標(biāo)簽,tr表示行,td表示列,下面通過代碼實(shí)例給大家介紹HTML表格的相關(guān)知識(shí),感興趣的朋友一起看看吧2017-06-20HTML基本結(jié)構(gòu)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
HTML是創(chuàng)建網(wǎng)頁的基礎(chǔ)語言,如果不了解HTML就談不上網(wǎng)頁設(shè)計(jì)。以下是關(guān)于HTML基本結(jié)構(gòu)入門知識(shí)的講解2017-06-20