第2章表格、表單和框架_第1頁(yè)
第2章表格、表單和框架_第2頁(yè)
第2章表格、表單和框架_第3頁(yè)
第2章表格、表單和框架_第4頁(yè)
第2章表格、表單和框架_第5頁(yè)
已閱讀5頁(yè)，還剩92頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第2章表格、表單和框架

內(nèi)容提要小結(jié)2.3框架2.2表單2.1表格使用HTML，可以設(shè)計(jì)更復(fù)雜的網(wǎng)頁(yè)元素，例如表格、表單以及框架等。表格可以使網(wǎng)頁(yè)上顯示的文字更加整齊，有條理。表格還可以實(shí)現(xiàn)網(wǎng)頁(yè)的布局。表單是控件的容器，客戶端提交給服務(wù)器端的信息通常放置在控件里，是設(shè)計(jì)網(wǎng)頁(yè)必不可少的元素?？蚣芸梢詫⒕W(wǎng)頁(yè)內(nèi)容有效地進(jìn)行劃分，使不同的區(qū)域顯示不同的內(nèi)容。2.1表格一個(gè)完整的表格由一對(duì)<table>標(biāo)簽來(lái)定義。每個(gè)表格均有若干個(gè)單元行（由一對(duì)<tr>標(biāo)簽定義）組成。每個(gè)單元行由若干個(gè)單元格（由一對(duì)<td>標(biāo)簽定義）組成。表格內(nèi)的具體信息放置在單元格中。單元格可以包含文本、圖像、列表、段落、表單、水平線以及表格等。基本語(yǔ)法<table><tr> <th>head1</th> <th>head2</th> ……</tr><tr> <td>row1,cell1</td> <td>row1,cell2</td> ……</tr><tr> <td>row2,cell1</td> <td>row2,cell2</td> ……</tr> ……</table>例：2-1.HTML表格標(biāo)題

表格標(biāo)題，就是對(duì)表格內(nèi)容的簡(jiǎn)單說(shuō)明，用<caption>標(biāo)記來(lái)定義?；菊Z(yǔ)法：<caption>表格標(biāo)題</caption>語(yǔ)法解釋：<caption>標(biāo)記在表格標(biāo)記范圍內(nèi)，表格標(biāo)題一般顯：示在表格上方，是對(duì)表格內(nèi)容的簡(jiǎn)略說(shuō)明。例：2-2.HTML劃分表格結(jié)構(gòu)從結(jié)構(gòu)上來(lái)看，表格可以分成表頭、主體和表尾三個(gè)部分，分別使用<thead>、<tbody>、<tfoot>標(biāo)簽來(lái)表示。表頭和表尾一張表格只能有一個(gè)，而一張表格可以有多個(gè)主體。對(duì)于大型的表格來(lái)說(shuō)，應(yīng)該使<tfoot>出現(xiàn)在<tbody>的前面，這樣瀏覽器在顯示數(shù)據(jù)時(shí)，有利于加快表格的顯示速度。另外，<thead>、<tbody>、<tfoot>標(biāo)簽內(nèi)部都必須使用<tr>標(biāo)簽。與表格相關(guān)的元素或標(biāo)簽如表所示。元素說(shuō)明table表格的最外層標(biāo)記，代表一個(gè)表格tr單元行，由若干單元格橫向排列組成td單元格，包含表格數(shù)據(jù)th單元格標(biāo)題，與td作用相似，但一般作為表頭行的單元格thead表頭分組tfoot表尾分組tbody表格主體分組colgroup列分組caption表格標(biāo)題劃分表格結(jié)構(gòu)使用<thead>、<tobody>、<tfoot>對(duì)表格進(jìn)行結(jié)構(gòu)劃分的好處是可以先顯示<tbody>的內(nèi)容，而不必等整個(gè)表格下載完成后才能顯示。無(wú)論<thead>、<tbody>、<tfoot>的順序如何改變，<thead>的內(nèi)容總是在表的最前面，<tfoot>的內(nèi)容總是在表的最后面。劃分表格結(jié)構(gòu)

thead元素用于對(duì)HTML表格中的表頭內(nèi)容進(jìn)行分組，tfoot元素用于對(duì)HTML表格中的總計(jì)行（頁(yè)腳）內(nèi)容進(jìn)行分組，tbody元素用于對(duì)HTML表格中的數(shù)據(jù)主體內(nèi)容進(jìn)行分組。基本語(yǔ)法：<table><thead></thead><tfoot></tfoot><tbody></tbody></table>例2-3.HTML<table>標(biāo)簽的常用屬性如表所示。屬性說(shuō)明align設(shè)置表格水平對(duì)齊方式bgcolor設(shè)置表格背景色border表格的邊框的寬度，一般由CSS實(shí)現(xiàn)width以百分比或像素指定表格的寬度height以百分比或像素指定表格的高度cellspacing表格中相鄰單元格的間距以及單元格外邊沿與表格邊沿之間的間距，一般由CSS實(shí)現(xiàn)cellpadding單元格的邊沿和它的內(nèi)容的間距，一般由CSS實(shí)現(xiàn)<table>標(biāo)記屬性1．設(shè)置表格水平對(duì)齊屬性

在水平方向上，可以設(shè)置表格的對(duì)齊方式為：居左、居中、居右。如果沒(méi)特別進(jìn)行設(shè)置，則默認(rèn)為居左排列?；菊Z(yǔ)法： <tablealign=””>語(yǔ)法解釋：

