web編程技術(shù)(4-6)

1、第第4章章 超級(jí)鏈接超級(jí)鏈接本章內(nèi)容： 超級(jí)鏈接 電子郵件鏈接 錨記鏈接 圖像鏈接 單圖多鏈接 下載文件鏈接 腳本鏈接 無地址鏈接 網(wǎng)頁文件的最大魅力是超越各個(gè)文件的空間，通過超鏈接相互連接構(gòu)成一個(gè)紛繁復(fù)雜的互聯(lián)網(wǎng)世界。 超鏈接（hyperlink）是一個(gè)網(wǎng)站的精髓，超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁的一部分，它是一種允許一個(gè)網(wǎng)頁同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行鏈接的元素。各個(gè)網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。 超文本具有的鏈接能力，層層鏈接相關(guān)文件，這種具有超級(jí)鏈能力的特性，即稱為超鏈接。 超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動(dòng)畫等，通過它們可以將網(wǎng)站建設(shè)成一個(gè)豐富多彩的多媒體世界

2、。4.1 超級(jí)鏈接的原理超級(jí)鏈接的原理超級(jí)鏈接一定是從一點(diǎn)跳躍到另一點(diǎn)。鏈接的起點(diǎn)稱為源點(diǎn)(Source)，鏈接的終點(diǎn)稱為目標(biāo)點(diǎn)(Target)，從源點(diǎn)指向目標(biāo)點(diǎn)的路徑地址稱為統(tǒng)一資源定位器（URL）。超級(jí)鏈接的目標(biāo)點(diǎn)目標(biāo)點(diǎn)可以是一個(gè)網(wǎng)頁一個(gè)網(wǎng)頁，可以是同一個(gè)網(wǎng)頁同一個(gè)網(wǎng)頁中的不同位置中的不同位置，也可以是一個(gè)電子郵箱電子郵箱等。從鏈接源點(diǎn)指向鏈接目標(biāo)點(diǎn)的路徑地址URL是實(shí)現(xiàn)鏈接的關(guān)鍵。URL不僅可以在單機(jī)上定位文件，而且可以在Internet上全球定位萬維網(wǎng)上的主機(jī)、網(wǎng)站和網(wǎng)頁文件，故稱統(tǒng)一資源定位器。4.2 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記超鏈接標(biāo)記是行內(nèi)標(biāo)記，以開始，以結(jié)束，可以指向網(wǎng)絡(luò)上的任何

3、資源：一張HTML頁面，一幅圖像，一個(gè)聲音或視頻文件等。其主要功能是實(shí)現(xiàn)超級(jí)鏈接。格式：超鏈接名稱屬性：href：定義了這個(gè)鏈接所指的目標(biāo)地址，也就是路徑。Title：給鏈接添加提示信息。Name：給鏈接命名。target:指定鏈接的目標(biāo)窗口，有 4 個(gè)保留的目標(biāo)名稱用作特殊的文檔重定向操作。_blank:在新窗口中打開被鏈接文檔。_self:默認(rèn)。在相同的框架中打開被鏈接文檔。_parent:在父框架集中打開被鏈接文檔。_top:在整個(gè)窗口中打開被鏈接文檔。4.2 超級(jí)鏈接種類超級(jí)鏈接種類4.3.1 普通鏈接普通鏈接普通鏈接就是按照超鏈接的基本格式發(fā)生的鏈接。例:超級(jí)鏈接中的提示信息。 超鏈

4、接的提示信息 計(jì)算機(jī)學(xué)院實(shí)驗(yàn)中心 計(jì)算機(jī)維護(hù)技術(shù)學(xué)習(xí)平臺(tái)(新版) 計(jì)算機(jī)維護(hù)技術(shù)學(xué)習(xí)平臺(tái) 大型儀器共享平臺(tái)江蘇大學(xué)攝影協(xié)會(huì)4.3 超鏈接的種類超鏈接的種類例:超級(jí)鏈接標(biāo)記A的href屬性HTML代碼如下： 超鏈接網(wǎng)易搜狐新浪4.3 超鏈接的種類超鏈接的種類 4.3.2錨記鏈接錨記鏈接 在瀏覽頁面時(shí)，如果頁面篇幅很長(zhǎng)，要不斷的拖動(dòng)滾動(dòng)條，給瀏覽帶來不便，要是瀏覽者既可以從頭閱讀到尾，又可以很快尋找到自己感興趣的特定內(nèi)容進(jìn)行部分閱讀，這個(gè)時(shí)候就可以通過書簽鏈接書簽鏈接來實(shí)現(xiàn)。當(dāng)瀏覽者單擊頁面上的某一“標(biāo)簽標(biāo)簽”，稱為“錨記錨記”，就能自動(dòng)跳到網(wǎng)頁相應(yīng)的位置進(jìn)行閱讀，給瀏覽者帶來方便。 使用使用兩條

