web_《web高級程序設(shè)計教程》第2章__web程序設(shè)計的基礎(chǔ)

1、第2章 WEB程序設(shè)計的基礎(chǔ),本章學(xué)習(xí)目標(biāo)本章主要講解HTML語言、CSS和xml語言。通過本章學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：Ø         HTML語言基本知識Ø         CssØ    

2、     Xml語言基礎(chǔ)知識 2.1 HTML語言 2.2 級聯(lián)式樣式表（CSS）,2.1 HTML語言,2.1.1 HTML 語言的結(jié)構(gòu) HTML（超文本標(biāo)記語言）是一種描述文檔結(jié)構(gòu)的標(biāo)注語言，它使用一些約定的標(biāo)記對WWW上的各種信息進(jìn)行標(biāo)注。當(dāng)用戶瀏覽WWW上的信息時，瀏覽器會自動解釋這些標(biāo)記的含義，并按照一定的格式在屏幕上顯示這些被標(biāo)記的文件。HTML的優(yōu)點

3、是其跨平臺性。即任何可以運行瀏覽器的計算機都能閱讀并顯示HTML文件，不管其操作系統(tǒng)是什么，并且顯示結(jié)果相同。HTML文件是標(biāo)準(zhǔn)的ASCII文件，且其后綴名為htm或html的文件。HTML文件看起來像是加入了許多被稱為鏈接簽（tag）的特殊字符串的普通文本文件。從結(jié)構(gòu)上講，HTML文件由元素（element）組成，組成HTML文件的元素有許多種，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。絕大多數(shù)元素是“容器”， 即它有起始標(biāo)記和結(jié)尾標(biāo)

4、記。元素的起始標(biāo)記叫做起始鏈接簽（start tag），元素結(jié)束標(biāo)記叫做結(jié)尾鏈接簽（end tag），在起始鏈接簽和結(jié)尾鏈接簽中間的部分是元素體。每一個元素都有名稱和許多可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內(nèi)標(biāo)明。下面來看一個HTML文件，它在瀏覽器中顯示的結(jié)果如圖2-1所示。,,武漢工業(yè)學(xué)院這是一HTML的測試文件,圖2-1 一個HTML例子在瀏覽器的顯示結(jié)果,,從上例中我們可以看出，HTML文件僅由一個HTM

5、L元素組成， 即文件以開始，以結(jié)尾，文件其余部分都是 HTML的元素體。而HTML元素的元素體又由頭元素…、體元素…和一些注釋組成。頭元素和體元素的元素體又由其它的元素、文本及注釋組成。在上例中第五行是體元素的起始鏈接簽，它標(biāo)明體元素從此開始。因為所有的鏈接簽都具有相同的結(jié)構(gòu)，所以應(yīng)該仔細(xì)分析這個鏈接簽的各個部分，以便讀者對鏈接簽的寫法有一個大概的了解。其格式為： 內(nèi)容 在HTML中有三個字符具有特殊的意義，即：（表示一個標(biāo)簽的

6、結(jié)束），和&（表示轉(zhuǎn)義序列的開始）。每個轉(zhuǎn)義字符都以“&”開始，以分號“；”結(jié)束。,,元素名也叫鏈接簽名。需要注意的是：（1）< 和起始鏈接簽之間不能有空格。（2）元素名稱不區(qū)分大小寫。 （3）一個元素可以有多個屬性，屬性及其屬性值不區(qū)分大小寫，且各個屬性用空格分開。HTML文件中，有些元素只能出現(xiàn)在頭元素中，而絕大多數(shù)元素只能出現(xiàn)在體元素中。在頭元素中的元素表示的是該HTML文件的一般信息，比如文件名稱，

7、是否可檢索等等。這些元素書寫的次序是無關(guān)緊要的，它只表明該HTML有還是沒有該屬性。與此相反，出現(xiàn)在體元素中的元素是次序敏感的，改變元素在HTML文件中的次序會改變該HTML文件的輸出形式。,,2.1.2 構(gòu)成網(wǎng)頁的基本元素 下面介紹一下常用的有關(guān)Web頁文本格式的標(biāo)記。1. 標(biāo)記標(biāo)記用來給網(wǎng)頁命名，網(wǎng)頁的名稱寫在與標(biāo)記之間，顯示在瀏覽器的標(biāo)題欄中。例如，在圖2-1中所示的瀏覽器頁面中，其標(biāo)題欄所顯示的“武漢工業(yè)學(xué)院”是在HT

8、ML文件中的由武漢工業(yè)學(xué)院所定義的。 2. 標(biāo)記…到…標(biāo)題元素有6種，用于表示文章中的各種題目。字體大小到順序減小。下面這個例子中分別使用了到的標(biāo)題。其HTML文件如下所示，在瀏覽器中的顯示效果如圖2-2所示。,,,圖2-2 標(biāo)記,, 這是一個測試網(wǎng)頁 標(biāo)題測試標(biāo)題測試標(biāo)題測試,,標(biāo)題測試標(biāo)題測試標(biāo)題測試 3. 預(yù)格式化文本標(biāo)記HTML的輸出是基于窗口的，因而HTML文件在輸

9、出時都是要重新排版的，即把文本上任何額外的字符（如空格、制表符和回車符）都忽略，若確實不需要重新排版的內(nèi)容，可以用…通知瀏覽器。在圖2-3和圖2-4中顯示了有無預(yù)格式化文本標(biāo)記的對比。下面是圖2-3和圖2-4的HTML源文件。,,這是一個測試網(wǎng)頁 HTML是一種描述文檔結(jié)構(gòu)的標(biāo)注語言，它使用一些約定的標(biāo)記對各種信息進(jìn)行標(biāo)注。 ,,,圖2-3 有標(biāo)記,圖2-4 無標(biāo)記,,4. 和標(biāo)記