屬性可選的值有l(wèi)eft、center和right，代表表格出現(xiàn)在窗口的左側(cè)、中間和右側(cè)位置。例2-4.HTML<table>標(biāo)記屬性2．設(shè)置表格背景色屬性 表格背景默認(rèn)為白色，根據(jù)網(wǎng)頁(yè)設(shè)計(jì)要求，設(shè)置bgcolor屬性，可以設(shè)定表格背景顏色，以增加視覺(jué)效果?；菊Z(yǔ)法：<tablebgcolor=””>語(yǔ)法解釋：

bgcolor屬性規(guī)定表格的背景顏色。顏色描述方式為rgb(x,x,x)、#xxxxxx或colorname。 例如，如果設(shè)置表格背景色為紅色，可以使用的值為rgb(255,0,0)或#FF0000或red。設(shè)置形式如下。<tablebgcolor="rgb(255,0,0)"><table>標(biāo)記屬性3．設(shè)置表格邊框?qū)挾葘傩?默認(rèn)情況下表格邊框?yàn)?，可以通過(guò)給表格添加border屬性及屬性值，實(shí)現(xiàn)為表格設(shè)置邊框線寬度的目的?；菊Z(yǔ)法：<tableborder=””>語(yǔ)法解釋：border的值為像素?cái)?shù)，數(shù)字越大邊框越寬。例如，設(shè)置表格的邊框?qū)挾葹?個(gè)像素，設(shè)置形式如下。<tableborder=”5”><table>標(biāo)記屬性4．設(shè)置單元格間距和單元格邊距屬性 通過(guò)cellspacing屬性可以調(diào)整表格的單元格和單元格之間的間距，使得表格布局不會(huì)顯得過(guò)于緊湊。單元格邊距是指單元格中的內(nèi)容與單元格邊框的距離，通過(guò)設(shè)置cellpadding屬性來(lái)調(diào)整?；菊Z(yǔ)法：<tablecellspacing=""cellpadding="">語(yǔ)法解釋：

cellspacing屬性設(shè)置單元格和單元格之間的間距，cellpadding屬性設(shè)置文本與邊框之間的距離，值為像素?cái)?shù)，值越大間距越大。 例如，設(shè)置表格的單元格間距為5，單元格邊距為10，設(shè)置形式如下。<tablecellspacing="5"cellpadding="10"><table>標(biāo)記屬性5．設(shè)置表格寬度屬性默認(rèn)情況下，表格的寬度會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整?；菊Z(yǔ)法：<tablewidth=””>語(yǔ)法解釋：表格的寬度可以是像素?cái)?shù)也可以是百分比。例如，設(shè)置表格的寬度為600像素，設(shè)置形式如下。<tablewidth=”600”>table1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表格使用示例1-規(guī)則表格</title></head><body><tableborder="1"align="center"> <caption>學(xué)生信息表</caption> <thead> <tr> <th>學(xué)號(hào)</th> <th>姓名</th> <th>性別</th> </tr> </thead> <tfoot> <tr> <tdcolspan="3"align="center">這里是表尾</td> </tr> </tfoot> <tbody> <tr> <td>0001</td> <td>王明明</td> <td>男</td> </tr> … </tbody></table></body></html>table1.html的顯示結(jié)果如圖所示。<tr>標(biāo)記屬性 <tr>標(biāo)記定義HTML表格中的行。通過(guò)<tr>標(biāo)記屬性值可以控制表格中行的顯示效果，<tr>標(biāo)記常用的屬性及其含義如下表所示。屬性描述align定義表格行的內(nèi)容對(duì)齊方式。bgcolor規(guī)定表格行的背景顏色。valign規(guī)定表格行中內(nèi)容的垂直對(duì)齊方式。<tr>標(biāo)記屬性1．設(shè)置行水平對(duì)齊方式屬性基本語(yǔ)法：<tralign="">語(yǔ)法解釋：

align屬性規(guī)定表格行中內(nèi)容的水平對(duì)齊方式。屬性可選的值及其含義如下所述。left，左對(duì)齊內(nèi)容（默認(rèn)值）。right，右對(duì)齊內(nèi)容。center，居中對(duì)齊內(nèi)容（th元素的默認(rèn)值）。justify，對(duì)行進(jìn)行伸展，這樣每行都可以有相等的長(zhǎng)度。char，將內(nèi)容對(duì)準(zhǔn)指定字符。例2-5.HTML<tr>標(biāo)記屬性2．設(shè)置行背景顏色屬性

bgcolor屬性用來(lái)設(shè)置表格中該行單元格的背景顏色，默認(rèn)為白色?；菊Z(yǔ)法：<trbgcolor="">語(yǔ)法解釋： 把個(gè)color屬性規(guī)定表格行中單元格背景顏色。屬性可選的值及其含義如下所述。顏色描述方式為rgb(x,x,x)、#xxxxxx或colorname。例如，如果設(shè)置行背景色為紅色，可以使用的值為rgb(255,0,0)或#FF0000或red。例2-6.HTML<tr>標(biāo)記屬性3．設(shè)置行垂直對(duì)齊方式屬性本屬性用于設(shè)置表格行中內(nèi)容的垂直對(duì)齊方式?；菊Z(yǔ)法：<trvalign="">語(yǔ)法解釋：valign的值可以設(shè)置的值有top（居上）、botton（居下）和middle（居中），默認(rèn)情況下是居中。例2-7.HTML

<td>標(biāo)記屬性