5、語句實(shí)現(xiàn)錨記鏈接：設(shè)置錨記和鏈接。兩條語句實(shí)現(xiàn)錨記鏈接：設(shè)置錨記和鏈接。格式：格式： 而超級(jí)鏈接的源點(diǎn)仍然使用的標(biāo)記，不過href的參數(shù)URL改成錨記名。格式：格式： 4.3 超鏈接的種類超鏈接的種類 4.3.3電子郵件鏈接電子郵件鏈接 在HTML頁面中建立E-mail鏈接，用戶單擊鏈接，系統(tǒng)會(huì)自動(dòng)啟動(dòng)默認(rèn)的電子郵件軟件，打開一個(gè)郵件窗口。格式：郵箱地址文本郵箱地址文本例：電子郵件地址為：ma_，在網(wǎng)頁上有“與我聯(lián)系”文字鏈接源點(diǎn)。建立電子郵件鏈接。代碼如下：和我聯(lián)系 4.3 超鏈接的種類超鏈接的種類4.3.4 FTP鏈接鏈接 FTP是一種文件傳輸協(xié)議，它是計(jì)算機(jī)與計(jì)算機(jī)之間能夠相互通信的是一

6、種文件傳輸協(xié)議，它是計(jì)算機(jī)與計(jì)算機(jī)之間能夠相互通信的語言，通過語言，通過FTP可以獲得可以獲得Internet上豐富的資源。上豐富的資源。 基本語法：基本語法： 鏈接文字鏈接文字例：ftp鏈接 這是一個(gè)FTP鏈接： FTP服務(wù)器 4.3 超鏈接的種類超鏈接的種類 4.3.5 下載文件鏈接下載文件鏈接 如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當(dāng)瀏覽器用戶單擊鏈接后，瀏覽器會(huì)自動(dòng)判斷文件的類型，以做出不同情況的處理。 基本語法：基本語法： 鏈接內(nèi)容鏈接內(nèi)容 說明：說明：url代表文件所在的相對(duì)路徑或絕對(duì)路徑 文件類型可以是word文檔、PDF文檔、可執(zhí)行文件、壓縮文件等

7、等。4.3 超級(jí)鏈接的種類超級(jí)鏈接的種類4.3.5 下載文件鏈接下載文件鏈接例題：代碼如下 下載文件鏈接 下載專區(qū) 1. dreamwaver cs3 2. Microsoft office 2003 3. HTML4.3 超級(jí)鏈接的種類超級(jí)鏈接的種類4.3.6 圖像鏈接圖像鏈接圖像超鏈接的建立與文本的超鏈接相似，只是選擇的不是文本而是圖片。圖像連接可以實(shí)現(xiàn)單圖單鏈接和單圖多鏈接。1. 單圖單鏈接單圖單鏈接：一個(gè)圖像只能加一個(gè)a標(biāo)簽，做一個(gè)鏈接 格式： 例： 2.單圖多鏈接單圖多鏈接 單圖多鏈接：如果把一幅圖像分成多個(gè)區(qū)域，每個(gè)區(qū)域被稱為一個(gè)熱點(diǎn)，每個(gè)熱點(diǎn)指向不同的超鏈接。 格式如下：說明：

8、單圖多鏈接主要由兩部分：圖像部分和鏈接部分，二者用usemap=map 名稱 來關(guān)聯(lián)。 標(biāo)記，插入一個(gè)名為zgdt.jpg圖片，另一個(gè)是名為DT的標(biāo)記。在標(biāo)記中使用usemap=“#DT”來實(shí)現(xiàn)關(guān)聯(lián)。 定義熱點(diǎn)區(qū)域名稱 指定每個(gè)熱點(diǎn)區(qū)域 Shape指定形狀 rect（矩形，4個(gè)參數(shù)）, poly（多邊形，2n個(gè)參數(shù)）, circle（圓，三個(gè)參數(shù)） Coords確定形狀 href指定鏈接的位置注：圖像地圖有兩個(gè)弊端，建議大家盡量不要使用。1.圖像太多，加載速度慢2.搜索引擎在圖像上的文字搜索不到4.3 超級(jí)鏈接的種類超級(jí)鏈接的種類4.3.7腳本腳本鏈接鏈接在網(wǎng)頁上實(shí)行某種動(dòng)態(tài)功能，可用超鏈接實(shí)

9、現(xiàn)。鏈接一個(gè)腳本。例：網(wǎng)頁中的腳本鏈接。代碼如下： 腳本鏈接感謝4.3 超級(jí)鏈接的種類超級(jí)鏈接的種類4.3.8 空空鏈接鏈接在在a鏈接的鏈接的href屬性處不填寫任何數(shù)值，只是用屬性處不填寫任何數(shù)值，只是用“#”賦值。賦值。 例：當(dāng)單擊“檢驗(yàn)” 字時(shí)，執(zhí)行Checkit()事件處理函數(shù)。代碼如下：檢驗(yàn)例：圖片鏈接 圖片鏈接 江蘇大學(xué)景色 img src=webimgjd6.jpg width=160 height=120 alt=江蘇大學(xué)夜景 第第5章章 表格與框架表格與框架本章內(nèi)容： 表格Table、tr、td標(biāo)記 表格的背景、邊框 合并單元格 表格的嵌套 布局表格的應(yīng)用 創(chuàng)建框架 框架的嵌