10、用于強制換行。 表示一個段落的開始。一般可不用。5. 標(biāo)記 這幾個標(biāo)記都是用來修飾所包含文檔的。標(biāo)記使文本加粗；標(biāo)記使文本傾斜；標(biāo)記給文本加下劃線；標(biāo)記給文本加刪除線；標(biāo)記使文本字體加重。下面給出一個HTML源文件，其顯示結(jié)果如圖2-5所示。這是一個測試網(wǎng)頁,,HTML是一種描述文檔結(jié)構(gòu)的標(biāo)注語言，它使用一些約定的標(biāo)記對各種信息進(jìn)行標(biāo)注。,,,圖2-5 文檔標(biāo)記的修飾,6. 標(biāo)記…用來

11、修改字體和顏色。其中COLOR屬性指定文字顏色，顏色的表示可以用6位十六進(jìn)制代碼，如；SIZE屬性指定相對尺寸。另外， 如果用戶想要設(shè)置網(wǎng)頁的背景色和文字顏色，可以將標(biāo)記擴充為：其中各個元素的說明如表2-1所示，表2-2列出了一些常用顏色的RGB值,表2-1 設(shè)置背景景色和文字顏色,,,,,表2-2 常見顏色RGB值,,例如要將網(wǎng)頁背景顏色設(shè)置為藍(lán)色，2.1.3 超文本鏈接指針 超文本鏈接指針是HTML最吸引人的優(yōu)

12、點之一，可以這樣說，如果沒有超文本鏈接指針，就沒有萬維網(wǎng)。使用超文本鏈接指針可以使順序存放的文件具有一定程度上隨機訪問的能力，這更加符合人類的踴躍思維方式。超文本鏈接指針是指把并不連續(xù)的兩段文字或兩個文件聯(lián)系起來。,,1. 統(tǒng)一資源定位器URL統(tǒng)一資源定位器（Uniform Resource Locator）是文件名的擴展。在單機系統(tǒng)中，如果要找一個文件，需要知道該文件所在的路徑和文件名；在互連網(wǎng)上同樣找一個文件，除了要知道以上內(nèi)容

13、之外，顯然還需要知道該文件存放在哪個網(wǎng)絡(luò)的哪臺主機中才行。與單機系統(tǒng)不一樣的是，在單機系統(tǒng)中所有的文件都由統(tǒng)一的操作系統(tǒng)來管理，因而不必給出訪問該文件的方法；而在互連網(wǎng)上，每個網(wǎng)絡(luò)，每臺主機的操作系統(tǒng)都不一樣，因此必須指定訪問該文件的方法。一個URL包括了以上所有的信息。它的構(gòu)成為： protocol:// machine.name[:port]／directory／filename,,其中：protocol是訪問該資源所采用的協(xié)議

14、，即訪問該資源的方法，它可以是：HTTP：超文本傳輸協(xié)議，該資源是HTML文件；FTP：文件傳輸協(xié)議，用ftp訪問該資源；MAILTO：采用簡單郵件管理傳輸協(xié)議SMTP，提供電子郵件服務(wù)。machine.name是存放該資源主機的IP 地址，通常以字符形式出現(xiàn),如 www.whpu.com。port（端口號）是服務(wù)器在其主機所使用的端口號。一般情況下端口號不需要指定，只有當(dāng)服務(wù)器所使用的端口號不是默認(rèn)的端口號時才指定。dir

15、ectory和filename 是該資源的路徑和文件名。,,一個典型的URL為：http://www.whpu.edu.cn/ 它表示武漢工業(yè)學(xué)院WWW服務(wù)器上的起始HTML文件。在這個網(wǎng)址中可以看出，它告訴網(wǎng)絡(luò)采用超文本傳輸協(xié)議（HTTP）；主機的名字是www.whpu.com；但它并沒有指出訪問的目錄和哪個文件，其實這時表示訪問的是根目錄下的默認(rèn)主頁文件。 與單機系統(tǒng)絕對路徑、相對路徑的概念類似，統(tǒng)一資源定位器也有絕對URL

16、和相對URL之分。絕對URL、相對URL是相對于最近訪問的URL而言。比如現(xiàn)在正在瀏覽一個URL為http://www.whpu.edu.cn/default.asp的文件，如果想看同一個目錄下的另一個文件introduce.html，可以直接使用introduce.HTML，這時introduce.html就是一個相對URL，它的絕對URL為http://www.whpu.edu.cn/introduce.html。,,Ø&

17、#160;        當(dāng)協(xié)議（http://）被省略時，就認(rèn)為與當(dāng)前頁面的協(xié)議相同。Ø         當(dāng)主機域名被省略時，就認(rèn)是當(dāng)前主機域名。Ø         當(dāng)目錄路徑被省略時

18、，就認(rèn)是當(dāng)前目錄。Ø         當(dāng)文件名被省略時，就認(rèn)是當(dāng)前文件。2. 建立一個鏈接,,（1）鏈接到其它站點在HTML文件中用鏈接指針指向一個目標(biāo)。其基本格式為： zzz 其中zzz可以是文字或圖片并顯示在網(wǎng)頁中，當(dāng)用戶單擊它時，瀏覽器就會顯示由href屬性中的統(tǒng)一資源定位器（URL）所指向的目標(biāo)，實際上這個ZZZ在HTML文件