<td>標(biāo)記中的屬性用于設(shè)置表格中的標(biāo)準(zhǔn)單元格的一些特性。常見(jiàn)的屬性設(shè)置如下表所示。

屬性描述align規(guī)定單元格內(nèi)容的水平對(duì)齊方式。bgcolor規(guī)定單元格的背景顏色。colspan規(guī)定單元格可橫跨的列數(shù)。height規(guī)定表格單元格的高度。rowspan規(guī)定單元格可橫跨的行數(shù)。valign規(guī)定單元格內(nèi)容的垂直對(duì)齊方式。width規(guī)定表格單元格的寬度。<td>標(biāo)記屬性1．設(shè)置單元格跨列本屬性用于設(shè)置表格中某一單元格跨幾個(gè)列進(jìn)行合并（橫向合并）基本語(yǔ)法：<tdcolspan="">語(yǔ)法解釋：colspan的值就是單元格進(jìn)行橫向合并時(shí)所跨的列數(shù)，例如某一個(gè)單元格和它右面兩個(gè)單元格合并，colspan的值設(shè)為3。例2-8.HTML<td>標(biāo)記屬性2．設(shè)置單元格跨行本屬性用于設(shè)置表格中某一單元格跨幾個(gè)行進(jìn)行合并（縱向合并）基本語(yǔ)法：<tdrowspan="">語(yǔ)法解釋：

rowlspan的值就是單元格進(jìn)行縱向合并時(shí)所跨的行數(shù)，例如某一個(gè)單元格和它下面兩個(gè)單元格合并（若已經(jīng)是最下面一格，則不能合并。數(shù)字是幾就一共合并了幾行），rowspan的值設(shè)為3。例2-9.HTMLtable3.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表格使用示例3-不規(guī)則表格</title></head><body><tableborder="2"width="300"bordercolorlight="#FF9600" bordercolordark="#FF00EE"cellpadding="0"cellspacing="0"> <tr> <td>1</td> <tdrowspan="3">此單元格跨三行</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <tdcolspan="2">此單元格跨兩列</td> </tr></table></body></html>table3.html的顯示結(jié)果如圖所示。

網(wǎng)頁(yè)是網(wǎng)站構(gòu)成的基本元素。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，不但要考慮色彩的搭配、文字的變化和圖片的處理等，而且還要考慮另一個(gè)非常重要的因素——網(wǎng)頁(yè)的布局。使用表格布局網(wǎng)頁(yè)

網(wǎng)頁(yè)是網(wǎng)站構(gòu)成的基本元素。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，不但要考慮色彩的搭配、文字的變化和圖片的處理等，而且還要考慮另一個(gè)非常重要的因素——網(wǎng)頁(yè)的布局。網(wǎng)頁(yè)布局類型

網(wǎng)頁(yè)布局大致可分為“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型等。1．“國(guó)”字型： 也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們?cè)诰W(wǎng)上見(jiàn)到的差不多最多的一種結(jié)構(gòu)類型。網(wǎng)頁(yè)布局類型

2．拐角型 這種結(jié)構(gòu)與上一種其實(shí)只是形式上的區(qū)別，其實(shí)是很相近的，上面是標(biāo)題及廣告橫幅，接下來(lái)的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見(jiàn)的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。3．標(biāo)題正文型 這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁(yè)面或注冊(cè)頁(yè)面等就是這種類。

網(wǎng)頁(yè)布局類型

4．左右框架型這是一種左右分別為兩頁(yè)的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或標(biāo)致，右面是正文。我們見(jiàn)到的大部分的大型論壇都是這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰，一目了然。5．上下框架型與上面類似，區(qū)別僅僅在于是一種上下分為兩頁(yè)的框架。網(wǎng)頁(yè)布局類型

6．綜合框架型是左右框架型和上下框架型兩種結(jié)構(gòu)的結(jié)合，相對(duì)復(fù)雜的一種框架結(jié)構(gòu)，較為常見(jiàn)的是類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。7．封面型這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁(yè)，大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫(huà)，放上幾個(gè)簡(jiǎn)單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接甚至直接在首頁(yè)的圖片上做鏈接而沒(méi)有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人主頁(yè)，如果處理的好，會(huì)給人帶來(lái)賞心悅目的感覺(jué)。網(wǎng)頁(yè)布局實(shí)例

程序2-10是一個(gè)利用表格嵌套進(jìn)行網(wǎng)頁(yè)布局的實(shí)例<!--程序2-10-->……<body><tableborder="1"width="772"align="center"><tr><tdcolspan="2"height="70">banner圖片</td>……<tablewidth="100%"height="100%"border="1"cellspacing="0"cellpadding="0"><tr>……</table> ……</table></body>表格布局網(wǎng)頁(yè)實(shí)例<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>MainTitleofWebPage</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>Menu</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">Contentgoeshere</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">Copyright?W3CSchool.cc</td></tr></table></body></html>2.3框架使用框架技術(shù)可以將一個(gè)瀏覽器窗口劃分成多個(gè)區(qū)域，每個(gè)區(qū)域就是一個(gè)框架，每個(gè)框架可以單獨(dú)引用一個(gè)源文件，這樣可以實(shí)現(xiàn)在一個(gè)瀏覽器窗口顯示多個(gè)源文件。源文件之間是相互獨(dú)立的，互不影響。當(dāng)其中一個(gè)源文件的內(nèi)容發(fā)生變化時(shí)，其它的源文件不受影響。多個(gè)框架看成一個(gè)整體稱為框架集。利用框架集可以實(shí)現(xiàn)網(wǎng)頁(yè)的布局。使用框架既有優(yōu)點(diǎn)也有缺點(diǎn)，其優(yōu)點(diǎn)主要有：加載頁(yè)面時(shí)不需要加載整個(gè)頁(yè)面，只需要加載頁(yè)面中的一個(gè)框架頁(yè)，減少了數(shù)據(jù)傳輸，網(wǎng)頁(yè)下載速度較快；方便制作導(dǎo)航欄，可以在框架集中使用框架來(lái)實(shí)現(xiàn)一些分欄布局；方便實(shí)現(xiàn)頁(yè)面的重復(fù)利用；一個(gè)頁(yè)面中的各個(gè)框架之間可以互相關(guān)聯(lián)，方便實(shí)現(xiàn)局部刷新；其缺點(diǎn)主要有：會(huì)產(chǎn)生較多的引用頁(yè)，管理不方便；框架的滾動(dòng)條不好控制；無(wú)法使用瀏覽器的后退按鈕；無(wú)法被搜索引擎搜索；多框架的頁(yè)面會(huì)增加對(duì)服務(wù)器的HTTP請(qǐng)求；2.3.1定義框架

