正文

html框架布局網(wǎng)頁(yè)代碼（html框架布局網(wǎng)頁(yè)代碼靜態(tài)）

發(fā)布時(shí)間：2023-03-29 16:09:54 稿源：創(chuàng)意嶺閱讀： 468 當(dāng)前文章關(guān)鍵詞排名出租

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于html框架布局網(wǎng)頁(yè)代碼的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國(guó)，相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、HTML基本框架怎么寫(xiě)
2、如何做html框架？
3、在HTML開(kāi)發(fā)中如何利用DIV實(shí)現(xiàn)這樣的布局？
4、html網(wǎng)頁(yè)調(diào)用代碼如何在1網(wǎng)頁(yè)里面調(diào)用網(wǎng)頁(yè)2

html框架布局網(wǎng)頁(yè)代碼（html框架布局網(wǎng)頁(yè)代碼靜態(tài)）

一、HTML基本框架怎么寫(xiě)

框架可以生成獨(dú)立變化和滾動(dòng)的窗口，從而能將一個(gè)窗口分割為若干個(gè)字窗口。在每一個(gè)字窗口中顯示一個(gè)HTML文檔。我們這回就來(lái)看看多文檔的基本結(jié)構(gòu)和子窗口之間的交叉鏈接。

一，基本結(jié)構(gòu)HTML使用<Frameset>,<Frame>和<noFrames>標(biāo)簽來(lái)定義框架。下面我們就來(lái)了解一下這三個(gè)標(biāo)簽的作用和相應(yīng)的屬性。

（一），<Frameset>標(biāo)簽。

該標(biāo)簽是框架設(shè)計(jì)標(biāo)簽，成對(duì)使用。首尾標(biāo)簽之間的內(nèi)容就是使用到框架的HTML主體部分。在使用框架的HTML文檔中不能出現(xiàn)<body>標(biāo)簽，否則會(huì)導(dǎo)致瀏覽器忽略所有的框定義而只顯示<body>和</body>之間的內(nèi)容。

<Frameset>標(biāo)簽作用是將窗口分割為若干個(gè)自窗口，子窗口的數(shù)目取決于嵌套在該標(biāo)簽中<Frame>標(biāo)簽的書(shū)目。<Frameset>標(biāo)簽有兩個(gè)屬性。rows和cols，分別用來(lái)確定個(gè)子窗口的高度和寬度，格式為<Frameset rows="值1,值2,……值n">;<Framest cols="值1,值2,……值n">.各參數(shù)之間以逗號(hào)分割，依次表示各個(gè)自窗口的高度（寬度）。這兩個(gè)屬性的參數(shù)值可以是數(shù)字、百分?jǐn)?shù)或符號(hào)“*”。下面我們來(lái)分別解釋一下：

（1）數(shù)字。表示子窗口高度（寬度）所占的像素點(diǎn)數(shù)。

（2）百分?jǐn)?shù)。表示子窗口高度（寬度）占整個(gè)瀏覽器窗口高度（寬度）的百分比。（3）符號(hào)“*”。當(dāng)符號(hào)*只出現(xiàn)一次。即其他子窗口的大小都有明確的定義時(shí)，表示該子窗口的大小將根據(jù)瀏覽器窗口的大小而自動(dòng)調(diào)整。當(dāng)符號(hào)*出現(xiàn)一次以上時(shí)，表示按比例分割瀏覽器窗口的剩余空間。例如：

<Frameset cols="40%,2*,*">表示將瀏覽器窗口分割為3列，第一個(gè)子窗口在第一列，窗口寬度為整個(gè)瀏覽器窗口寬度的40%；第二個(gè)子窗口在第二列，占瀏覽器窗口剩余空間的2/3，即其寬度為整個(gè)瀏覽器窗口寬度的40%，第三個(gè)子窗口占剩余空間的1/3，寬度為整個(gè)瀏覽瀏覽器窗口寬度的20%。