19、中充當(dāng)指針的角色，它一般顯示為藍(lán)色。href中的h表示超文本，而ref表示“訪問”或“引用”的意思。例如：武漢工業(yè)學(xué)院用戶用鼠標(biāo)單擊“武漢工業(yè)學(xué)院”，即可看到武漢工業(yè)學(xué)院的主頁內(nèi)容。在這個例子中，充當(dāng)指針的是“武漢工業(yè)學(xué)院”。,,在編寫HTML文件時，需要知道目標(biāo)的URL。那么如何才能得到目標(biāo)的URL呢？對于自己主機內(nèi)的文件，它的URL可以根據(jù)該文件的實際情況決定。對于Internet上的資源，在用瀏覽器查看時，它的URL會在瀏覽器

20、的狀態(tài)欄中顯示出來，把它抄下來寫到新制作的HTML文件中即可。在編寫HTML文件時，對能確定關(guān)系的一組資源（比如在同一個目錄中）應(yīng)采用相對URL，這不僅簡化HTML文件，而且便于維護。比如當(dāng)需要將某個目錄整個搬到另外一個地方或把某一主機的資源移到另一臺主機時，用相對URL寫的HTML文件對其中的URL不需要進(jìn)行任何更改（只要它們的相對關(guān)系沒有改變）。但如果用絕對URL編寫HTML文件，就不得不修改每個鏈接指針中的URL，這是一件很乏味

21、也很容易出錯的工作。對于各個資源之間沒有固定的關(guān)系，比如某個HTML文件是介紹各大學(xué)情況的，它所指向的目標(biāo)分布在全球的主機中，這時你就只能用絕對URL了。,（2）同一個文件中的鏈接上面提到的鏈接指針可以使讀者在整個Internet網(wǎng)上方便地鏈接，這種鏈接方式稱作遠(yuǎn)程鏈接。但如果編寫了一個很長的HTML文件，從頭到尾地讀很浪費時間，能不能在同一文件的不同部分之間也建立起鏈接，使用戶方便地在上下方之間跳轉(zhuǎn)呢？答案是肯定的，超鏈可以指向自

22、己的計算機中的某一個文件這種鏈接方式叫做本地鏈接。前面曾提到過一個超文本鏈接指針包括兩個部分，一個指向目標(biāo)的鏈接指針，另一個是被指向的目標(biāo)。對于一個完整的文件，可以用它的URL來唯一地標(biāo)識它，但對于同一文件的不同部分，我們怎樣來標(biāo)識呢？,,下面的內(nèi)容將介紹鏈接指針元素的另外的一個用途，標(biāo)識目標(biāo)。標(biāo)識一個目標(biāo)的方法為：…….NAME屬性將放置該標(biāo)記的地方標(biāo)記為“KKK”，KKK是一個全文唯一的標(biāo)記串，和 之間的內(nèi)容可有可無。

23、這樣，就把放置標(biāo)記的地方做了一個叫做“KKK”的標(biāo)記（如果對Microsoft Word很熟悉的話，這就相當(dāng)于在Word中的定義“書簽”）。做好標(biāo)記后，可以用下列方法來指向它，轉(zhuǎn)向下一處 ,,這時就可以點擊“轉(zhuǎn)向下一處”這段文字，瀏覽器就從標(biāo)記名為KKK的部分開始顯示此HTML文件的內(nèi)容了。2.1.4 在HTML文件中使用圖像1. 在HTML文件中顯示圖像Web之所以擁有無限的可擴展性和誘人的魅力，完全是由于有超級鏈接和圖形

24、圖像的使用。通過前面的學(xué)習(xí)，已經(jīng)能夠建立文本網(wǎng)頁，如果在此基礎(chǔ)上再加入一些色彩絢麗的圖像，得到的網(wǎng)頁就會更加生動、更具有吸引力。在這一節(jié)中將介紹如何使用HTML標(biāo)記在網(wǎng)頁上加入圖像。,,在瀏覽器上顯示的圖像必須有特定的格式，目前使用的瀏覽器通常支持GIF和JPEG格式的圖像。在HTML網(wǎng)頁中加圖像是通過標(biāo)記實現(xiàn)的，它有幾個較為重要的屬性。其中：SRC屬性：指明圖形的URL地址；HEIGHT屬性：決定圖形的高度；WIDTH屬性：決定

25、圖形的寬度；BORDER屬性：決定邊框線的寬度，0表示無邊框；ALT屬性：指明圖像顯示的備用文本；,,圖2-6 HTML文件舉例,,下面通過一個示例來說明標(biāo)記的使用。圖像的文件名為“center1.gif”，它是當(dāng)前目錄下的IMAGES子目錄中的文件。其HTML源文件如下：1 23測試頁4,,5678910,當(dāng)瀏覽器執(zhí)行上述HTML文件后，在瀏覽器中顯示如圖2-6所示

26、。在圖2-6中的第一個圖是通過上面的HTML文件的第六行調(diào)用“center1.gif”圖像文件顯示出來的。如果在同一文件中需要反復(fù)使用一個相同的圖像文件時，最好在標(biāo)記中使用相對路徑名，而不使用絕對路徑名或URL，因為使用相對路徑名瀏覽器只需將圖象文件下載一次，再次使用這個圖像時，只要再重新顯示一遍即可。如果使用的是絕對路徑名，每次顯示圖像時都有要下載一次圖像文件，這樣會大大降低圖像的顯示速度。在這個例子中，使用的是相對路徑，表示所調(diào)用

27、的圖片是當(dāng)前目錄下的images子目錄下的“center1.gif”文件。標(biāo)記中還可以對顯示的圖像添加邊框。如圖2-6中間圖所示，其邊框的像素值為8。其HTML寫法為：,,標(biāo)記中還提供了兩個屬性：HEIGHT 和 WIDTH，二者均取像素值，用來確定一個圖像的高度和寬度。如果對一個圖像設(shè)置的HEIGHT和WIDTH值與它原來的取值不一致，我們在瀏覽器上所看待到的圖像大小應(yīng)會發(fā)生變化。例如： 按高度150個像素、寬度150個像素的大

