表格、表單和框架基礎(chǔ)知識講義課件_第1頁
表格、表單和框架基礎(chǔ)知識講義課件_第2頁
表格、表單和框架基礎(chǔ)知識講義課件_第3頁
表格、表單和框架基礎(chǔ)知識講義課件_第4頁
表格、表單和框架基礎(chǔ)知識講義課件_第5頁
已閱讀5頁，還剩29頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第2章表格、表單和框架第2章表格、表單和框架掌握表格標簽的結(jié)構(gòu)組成及使用掌握表格常用屬性的設(shè)置了解表格的嵌套掌握表格的使用技巧掌握表單的基本結(jié)構(gòu)組成掌握常用表單域的使用掌握常用表單按鈕的使用掌握框架的結(jié)構(gòu)組成及使用目標2掌握表格標簽的結(jié)構(gòu)組成及使用目標2表格表格標簽的基本結(jié)構(gòu)：<table>標簽來創(chuàng)建表格，<table>標簽內(nèi)包含了表名和表格本身內(nèi)容的代碼。<tr>表示行，行由若干單元格構(gòu)成。<td>標簽定義了一個單元格，嵌套于<tr>標簽之中。多個單元格結(jié)合在一起構(gòu)成了行，多個行結(jié)合在一起就構(gòu)成了一個表格。

示例：2.D.1TableEG1.html表格是網(wǎng)頁制作中使用最多的技術(shù)之一。表格可以清晰直觀的展現(xiàn)數(shù)據(jù)之間的關(guān)系。<table> <tr> <td>單元格內(nèi)容</td> <td>單元格內(nèi)容</td> <!--更多單元格--> </tr> <!--更多行--></table>3表格表格標簽的基本結(jié)構(gòu)：表格是網(wǎng)頁制作中使用最多的技術(shù)之一。表格相關(guān)標簽HTML中有10個與表格相關(guān)的標簽<table>標簽：定義一個表格。<caption>標簽：定義一個表格標題，必須緊隨table標簽之后，且每個表格只能包含一個標題，通常這個標題會居中顯示于表格上部。<th>標簽：定義表格內(nèi)的表頭單元格。th元素內(nèi)部的文本通常會呈現(xiàn)為粗體。<tr>標簽：在表格中定義一行。<td>標簽：定義表格中的一個單元格，包含在<tr>標簽中。<thead>標簽：定義表格的表頭。<tbody>標簽：定義一段表格主體（正文），使用<tbody>標簽，可以將表格中的一行或幾行合成一組，從而將表格分為幾個單獨的部分，一個<tbody>標簽就是表格中的一個獨立的部分，不能從一個<tbody>跨越到另一個<tbody>中。<tfoot>標簽：定義表格的頁腳（腳注）。<col>標簽：定義表格中針對一個或多個列的屬性值。只能在表格或colgroup標簽中使用此標簽。<colgroup>標簽：定義表格列的分組。通過此標簽可以對列進行組合以便進行格式化，此標簽只能用在<table>標簽內(nèi)部。<table>標簽來創(chuàng)建表格，<table>標簽內(nèi)包含了表名和表格本身內(nèi)容的代碼示例：2.D.2TableEG2.html4表格相關(guān)標簽HTML中有10個與表格相關(guān)的標簽4表格屬性使用表格屬性可以設(shè)置表格的外觀示例：2.D.3TableEG3.html表格屬性說明border設(shè)置表格邊框bgcolor設(shè)置表格背景顏色background設(shè)置表格背景圖片width表格的寬度，單位用像素或百分比height表格的高度，單位用像素或百分比align對齊方式，有l(wèi)eft（左對齊）、right（右對齊）和center（居中對齊）cellspacing設(shè)置單元格之間的距離cellpadding設(shè)置單元格內(nèi)的內(nèi)容與邊框的距離colspan單元格水平合并，值為合并的單元格的數(shù)目rowspan單元格垂直合并，值為合并的單元格的數(shù)目5表格屬性使用表格屬性可以設(shè)置表格的外觀表格屬性說明borde表單表單由三部分組成：表單標簽表單域表單按鈕示例：代碼2-1FormEG.htmlHTML表單（Form）是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。6表單HTML表單（Form）是HTML的一個重要部分，主要用表單標簽表單標簽表單標簽（<form></form>）用于聲明表單，定義采集數(shù)據(jù)的范圍，同時包含了處理表單數(shù)據(jù)的應(yīng)用程序以及數(shù)據(jù)提交到服務(wù)器的方法。action：指定處理表單中用戶輸入數(shù)據(jù)的URLmethod：指定向服務(wù)器傳遞數(shù)據(jù)的HTTP方法，主要有Get和Post兩種 方法，默認值是Getenctype：指定了數(shù)據(jù)發(fā)送時的編碼類型target：用于指定在瀏覽器中哪個frame中顯示服務(wù)器的響應(yīng)HTML<formaction="url"method="get/post"enctype="mime"target="...">......</form>7表單標簽表單標簽<formaction="url"met文本框和多行文本框文本框文本框是一種用來輸入內(nèi)容的表單對象，通常被用來填寫簡單的內(nèi)容，如姓名、地址等。語法格式如下：多行文本框多行文本框（文本域）是一種用來輸入較長內(nèi)容的表單對象。語法格式如下：<inputtype="text"name="..."size="..."maxlength="..."value="..."/><textareaname="..."cols="..."rows="..."wrap="..."></textarea>8文本框和多行文本框文本框<inputtype="text密碼框和隱藏框密碼框密碼框是一種用于輸入密碼的特殊文本域。當訪問者輸入文字時，文字會被星號或其它符號代替，從而隱藏輸入的真實文字。語法格式如下：隱藏域隱藏域是用來收集或發(fā)送信息的不可見元素，網(wǎng)頁的訪問者無法看到隱藏域，但是當表單被提交時，隱藏域的內(nèi)容同樣會被提交。語法格式如下：<inputtype="password"name="..."size="..."maxlength="..."/><inputtype="hidden"name="..."value="..."/>9密碼框和隱藏框密碼框<inputtype="passwor復(fù)選框和單選框復(fù)選框復(fù)選框允許在待選項中選中一個以上的選項。每個復(fù)選框都是一個獨立的元素。