10、套 表格在網(wǎng)站應(yīng)用中非常廣泛，幾乎所有的表格在網(wǎng)站應(yīng)用中非常廣泛，幾乎所有的 HTML頁面中都或多或少地采用表格，表格頁面中都或多或少地采用表格，表格可以方便靈活地實(shí)現(xiàn)對(duì)網(wǎng)頁的排版，可以把可以方便靈活地實(shí)現(xiàn)對(duì)網(wǎng)頁的排版，可以把相互關(guān)聯(lián)的信息元素集中定位，使瀏覽頁面相互關(guān)聯(lián)的信息元素集中定位，使瀏覽頁面的人一目了然，賞心悅目。所以說要制作好的人一目了然，賞心悅目。所以說要制作好網(wǎng)頁，就要學(xué)好表格，熟練掌握和運(yùn)用表格網(wǎng)頁，就要學(xué)好表格，熟練掌握和運(yùn)用表格的各種屬性。的各種屬性。5.1 創(chuàng)建表格創(chuàng)建表格5.1.1 表格的基本構(gòu)成表格的基本構(gòu)成table、tr、td表格的標(biāo)記為，表格行標(biāo)記為、單元格標(biāo)

11、記為。表格標(biāo)記的格式為： . . . 5.1 創(chuàng)建表格創(chuàng)建表格5.1.1 表格的基本構(gòu)成表格的基本構(gòu)成table、tr、td例: 寫出一個(gè)兩行、兩列的邊框（border）寬1像素的表格的標(biāo)記。代碼：         5.1 創(chuàng)建表格創(chuàng)建表格5.1.2 設(shè)置表格的標(biāo)題設(shè)置表格的標(biāo)題 caption放在tr標(biāo)簽之前，放在table的內(nèi)部使用例:caption標(biāo)記的使用。代碼： caption標(biāo)記 熱門圖書5.1 創(chuàng)建表格創(chuàng)建表格 圖書名稱 單價(jià) 作者 網(wǎng)頁設(shè)計(jì) 21.20 王大海 5.1 創(chuàng)建表格創(chuàng)建表格5.1.3 表格的表頭標(biāo)記表格的表頭標(biāo)記 th例:表格

12、的標(biāo)記。代碼： th標(biāo)記 熱門圖書5.1 創(chuàng)建表格創(chuàng)建表格 圖書名稱 單價(jià) 作者 網(wǎng)頁設(shè)計(jì) 21.20 王大海 標(biāo)簽標(biāo)簽:指表格的第一指表格的第一行，文字樣式為居中、加行，文字樣式為居中、加粗顯示。粗顯示。5.1 創(chuàng)建表格創(chuàng)建表格5.1.4 表格的結(jié)構(gòu)表格的結(jié)構(gòu)為了清楚區(qū)分表格結(jié)構(gòu)，將一個(gè)表格分三個(gè)部分在網(wǎng)頁上顯示出來，HTML語言規(guī)定了、3個(gè)標(biāo)簽分別對(duì)應(yīng)于表格的表首、表主體和表尾?；菊Z法： 例: thead、 tbody、 tfoot的使用方法。代碼如下： 表格結(jié)構(gòu) 圖書名稱 單價(jià) 作者 網(wǎng)頁設(shè)計(jì) 21.20 王大海 c語言程序設(shè)計(jì) 25.00 白云 Flex入門 31.20 孫旺 歡迎購

13、買 5.1 創(chuàng)建表格創(chuàng)建表格練習(xí)：創(chuàng)建如下表格，寫出代碼：5.2 設(shè)置表格的屬性設(shè)置表格的屬性表格是網(wǎng)頁布局中的重要元素，它有豐富的屬性，可以對(duì)其進(jìn)行相關(guān)設(shè)置。5.2.1 設(shè)置表格的寬度與高度設(shè)置表格的寬度與高度對(duì)于表格（table）、行（tr）和單元格（td）標(biāo)記都可以設(shè)置寬度（width）和高度（height）方法是一樣的。格式： 說明： 表格的寬度和高度的值可以是像素（px），也可以是百分比(%)，如果不指定，則默認(rèn)寬度自適應(yīng)。5.2 設(shè)置表格的屬性設(shè)置表格的屬性5.2.2 設(shè)置背景設(shè)置背景表格可以設(shè)置背景顏色(bgcolor)和背景圖像(background)。格式： 說明： 如果同時(shí)