28、小在瀏覽器中顯示，顯示結(jié)果如圖8-20最右邊的圖所示。,,,在網(wǎng)頁制作中可以利用上述功能提高圖像的傳輸速度。由于小的圖像占用的磁盤空間比較少，在網(wǎng)上傳輸?shù)臅r間比較短，所以可以創(chuàng)建一個比較小的圖像，然后再在WEB上按比例放大，達(dá)到所希望的尺寸。但有一點要記住，放大倍數(shù)太大的圖像可能使圖像顯得有些斑駁模糊。在圖像制作時既要考慮到傳輸速度，又要兼顧圖像的顯示效果。顯然圖像可以使網(wǎng)頁變得絢麗多彩，富有吸引力，但也會帶來傳輸速度降低的問題。有些

29、瀏覽者為了提高網(wǎng)頁下載速度，也許會關(guān)掉瀏覽器中載入的圖像的命令。為了使瀏覽文本的用戶能夠了解頁面上圖片的內(nèi)容，可以使用標(biāo)記中的ALT屬性加入圖像的文字說明。當(dāng)瀏覽器不能顯示圖像時，它可以將ALT引導(dǎo)的文字顯示在屏幕上，從而替代看不到的圖像。例如：語句被執(zhí)行后，如果瀏覽器支持圖像，,,“center1.gif”的圖像就會顯示在屏幕上，ALT引導(dǎo)的內(nèi)容被忽略；如果瀏覽器不支持圖像，ALT引導(dǎo)的內(nèi)容會出在屏幕上，以彌補無法顯示的圖像。2

30、. 在HTML文件中利用圖像建立鏈接如果在鏈接標(biāo)記和的中間放置一個標(biāo)記，這個圖像將會成為一個可擊點，產(chǎn)生一個鏈接。例如： 當(dāng)用戶單擊這個圖像后，瀏覽器就會顯示“default.asp”這個文件的內(nèi)容了。,,2.1.5 框架結(jié)構(gòu)的使用框架能夠?qū)㈨撁娣殖啥鄠€獨立變化的窗口，每個窗口可以顯示不同的Web頁面，并可以不斷更換顯示的對象。使用框架結(jié)構(gòu)，可以使屏幕的信息量增大，使Web網(wǎng)頁更加吸引讀者。有關(guān)框架內(nèi)容的HTML語法為：

31、…,,…其中...中的內(nèi)容顯示在不支持分框的瀏覽器窗口中，因而這里指向一個普通版本的HTML文件，以便使用不支持分框瀏覽器的用戶閱讀。分框由指定，并且可以嵌套，分區(qū)中各部分顯示的內(nèi)容用指定?！　⌒枰f明的是，frame是一個新出現(xiàn)的元素，許多瀏覽器不支持它。分框可以將窗口橫向分成幾個部分，也可以縱向分成幾個部分，還可以混合分框。,,12 3 武漢工業(yè)學(xué)院4 5

32、 6 7 ,,8 9 101112 1314 ,,,圖2-7 框架結(jié)構(gòu)示意圖,,上例中第4行表示把瀏覽器窗口分成兩列，如果瀏覽器窗口的大小為640*480像素，那么框架中右面一列的寬度為140個像素，前面一列的寬度為640-140=500像素。其中“*”表示除了明

33、確的值以外剩下的值。上例中第5行表示把瀏覽器窗口的第一列中分成兩行，下面一行的高度為80像素，上面一行480-80=400像素。上例中第9行與前述相同。上例中第6、7、2和11使用的是標(biāo)記。該標(biāo)記有以下主要屬性：Ø         SRC屬性 指定框架單元的URL源，如第6行中指出的是當(dāng)前主機當(dāng)前目錄下的“a.htm”文件。即在此框中顯

34、示“a.htm”的內(nèi)容。Ø         NAME屬性 為該框架單元起個標(biāo)識名，主要用來為將來改變框架內(nèi)容提供入口。,,Ø         SCROLLING屬性 設(shè)置框架是否使用滾動條。有YES、NO和AUTO三個值，分別表示強制使用滾動條

35、，禁止使用滾動條和自動判斷使用滾動條。那么框架中右面一列的寬度為140個像素，前面一列的寬度為640-140=500像素。其中“*”表示除了明確的值以外剩下的值。上例中第5行表示把瀏覽器窗口的第一列中分成兩行，下面一行的高度為80像素，上面一行480-80=400像素。上例中第9行與前述相同。上例中第6、7、2和11使用的是標(biāo)記。該標(biāo)記有以下主要屬性：Ø     

36、60;   SRC屬性 指定框架單元的URL源，如第6行中指出的是當(dāng)前主機當(dāng)前目錄下的“a.htm”文件。即在此框中顯示“a.htm”的內(nèi)容。,,Ø         NAME屬性 為該框架單元起個標(biāo)識名，主要用來為將來改變框架內(nèi)容提供入口。Ø     &#

37、160;   SCROLLING屬性 設(shè)置框架是否使用滾動條。有YES、NO和AUTO三個值，分別表示強制使用滾動條，禁止使用滾動條和自動判斷使用滾動條。,,2.1.6 表單的應(yīng)用到目前為止所介紹的HTML文件的制做方法對于Internet網(wǎng)絡(luò)用戶來說都是單方向的，也就是說，讀者只能通過瀏覽器觀看網(wǎng)上的信息。但是在大多數(shù)網(wǎng)站上都能看到其網(wǎng)頁上有文本框、按鈕、下拉框等。例如，當(dāng)想在網(wǎng)上查找某種信息，那么可在