語法格式如下：單選框單選框只允許訪問者在待選項中選擇唯一的一項。該控件用于一組相互排斥的值，組中每個單選按鈕控件的名字相同，用戶一次只能選擇一個選項。語法格式如下：<inputtype="checkbox"name="..."value="..."/><inputtype="radio"name="..."value="..."/>10復(fù)選框和單選框<inputtype="checkbox"文件上傳框、下拉選擇框文件上傳框文件上傳框用于讓用戶上傳自己的文件，文件上傳框與其他文本域類似，但它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。語法格式如下：下拉選擇框下拉選擇框可以讓瀏覽者快速、方便、正確的選擇一些選項，同時可以節(jié)省頁面空間，它通過<select>標簽實現(xiàn)，該標簽用于顯示可供用戶選擇的下拉列表。語法格式如下：<inputtype="file"name="..."size="15"maxlength="100"/><selectname="..."size="..."multiple> <optionvalue="..."selected>...</option> ...</select>11文件上傳框、下拉選擇框文件上傳框<inputtype="表單按鈕表單按鈕主要分為：提交按鈕、復(fù)位按鈕和普通按鈕提交按鈕提交按鈕用來將輸入的表單信息提交到服務(wù)器。復(fù)位按鈕復(fù)位按鈕用來重置表單。普通按鈕普通按鈕通常用來響應(yīng)javascript事件（如onclick），用來調(diào)用相應(yīng)的javascript函數(shù)來實現(xiàn)各種功能。綜合案例：2.D.4register.html<inputtype="submit"name="..."value="..."/><inputtype="reset"name="..."value="..."/><inputtype="button"name="..."value="..."onclick="..."/>12表單按鈕表單按鈕主要分為：提交按鈕、復(fù)位按鈕和普通按鈕<i框架框架優(yōu)點如下：重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁，從而減少了數(shù)據(jù)的傳輸，加快了網(wǎng)頁下載速度。方便制作導(dǎo)航欄。示例：<html><head> <title>標題</title></head><framesetcols[rows]="列或行的寬度占窗口比例或像素,.."> <framesrc="引入網(wǎng)頁的路徑或地址"/> <framesrc="引入網(wǎng)頁的路徑或地址"/>……</frameset></html>框架（Frame）就是瀏覽器窗口的一個區(qū)域，在這個區(qū)域中可以顯示一個單獨的頁面，而不影響另一個框架中的顯示內(nèi)容