（二），<frame>標(biāo)簽。HTML用<frame>標(biāo)簽來(lái)標(biāo)識(shí)子窗口。<frame>標(biāo)簽是嵌套在框架設(shè)置標(biāo)簽<Frameset>標(biāo)簽中來(lái)使用的單獨(dú)標(biāo)簽。在<Frameset>中定義了多少個(gè)子窗口就要有多少個(gè)<frame>標(biāo)簽與之匹配，依次定義各個(gè)窗口的性質(zhì)。<frame>標(biāo)簽有7個(gè)屬性，除SRC屬性是不可缺省的外，其他屬性都是可選的。

（1）SRC屬性。用以定義子窗口的名稱。

（2）.name屬性。用于定義子窗口的名稱。

（3）frameboder屬性。該屬性的參數(shù)值為1或0。當(dāng)參數(shù)值為1時(shí)，表示該子窗口有邊框，為0時(shí)沒(méi)有邊框。該屬性缺省值為1。

（4）bordercolor屬性。用以規(guī)定子窗口的邊框顏色。如果在一個(gè)以上的<frame>標(biāo)簽中定義了子窗口的邊框顏色，則以第一次指定的顏色為標(biāo)準(zhǔn)。在指定邊框顏色時(shí)，可以使用顏色的RBG代碼或直接使用與該顏色想對(duì)應(yīng)的英文單詞。bordercolor屬性的參數(shù)值可以是16種顏色中的任意一種。

（5）sclling屬性。屬性的參數(shù)值為yes,no或auto之一。參數(shù)值為yes時(shí)表示該子窗口始終有滾動(dòng)條。為no時(shí)是始終沒(méi)有滾動(dòng)條。為auto時(shí)表示當(dāng)文檔的內(nèi)容超出窗口范圍時(shí)，瀏覽器自動(dòng)為該子窗口添加滾動(dòng)條。scolling屬性的缺省值為auto.

（6）maginwidth和marginwidht屬性。這兩個(gè)屬性是用來(lái)指定顯示內(nèi)容與窗口邊界之間的空白距離大小的。其中maginwidth屬性用于確定顯示內(nèi)容與左右邊界之間的距離；maginwidht用來(lái)確定顯示內(nèi)容與上下邊界之間的距離。這兩個(gè)屬性的參數(shù)值都是數(shù)字。分別表示左右邊距所占的像素點(diǎn)數(shù)。

（三），<noframes>標(biāo)簽。使用該標(biāo)簽可以在用戶瀏覽器不支持框架顯示時(shí)告之用戶一些相關(guān)信息，以免瀏覽者對(duì)空白窗口畫(huà)面感覺(jué)莫名其妙。<noframes>標(biāo)簽是成對(duì)使用的。首尾標(biāo)簽之間的內(nèi)容就上告之瀏覽者的信息。如“如您看到空白的畫(huà)面說(shuō)明您的瀏覽不支持框架顯示”。雖然常用的兩中瀏覽器IE和NC都是支持框架顯示的。但為了加強(qiáng)文檔的適用性，我們最好還是養(yǎng)成使用這個(gè)標(biāo)簽的習(xí)慣。

（四），基本結(jié)構(gòu)。

我們舉例說(shuō)明HTML中框架文檔的基本結(jié)構(gòu)：

<html>

<head>

</head>

<Frameset Cols="值1,值2,……,值n>將瀏覽器窗口分割為n個(gè)窗口。

</Frameset>

<noframes>如果您看到空白的畫(huà)面，說(shuō)明您的瀏覽器是不支持框架機(jī)構(gòu)的</noframes>

</html>

其中，<frameset>標(biāo)簽是可以嵌套使用的，也就是說(shuō)，可以將其中某一個(gè)或幾個(gè)子窗口劃分為若干個(gè)更小的窗口。例如：

<html>

</frameset>

</frameset>