14、設(shè)置了表格的背景色和背景圖像，只能顯示背景圖像，看不見背景顏色。5.2 設(shè)置表格的屬性設(shè)置表格的屬性5.2.3 設(shè)置邊框設(shè)置邊框可以設(shè)置表格邊框的寬度(border)、顏色(bordercolor)。格式： 說明： 寬度值單位為像素px。5.2 設(shè)置表格的屬性設(shè)置表格的屬性5.2.4設(shè)置表格單元格間距單元格的間距通過cellspacing屬性可以調(diào)整表格的單元格和單元格之間的間距，使得表格布局不會(huì)顯得過于緊湊。一般不設(shè)該屬性，或者將cellspacing=“0”?；菊Z法： 5.2 設(shè)置表格的屬性設(shè)置表格的屬性5.2.5 設(shè)置表格單元格邊距單元格邊距單元格邊距是指單元格中的內(nèi)容與單元格邊框的距

15、離。基本語法：5.2 設(shè)置表格的屬性設(shè)置表格的屬性5.2.6 設(shè)置對(duì)齊方式設(shè)置對(duì)齊方式表格標(biāo)記中可以設(shè)置對(duì)齊方式，以決定表格在其父容器中的水平位置。對(duì)齊方式由屬性align決定，它的取值可以為left、center和right。格式： 5.3 編輯表格編輯表格5.3.1 水平合并單元格水平合并單元格水平方向合并單元格實(shí)際上是將不同列（column）上的單元格合并，屬性colspan就是指合并時(shí)水平方向上跨越的列數(shù)。格式： 5.3 編輯表格編輯表格5.3.2 垂直合并單元格垂直合并單元格垂直方向合并單元格實(shí)際上是將不同行（row）上的單元格合并，屬性rowspan就是指合并時(shí)垂直方向上跨越的行數(shù)

16、。 格式5.3 編輯表格編輯表格5.3.3 表格嵌套表格嵌套表格嵌套就是根據(jù)插入元素的需要，在一個(gè)表格的某個(gè)單元格里再插入一個(gè)若干行和列的表格。對(duì)嵌套表格，可以像對(duì)任何其他表格一樣進(jìn)行格式設(shè)置，但是其寬度受它所在單元格的寬度的限制。利用表格的嵌套，一方面可以編輯出復(fù)雜而精美的效果，另一方面可根據(jù)布局需要來實(shí)現(xiàn)精確的編排。不過，需要注意的是，嵌套層次越多，網(wǎng)頁的載入速度就會(huì)越慢。5.3.4 用表格布局網(wǎng)頁用表格布局網(wǎng)頁早期的網(wǎng)頁都是用表格進(jìn)行布局的。使用表格布局的最好工具就是Dreamweaver 。使用Dreamweaver ，可以方便地繪制“布局表格”和“布局單元格”以定義文檔的設(shè)計(jì)區(qū)域。而

17、且繪制好的單元格還可以隨意放大、縮小和移動(dòng)位置。后臺(tái)的代碼由系統(tǒng)自動(dòng)編寫和修改。這些代碼全部是、和標(biāo)記。5.4 框架框架5.4.1 創(chuàng)建框架創(chuàng)建框架框架技術(shù)可以將瀏覽器分割成多個(gè)小窗口，并且在每個(gè)小窗口中，可以顯示不同的網(wǎng)頁，這樣我們就可以很方便的在瀏覽器中瀏覽不同的網(wǎng)頁效果。當(dāng)瀏覽器分割成多個(gè)窗口后，各窗口就會(huì)扮演不同的角色，實(shí)現(xiàn)不同的功能。舉例來說，有些論壇就是把瀏覽器分割成兩個(gè)窗口，一個(gè)窗口主要來顯示帖子的標(biāo)題，而另一個(gè)窗口會(huì)顯示具體的內(nèi)容。這樣的設(shè)計(jì)顯然比起一個(gè)窗口的網(wǎng)頁在瀏覽時(shí)方便得多，而且用戶也可以任意的切換題目?？蚣芸蚣芏x語句在定義語句在head與與body標(biāo)記之間標(biāo)記之間5.

18、4框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記 框架的基本結(jié)構(gòu)主要分為框架和框架集兩個(gè)部分。 它是利用標(biāo)記與標(biāo)記來定義。其中標(biāo)記用于定義框架，而標(biāo)記則用于定義框架集。 1.框架標(biāo)記格式：其中：Src：框架中顯示的網(wǎng)頁的URL地址。Name：框架名稱，這是每個(gè)框架的標(biāo)識(shí)。5.4 框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記 常見的對(duì)窗口的分割包括：水平分割、垂直分割和嵌套分割。具體采用哪種分割方式，取決于實(shí)際需要，可用標(biāo)記中的rows（水平分割）或cols（垂直分割）屬性來進(jìn)行分割。2.框架集標(biāo)記框架集標(biāo)記格式：其中： rows 是將窗口分成上、下兩個(gè)框架。（水平分割