。13框架<html>框架（Frame）就是瀏覽器窗口的一個區(qū)域，框架結(jié)構(gòu)基本結(jié)構(gòu)通過標簽<frameset>來定義如何劃分框架，通過設(shè)置<frameset>的“cols/rows”屬性來確定<frameset>的列/行數(shù)以及所占窗口的比例。而每個引入的頁面通過框架標簽<frame>定義，<frame>的src屬性用于設(shè)置所引用網(wǎng)頁的路徑。frameset常用屬性屬性名說明cols用“象素數(shù)”或百分比分割左右窗口，其中“*”表示剩余部分rows用“象素數(shù)”或百分比分割上下窗口，其中“*”表示剩余部分frameborder設(shè)置框架的邊框，其值只有0和1。0表示沒有邊框，1表示顯示邊框。邊框是無法調(diào)整粗細的framespacing表示框架與框架間的空白距離cols和rows中值的個數(shù)對應(yīng)要分割的<frame>的個數(shù)，即有幾個值就有幾個<frame>。14框架結(jié)構(gòu)屬性名說明cols用“象素數(shù)”或百分比分割左右窗口，使用框架混合框架可根據(jù)設(shè)計需要，混合使用<frameset>和<frame>標簽設(shè)置區(qū)域相互獨立的復(fù)雜頁面。示例：2.D.5HunHeFrame.html導(dǎo)航框架導(dǎo)航框架（導(dǎo)航欄）是在網(wǎng)頁框架的<frame>中加入name屬性，表示該<frame>的名稱，然后通過超鏈接來標識URL，并用target指定<frame>的名稱。示例：2.D.6NavFrameEG.html內(nèi)聯(lián)框架內(nèi)聯(lián)框架的本質(zhì)是在一個頁面中嵌入一個框架窗口來顯示另一個頁面的內(nèi)容。內(nèi)聯(lián)框架使用<iframe>標簽來定義。示例：2.D.7NeiLianFrameEG.html15使用框架15表格是HTML的高級控件之一。表格可以清晰明了的展現(xiàn)數(shù)據(jù)之間的關(guān)系，便于對比分析HTML中與表格有關(guān)的10個標簽是：<table>、<caption>、<th>、<tr>、<td>、<thead>、<tbody>、<tfoot>、<col>、<colgroup>表單由表單標簽、表單域、表單按鈕組成創(chuàng)建表單最關(guān)鍵的是掌握三個要素即表單控件、action屬性和method屬性向服務(wù)器傳遞數(shù)據(jù)的HTTP方法，主要有Get和Post兩種方法，默認值是Get表單域包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等，用于采集用戶輸入或選擇的數(shù)據(jù)表單按鈕主要分為三類：提交按鈕、重置按鈕和普通按鈕使用框架可以把瀏覽器窗口劃分成多個相互獨立的區(qū)域HTML框架既可以橫向分割也可以縱向分割使用框架技術(shù)可以方便的實現(xiàn)頁面導(dǎo)航功能小結(jié)16表格是HTML的高級控件之一。表格可以清晰明了的展現(xiàn)數(shù)據(jù)之間

謝謝！謝謝！17第2章表格、表單和框架第2章表格、表單和框架掌握表格標簽的結(jié)構(gòu)組成及使用掌握表格常用屬性的設(shè)置了解表格的嵌套掌握表格的使用技巧掌握表單的基本結(jié)構(gòu)組成掌握常用表單域的使用掌握常用表單按鈕的使用掌握框架的結(jié)構(gòu)組成及使用目標19掌握表格標簽的結(jié)構(gòu)組成及使用目標2表格表格標簽的基本結(jié)構(gòu)：<table>標簽來創(chuàng)建表格，<table>標簽內(nèi)包含了表名和表格本身內(nèi)容的代碼。<tr>表示行，行由若干單元格構(gòu)成。<td>標簽定義了一個單元格，嵌套于<tr>標簽之中。多個單元格結(jié)合在一起構(gòu)成了行，多個行結(jié)合在一起就構(gòu)成了一個表格。