<noframes>您使用的瀏覽器不支持框架</noframes>

</html>

二，目標(biāo)窗口的交叉鏈接。

為了方便用戶進(jìn)行搜索和瀏覽，我們經(jīng)常用到一系列錨標(biāo)組成的索引目錄顯示在一個(gè)子窗口中，而將錨標(biāo)所指向的內(nèi)容放在另一個(gè)子窗口中。顯示錨標(biāo)的子窗口通常被成為”源窗口“，顯示目標(biāo)文檔的窗口則稱之為“目標(biāo)窗口”。

在進(jìn)行交叉<frame>標(biāo)簽的name屬性定義目標(biāo)窗口的名稱，然后再修改顯示在源窗口中的文檔。在所有的<A>標(biāo)簽中添加語(yǔ)句target="目標(biāo)窗口名稱"來(lái)指定目標(biāo)文檔的顯示位置。例如：/P>連接時(shí)，我們必須先用

<html>

<head>

</head>

</frameset>

</frameset>

<noframes>您的瀏覽器不支持框架結(jié)構(gòu)</noframes>

其中，第一個(gè)子窗口是源窗口。我們?cè)谠创翱诘膶?duì)應(yīng)文檔f1.html中定義了一系列錨標(biāo)，該文檔的內(nèi)容如下：

<html>

<body>

<<center>（說(shuō)明：文檔主體內(nèi)容舉重顯示

</body>

</html>

當(dāng)用戶點(diǎn)擊錨標(biāo)“田園風(fēng)光”后，瀏覽器將在目標(biāo)文檔顯示錨標(biāo)的連接對(duì)象

二、如何做html框架？

首先注意一點(diǎn)，在<frameset></frameset>所在的文件中不需要寫(xiě)<body>體，否則會(huì)不顯示網(wǎng)頁(yè)的分頁(yè)。

做一個(gè)有頂，有左側(cè)網(wǎng)頁(yè)，有右側(cè)網(wǎng)頁(yè)的框架集網(wǎng)頁(yè)應(yīng)該怎么做？

先把各個(gè)小的分散頁(yè)面做好

all2.html

top.html

left.html

right1.html

right2.html

來(lái)看每個(gè)文件的具體代碼：

all2.html

<frameset rows="20%,*"

frameborder=0>

<frame src="top.html" noresize scrolling=no

<frame src="left.html" noresize

<frame src="right1.html" name="right"

</frameset>

top.html

這里是頂部?jī)?nèi)容

left.html

<a href="right1.html"

target="right">青花瓷1</a><br

href="right2.html"

target="right">青花瓷2</a><br

right1.html

這里是right1.html的內(nèi)容

right2.html

這里是right2.html的內(nèi)容

三、在HTML開(kāi)發(fā)中如何利用DIV實(shí)現(xiàn)這樣的布局？

田字格布局，要求大小相同的四個(gè)正方形。而html里div如果不加控制的話是獨(dú)占一行的，現(xiàn)在要做的是把四個(gè)大小相同的方塊，排列成“田”字。

第一步、新建html文檔并搭建框架

新建一個(gè)TXT文檔，重命名為“田子格布局.html”，然后用記事本打開(kāi)，輸入表頭信息，已經(jīng)html整體框架搭建。包括head與body。

第二步、DIV布局

分別復(fù)制4個(gè)不同的div作為4部分，并且分別命名為不同id；顯示內(nèi)容為塊1、塊2、塊3、塊4。

【提示】div在html里是單獨(dú)占一列的（如果不控制），現(xiàn)在4個(gè)div布局完成。

【代碼如下】

</head>

<body>

</body>

</html>

第三步、CSS控制4個(gè)DIV顯示

輸入style然后開(kāi)始對(duì)4個(gè)div進(jìn)行控制，分別對(duì)四個(gè)塊進(jìn)行大小和顏色的設(shè)定，處理之后在瀏覽器中打開(kāi)顯示如下圖所示。