19、）是將窗口分成上、下兩個(gè)框架。（水平分割） Cols是將窗口左、右分割成框架（垂直分割）。是將窗口左、右分割成框架（垂直分割）。 如果分成多個(gè)框架，各個(gè)框架的寬度值間用逗號(hào)隔開。這個(gè)值還可以用“%”,”*”表示。 5.4 框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記3.水平分割水平分割 rows屬性可定義一個(gè)水平分割的窗口框架。格式： 設(shè)置高度數(shù)值的方式有兩種：采用整數(shù)設(shè)置，單位為像素（px），語法如下：用百分比設(shè)置，語法如下：5.4 框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記例：水平分割例：水平分割 采用整數(shù)設(shè)置窗口的水平分割5.4 框架框架5.4.2 fram

20、e和和frameset標(biāo)記標(biāo)記4.垂直分割 cols屬性可定義一個(gè)垂直分割的窗口框架。格式： 將上述例子中的中的rows改成cols5.4 框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記 在實(shí)際應(yīng)用中，“廠”字型框架使用極為廣泛?！皬S”字型的網(wǎng)頁就是窗口中包含水平和垂直分割，如圖所示，實(shí)現(xiàn)“廠”字型框架需要對(duì)窗口進(jìn)行嵌套分割。5.4框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記“廠”字型框架代碼：窗口的嵌套分割5.4 框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記5.框架的邊框 在標(biāo)記中，可運(yùn)用border屬性控制分割窗口框架的邊框。 基本語法：語法說明：n

21、為整數(shù)，代表此窗口框架的寬度，單位為像素(px)。 5.4 框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記“廠”字型框架代碼：框架的邊框控制 5.4 框架框架5.4.2 frame和和frameset標(biāo)記標(biāo)記5.框架的隱藏 frameborder屬性用于控制窗口框架的周圍是否顯示框架，此屬性可使用在標(biāo)記與標(biāo)記中，如果使用在標(biāo)記內(nèi)時(shí)，可控制窗口框架的所有子窗口，如果用在標(biāo)記中，則只能控制該標(biāo)記所代表的子窗口?；菊Z法：語法說明：0表示不顯示邊框，1表示顯示邊框，默認(rèn)值為1。5.4 框架框架5.4.3 框架超鏈接的使用框架超鏈接的使用框架的作用主要是實(shí)現(xiàn)導(dǎo)航顯示，即在某個(gè)框架窗口設(shè)置超

22、級(jí)鏈接，而在另一個(gè)窗口中顯示所鏈接的目的網(wǎng)頁的內(nèi)容。兩個(gè)要點(diǎn)兩個(gè)要點(diǎn)：每個(gè)框架要有一個(gè)名稱，超鏈接中要使用target屬性，指明目的網(wǎng)頁將出現(xiàn)在其中的框架。 例如：若某框架窗口的名稱為“main”，另一窗口中一個(gè)超級(jí)鏈接，希望鏈接后的目標(biāo)網(wǎng)頁xygk.html出現(xiàn)在“main”窗口中。則超級(jí)鏈接代碼如下：學(xué)院概況指定子窗口顯示網(wǎng)頁：指定子窗口顯示網(wǎng)頁：src屬性是用來指定要導(dǎo)入到某個(gè)子窗口的HTML文件的位置?；菊Z法：基本語法： 指定子窗口顯示網(wǎng)頁 定義子窗口名稱：定義子窗口名稱： name屬性用來指定窗口的名稱，當(dāng)完成子窗口的名稱定義后，可指定超鏈接的鏈接目標(biāo)顯示到網(wǎng)頁的某個(gè)子窗口。 基本

23、語法： 指定子窗口的名稱 控制子窗口滾動(dòng)條控制子窗口滾動(dòng)條： scrolling屬性用于控制窗口框架中是否顯示滾動(dòng)條，使用此屬性，可以避免HTML文件因內(nèi)容過多而無法完全顯示。此屬性用于標(biāo)記中。 基本語法： 語法說明： yes表示為顯示滾動(dòng)條，no表示不顯示滾動(dòng)條，auto為自動(dòng)設(shè)置?？刂瓶蚣軡L動(dòng)條 調(diào)整子窗口的尺寸：調(diào)整子窗口的尺寸： 標(biāo)記的rows和cols屬性來水平或垂直分割窗口。但設(shè)置后，各窗口框架的大小并非固定無法更改，當(dāng)我們想更改窗口框架大小時(shí)，可以將鼠標(biāo)指針移到要更改的框架上，待指針呈現(xiàn)雙箭頭符號(hào)時(shí)，再用鼠標(biāo)進(jìn)行拖拽，就可調(diào)整窗口的大小。 當(dāng)然我們不希望用戶能隨意地改變子窗口的大

24、小，那么這時(shí)我們可以在標(biāo)記中，添加noresize屬性，語法如下： 設(shè)置子窗口的邊距：設(shè)置子窗口的邊距： 網(wǎng)頁的邊距可以通過“margin”來設(shè)定，那么框架和網(wǎng)頁一樣也可設(shè)置邊距，可以利用標(biāo)記中的marginwidth屬性來設(shè)置框架左右邊緣的寬度；marginheight屬性可以設(shè)置框架上下邊緣的寬度。 基本語法： 語法說明： 在HTML文件中，利用框架標(biāo)記中的marginwidth和marginheight屬性可以設(shè)置相應(yīng)子框架的左右和上下邊緣的空白。例：要求在框架的每個(gè)窗口中顯示我們開發(fā)的網(wǎng)站：我們開發(fā)的網(wǎng)站 代碼如下：后臺(tái)管理頁面例：在指定的框架中顯示指定的頁面5.4 框架框架5.4.4