示例：2.D.1TableEG1.html表格是網(wǎng)頁制作中使用最多的技術(shù)之一。表格可以清晰直觀的展現(xiàn)數(shù)據(jù)之間的關(guān)系。<table> <tr> <td>單元格內(nèi)容</td> <td>單元格內(nèi)容</td> <!--更多單元格--> </tr> <!--更多行--></table>20表格表格標簽的基本結(jié)構(gòu)：表格是網(wǎng)頁制作中使用最多的技術(shù)之一。表格相關(guān)標簽HTML中有10個與表格相關(guān)的標簽<table>標簽：定義一個表格。<caption>標簽：定義一個表格標題，必須緊隨table標簽之后，且每個表格只能包含一個標題，通常這個標題會居中顯示于表格上部。<th>標簽：定義表格內(nèi)的表頭單元格。th元素內(nèi)部的文本通常會呈現(xiàn)為粗體。<tr>標簽：在表格中定義一行。<td>標簽：定義表格中的一個單元格，包含在<tr>標簽中。<thead>標簽：定義表格的表頭。<tbody>標簽：定義一段表格主體（正文），使用<tbody>標簽，可以將表格中的一行或幾行合成一組，從而將表格分為幾個單獨的部分，一個<tbody>標簽就是表格中的一個獨立的部分，不能從一個<tbody>跨越到另一個<tbody>中。<tfoot>標簽：定義表格的頁腳（腳注）。<col>標簽：定義表格中針對一個或多個列的屬性值。只能在表格或colgroup標簽中使用此標簽。<colgroup>標簽：定義表格列的分組。通過此標簽可以對列進行組合以便進行格式化，此標簽只能用在<table>標簽內(nèi)部。<table>標簽來創(chuàng)建表格，<table>標簽內(nèi)包含了表名和表格本身內(nèi)容的代碼示例：2.D.2TableEG2.html21表格相關(guān)標簽HTML中有10個與表格相關(guān)的標簽4表格屬性使用表格屬性可以設(shè)置表格的外觀示例：2.D.3TableEG3.html表格屬性說明border設(shè)置表格邊框bgcolor設(shè)置表格背景顏色background設(shè)置表格背景圖片width表格的寬度，單位用像素或百分比height表格的高度，單位用像素或百分比align對齊方式，有l(wèi)eft（左對齊）、right（右對齊）和center（居中對齊）cellspacing設(shè)置單元格之間的距離cellpadding設(shè)置單元格內(nèi)的內(nèi)容與邊框的距離colspan單元格水平合并，值為合并的單元格的數(shù)目rowspan單元格垂直合并，值為合并的單元格的數(shù)目22表格屬性使用表格屬性可以設(shè)置表格的外觀表格屬性說明borde表單表單由三部分組成：表單標簽表單域表單按鈕示例：代碼2-1FormEG.htmlHTML表單（Form）是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。23表單HTML表單（Form）是HTML的一個重要部分，主要用表單標簽表單標簽表單標簽（<form></form>）用于聲明表單，定義采集數(shù)據(jù)的范圍，同時包含了處理表單數(shù)據(jù)的應(yīng)用程序以及數(shù)據(jù)提交到服務(wù)器的方法。action：指定處理表單中用戶輸入數(shù)據(jù)的URLmethod：指定向服務(wù)器傳遞數(shù)據(jù)的HTTP方法，主要有Get和Post兩種 方法，默認值是Getenctype：指定了數(shù)據(jù)發(fā)送時的編碼類型target：用于指定在瀏覽器中哪個frame中顯示服務(wù)器的響應(yīng)HTML<formaction="url"method="get/post"enctype="mime"target="...">......</form>24表單標簽表單標簽<formaction="url"met文本框和多行文本框文本框文本框是一種用來輸入內(nèi)容的表單對象，通常被用來填寫簡單的內(nèi)容，如姓名、地址等。語法格式如下：多行文本框多行文本框（文本域）是一種用來輸入較長內(nèi)容的表單對象。語法格式如下：<inputtype="text"name="..."size="..."maxlength="..."value="..."/><textareaname="..."cols="..."rows="..."wrap="..."></textarea>25文本框和多行文本框文本框<inputtype="text密碼框和隱藏框密碼框密碼框是一種用于輸入密碼的特殊文本域。當訪問者輸入文字時，文字會被星號或其它符號代替，從而隱藏輸入的真實文字。語法格式如下：隱藏域隱藏域是用來收集或發(fā)送信息的不可見元素，網(wǎng)頁的訪問者無法看到隱藏域，但是當表單被提交時，隱藏域的內(nèi)容同樣會被提交。語法格式如下：<inputtype="password"name="..."size="..."maxlength="..."/><inputtype="hidden"name="..."value="..."/>26密碼框和隱藏框密碼框<inputtype="passwor復(fù)選框和單選框復(fù)選框復(fù)選框允許在待選項中選中一個以上的選項。每個復(fù)選框都是一個獨立的元素。