38、搜索引擎的文本框中輸入該信息的關(guān)鍵字，然后點擊“搜索”按鈕，搜索引擎就會把與該關(guān)鍵字相關(guān)的信息羅列出來。這就使得讀者與Web服務(wù)器之間能夠進(jìn)行交流，通常把這種查詢方式叫做交互的或者叫做雙向的。這種方式可以使Internet網(wǎng)絡(luò)用戶在很短的時間內(nèi)能夠查到所需要的信息，提高瀏覽效率。這一交互方式是由HTML和駐留在Web服務(wù)器上的程序共同完成的，駐留在Web服務(wù)器上的程序有許多種，編寫這些程序，除了熟悉HTML以外，還需要熟悉Web服務(wù)器所

39、駐留主機的操作系統(tǒng)以及操作系統(tǒng)所支持的某種語言。下面，主要介紹用HTML如何編寫表單，為用戶提供輸入信息的界面。,,1. 什么是表單HTML提供的表單是用來將用戶數(shù)據(jù)從瀏覽器傳遞給Web服務(wù)器的。例如可以利用表單建立一個錄入界面，也可以利用表單對數(shù)據(jù)庫進(jìn)行查詢。在這里需要聲明的是，表單的操作是與服務(wù)器進(jìn)行交互的操作，而服務(wù)器端的操作是通過服務(wù)器端的程序來實現(xiàn)的。實現(xiàn)在服務(wù)器端的操作有許多種方式，其中ASP（動態(tài)服務(wù)網(wǎng)頁）的方式就是一

40、種，它可以通過ADO方式與多種數(shù)據(jù)庫相連。,,ASP（Active Server Page）程序是在服務(wù)器端工作，并且通過服務(wù)器端的編譯動態(tài)地送出HTML文件給客戶端，它負(fù)責(zé)處理HTML文件與運行在服務(wù)器端的程序之間的數(shù)據(jù)交換。當(dāng)用戶輸入他們的信息（這個信息可以是查詢條件，也可以是傳送給服務(wù)器的某些內(nèi)容）并提交給服務(wù)器后，便激活了一個ASP程序。該ASP程序又可以調(diào)用操作系統(tǒng)下的其他程序（例如數(shù)據(jù)庫管理系統(tǒng)）完成讀者的查詢?nèi)蝿?wù)，當(dāng)操作系

41、統(tǒng)下的程序完成查詢之后，便把查詢結(jié)果傳給ASP，通過ASP傳給Web服務(wù)器。由此可以看出，ASP程序在用戶與服務(wù)器之間進(jìn)行交互查詢時所起的重要作用。通過圖2-8所顯示的表單，來給大家介紹一組新的標(biāo)記，它們是FORM、INPUT、SELECT、TEXTAREA等。在學(xué)習(xí)了這幾個標(biāo)記的使用之后，便可以用HTML制作表單了。,,,圖2-8 表單示例,,2. 表單的標(biāo)記表單就是為Internet網(wǎng)絡(luò)用戶在瀏覽器上建立一個交互接口，使In

42、ternet網(wǎng)絡(luò)用戶可以在這個接口上輸入自己的信息，然后使用提交按鈕，將Internet網(wǎng)絡(luò)用戶的輸入信息傳送給Web服務(wù)器。在HTML中，有一個專門的標(biāo)記FORM提供表單的功能，由表單開始標(biāo)記和表單結(jié)束標(biāo)記組成，表單中可以設(shè)置文本框、按鈕或下拉菜單，它們也是通過標(biāo)記完成。在表單的開始標(biāo)記中帶有兩個屬性：ACTION和METHOD。書寫表單的HTML格式如下…,, FORM標(biāo)記有以下主要屬性：（1）ACTION屬性是用來指出，

43、當(dāng)這個FORM提交后需要執(zhí)行的駐留在Web服務(wù)器上的程序名（包括路徑）是什么。一旦Internet網(wǎng)絡(luò)用戶提交輸入信息后服務(wù)器便激活這個程序，完成某種任務(wù)。例如： … 當(dāng)用戶點擊“提交”按鈕以后，Web服務(wù)器上的“l(fā)ogin.asp”將接收用戶輸入的信息，以登記用戶信息。,,（2）METHOD屬性是用來說明從客戶端瀏覽器將Internet網(wǎng)絡(luò)用戶輸入的信息傳送給Web服務(wù)器時所使用的方式，它有兩種方式：POST和GET。默認(rèn)的方式

44、是GET，這兩者的區(qū)別是在使用POST時，表單中所有的變量及其值都按一定的規(guī)律放入報文中，而不是附加在ACTION所設(shè)定的URL之后。在使用GET時將FORM的輸入信息作為字符串附加在ACTION所設(shè)定的URL的后面，中間用“？”隔開，即在客戶端瀏覽器的地址欄中可以直接看見這些內(nèi)容。在與之間，可以使用除以外的任何HTML標(biāo)識，這將使FORM變得非常靈活。只使用這一個標(biāo)記是很難完成Internet網(wǎng)絡(luò)用戶的輸入信息的，在FORM的開始與

45、結(jié)束標(biāo)記之間，除了可以使用以前講的那些標(biāo)識外，還有三個特殊標(biāo)識，它們是：INPUT（在瀏覽器的窗口上定義一個可以供用戶輸入的單行窗口、單選或多選按鈕）、SELECT（在瀏覽器的窗口上定義一個可以滾動的菜單，用戶在菜單內(nèi)進(jìn)行選擇）、TEXTAREA（在瀏覽器的窗口上定義一個域，用戶可以在這個域內(nèi)輸入多行文本）。,,3. HTML中的INPUT標(biāo)記HTML中的INPUT標(biāo)記是表單中最常用的標(biāo)記。我們在網(wǎng)頁上所見到的文本框、按鈕等等都由這