框架的基本結(jié)構(gòu)主要分為框架集和框架兩個(gè)部分。它是利用<frameset>標(biāo)記與<frame>標(biāo)記來(lái)定義。其中<frameset>標(biāo)記用于定義框架集，而<frame>標(biāo)記則用于定義框架?；菊Z(yǔ)法：<html><frameset……><frame……/><frame……/><frame……/></frameset><noframe></noframe>

</html>2.3.1定義框架

語(yǔ)法解釋：<frameset>標(biāo)記和<frame>標(biāo)記中的省略號(hào)表示這兩個(gè)標(biāo)記中的具體屬性，常用的屬性將結(jié)合具體實(shí)例進(jìn)行詳細(xì)講解。<frameset>標(biāo)記不可以和<body>標(biāo)記一起使用，否則將出現(xiàn)顯示異常。<frameset>標(biāo)記在使用時(shí)直接包含在<html>標(biāo)記中即可。<frame>標(biāo)記主要用來(lái)定義框架，用來(lái)控制所代表的窗口框架。<noframe></noframe>之間放置不支持Frame功能的瀏覽器顯示的文本提示。2.3.2利用框架分割窗口

常見(jiàn)的窗口分割方式包括：水平分割、垂直分割和嵌套分割。具體采用哪種分割方式，取決于實(shí)際需要，可用<frameset>標(biāo)記中的rows（水平分割）或cols（垂直分割）屬性來(lái)進(jìn)行分割。2.3.2利用框架分割窗口1．水平分割窗口rows屬性可以定義窗口的水平分割?；菊Z(yǔ)法：<framesetrows="高度1，高度2,…,*"><frame><frame>…</frameset>2.3.2利用框架分割窗口語(yǔ)法解釋：（1）rows屬性的值代表各子窗口的高度，第一個(gè)子窗口高為高度1，第二個(gè)子窗口高為高度2，依此類推，而最后一個(gè)*，則代表最后一個(gè)子窗口的高度，值為其他子窗口高度分配后所剩余的高度。（2）設(shè)置高度數(shù)值的方式有兩種：采用整數(shù)設(shè)置，單位為像素（px），語(yǔ)法如下：<framesetrows="100，200，*">用百分比設(shè)置，語(yǔ)法如下：<framesetrows="20％，50％，*">例2-11.HTML2.3.2利用框架分割窗口2．垂直分割窗口cols屬性可以定義窗口的垂直分割。基本語(yǔ)法：<framesetcols="寬度1，寬度2,…,*"><frame><frame>…</frameset>語(yǔ)法解釋： 窗口垂直分割的寬度設(shè)置與水平設(shè)置時(shí)高度設(shè)置方式相同。例2-12.HTML2.3.3框架的嵌套

如果進(jìn)行網(wǎng)頁(yè)布局時(shí)需要?jiǎng)?chuàng)建同時(shí)包含橫向和縱向的框架，那么就需要利用框架的嵌套創(chuàng)建復(fù)雜的框架集。 進(jìn)行框架嵌套時(shí)，就是在一個(gè)框架集中包含了另外一個(gè)框架集。也就是在一個(gè)框架集中原來(lái)應(yīng)該為<frame>標(biāo)記的位置由框架集標(biāo)記代替。例2-13.HTML實(shí)驗(yàn)三1、用表格布局網(wǎng)頁(yè)的應(yīng)用，網(wǎng)頁(yè)布局呈“國(guó)”字形，如圖所示。2.3.4框架的初始化

框架初始化是指為各個(gè)框架指定初始顯示的頁(yè)面，也就是在<frame>標(biāo)記中使用src屬性指定框架中最初顯示的頁(yè)面。指定頁(yè)面可以使用相對(duì)路徑也可以使用絕對(duì)路徑。基本語(yǔ)法：<framesetcols="寬度1，寬度2,…,*"><framesrc="url"><framesrc="url">…</frameset>語(yǔ)法解釋：例2-14.HTML<frame>的src屬性值設(shè)置為初始顯示頁(yè)面的路徑。2.3.5創(chuàng)建浮動(dòng)框架