語法格式如下：單選框單選框只允許訪問者在待選項中選擇唯一的一項。該控件用于一組相互排斥的值，組中每個單選按鈕控件的名字相同，用戶一次只能選擇一個選項。語法格式如下：<inputtype="checkbox"name="..."value="..."/><inputtype="radio"name="..."value="..."/>27復(fù)選框和單選框<inputtype="checkbox"文件上傳框、下拉選擇框文件上傳框文件上傳框用于讓用戶上傳自己的文件，文件上傳框與其他文本域類似，但它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。語法格式如下：下拉選擇框下拉選擇框可以讓瀏覽者快速、方便、正確的選擇一些選項，同時可以節(jié)省頁面空間，它通過<select>標簽實現(xiàn)，該標簽用于顯示可供用戶選擇的下拉列表。語法格式如下：<inputtype="file"name="..."size="15"maxlength="100"/><selectname="..."size="..."multiple> <optionvalue="..."selected>...</option> ...</select>28文件上傳框、下拉選擇框文件上傳框<inputtype="表單按鈕表單按鈕主要分為：提交按鈕、復(fù)位按鈕和普通按鈕提交按鈕提交按鈕用來將輸入的表單信息提交到服務(wù)器。復(fù)位按鈕復(fù)位按鈕用來重置表單。普通按鈕普通按鈕通常用來響應(yīng)javascript事件（如onclick），用來調(diào)用相應(yīng)的javascript函數(shù)來實現(xiàn)各種功能。綜合案例：2.D.4register.html<inputtype="submit"name="..."value="..."/><inputtype="reset"name="..."value="..."/><inputtype="button"name="..."value="..."onclick="..."/>29表單按鈕表單按鈕主要分為：提交按鈕、復(fù)位按鈕和普通按鈕<i框架框架優(yōu)點如下：重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁，從而減少了數(shù)據(jù)的傳輸，加快了網(wǎng)頁下載速度。方便制作導(dǎo)航欄。示例：<html><head> <title>標題</title></head><framesetcols[rows]="列或行的寬度占窗口比例或像素,.."> <framesrc="引入網(wǎng)頁的路徑或地址"/> <framesrc="引入網(wǎng)頁的路徑或地址"/>……</frameset></html>框架（Frame）就是瀏覽器窗口的一個區(qū)域，在這個區(qū)域中可以顯示一個單獨的頁面，而不影響另一個框架中的顯示內(nèi)容

。30框架<html>框架（Frame）就是瀏覽器窗口的一個區(qū)域，框架結(jié)構(gòu)基本結(jié)構(gòu)通過標簽<frameset>來定義如何劃分框架，通過設(shè)置<frameset>的“cols/rows”屬性來確定<frameset>的列/行數(shù)以及所占窗口的比例。而每個引入的頁面通過框架標簽<frame>定義，<frame>的src屬性用于設(shè)置所引用網(wǎng)頁的路徑。frameset常用屬性屬性名說明cols用“象素數(shù)”或百分比分割左右窗口，其中

溫馨提示

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

評論

0/150

提交評論