25、 內(nèi)嵌框架標(biāo)記內(nèi)嵌框架標(biāo)記iframe（浮動(dòng)框架）如果我們并不想分割頁面，而只是想將鏈接的內(nèi)容出現(xiàn)在指定的小窗口中，這時(shí)可以使用內(nèi)嵌框架，內(nèi)嵌框架的標(biāo)記是iframe。格式： 其中： Name:內(nèi)嵌框架的名稱。語法說明：與框架不同的是，浮動(dòng)框架可以包含在與框架不同的是，浮動(dòng)框架可以包含在標(biāo)記中標(biāo)記中。例：使用框架實(shí)現(xiàn)江蘇大學(xué)各單位的導(dǎo)航設(shè)計(jì).第第6章章 表單與特殊對(duì)象表單與特殊對(duì)象本章內(nèi)容： 表單標(biāo)記 input表單標(biāo)記 列表/菜單 文本域 滾動(dòng)字幕 object標(biāo)記6.1創(chuàng)建表單創(chuàng)建表單表單是網(wǎng)頁的重要元素表單是網(wǎng)頁的重要元素。當(dāng)我們?cè)诰W(wǎng)上輸入用戶名稱和密碼登錄網(wǎng)站的時(shí)候，當(dāng)我們申請(qǐng)電子郵箱

26、填寫表格的時(shí)候就已經(jīng)在使用表單了。表單的作用表單的作用就是收集用戶信息，將這些信息提交給服務(wù)器，從而實(shí)現(xiàn)用戶與服務(wù)器之間的交互。表單有兩個(gè)重要組成部分：一是描述表單的HTML源代碼；二是用于處理用戶在表單域中輸入的信息的服務(wù)器端應(yīng)用程序客戶端腳本，如ASP.NET、JSP、PHP等。 表單使用的標(biāo)記是成對(duì)出現(xiàn)的，在首標(biāo)記和尾標(biāo)記之間的部分就是一個(gè)表單。 6.1創(chuàng)建表單創(chuàng)建表單6.1.1 表單標(biāo)記格式：表單中三個(gè)重要的屬性： name:表單的名稱。命名后就可以用腳本語言對(duì)它進(jìn)行控制。action：動(dòng)作屬性，指定處理表單的服務(wù)端的應(yīng)用程序。method：方法屬性，指定表單向服務(wù)器提交數(shù)據(jù)的方法。I

27、d：表單的標(biāo)識(shí)符。6.2 表單對(duì)象表單對(duì)象6.2.1 文本框文本框文本框用來輸入文本數(shù)據(jù)。用input標(biāo)記，類型(type)為text。格式： 其中：type:用戶輸入值的類型。不可省略用戶輸入值的類型。不可省略。name:文本框的名稱。這實(shí)際上是個(gè)變量名變量名，文本框中輸入的值將賦給該變量。不可省略不可省略。size:文本框的寬度，用字符個(gè)數(shù)n來表示?？墒÷?。maxlength:文本框中最多輸入的文字?jǐn)?shù)m?？墒÷浴alue：文本框的值，通過value屬性指定的值指定當(dāng)表單首次載入時(shí)顯示在輸入框中的值。可省略。6.2 表單對(duì)象表單對(duì)象6.2.1 文本框文本框例：表單中輸入姓名，文本框名稱為n

28、ame，寬度為20個(gè)字符。html代碼如下: 輸入姓名 姓名: 6.2 表單對(duì)象表單對(duì)象6.2.2密碼框密碼框密碼框用來輸入密碼。密碼框用來輸入密碼。用input標(biāo)記，類型(type)為password。密碼框與文本框的區(qū)別，是用戶輸入數(shù)據(jù)時(shí)屏幕上只顯示“*”，看不見內(nèi)容。格式：其中： name:密碼框的名稱。即密碼變量，輸入的密碼的值就保存在該變量中，不可省略。 size:密碼框的寬度，n為字符數(shù)。 maxlength:輸入的最多字符數(shù)m，可以限制字符串的最大長(zhǎng)度。6.2 表單對(duì)象表單對(duì)象6.2.2密碼框密碼框例：表單中輸入密碼。密碼框的名稱為pwd，最大寬度為18個(gè)字符。html代碼： 輸