在瀏覽網(wǎng)頁(yè)的時(shí)候會(huì)看到在瀏覽器窗口含有孤立的子窗口，那么這就是浮動(dòng)框架，插入浮動(dòng)框架要使用成對(duì)的標(biāo)記<iframe></iframe>，同樣，需用src屬性來(lái)設(shè)置框架中顯示文件的路徑?；菊Z(yǔ)法：<iframesrc="url"></iframe>語(yǔ)法解釋： 在<iframe>的src屬性中設(shè)置顯示頁(yè)面的路徑。與框架不同，浮動(dòng)框架標(biāo)記可以包含在<body>標(biāo)記范圍內(nèi)。例2-15.HTML2.3.5創(chuàng)建浮動(dòng)框架<iframe>標(biāo)記中常見(jiàn)的屬性如下表所示。屬性描述align規(guī)定框架的水平對(duì)齊方式。width規(guī)定浮動(dòng)框架窗口的寬度。height規(guī)定浮動(dòng)框架窗口的高度。src規(guī)定顯示網(wǎng)頁(yè)文件的路徑。name規(guī)定框架的名稱。noresize規(guī)定框架尺寸是否可以調(diào)整。scrolling規(guī)定框架滾動(dòng)條。frameborder規(guī)定框架邊框。2.3.6框架控制

本節(jié)將詳細(xì)介紹通過(guò)設(shè)置<frame>標(biāo)記和<frameset>標(biāo)記中的各種屬性，來(lái)控制框架的顯示效果。<frameset>標(biāo)簽的常用屬性如表所示。屬性說(shuō)明colspixels,%,*,定義框架集中列的數(shù)目和尺寸rowspixels,%,*,定義框架集中行的數(shù)目和尺寸frameborder0或1，隱藏或顯示邊框，默認(rèn)值為1framespacing邊框?qū)挾龋韵袼貫閱挝籦ordercolor邊框顏色scrollingyes,no,auto，是否顯示滾動(dòng)條noresize不需要賦值，禁止用戶調(diào)整框架大小

控制框架邊框

1．框架的隱藏基本語(yǔ)法：<frameframeborder=””>或<framesetframeborder=””>語(yǔ)法解釋：<frame>標(biāo)記中的frameborder屬性可以控制框架的邊框。屬性可選的值為0或1，值為0時(shí)沒(méi)有邊框，值為1時(shí)生成3D邊框（此為默認(rèn)值）。只有將所有相鄰的框架的邊框都設(shè)置為0是，才能隱藏邊框。<frameset>標(biāo)記中的frameborder屬性可以控制框架集中所有子窗口的邊框。例2-16.HTML

控制框架邊框2．框架的邊框基本語(yǔ)法：<framesetborder=””>語(yǔ)法解釋：<frameset>標(biāo)記中的border屬性可以控制框架邊框的寬度，單位為像素。例2-17.HTML設(shè)置框架的邊框?qū)挾?/p>

控制框架邊框3．框架滾動(dòng)條和不可移動(dòng)性基本語(yǔ)法：<framescrolling=””noresize>語(yǔ)法解釋：<frame>標(biāo)記中的scrolling屬性值為yes、no或auto。當(dāng)值為yes時(shí)，強(qiáng)制為框架添加滾動(dòng)條。當(dāng)值為no時(shí)，框架內(nèi)不加滾動(dòng)條。當(dāng)值為auto時(shí)根據(jù)內(nèi)容的多少，需要時(shí)自動(dòng)添加滾動(dòng)條（默認(rèn)值）。當(dāng)把鼠標(biāo)滑到框架邊框時(shí)，可以通過(guò)拖動(dòng)調(diào)整框架大小，noresize屬性可以固定框架的位置和大小。例2-18.HTML

控制框架子窗口

1．定義子窗口名稱基本語(yǔ)法：<framename=””>語(yǔ)法解釋：<frame>標(biāo)記中的name屬性用來(lái)指定框架的名稱。指定框架名稱后可以指定超鏈接的target屬性值為框架名稱，當(dāng)單擊超鏈接時(shí)，在指定框架內(nèi)顯示超鏈接目標(biāo)。例2-19.HTML

控制框架子窗口2．設(shè)置子窗口邊距基本語(yǔ)法：<framemarginwidth=””marginheight=””>語(yǔ)法解釋：

marginwidth屬性可以控制框架內(nèi)容和框架左右邊框之間的距離，marginheight屬性則控制框架內(nèi)容和框架上下邊框之間的距離。這兩屬性的取值單位都是像素。例2-20.HTML2.3.7使用框架布局網(wǎng)頁(yè)實(shí)例

程序2-21是一個(gè)利用框架布局網(wǎng)頁(yè)的實(shí)例，這個(gè)程序運(yùn)用了框架嵌套實(shí)現(xiàn)了一個(gè)類似于程序2-10的網(wǎng)頁(yè)布局<!--程序2-21--><html><framesetrows="70,300,40"><framesrc=“2-21top.html"><framesetcols="172,600"><framesrc=“2-21left.html"marginheight="0"marginwidth="0"><framesrc=“2-21right.html"name="right"></frameset><framesrc=“2-21bottom.html"></frameset></html>2.3.7使用框架布局網(wǎng)頁(yè)實(shí)例

程序2-21外層框架設(shè)置了三個(gè)水平分割的子窗口，3個(gè)子窗口的高度分別是70像素、300像素和40像素，第2個(gè)子窗口又被垂直分割成兩個(gè)子窗口寬度分別為172像素和600像素。頂部初始化網(wǎng)頁(yè)為程序2-21top，程序2-21bottom和程序2-21right內(nèi)容與它內(nèi)容相似。<!--程序2-21top--><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>banner圖片</title></head><body><palign="center">banner圖片</p></body></html>2.3.7使用框架布局網(wǎng)頁(yè)實(shí)例