46、個標(biāo)記引出的。下面是INPUT標(biāo)記的標(biāo)準(zhǔn)格式：其中TYPE屬性是用來說明提供給用戶進(jìn)行信息輸入的類型是什么。例如是文本框、單選按鈕或多選按鈕。它的取值如下：TYPE = “TEXT”表示在表單中使用單行文本框 = “PASSWORD” 表示在表單中為用戶提供密碼輸入框,,= “RADIO” 表示在表單中使用單選按鈕 = “CHECKBOX” 表示在表單中使用多選按鈕 = “S

47、UBMIT”表示在表單中使用提交按鈕 = “RESET”表示在表單中使用重置按鈕（1）文字輸入和密碼輸入用一個例子說明文字輸入和密碼輸入的制作。請看下例（其在瀏覽器中顯示的結(jié)果如圖2-9所示）：,,,圖2-9 文字輸入和密碼輸入的例子,,1 2 3 這是個測試頁4 5 6 ,,7 請輸入您的真實姓名

48、: 8 您的主頁的網(wǎng)址: 9 密碼: 10 11 12      13      ,,從上例可以看出，它的第6行至第11行使用了制作表單的標(biāo)記…說明。第7行是單行文本框標(biāo)記，它設(shè)置屬性NAME=“姓名”，這個屬性定義了

49、文本框在這個表單中的名字叫“姓名”，以便和其它的本文框區(qū)別開來。當(dāng)用戶在這個文本框中輸入信息并送到Web服務(wù)器后（這個例子可看出是由服務(wù)器端的“REG.ASP”來接收輸入信息）就激活了“REG.ASP”程序，在該程序中要獲得這個文本框輸入的內(nèi)容就要用到“姓名”這個名字。在第八行同樣定義了一個文本框，但其設(shè)置了屬性VALUE=“http://”，表示該文本框的默認(rèn)值為“HTTP：//”，它在圖2-9中的瀏覽器窗口中的顯示結(jié)果在第二行。第9

50、行是密碼輸入框，它與文本框是有區(qū)別的。文本框是用戶輸入什么值則在文本框中就顯示什么值，而密碼輸入框則是不管用戶輸入什么值它都以“*”來顯示。另外有時還想控制用戶輸入數(shù)據(jù)的長度，這時候在INPUT標(biāo)記中要用到一個最大長度的屬性。例如，一般中國人的名字為四個漢字即8個字節(jié)，所以在控制用戶輸入姓名時限制其最大長度為8，則可把上例中的第7行改成：,,請輸入您的真實姓名: （2）復(fù)選框（Checkbox）和單選框（Radio Button）

51、在圖2-9中是要求Internet網(wǎng)絡(luò)用戶輸入一些個人的基本信息，其中“性別”一項不是輸入而是進(jìn)行選擇，因為一個人要么是“男”要么是“女”，兩者選一，這種形式的選擇框叫單選框，即在幾個選擇中僅能選中一個。另外有一種選擇框叫“復(fù)選框”。即允許用戶可以選中多個。單選框和復(fù)選框的格式如下：,,單選框：多選框：其中有一個“CHECKED”屬性表示在初始情況下該選框是否被選中。下面來看一個例子（如圖2-10所示），具體來體會一下。這是個

52、測試頁,, 選擇一種你喜愛的水果: 香蕉 草莓 橘子,,選擇你所喜愛的運動: 足球 籃球 排球 ,,,圖2-10 單選

53、框?qū)嵗?,（3）按鈕的制作在上面幾個例子中，都有兩個按扭，一個是“發(fā)送”按鈕，另一個“重置”按鈕。其實“發(fā)送”按鈕真正的含義叫“提交”即當(dāng)Internet網(wǎng)絡(luò)用戶用鼠標(biāo)單擊這個按鈕后，用戶輸入的信息便提交給一個駐留在Web服務(wù)器上的程序，讓服務(wù)器進(jìn)行處理，其典型的格式：。提交按鈕在FORM中是必不可少的，前幾個例子只是說明INPUT語句中類型的使用，作為FORM語句并不完整，每個FORM中有且僅有一個提交按鈕。當(dāng)設(shè)置“提交”按鈕標(biāo)記時

54、，如果缺省VALUE屬性，則瀏覽器窗口中的按鈕上出現(xiàn)“SUBMIT”的字樣，這個字樣也可以自己設(shè)定，改變按鈕上的提示。例如：VALUE=“提交”。,,另一種在瀏覽器常用的按鈕叫“重置”按鈕，當(dāng)Internet網(wǎng)絡(luò)用戶用鼠標(biāo)單擊這個按鈕后，網(wǎng)絡(luò)用戶輸入的信息被清除，讓網(wǎng)絡(luò)用戶重新輸入信息。其典型的格式：，而且在這個標(biāo)記設(shè)置中如果缺省VALUE屬性，則瀏覽器窗口中的按鈕上出現(xiàn)“RESET”的字樣，這個字樣也可以自己設(shè)定，來改變按鈕上的提示，

55、例如：VALUE=“重新輸入”。 4. HTML中的SELECT標(biāo)記在制作HTML文件時，使用…標(biāo)記可以在瀏覽器窗口中設(shè)置下拉式菜單或帶有滾動條的菜單，Internet網(wǎng)絡(luò)用戶可以在菜單中選中一個或多個選項。圖2-11顯示了一個下拉菜單，其HTML源文件如下所示。,,武漢工業(yè)學(xué)院請從下面課程中選擇幾門選擇課:,,網(wǎng)絡(luò)技術(shù)書法音樂欣賞現(xiàn)代文學(xué)多媒體技術(shù),,,圖2-11 設(shè)置下拉菜單,,從這個例子可以看