【提示】由于是田子格，所以四個(gè)div大小應(yīng)該相同，為了可以區(qū)分顏色分別采用不同的顏色。

【代碼如下】

<style>

#prat1{

width: 200px;

height: 200px;

background: blue;/*邊長(zhǎng)200像素的藍(lán)色方塊*/

}

#prat2{

width: 200px;

height: 200px;

background: red;/*邊長(zhǎng)200像素的藍(lán)色方塊*/

}

#prat3{

width: 200px;

height: 200px;

background: yellow;/*邊長(zhǎng)200像素的藍(lán)色方塊*/

}

#prat4{

width: 200px;

height: 200px;

background: green;/*邊長(zhǎng)200像素的藍(lán)色方塊*/

}

</style>

第四步、使用浮動(dòng)

在CSS里控制輸入float：left；四個(gè)div全部輸入一樣內(nèi)容，這時(shí)候看到的是四個(gè)并排的div，而沒(méi)有達(dá)到想要的效果，如下圖所示。

【代碼如下】

<style>

#prat1{

width: 200px;

height: 200px;

background: blue;

float: left;

}

#prat2{

width: 200px;

height: 200px;

background: red;

float: left;

}

#prat3{

width: 200px;

height: 200px;

background: yellow;

float: left;

}

#prat4{

width: 200px;

height: 200px;

background: green;

float: left;

}

</style>

第五步、清除浮動(dòng)

在第三塊上使用清除浮動(dòng)clear：left；其余的代碼保持不變，然后保存代碼，刷新打開(kāi)的頁(yè)面，就會(huì)看到一個(gè)田字格了，如下圖所示。

【代碼如下】

#prat3{

width: 200px;

height: 200px;

background: yellow;

float: left;

clear: left;

【注意】只清除第三塊的就可以了。

【完整的代碼】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>田字格布局</title>

<style>

#prat1{

width: 200px;

height: 200px;

background: blue;

float: left;

}

#prat2{

width: 200px;

height: 200px;

background: red;

float: left;

}

#prat3{

width: 200px;

height: 200px;

background: yellow;

float: left;

clear: left;

}

#prat4{

width: 200px;

height: 200px;

background: green;

float: left;

}

</style>

</head>

<body>

</body>

</html>

四、html網(wǎng)頁(yè)調(diào)用代碼如何在1網(wǎng)頁(yè)里面調(diào)用網(wǎng)頁(yè)2

主流常用的有兩種方式，div和iframe

1.DIV

將頁(yè)面嵌入到當(dāng)前頁(yè)的div中，是用div對(duì)象的load方法，需要使用jquery.js包

<div id="page"></div>
$('#page').load('new.html');

2.iframe

使用iframe標(biāo)簽進(jìn)行頁(yè)面加載，只需指定src屬性即可

<iframe src="new.html" width="400" height="200" scrolling="yes" />

Src值為被嵌入網(wǎng)頁(yè)地址

Scrolling 是否有滾動(dòng)條，yes有，no無(wú)，auto 根據(jù)被顯示html自動(dòng)顯示或隱藏

Width寬度

Height高度

總結(jié)：

div是當(dāng)前html頁(yè)的固有元素，Iframe是外部html的調(diào)用，相當(dāng)于內(nèi)嵌。

div是用來(lái)組織結(jié)構(gòu)的，IFrame是拿來(lái)引用外部HTML的?，F(xiàn)在使用DIV嵌套頁(yè)面的比較多，一個(gè)頁(yè)面的布局少不了大大小小的DIV，使用DIV方式可以靈活布局調(diào)整嵌入頁(yè)面的位置及大小。Iframe則是將頁(yè)面進(jìn)行分割，在頁(yè)面上開(kāi)辟一個(gè)獨(dú)立的空間來(lái)放別的頁(yè)面

以上就是關(guān)于html框架布局網(wǎng)頁(yè)代碼相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。