左側(cè)導(dǎo)航欄初始化程序?yàn)槌绦?-21left，注意程序中鏈接的target屬性值為右側(cè)框架名稱“right”。<!--程序2-21left--><html>……<tdheight="25%"><ahref="#"target="right">欄目1導(dǎo)航</a></td>

……<tdheight="25%"><ahref="#"target="right">欄目2導(dǎo)航</a></td>

……

……</tr></table></body></html>下面的實(shí)例為一個(gè)混合框架，先垂直劃分，然后水平劃分，當(dāng)單擊左側(cè)框架的超級(jí)鏈接時(shí)，在右側(cè)框架中顯示資源文件。frameset.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><framesetrows="20%,*"><framename="top"src="top.html"/><framesetcols="40%,*"><framename="left"src="left.html"/><framename="right"src="ch1.html"/></frameset></frameset></html>top.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>top</title></head><bodybgcolor="#FFBFFF"><h3align="center">這是TOP</h3></body></html>left.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>left</title></head><bodybgcolor="#A3D1D1"><ul><li><ahref="ch1.html"target="right">第1章</a></li><li><ahref="ch2.html"target="right">第2章</a></li><li><ahref="ch3.html"target="right">第3章</a></li></ul></body></html>ch1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>ch1</title></head><bodybgcolor="#FFDCB9"><h3>這是第1章的內(nèi)容</h3></body></html>ch2.html,ch3.html的源代碼與ch1.html類似。請(qǐng)求frameset.html的顯示結(jié)果如圖所示。單擊左邊框架中的“第3章”，顯示結(jié)果如圖所示。實(shí)驗(yàn)32、用框架布局網(wǎng)頁(yè)的應(yīng)用，頁(yè)面顯示如下。2.2表單表單是一個(gè)容器，用來(lái)收集客戶端要提交到服務(wù)器端的信息。客戶端將信息填寫(xiě)在表單中的控件中。當(dāng)單擊表單中的提交按鈕時(shí)，表單中包含的控件的信息就會(huì)被提交給表單的action屬性所指定的處理程序。表單的使用非常廣泛，是網(wǎng)頁(yè)上用于輸入信息的區(qū)域，例如向文本框中輸入文字，在選項(xiàng)框里進(jìn)行選擇等。從表單的設(shè)計(jì)到服務(wù)器返回處理結(jié)果的流程包括：通過(guò)表單控件來(lái)設(shè)計(jì)表單；通過(guò)瀏覽器將表單呈現(xiàn)給客戶端；客戶端填寫(xiě)相關(guān)的信息，并單擊表單中的提交按鈕，將表單提交給處理程序；服務(wù)器處理完表單后，將生成的結(jié)果返回給客戶端瀏覽器；什么是表單

表單實(shí)質(zhì)上就是用于實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽者和服務(wù)器端之間信息交換的一種頁(yè)面元素，在WWW上被廣泛用于各種信息的搜集和反饋。 在web應(yīng)用中，與表單工作相關(guān)的有兩個(gè)重要組成部分：一是描述表單的HTML源代碼；二是用于處理用戶在表單域中輸入信息的服務(wù)器端應(yīng)用程序，如ASP、JSP等。表單控件的類型