56、出，下拉菜單的標(biāo)準(zhǔn)格式如下所示：選項一選項二選項三,,SELECT標(biāo)記中有幾個可以設(shè)置的屬性值，它們分別是NAME、SIZE和MULTIPLE。其中 NAME屬性是當(dāng)Internet網(wǎng)絡(luò)用戶將表單提交時作為輸入信息的名字。 SIZE屬性控制在瀏覽器窗口中這個菜單選項的顯示條數(shù)。 MULTIPLE屬性允許讀者一次可選多個選項，如果缺省MULTIPLE，一次只能選一項，類似于單選。有MULTIPLE屬性時就是多選。在SELECT

57、的開始和結(jié)束標(biāo)記之間，有幾個OPTION標(biāo)記就有幾個選項，選項的具體內(nèi)容寫在每個OPTION之后。OPTION帶有SELECTED屬性，若在SELECT標(biāo)記中設(shè)定MULTIPLE屬性的話，可以在多個OPTION標(biāo)記中帶有SELECTED屬性，表示這些選項已經(jīng)預(yù)選。,,2.1.7 HTML中的表格制作的網(wǎng)頁在瀏覽器中瀏覽時，剛開始總會感覺到網(wǎng)頁的內(nèi)容在排版上控制不好，總是不能按照自己的意愿去把一些文字或圖片放到指定的位置，這時就可以考

58、慮采用表格來控制。表格是組織數(shù)據(jù)的有效手段。利用所見即所得的網(wǎng)頁編輯器進(jìn)行表格的自動生成可以避免手工制表的煩瑣，但如果要更好地控制表格的表現(xiàn)形式，熟悉與掌握表格的HTML標(biāo)準(zhǔn)是十分必要的。下面看一個表格的例子。（如圖2-12所示）從這個例子可以看出一個表格有一個標(biāo)題（Caption），它表明表格的主要內(nèi)容，并且一般位于表的上方；表格中由行和列分割成的單元叫做“表元”（Cell），它又分為表頭（用TH標(biāo)記來表示）和表數(shù)據(jù)（用TD標(biāo)記來表

59、示）；表格中分割表示的行列線稱為“框線”（Border）。,,,圖2-12 表格示例,1. 表格的標(biāo)記一個表格的基本框架如下所示：,,,,,（1）TABLE標(biāo)記一個表格至少一個TABLE標(biāo)記，由它來決定一個表格的開始和結(jié)束，而且TABLE標(biāo)記可以嵌套。TABLE標(biāo)記有以下五種屬性：Ø    &#

60、160;    BORDER屬性，指定圍繞表格的框的寬度（只能用像素）。Ø         CELLSPACING屬性，指定框線的寬度,,Ø         CELLPADDING屬性，用于設(shè)置表元內(nèi)容與邊框線之間的間距。&#

61、216;         ALIGN屬性用來控制表格本身在頁面上的對齊方式。其取值可是LEFT（左對齊）、CENTER（居中對齊）、RIGHT（右對齊）。Ø         WIDTH屬性，用來設(shè)置表格的寬度，可以以像素為單位，也可用占瀏覽器窗口的百分比來定義。（2

62、）CATION標(biāo)記CATION標(biāo)記用來標(biāo)注表格標(biāo)題的。CATION標(biāo)記必須緊接在TABLE開始標(biāo)記之后放在第一個TR標(biāo)記之前。通過該標(biāo)記所定義的表格標(biāo)題一般顯示在表格的上方，而且其水平方向是居中對齊。另外，如需要對表格的標(biāo)題突出顯示，可以在CATION標(biāo)記之間加入其它對字體進(jìn)行加重顯示的標(biāo)記。如：,, 表格標(biāo)題強調(diào)……….,,（3）TR標(biāo)記定義表格的一行。TR標(biāo)記中有兩個屬性，一個是ALIGN屬性，用

63、來設(shè)置表行中的每個表元在水平方向的對齊方式，其取值可以是LEFT（左對齊）、CENTER（居中對齊）、RIGHT（右對齊）；另一個是VLIGN屬性，用來設(shè)置表行中的每個表元在垂直方向的對齊方式，其取值可以是TOP（向上對齊）、CENTER（居中對齊）、BOTTOM（向下對齊）。例如，要使表行中各單元的內(nèi)容水平方向右對齊、垂直方向居中對齊，可使用如下源代碼：,,（4）TH標(biāo)記TH標(biāo)記用來表示一個表行中的各個單元。TH標(biāo)記內(nèi)幾乎可以包

64、含所有的HTML標(biāo)記，甚至還可以嵌套表格。該標(biāo)記與TR標(biāo)記同樣具有ALIGN和VALIGN屬性，如果在TH標(biāo)記和TR 標(biāo)記中都設(shè)置了ALIGN和VALIGN屬性，而且它們所設(shè)置的屬性值不相同，這時以TH標(biāo)記所設(shè)置的屬性值為準(zhǔn)。另外，TH標(biāo)記還有兩個屬性，一個是WIDTH屬性，用來設(shè)置表元的寬度，另一個HEIGHT屬性，用來設(shè)置表元的高度。這兩個屬性的取值單位都是像素。在同一行中將多個表元設(shè)置為不同高度，或者在同一列中將多個表元設(shè)置為不同