29、入密碼 姓名: 密碼: 6.2 表單對(duì)象表單對(duì)象6.2.3 單選紐單選紐單選按鈕用來讓瀏覽者進(jìn)行單一選擇。單選鈕用單選按鈕用來讓瀏覽者進(jìn)行單一選擇。單選鈕用input標(biāo)標(biāo)記，類型記，類型(type)為為“radio”。格式： 提提示信息示信息其中：name:單選按鈕的名稱，即提交數(shù)據(jù)的變量名。若是一組單選鈕，則每個(gè)單選鈕的名稱都應(yīng)相同每個(gè)單選鈕的名稱都應(yīng)相同，大家共用一個(gè)名稱，用同一個(gè)變量向服務(wù)器提供數(shù)據(jù)。不可省略。value：?jiǎn)芜x鈕的取值。當(dāng)選中該單選鈕時(shí)，這個(gè)值就賦給name變量傳送給服務(wù)器。不可省略。checked：默認(rèn)情況下，該對(duì)象被選中。提示信息：?jiǎn)芜x鈕旁的提示信息，注明該單選鈕的含

30、義。6.2 表單對(duì)象表單對(duì)象6.2.3 單選紐單選紐例：?jiǎn)芜x鈕的使用,html代碼：輸入密碼 姓名: 密碼: 性別： 保密保密 男男 女女 6.2 表單對(duì)象表單對(duì)象6.2.4 復(fù)選框復(fù)選框格式： 提示信息其中：name:復(fù)選框名稱。實(shí)際上是傳送給服務(wù)器的變量名稱。一組復(fù)選框中各個(gè)復(fù)選框的名稱不能相同一組復(fù)選框中各個(gè)復(fù)選框的名稱不能相同。一個(gè)變量只能賦一個(gè)值。要想同時(shí)選中多個(gè)選項(xiàng)，向服務(wù)器提交多個(gè)值，就應(yīng)當(dāng)使用多個(gè)變量，即用多個(gè)復(fù)選框名稱。value:復(fù)選框的取值。不可省略。提示信息：復(fù)選框旁提示信息，以便于用戶的選擇。例：復(fù)選框的應(yīng)用： 輸入密碼 姓名: 密碼: 性別： 保密 男 女 愛好：

31、讀書游泳音樂旅游 6.2 表單對(duì)象表單對(duì)象6.2.5下拉列表下拉列表格式： 提示信息1 提示信息2. 提示信息3其中：name: 下拉列表名稱，即向服務(wù)器提交信息的變量名，不可省。value: 列表項(xiàng)值。若某選項(xiàng)被選中，該列表項(xiàng)的值將賦給下拉列表變量，并傳送到服務(wù)器。selected:默認(rèn)被選中的選項(xiàng)。提示信息：出現(xiàn)在屏幕上以供用戶選擇的列表項(xiàng)內(nèi)容。Size，multiple是可選項(xiàng)。指定Size屬性下拉列表變成列表，指定multiple變成多選列表。下拉列表的應(yīng)用： 輸入密碼 姓名: 密碼: 性別： 男 女 愛好： 讀書游泳音樂旅游 籍貫： 陜西河南山西河北江蘇 6.2 表單對(duì)象表單對(duì)象6.

32、2.6 文本域文本域 文本域?qū)嶋H上是多行文本框。文本域?qū)嶋H上是多行文本框。文本域一般用在備注、說明等地方。文本域使用標(biāo)記。格式：其中：name:文本域的名稱，即提交數(shù)據(jù)的變量名稱。cols:文本域一行中可容納字符的個(gè)數(shù)，即文本域的寬度。rows:文本域中可顯示字符的行數(shù)。若顯示不下可移動(dòng)滾動(dòng)條顯示。例：給網(wǎng)頁中添加文本域。要求每行可輸入30個(gè)字符，同時(shí)顯示3行。 輸入密碼 姓名: 密碼: 性別： 男 女 愛好： 讀書游泳音樂旅游 籍貫： 陜西河南山西河北江蘇 備注: 6.2 表單對(duì)象表單對(duì)象6.2.7提交按鈕和重置按鈕提交按鈕和重置按鈕 表單數(shù)據(jù)的提交要靠“提交”按鈕。提交按鈕用提交按鈕用in

33、put標(biāo)記，類型（標(biāo)記，類型（type）為為submit。格式：其中：value:是提交按鈕上面的文字，該文字可以隨便寫，默認(rèn)值為“提交”。name：提交按鈕的名稱。 表單數(shù)據(jù)重新錄入時(shí)應(yīng)先清除表單中的數(shù)據(jù)。這個(gè)工作就由“重置”按鈕完成。重置重置按鈕使用按鈕使用input標(biāo)記，類型（標(biāo)記，類型（type）為）為reset。格式：格式： 其中：value:重置按鈕上面的文字，用戶可以隨便寫，默認(rèn)值為重置按鈕上面的文字，用戶可以隨便寫，默認(rèn)值為“重置重置”。6.2 表單對(duì)象表單對(duì)象6.2.8按鈕按鈕表單中還有一個(gè)普通按鈕，使用表單中還有一個(gè)普通按鈕，使用input標(biāo)記，類型標(biāo)記，類型（type）為

