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

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

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

3、是其跨平臺(tái)性。即任何可以運(yùn)行瀏覽器的計(jì)算機(jī)都能閱讀并顯示HTML文件，不管其操作系統(tǒng)是什么，并且顯示結(jié)果相同。HTML文件是標(biāo)準(zhǔn)的ASCII文件，且其后綴名為htm或html的文件。HTML文件看起來(lái)像是加入了許多被稱為鏈接簽（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é)尾鏈接簽中間的部分是元素體。每一個(gè)元素都有名稱和許多可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內(nèi)標(biāo)明。下面來(lái)看一個(gè)HTML文件，它在瀏覽器中顯示的結(jié)果如圖2-1所示。,,武漢工業(yè)學(xué)院這是一HTML的測(cè)試文件,圖2-1 一個(gè)HTML例子在瀏覽器的顯示結(jié)果,,從上例中我們可以看出，HTML文件僅由一個(gè)HTM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

52、測(cè)試頁(yè),, 選擇一種你喜愛(ài)的水果: 香蕉 草莓 橘子,,選擇你所喜愛(ài)的運(yùn)動(dòng): 足球 籃球 排球 ,,,圖2-10 單選

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

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

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

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

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

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

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

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

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

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

63、來(lái)設(shè)置表行中的每個(gè)表元在水平方向的對(duì)齊方式，其取值可以是LEFT（左對(duì)齊）、CENTER（居中對(duì)齊）、RIGHT（右對(duì)齊）；另一個(gè)是VLIGN屬性，用來(lái)設(shè)置表行中的每個(gè)表元在垂直方向的對(duì)齊方式，其取值可以是TOP（向上對(duì)齊）、CENTER（居中對(duì)齊）、BOTTOM（向下對(duì)齊）。例如，要使表行中各單元的內(nèi)容水平方向右對(duì)齊、垂直方向居中對(duì)齊，可使用如下源代碼：,,（4）TH標(biāo)記TH標(biāo)記用來(lái)表示一個(gè)表行中的各個(gè)單元。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è)置的屬性值不相同，這時(shí)以TH標(biāo)記所設(shè)置的屬性值為準(zhǔn)。另外，TH標(biāo)記還有兩個(gè)屬性，一個(gè)是WIDTH屬性，用來(lái)設(shè)置表元的寬度，另一個(gè)HEIGHT屬性，用來(lái)設(shè)置表元的高度。這兩個(gè)屬性的取值單位都是像素。在同一行中將多個(gè)表元設(shè)置為不同高度，或者在同一列中將多個(gè)表元設(shè)置為不同

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

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

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

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

69、件中導(dǎo)入。同一個(gè)外部樣式表文件可鏈接到很多 Web 頁(yè)，從而使整個(gè) Web 站點(diǎn)具有統(tǒng)一的外觀。,2.2 級(jí)聯(lián)式樣式表（CSS）,若要在 HTML 設(shè)計(jì)器中使用 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ī)則每個(gè) CSS 樣式規(guī)則都有兩個(gè)主要部分：選擇器（如 H1）和聲明（如 color:red）。聲明包括屬性（color） 和屬性的值（red）。例如一條說(shuō)明“將 標(biāo)記內(nèi)包含的所有文本設(shè)置為居中，并采用紅色字體顏色”的簡(jiǎn)單 CSS 樣式規(guī)則可以寫成：H1 {text-align:cente

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

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

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