65、寬度，都有可能導(dǎo)致不可預(yù)料的結(jié)果。,,2. 表格使用實例在這個實例中，通過制作一個登記表格來給大家來說明如何制作一個比較復(fù)雜的表格。在表格中經(jīng)常會出現(xiàn)跨多行、多列的表元，這就要利用TD標(biāo)記另外兩個屬性，即COLSPAN和ROWSPAN屬性。例如 登記照 表示這個表項標(biāo)題將橫跨三個表項的位置；,, 登記照 表示這個表項標(biāo)題將縱跨三個表項的位置；另外每個表元還可以設(shè)置其背景顏色。例如 登記照還可以在表格中插入超級鏈接或在表

66、格中插入圖片，如果能對這個例子舉一反三的話，那么僅需制作一個無框線的表格，就可以把各種數(shù)據(jù)按照自己所希望的形式在頁面進(jìn)行布置。下面就給出一個具體的實例（其頁面效果如圖2-13所示）：,,,圖2-13 綜合表格實例,,表格綜合實例 ,,大獎賽登記表 報名號757性別女,, 姓名江小麗 ,,推薦單位宇宙公司,2.2 級聯(lián)式樣式表（CSS）,級聯(lián)式樣式表（CSS）樣式有助于

67、為 HTML 文檔提供美觀而一致的外觀。通過將許多Web頁鏈接到同一個外部樣式表，就可以為整個 Web 站點定義一致的外觀和感受。任何支持HTML4.0或更高版本的Web瀏覽器都會支持大多數(shù)的CSS樣式屬性。使用CSS樣式定義HTML頁和Web窗體中元素和文本的外觀和位置?？蓪tyle屬性以內(nèi)聯(lián)方式添加到許多HTML元素上，還可將CSS樣式嵌入到塊中或存儲在外部級聯(lián)式樣式表（.css）文件中。2.2.1 定義CSS,2.2 級

68、聯(lián)式樣式表（CSS）,級聯(lián)式樣式表（CSS）包含應(yīng)用于HTML文檔中元素的樣式定義。CSS樣式定義元素的顯示方式以及在頁中放置元素的位置?？梢詣?chuàng)建一個通用規(guī)則，只要Web瀏覽器遇到一個元素實例，或是一個分配給某個樣式 CLASS的元素，該規(guī)則就立刻應(yīng)用屬性，而不是將屬性逐個分配給頁中的每個元素。CSS 樣式可以通過內(nèi)聯(lián)方式放置在單個 HTML 元素內(nèi)，也可以在 Web 頁 HEAD 部分的 塊內(nèi)加以分組，或從單獨的 CSS 樣式表文

69、件中導(dǎo)入。同一個外部樣式表文件可鏈接到很多 Web 頁，從而使整個 Web 站點具有統(tǒng)一的外觀。,2.2 級聯(lián)式樣式表（CSS）,若要在 HTML 設(shè)計器中使用 CSS 樣式規(guī)則，必須將 HTML 文檔的 targetSchema 屬性設(shè)置為支持 HTML 4.0 或更高版本的 Web 瀏覽器。僅支持 HTML 3.2 或更低版本的舊版 Web 瀏覽器將只是忽略 CSS 樣式。如果將 targetSchema 屬性設(shè)置為不支持 HTM

70、L 4.0 的瀏覽器，則 CSS 樣式規(guī)則將是為 HTML 元素指定所需外觀和位置的首選方法。,,1. 在 STYLE 塊內(nèi)定義 CSS 樣式規(guī)則每個 CSS 樣式規(guī)則都有兩個主要部分：選擇器（如 H1）和聲明（如 color:red）。聲明包括屬性（color） 和屬性的值（red）。例如一條說明“將 標(biāo)記內(nèi)包含的所有文本設(shè)置為居中，并采用紅色字體顏色”的簡單 CSS 樣式規(guī)則可以寫成：H1 {text-align:cente

71、r; color:red;}CSS 樣式規(guī)則可以在 HTML 文檔 部分的 塊內(nèi)定義。以下是一個示例（運行結(jié)果如圖2-14所示），它定義了一條 CSS 樣式規(guī)則，并將該規(guī)則應(yīng)用到 Web 頁上的所有 元素： HTML 4.0 CSS Element Style Example ,,H1 {text-align:center; color:red;}

72、This text is centered and red 在此 Web 頁上，任何出現(xiàn)在 標(biāo)記內(nèi)的文本都將居中并顯示為紅色。因此，每當(dāng)文檔中出現(xiàn) 標(biāo)記時，不再需要重復(fù)地重新分配這些樣式屬性。另外，如果想更改 標(biāo)記內(nèi)所有文本的顏色（或任何其他屬性），則只需簡單地編輯一條樣式規(guī)則即可。,,,圖2-14 CSS示例,,2. CSS 樣式規(guī)則的優(yōu)先級CSS 樣式規(guī)則從一定意義上講是“級聯(lián)”的，即全局樣式規(guī)則會一直應(yīng)用于

73、HTML 元素，直到有局部樣式規(guī)則將其取代為止。一般而言，局部樣式規(guī)則的優(yōu)先級高于通用樣式規(guī)則。舉例來說，在某 Web 頁的 STYLE 塊內(nèi)定義的樣式，可為該頁修改外部 CSS 樣式表中定義的 Web 站點樣式。同樣，在該頁的單個 HTML 標(biāo)記內(nèi)定義的行內(nèi)樣式，可為單行修改在其他地方為同一元素定義的任何樣式。 在局部樣式應(yīng)用于 HTML 元素之后，全局樣式規(guī)則中不與局部 CSS 樣式規(guī)則沖突的部分繼續(xù)應(yīng)用于這些元素。在上例中，控制