34、）為button。按鈕的作用，主要是當(dāng)單擊事件發(fā)生時(shí)執(zhí)行一段Javascript代碼，實(shí)現(xiàn)某種動(dòng)作。格式： 其中：value:顯示在按鈕上的的文字，可以由用戶隨便輸入。onclick:單擊事件。Onclick事件是設(shè)置當(dāng)鼠標(biāo)按下時(shí)所進(jìn)行的處理。name:按鈕的名稱。 輸入密碼 姓名: 密碼: 性別： 男 女 愛好： 讀書游泳音樂旅游 籍貫： 陜西河南山西河北江蘇 備注: 6.2 表單對(duì)象表單對(duì)象6.2.9 圖像域圖像域圖像域是指能起提交按鈕作用的圖片。如果用戶覺得表單中用提交按鈕比較單調(diào)，則可以用圖像域。圖像域也能提交表單，但是表面上它是一幅圖像，不像按鈕那樣單調(diào)。圖像域使用input標(biāo)記，類

35、型（type）是image。格式：其中：src:圖像的URL地址。name：圖像域的名稱6.2 表單對(duì)象表單對(duì)象6.2.10 隱藏域隱藏域隱藏域在屏幕上不可見。引入隱藏域的目的是為了收集引入隱藏域的目的是為了收集和發(fā)送信息，以便于服務(wù)器端的程序來處理和發(fā)送信息，以便于服務(wù)器端的程序來處理。當(dāng)提交表單時(shí)，隱藏域中的信息也一同被提交。隱藏域使用input標(biāo)記，類型（type）為hidden。格式： 其中：name:隱藏域的名稱，也是變量名，服務(wù)器端就是接受該變量的值。value：隱藏域的值。該值是由name變量名攜帶提交給服務(wù)器的。6.2 表單對(duì)象表單對(duì)象6.2.11 文件域文件域文件域標(biāo)記是上傳

36、文件時(shí)使用的文件域標(biāo)記是上傳文件時(shí)使用的。文件域由一個(gè)文本框和一個(gè)文件域由一個(gè)文本框和一個(gè)“瀏瀏覽覽”按鈕組成的。按鈕組成的。用戶可以將上傳文件的路徑、文件名直接輸入到文本框，也可以單擊“瀏覽”按鈕選擇輸入文件地址。文件域使用文件域使用input標(biāo)記，類型（標(biāo)記，類型（type）為）為file。格式：其中：n:文本框的寬度。m:文本框中可以輸入的最多字符。 注意：如果表單中包含file類型的輸入，為了實(shí)現(xiàn)通過HTTP上傳文件，在表單標(biāo)記中需要加入編碼方案屬性enctype=“multipart/form-data”。例： 提交論文: 練習(xí)：寫出如下用戶注冊(cè)代碼6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊

37、對(duì)象6.3.1 object 標(biāo)記標(biāo)記object標(biāo)記功能很強(qiáng)，它可以播放音頻、視頻、播放音頻、視頻、flash動(dòng)畫，可以在網(wǎng)頁中插入特殊對(duì)象，運(yùn)行擴(kuò)展名動(dòng)畫，可以在網(wǎng)頁中插入特殊對(duì)象，運(yùn)行擴(kuò)展名為為.exe、.com等可執(zhí)行文件等可執(zhí)行文件。也可以像普通HTML標(biāo)記那樣插入圖像、設(shè)置超級(jí)鏈接。6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.3.1 object 標(biāo)記標(biāo)記1.播放聲音例: object播放音樂。html代碼如下： 6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.3.1 object 標(biāo)記標(biāo)記2.播放視頻例:用object播放視頻。html代碼如下：6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.

38、3.1 object 標(biāo)記標(biāo)記3.播放flv視頻例:用object播放視頻。html代碼如下： 注意：注意：如果你僅需要播放一個(gè)FLV文件，那么只要把要播放的flv文件和flvplayer.swf復(fù)制到同一個(gè)目錄內(nèi)。例如： 6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.3.1 object 標(biāo)記標(biāo)記4.插入圖像例:用object插入圖像。html代碼如下：6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.3.1 object 標(biāo)記標(biāo)記5.超級(jí)鏈接例: 用object超級(jí)鏈接。html代碼如下：6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.3.1 object 標(biāo)記標(biāo)記6.運(yùn)行可執(zhí)行文件例:用object執(zhí)行可執(zhí)行文件。在頁面中插入計(jì)算器。x.Run(calc.exe)6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.3.1 object 標(biāo)記標(biāo)記例:用object執(zhí)行可執(zhí)行文件。在頁面中插入日歷6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.3.1 object 標(biāo)記標(biāo)記7.插入flash動(dòng)畫例:用object 插入flash動(dòng)畫。html代碼如下：6.3網(wǎng)頁中的特殊對(duì)象網(wǎng)頁中的特殊對(duì)象6.3.2 marquee標(biāo)記標(biāo)記滾動(dòng)字幕標(biāo)記。能在屏幕上形成滾動(dòng)的字幕