表單中通常包含兩類元素，一種是普通的頁(yè)面元素如文本、圖像、表格等，另一種是用于收集信息的特定頁(yè)面元素，即表單控件如按鈕、文本框、密碼框等。 表單中的每個(gè)控件都有特定的名稱，這個(gè)名稱有效范圍是所在表單。每個(gè)控件都有初始值和當(dāng)前值，初始值是由網(wǎng)頁(yè)設(shè)計(jì)者預(yù)先指定的，當(dāng)前值是由用戶與表單控件交互操作決定的，當(dāng)提交表單時(shí)，會(huì)把控件中的當(dāng)前值提交到服務(wù)器端。 表單控件對(duì)于客戶端用戶和服務(wù)器端處理程序交互起著中間數(shù)據(jù)載體的作用。1．<form>標(biāo)簽在HTML中使用一對(duì)<form>標(biāo)簽來(lái)設(shè)計(jì)表單，其格式如下：<formname=“…”action=“…”method=“post/get”target=“…”enctype=“…”onsubmit=“…”onreset=“…”accept=“…”accept-charset=“…”>表單中包含的控件或文字</form>其中：name指的是表單的名字。action指的是處理表單或者接收表單信息的url。method指的是表單提交的方法，默認(rèn)值為get。target指的是目標(biāo)窗口。enctype屬性可選，指的是提交數(shù)據(jù)的格式，可以指定客戶端提交到服務(wù)器端的數(shù)據(jù)的編碼類型。onsubmit指的是表單提交時(shí)調(diào)用的腳本語(yǔ)句或函數(shù)。onreset指的是表單重置時(shí)調(diào)用的腳本語(yǔ)句或函數(shù)。2．<input>標(biāo)簽表單中可以包含很多控件，其中，用<input>標(biāo)簽定義的控件有單行文本框、密碼框、提交按鈕、重置按鈕、普通按鈕、單選按鈕、復(fù)選框以及上傳文件按鈕等。這些控件是表單的核心控件，在表單設(shè)計(jì)中被頻繁地使用。（1）單行文本框單行文本框指的是表單中可以輸入一行文本的輸入框，通過(guò)設(shè)置<input>標(biāo)簽的type屬性為text來(lái)指定。其格式如下：<inputtype=“text”name=“…”value=“…”size=“…”maxlength=“…”onchange=“…”onselect=“…”onfocus=“…”/>其中：name指的是單行文本框的名稱；value指的是單行文本框的默認(rèn)的初始值；size指的是單行文本框的顯示寬度；maxlength指的是單行文本框允許用戶輸入的最大的字符數(shù)；onchange指的是當(dāng)文本框內(nèi)文本發(fā)行改變時(shí)調(diào)用的腳本語(yǔ)句或函數(shù)；onselect指的是當(dāng)文本框內(nèi)的文本被選中時(shí)調(diào)用的腳本語(yǔ)句或函數(shù)；onfocus指的是當(dāng)文本框獲得焦點(diǎn)時(shí)調(diào)用的腳本語(yǔ)句或函數(shù)；例2-22.HTML（2）密碼框密碼框通過(guò)指定<input>標(biāo)簽的type屬性值為password來(lái)實(shí)現(xiàn)。在密碼框中輸入字符時(shí)，顯示的都是*或者實(shí)心圓點(diǎn)，密碼框的用法和單行文本框的用法基本相同，其格式如下：<inputtype=“password”name=“…”value=“…”size=“…”maxlength=“…”onchange=“…”onselect=“…”onfocus=“…”/>例2-23.HTML（3）隱藏域表單中的隱藏域在瀏覽器中是不可見(jiàn)的，因此用戶不能借助隱藏域進(jìn)行交互操作。一般通過(guò)隱藏域來(lái)傳遞一些為開(kāi)發(fā)者服務(wù)的信息，例如動(dòng)態(tài)方法的調(diào)用、Session會(huì)話跟蹤等。隱藏域通過(guò)指定<input>標(biāo)簽的type屬性值為hidden來(lái)實(shí)現(xiàn)，其格式如下：<inputtype=“hidden”value=“…”name=“…”/>（4）提交按鈕提交按鈕通過(guò)指定<input>標(biāo)簽的type屬性值為submit來(lái)實(shí)現(xiàn)。單擊了提交按鈕后，提交按鈕所在的表單的內(nèi)容會(huì)被提交到表單標(biāo)簽中action屬性所指的處理程序。提交按鈕的使用格式如下：<inputtype=“submit”value=“…”/>其中，value指的是提交按鈕上顯示的提示文字，一般為“Submit”或者“提交”。（5）重置按鈕重置按鈕通過(guò)指定<input>標(biāo)簽的type屬性值為reset來(lái)實(shí)現(xiàn)。當(dāng)單擊重置按鈕時(shí)，重置按鈕所在的表單中的所有控件的內(nèi)容將會(huì)被清除，回到控件的默認(rèn)的初始值，可以重新在控件中輸入數(shù)據(jù)。重置按鈕的使用格式如下：<inputtype=“reset”value=“…”/>其中，value指的是重置按鈕上顯示的提示文字，一般為“Reset”或者“重置”。例2-24.HTML（6）圖像按鈕有時(shí)候?yàn)榱诉_(dá)到比較好的視覺(jué)效果，有人會(huì)使用圖片代替按鈕來(lái)提交或者重置表單數(shù)據(jù)。類型為圖片(type="image")的按鈕，其默認(rèn)操作是提交表單?；菊Z(yǔ)法：<form><inputname=""type="image"src=""></form>語(yǔ)法解釋： 單擊該按鈕時(shí)，瀏覽器就會(huì)將表單的輸入信息傳送給服務(wù)器。image類型中的src屬性是必需的，它用于設(shè)置圖像文件的路徑。例2-25.HTML（7）單選按鈕單選按鈕通過(guò)指定<input>標(biāo)簽的type屬性值為radio實(shí)現(xiàn)，其格式如下：<inputtype=“radio”name=“…”value=“…”onclick=“…”onfocus=“…”checked/>其中：name指的是單選按鈕的名稱，多個(gè)單選按鈕屬于同一個(gè)選項(xiàng)組，必須具有相同的name值；value指的是單選按鈕的值；checked屬性項(xiàng)可選，如果單選按鈕的默認(rèn)狀態(tài)為被選中，則將checked寫(xiě)在其屬性列內(nèi)；如果不將checked寫(xiě)在其屬性列內(nèi)，則單選按鈕的默認(rèn)狀態(tài)為未選中；onclick指的是當(dāng)單擊單選按鈕時(shí)執(zhí)行的腳本語(yǔ)句或腳本函數(shù)；onfocus指的是當(dāng)單選按鈕獲得焦點(diǎn)時(shí)執(zhí)行的腳本語(yǔ)句或腳本函數(shù)；（8）復(fù)選按鈕復(fù)選按鈕通過(guò)指定<input>標(biāo)簽的type屬性值為checkbox來(lái)實(shí)現(xiàn)。其使用格式如下：<inputtype=“checkbox”name=“…”value=“…”onclick=“…”onfocus=“…”checked/>復(fù)選按鈕默認(rèn)的選中狀態(tài)也通過(guò)checked指定，多個(gè)復(fù)選按鈕是否處于同一個(gè)選項(xiàng)組也通過(guò)name屬性指定。其屬性可參照單選按鈕的屬性說(shuō)明。例2-26.HTML（9）普通按鈕除了以上提交按鈕和重置按鈕之外，還可以使用普通按鈕。通過(guò)設(shè)置<input>標(biāo)簽的type屬性值為button來(lái)實(shí)現(xiàn)。在表單中使用普通按鈕，必須使用onclick調(diào)用處理腳本或腳本函數(shù)，使用格式如下：<inputtype=“button”name=“…”value=“…”onclick=“…”onfocus=“…”/>其中：name指的是普通按鈕的名字；value指的是普通按鈕上的提示文字；onclick指的是當(dāng)單擊普通按鈕時(shí)執(zhí)行的腳本語(yǔ)句或函數(shù)；onfocus指的是當(dāng)普通按鈕獲得焦點(diǎn)時(shí)執(zhí)行的腳本語(yǔ)句或函數(shù)；（10）上傳文件域上傳文件域通過(guò)指定<input>標(biāo)簽的type屬性值為file來(lái)實(shí)現(xiàn)。它包括一個(gè)文本框和一個(gè)按鈕。其格式如下：<inputtype=“file”name=“…”value=“…”/>其中：name指的是上傳文件域的名稱；value指的是上傳文件域中的按鈕的提示文字，一般為“選擇文件”或“瀏覽……”。例2-27.HTML實(shí)驗(yàn)四1、用表單實(shí)現(xiàn)用戶注冊(cè)的應(yīng)用，頁(yè)面顯示如圖所示。form1.html中的表單提交給form1_ok.jsp處理，form1_ok.jsp顯示用戶填寫(xiě)的信息。form1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表單使用示例1</title></head><body><formname="form1"action="form1_ok.jsp"method="post"><tableborder="1"width="300"cellpadding="0"cellspacing="0"> <tr> <tdalign="left">姓名</td> <tdalign="left"><inputtype="text"name="name"size="10"/></td> </tr> <tr> <tdalign="left">密碼</td> <tdalign="left"><inputtype="password"name="password"size="10"/></td> </tr> <tr> <tdalign="left">性別</td> <tdalign="left"><inputtype="radio"name="gender"value="male" checked/>男<inputtype="radio"name="gender"value="female"/>女</td> </tr> <tr> <tdalign="left">愛(ài)好</td> <tdalign="left"><inputtype="checkbox"name="hobby" value="swimming"/>游泳<br/> <inputtype="checkbox"name="hobby"value="reading"/>讀書(shū)<br/> <inputtype="checkbox"name="hobby"value="music"/>音樂(lè)</td> </tr> <tr> <tdalign="center"colspan="2"><inputtype="submit"value="提交"/>  <inputtype="reset"value="重置"/></td> </tr></table></form></body></html>form1_ok.jsp:<%@pagelanguage="java"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表單使用示例1-顯示表單內(nèi)控件的值</title></head><body><% Stringname=request.getParameter("name"); Stringpassword=request.getParameter("password"); Stringgender=request.getParameter("gender"); String[]hobby=request.getParameterValues("hobby"); out.print("name:"+name+"<br/>"); out.print("password:"+password+"<br/>"); out.print("gender:"+gender+"<br/>"); if(hobby!=null){ out.print("hobby:"); for(inti=0;i<hobby.length;i++){ out.print(hobby[i]+""); } }%></body></html>驗(yàn)證form1.html及form1_ok.jsp的顯示結(jié)果，需要將其部署到JavaWeb服務(wù)器上，在瀏覽器的地址欄里輸入http://localhost:8080/ch02/form1.html，填寫(xiě)完相應(yīng)的信息后的顯示結(jié)果如圖所示。提交以后的結(jié)果如圖所示。3．<select>標(biāo)簽在表單中有時(shí)會(huì)用到下拉列表，在下拉列表中既可以實(shí)現(xiàn)單選，也可以實(shí)現(xiàn)多選。表單提交之后，服務(wù)器可以獲取下拉列表中選中的項(xiàng)目對(duì)應(yīng)的value值，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合并成一個(gè)單獨(dú)的參數(shù)列表。下拉列表使用一對(duì)<select>標(biāo)簽來(lái)實(shí)現(xiàn)，其格式如下：<selectname=“…”size=“…”onfocus=“…”onblur=“…”onchange=“…”multiple><optionvalue=“…”selected=“selected”>選項(xiàng)1提示信息</option><optionvalue=”…”>選項(xiàng)2提示信息</option></select>其中：name指的是下拉列表的名稱；size指的是下拉列表中可見(jiàn)選項(xiàng)的數(shù)目；onfocus指的是當(dāng)下拉列表獲得焦點(diǎn)時(shí)調(diào)用的語(yǔ)句或腳本函數(shù)；onblur指的是當(dāng)下拉列表失去焦點(diǎn)時(shí)調(diào)用的語(yǔ)句或腳本函數(shù)；onchange指的是當(dāng)下拉列表的選中項(xiàng)發(fā)生變化時(shí)調(diào)用的語(yǔ)句或腳本函數(shù)；multiple指的是允許下拉列表選擇多項(xiàng)，如果沒(méi)有此屬性，則下拉列表只能選擇單項(xiàng)；如果設(shè)置此屬性，下拉列表會(huì)顯示成平鋪狀態(tài)。例2-28.HTML4．<textarea>標(biāo)簽在HTML中，使用一對(duì)<textarea>標(biāo)簽來(lái)實(shí)現(xiàn)多行文本框。其格式如下：<textareaname=“…”cols=“…”rows=“…”wrap=“off/virtual/physical”readonly=“readonly”onfocus=“…”onblur=“…”onchange=“…”>…</textarea>其中：name指的是

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論