第3章XHTML基礎(chǔ)

1、第3章 XHTML基礎(chǔ)煙臺職業(yè)學(xué)院孫俊琳本章學(xué)習(xí)目標(biāo)u掌握XHTML的基本結(jié)構(gòu)u熟練掌握與文字處理、列表、多媒體、超鏈接、表格等網(wǎng)頁元素相關(guān)的XHTML標(biāo)簽及標(biāo)簽屬性3.1 XHTML的基本結(jié)構(gòu)與語法3.1.1 XHTML基本結(jié)構(gòu)u 1.XHTML的基本結(jié)構(gòu)u 2.文檔類型聲明u 3.語法規(guī)則3.1.2 HTML標(biāo)簽3.1.3 HTML屬性3.1.1 XHTML基本結(jié)構(gòu)1.XHTML的基本結(jié)構(gòu)XHTML的基本結(jié)構(gòu)主要包括如下3部分。（1）DOCTYPE文檔類型聲明。（2）head文件頭部。（3）body文件主體?；菊Z法結(jié)構(gòu)如下： 2.文檔類型聲明 XHTML文檔是從文檔類型聲明開始的，在XH

2、TML 1.0中有如下3種文檔類型定義聲明可以選擇。uTransitional（過渡類型）。uStrict（嚴(yán)格類型）。uFrameset（框架類型）。3.語法規(guī)則XHTML文檔中標(biāo)記元素屬性的編寫規(guī)則如下：uXHTML 文檔必須擁有根元素。 u標(biāo)簽名和屬性名必須用小寫字母。 u屬性名不能簡寫，屬性值必須加引號。u用Id屬性代替name 屬性。uXHTML DTD 定義了強(qiáng)制使用的 HTML 元素。 uXHTML 元素必須被正確地嵌套。 uXHTML 元素必須被關(guān)閉。 例3.1 XHTML的基本結(jié)構(gòu)示例。XHTML基本結(jié)構(gòu)學(xué)習(xí)XHTML基本語法這是一個(gè)演示XHTML文檔結(jié)構(gòu)的案例。對網(wǎng)頁結(jié)構(gòu)中

3、的標(biāo)簽做如下說明：（1）文檔的聲明部分聲明了文檔的類型為過渡類型，允許有HTML4.0標(biāo)簽語法。文件類型聲明并非 XHTML 文檔自身的組成部分。它并不是 XHTML 元素，也沒有關(guān)閉標(biāo)簽。（2）文檔標(biāo)簽表示標(biāo)簽之間的內(nèi)容是HTML文檔，保存的頁面文件類型為.html或.htm，該類型文件會被Web瀏覽器打開。（3）頁面的頭標(biāo)簽頭標(biāo)簽和構(gòu)成XHTML的開頭部分，在瀏覽器窗口中，頭部信息是不被顯示在正文中的，在此標(biāo)簽中，可以插入其他標(biāo)簽，用以說明文件的標(biāo)題和整個(gè)文件的一些公用屬性。在此標(biāo)簽對之間，可以使用、等等標(biāo)簽。（4）頁面的標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽決定了顯示在頁面標(biāo)題欄中的文字，一般是網(wǎng)頁的“主題”

4、。如在例3.1中，出現(xiàn)在標(biāo)題欄的文字“XHTML基本結(jié)構(gòu)”。（5）主體標(biāo)簽標(biāo)簽是XHTML文檔的主體，其中放置的是頁面中所有的內(nèi)容，如圖片、文字、表格、表單、超鏈接等等，在此標(biāo)簽之間可以包含、等等眾多標(biāo)簽。它們所定義的內(nèi)容將會在瀏覽器的窗口內(nèi)顯示出來。3.1.2 HTML標(biāo)簽 在HTML頁面中，帶有“”符號的元素被稱為HTML標(biāo)簽，也叫HTML標(biāo)記。如上提到的等都是HTML標(biāo)簽。所謂標(biāo)簽，就是放在“”標(biāo)記符中表示某個(gè)功能的編碼指令，也稱HTML標(biāo)記或HTML元素。 標(biāo)簽分單標(biāo)簽和雙標(biāo)簽。(1)單標(biāo)簽。是指用一個(gè)標(biāo)記符號即可完整的描述某個(gè)功能的標(biāo)簽，基本語法如下：( 2 ) 雙 標(biāo) 簽 。 網(wǎng)

5、頁 中 大 部 分 的 標(biāo) 簽 是 成 對 出 現(xiàn) 的 ， 也 就 是 雙 標(biāo) 簽 ， 如 例 3 . 1 中 的等等。雙標(biāo)簽是指由開始和結(jié)束兩個(gè)標(biāo)記符組成的標(biāo)簽，其基本語法如下： 內(nèi)容 3.1.3 HTML屬性 HTML標(biāo)簽都有自己相應(yīng)的屬性，通過設(shè)置標(biāo)簽的屬性，可以修改內(nèi)容的樣式。其基本語法如下： 內(nèi)容 標(biāo)簽可以有多個(gè)屬性，但必須寫在開始標(biāo)記中，位于標(biāo)記名后面。屬性不分先后順序，標(biāo)記名與屬性、屬性與屬性之間均已空格分開。任何標(biāo)簽的屬性都有默認(rèn)值，省略該屬性，則會取默認(rèn)值。3.2 文字處理u標(biāo)題標(biāo)簽u 段落標(biāo)簽u 換行標(biāo)簽u水平線標(biāo)簽u原樣顯示文字標(biāo)簽u居中對齊標(biāo)簽u文字格式標(biāo)簽u字體格式化

6、標(biāo)簽u特殊符號的使用u注釋標(biāo)簽3.2.1 標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽hn,其中n為標(biāo)題的等級，總共提供6個(gè)等級的標(biāo)題，n越小，標(biāo)題字號越大。標(biāo)題標(biāo)簽的格式：標(biāo)題內(nèi)容說明：標(biāo)簽成對出現(xiàn)。常用的屬性：align 對齊屬性，屬性值：“l(fā)eft” 、“center”、 “right”。例3.2 標(biāo)題標(biāo)簽的應(yīng)用.3.2.2 段落標(biāo)簽 段落標(biāo)簽是用來創(chuàng)建一個(gè)段落，在此標(biāo)簽對之間加入的文本將按照段落的格式顯示在瀏覽器上。使用該標(biāo)簽后，每塊文本段落之間都會空出一行。 段落標(biāo)簽的格式：段落內(nèi)容 說明：標(biāo)簽成對出現(xiàn)。 常用的屬性：align 對齊方式，一般值有“l(fā)eft” 、“center”、 “right”三種，分別設(shè)置

7、段落文字的左、中、右對齊方式。3.2.3 換行標(biāo)簽 是一個(gè)單標(biāo)簽，在XHTML中，該標(biāo)簽必須被關(guān)閉。換行標(biāo)簽沒有屬性，它主要作用是分行。當(dāng)希望內(nèi)容重起一行，并且在行與上一行之間不空出一行間距，那就需要換行標(biāo)簽，而不是段落標(biāo)簽。例3.3換行標(biāo)簽與段落標(biāo)簽區(qū)別演示案例。3.2.4 水平線標(biāo)簽 標(biāo)簽是單標(biāo)簽，該標(biāo)簽可以在屏幕上顯示一條水平線，用以分割頁面何總的不同部分，會使文檔結(jié)構(gòu)清晰明朗，文字的編排更整齊。 通過設(shè)置標(biāo)簽的屬性，可以控制水平分割線的樣式。屬性見表3.2所示。例3.4 水平線的應(yīng)用。屬性屬性參數(shù)參數(shù)功能功能默認(rèn)值默認(rèn)值size 設(shè)置水平線的粗細(xì)2wdth 設(shè)置水平線的寬度100%al

8、ignleft 、center、right、center、right設(shè)置水平線的對齊方式Centercolor 設(shè)置水平線的顏色Blacknoshade 取消水平線的3D陰影3D陰影3.2.5 原樣顯示文字標(biāo)簽 標(biāo)簽可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。 標(biāo)簽的一個(gè)常見應(yīng)用就是用來表示計(jì)算機(jī)的源代碼。注意：u可以導(dǎo)致段落斷開的標(biāo)簽（例如標(biāo)題、 和 標(biāo)簽）絕不能包含在 所定義的塊里。u標(biāo)簽中允許的文本可以包括物理樣式和基于內(nèi)容的樣式變化，還有鏈接、圖像和水平分隔線。3.2.6 居中對齊標(biāo)簽 文本在頁面中使用標(biāo)簽進(jìn)行居中顯示，標(biāo)簽是雙

9、標(biāo)簽，可以增加標(biāo)準(zhǔn)屬性：id、class、 title、 style。下面通過案例來了解原樣顯示標(biāo)簽和居中標(biāo)簽的用法。 注意：在 XHTML 1.0 Strict DTD 中，center標(biāo)簽不被支持。 例3.5 標(biāo)簽和的應(yīng)用。3.2.7 文字格式標(biāo)簽 在XHTML中設(shè)置網(wǎng)頁中的文字字體使用標(biāo)記元素。 注意：在 XHTML 1.0 Strict DTD 中，font 元素不被支持，在網(wǎng)頁中盡量使用CSS來定義文本的字體、字號和顏色。 標(biāo)簽的主要屬性如表3.3所示。屬屬 性性作作 用用例例 子子size設(shè)置字體大小size=5face設(shè)置字體名稱face=Timescolor設(shè)置字體顏色colo

10、r=red3.2.8 字體格式化（1）物理類型的標(biāo)記元素這類標(biāo)記元素用于設(shè)置文本在網(wǎng)頁中顯示時(shí)的格式，告訴瀏覽器應(yīng)該以何種格式顯示文字，常用物理類型的標(biāo)記元素有以下幾種，如表3.4所示。標(biāo)記元素標(biāo)記元素作作 用用標(biāo)記中的文本字體加粗標(biāo)記中的文本傾斜標(biāo)記中的文本顯示打字機(jī)字體，字體較寬標(biāo)記中的文本加下劃線標(biāo)記中的文本加橫貫文字的刪除線標(biāo)記中的文本以下標(biāo)顯示標(biāo)記中的文本以上標(biāo)顯示標(biāo)記中的文本以較大字體顯示標(biāo)記中的文本以較小字體顯示例3.6 字體中物理標(biāo)記元素顯示字體格式的運(yùn)用。3.2.8 字體格式化（2）邏輯類型的標(biāo)記元素邏輯類型的標(biāo)記元素是定義了包含文本內(nèi)容的屬性，告訴瀏覽器該文本所具有的特性，

11、由瀏覽器決定以何種格式顯示這些文本。常見邏輯類型的標(biāo)記元素及其作用如表3.5所示。標(biāo)記元素標(biāo)記元素作作 用用強(qiáng)調(diào)標(biāo)記中的文本，一般顯示斜體字強(qiáng)調(diào)標(biāo)記中的文本，一般顯示粗體字用于指出這是一組代碼，一般是一種定寬的字體由用戶輸入的文本，一般顯示較粗的定寬字體用來表示變量，一般顯示斜體字顯示一段常用的文字，一般是一種定寬的字體表示一個(gè)定義或說明，一般為斜體字用于引證、舉例，一般顯示斜體字 例3.7 邏輯類型的標(biāo)記使用案例3.2.9 特殊符號的使用 在XHTML中定義了一些程序開發(fā)者不能直接從鍵盤輸入的特殊字符，如“”?；蛘哂行┨厥庾址阪I盤上可以找到，但在XHTML中有特殊的含義，如“”、“&

12、;”等。這樣可以用特殊符號來表示，實(shí)現(xiàn)輸入的特殊字符，避免信息的混淆。例3.8 特殊字符的表現(xiàn)方法。3.2.10 注釋標(biāo)簽 在HTML文檔中可以加入相關(guān)的注釋標(biāo)簽，便于查找和記憶有關(guān)的文件內(nèi)容和標(biāo)識，但是這些注釋內(nèi)容不會在瀏覽器中顯示出來，這是因?yàn)榉彩窃谧⑨寴?biāo)簽內(nèi)的文字都是隱性的。如果查看源代碼的話，會看到這些注釋。 注釋標(biāo)簽的格式：3.2.11 文字處理案例例3.9 綜合運(yùn)用文字出現(xiàn)相關(guān)標(biāo)簽和屬性實(shí)現(xiàn)古詩排版。3.3 列表u無序列表u有序列表u定義性列表3.3.1 無序列表 無序列表是指列表內(nèi)容可以按任意順序排列。每一列表項(xiàng)前不是用連續(xù)編號，而是用一個(gè)特定符號來標(biāo)記。通常是在每一列表項(xiàng)前加上

13、一個(gè)小圓點(diǎn)兒“”。注意：在XHTML 1.0中，如果文檔類型聲明為嚴(yán)格類型，則標(biāo)記元素的type屬性不被支持。1.基本用法無序列表的基本用法如下： 其中，標(biāo)記元素的type屬性決定了每一列表項(xiàng)前面的標(biāo)記符號。常見的type屬性取值如表3.7所示。typetype作作 用用type=disc設(shè)置列表標(biāo)記為“”type=circle 設(shè)置列表標(biāo)記為“”type=square設(shè)置列表標(biāo)記為“”3.3.1 無序列表例3.10 無序列表的應(yīng)用。 宋詞鑒賞 宴山亭 浣溪沙 踏莎行 天仙子 御街行 3.3.2 有序列表 有序列表用于對網(wǎng)頁中的一些內(nèi)容進(jìn)行編號排列，以便讀者可以清晰地了解其每行的順序。有序列表

14、的實(shí)現(xiàn)方法與無序列表相似，只是用標(biāo)記元素來代替無序列表中的。注意：在XHTML 1.0中，如果文檔類型聲明為嚴(yán)格類型，則標(biāo)記元素的start 和type屬性不被支持。1.基本用法有序列表的基本用法如下： 其中，start屬性的取值決定列表編號的開始值，默認(rèn)從1開始編號。type屬性的取值及作用如表3.8所示。typetype作作 用用type=1設(shè)置列表編號為阿拉伯?dāng)?shù)字type=I設(shè)置列表編號為大寫羅馬數(shù)字type=i設(shè)置列表編號為小寫羅馬數(shù)字type=a設(shè)置列表編號為小寫英文字母type=A設(shè)置列表編號為大寫英文字母3.3.2 有序列表例3.11 實(shí)現(xiàn)介紹圖書館信息服務(wù)的頁面，服務(wù)項(xiàng)目被排列

15、成有序列表。 唐詩鑒賞 送杜少府之任蜀州 回鄉(xiāng)偶書 登鸛雀樓 過故人莊 望廬山瀑布 3.3.3 定義性列表 定義性列表可以用來給每一個(gè)列表項(xiàng)加上一段說明性文字，說明獨(dú)立于列表項(xiàng)另起一行顯示。具體實(shí)現(xiàn)過程是在標(biāo)記元素中同時(shí)使用和標(biāo)記元素，建立術(shù)語列表。術(shù)語列表中的列表項(xiàng)由兩部分組成，即術(shù)語和它的說明。術(shù)語由標(biāo)記元素指定，說明由標(biāo)記元素指定。1.基本用法定義性列表的基本語法如下： 列表第一項(xiàng)第一項(xiàng)的定義和描述 列表第二項(xiàng)第二項(xiàng)的定義和描述 列表第三項(xiàng)第三項(xiàng)的定義和描述 3.3.3 定義性列表例3.12 運(yùn)用定義性列表描述傳輸層協(xié)議的相關(guān)知識。 傳輸層協(xié)議 TCP 傳輸控制協(xié)議 UDP用戶數(shù)據(jù)報(bào)協(xié)議

16、 3.4 多媒體u圖像標(biāo)簽u聲音和視頻文件的使用u滾動(dòng)對象標(biāo)簽3.4.1 圖像標(biāo)簽 要將一幅圖像插入到網(wǎng)頁上顯示，可通過在XHTML中使用標(biāo)記元素來實(shí)現(xiàn)。基本語法如下： 說明：圖像的src屬性是必須的屬性，描述圖像的所在位置，圖像還有其它屬性，可以根據(jù)需要選擇。主要屬性及作用如表3.9所示。 如：屬屬 性性作作 用用src設(shè)置顯示圖像的出處alt設(shè)置圖像的替代文本height設(shè)置圖像的高度width設(shè)置圖像的寬度align設(shè)置圖像的對齊方式border設(shè)置圖像的邊框hspace設(shè)置圖像左右的間距vspace設(shè)置圖像上下的間距3.4.1 圖像標(biāo)簽例3.13 圖像標(biāo)簽的應(yīng)用案例。3.4.2 聲音和

17、視頻文件的使用1.音頻文件的類型（1）MID格式文件一般情況下，MID文件只用做網(wǎng)頁的背景音樂。在播放MID文件時(shí)，很多瀏覽器不需要專門的插件，一個(gè)較小的文件可以儲存大量數(shù)字音樂指令，提供長時(shí)間的聲音剪輯。（2）WAV格式文件在互聯(lián)網(wǎng)上，WAV格式是最流行的格式之一，幾乎所有流行的瀏覽器都支持該格式。它聲音品質(zhì)較高，錄制較為方便，但它需要的存儲空間較大，播放時(shí)需要緩沖，限制了網(wǎng)頁上聲音剪輯的長度。（3）MP3格式文件它具有壓縮比例高和音響品質(zhì)高的優(yōu)點(diǎn)，然而MP3聲音文件較大，在網(wǎng)頁中傳輸一首歌曲可能需要等待較長時(shí)間。（4）AIF格式文件Apple公司開發(fā)的AI F格式文件，與WAV格式文件相似

18、，有非常好的聲音品質(zhì)，很多瀏覽器不用插件也支持AIF文件的播放。用戶也可以通過麥克風(fēng)等輸入設(shè)備錄制自己的AIF文件。（5）RealAudio格式文件該格式支持低帶寬下的音頻流，有著非常高的壓縮比，可以在較短的時(shí)間內(nèi)完成完整歌曲文件的下載。該類文件可以從一個(gè)普通的Web服務(wù)器上“流式”播放。2.視頻文件的類型網(wǎng)頁中常用的視頻文件格式如flv、f4v、mp4、3gp、avi、wmv等，還有其它文件格式，不過這幾個(gè)是目前最常見的。下面簡單介紹一下不同視頻格式的區(qū)別。（1）flv格式文件FLV是FLASH VIDEO的簡稱，F(xiàn)LV流媒體格式是一種新的視頻格式。由于它形成的文件極小、加載速度極快，使得網(wǎng)

19、絡(luò)觀看視頻文件成為可能。（2）f4v格式文件作為一種更小更清晰，更利于在網(wǎng)絡(luò)傳播的格式，F(xiàn)4V已經(jīng)逐漸取代了傳統(tǒng)FLV，也已經(jīng)被大多數(shù)主流播放器兼容播放，而不需要通過轉(zhuǎn)換等復(fù)雜的方式。（3）MPEG格式文件這類格式可是影像陣營中的一個(gè)大家族，也是我們平時(shí)所見到的最普遍的一種視頻格式。其中MPEG4在視頻方面應(yīng)用最多，對于不同的對象可采用不同的編碼算法，從而進(jìn)一步提高壓縮效率；能在低碼率下獲得較好的效果；可以方便的集成自然音視頻對象和合成音視頻對象。（4）avi格式AVI，音頻視頻交錯(cuò)(Audio Video Interleaved)的英文縮寫。AVI這個(gè)由微軟公司發(fā)表的視頻格式，在視頻領(lǐng)域可以

20、說是最悠久的格式之一。AVI格式調(diào)用方便、圖像質(zhì)量好，壓縮標(biāo)準(zhǔn)可任意選擇，是應(yīng)用最廣泛、也是應(yīng)用時(shí)間最長的格式之一（5）wmv格式WMV的主要優(yōu)點(diǎn)在于：可擴(kuò)充的媒體類型、本地或網(wǎng)絡(luò)回放、可伸縮的媒體類型、流的優(yōu)先級化、多語言支持、擴(kuò)展性等。（6）rmvb格式RMVB是一種視頻文件格式，RMVB中的VB指VBR,Variable Bit Rate（可改變之比特率），較上一代rm格式畫面要清晰了很多，原因是降低了靜態(tài)畫面下的比特率，可以用RealPlayer、暴風(fēng)影音、QQ影音等播放軟件來播放。（7）3gp格式3GP是一種3G流媒體的視頻編碼格式，主要是為了配合3G網(wǎng)絡(luò)的高傳輸速度而開發(fā)的，也是目

21、前手機(jī)中最為常見的一種視頻格式。3.播放音頻和視頻標(biāo)簽（1）使用該標(biāo)簽用于在網(wǎng)頁中添加背景音樂，當(dāng)頁面被加載時(shí)，背景音樂開始自動(dòng)播放，而在頁面中不顯示播放界面。但只有基于IE內(nèi)核的瀏覽器才能支持該標(biāo)簽，應(yīng)慎重使用。使用格式如下：（2）使用該標(biāo)簽的作用是在網(wǎng)頁中嵌入音頻或視頻。但只有基于IE內(nèi)核的瀏覽器才能支持該標(biāo)簽，應(yīng)慎重使用。使用格式如下：（3）使用該標(biāo)簽的作用是在網(wǎng)頁中插入音頻或視頻?；舅械臑g覽器都支持該標(biāo)簽，它不僅可以播放音樂，也可以播放視頻。使用格式如下：（4）使用元素通過元素可以向XHTML頁面添加音頻、視頻、Java Applet、ActiveX、PDF、Flash等媒體元素。

22、元素與元素搭配使用，元素定義元素運(yùn)行時(shí)的設(shè)置，在XHTML中，必須被正確關(guān)閉。元素的基本用法如下： 例3.15 在網(wǎng)頁中嵌入一個(gè)WMV格式的視頻文件，打開頁面時(shí)就可以播放視頻。（5）使用超鏈接在網(wǎng)頁中建立一個(gè)指向某個(gè)媒體文件的超鏈接，這樣，在網(wǎng)頁發(fā)布之后，只要單擊該超鏈接，播放器就會開始播放聲音或視頻文件。大多數(shù)瀏覽器都會使用一些播放器來播放聲音或視頻文件。元素的基本語法如下： 建立超鏈接的文字具體實(shí)例代碼如下： 單擊此處來播放High歌3.4.3 滾動(dòng)對象標(biāo)簽 在網(wǎng)頁設(shè)計(jì)中，動(dòng)態(tài)效果的插入，會使網(wǎng)頁更生動(dòng)靈活，豐富多彩。標(biāo)簽可以實(shí)現(xiàn)設(shè)置的元素在網(wǎng)頁中移動(dòng)的效果。使用格式如下： 滾動(dòng)對象 該標(biāo)

23、簽有很多屬性，用來定義元素的各種滾動(dòng)方式，如表3.11所示。屬屬 性性描述描述align指定對齊方式top、 middle、 bottomtop、 middle、 bottomscroll單向運(yùn)動(dòng)slide如幻燈片一格一格的，效果是文字一觸碰左邊就停止alternate左右往返運(yùn)動(dòng)bgcolor設(shè)定文字滾動(dòng)范圍的背景顏色loop設(shè)定文字的滾動(dòng)次數(shù)，其值可以是正整數(shù)或infinite(無限次)，默認(rèn)為無限次infinite(無限次)，默認(rèn)為無限次height設(shè)定字幕高度width設(shè)定字幕寬度scrolldelay 文字每一次滾動(dòng)的停頓時(shí)間，單位是毫秒，時(shí)間越短，滾動(dòng)越快scrollamount指

24、定每次移動(dòng)的速度，數(shù)值越大速度越快hspace指定字幕左右空白區(qū)域的大小vspace指定字幕上下空白區(qū)域的大小direction設(shè)定文字的滾動(dòng)方向，left 、right、 up、 downleft 、right、 up、 downbehavior指定滾動(dòng)方式，scroll表示滾動(dòng)播出，slide表示滾動(dòng)到一方后停止，alternate表示滾動(dòng)到一方后向相反方向滾動(dòng)scroll表示滾動(dòng)播出，slide表示滾動(dòng)到一方后停止，alternate表示滾動(dòng)到一方后向相反方向滾動(dòng)3.4.3 滾動(dòng)對象標(biāo)簽例3.16 標(biāo)簽的應(yīng)用案例3.5 超鏈接超鏈接通過錨點(diǎn)的設(shè)置完成頁面跳轉(zhuǎn)。超鏈接主要分為文本超鏈接和圖

25、像超鏈接。3.5.1 超鏈接的建立1.基本用法和的基本語法如下：顯示的文字或圖片2.主要屬性超鏈接的主要屬性及其功能說明如表3.12所示。屬屬 性性取取 值值功能說明功能說明coords坐標(biāo)位置設(shè)置鏈接的坐標(biāo)hrefURL設(shè)置要鏈接的目的URLURLname選擇區(qū)域名設(shè)置錨的名稱shapedefault、rect、circle、poly、rect、circle、poly設(shè)置鏈接的形狀區(qū)域target_blank、_parent、_self、_top、framename、_parent、_self、_top、framename設(shè)置打開目的URL的位置URL的位置3.5 超鏈接3.錨的定義與設(shè)置

26、錨鏈接是指頁面內(nèi)的鏈接，通過使用name屬性創(chuàng)建一個(gè)文檔內(nèi)部的書簽，實(shí)現(xiàn)在一個(gè)頁面內(nèi)的跳轉(zhuǎn)。需要注意的是，建立到錨的超鏈接和錨標(biāo)記之間保持足夠的網(wǎng)頁空間才能看出效果?？梢允褂孟旅娴母袷絹韺?shí)現(xiàn)錨的定義與設(shè)置。（1）創(chuàng)建錨 建立錨點(diǎn)的文字（2）鏈接至錨 建立鏈接的文字也可以實(shí)現(xiàn)不同頁面內(nèi)錨點(diǎn)的跳轉(zhuǎn)：建立鏈接的文字3.5.2 超鏈接的運(yùn)用1.創(chuàng)建文本和圖像超鏈接 在網(wǎng)頁上可以為文字或圖像建立超鏈接，跳轉(zhuǎn)到當(dāng)前網(wǎng)站的一個(gè)頁面。例如，單擊頁面上的“單擊進(jìn)入新浪網(wǎng)”超鏈接，可以在當(dāng)前窗口打開新浪網(wǎng)站首頁；若單擊圖片，可以打開一個(gè)新的窗口，鏈接到頁面3-13.html。 例3.17 建立超鏈接案例。3.5.

27、2 超鏈接的運(yùn)用2.更改超鏈接文字的顏色 在網(wǎng)頁中要改變超鏈接文字的顏色，可以通過元素中的相關(guān)屬性進(jìn)行設(shè)置。元素中用于設(shè)置超鏈接文字的顏色的屬性及其描述如表3.14所示。例3.18 超鏈接顏色的設(shè)置演示。屬屬 性性描描 述述text設(shè)置頁面中所有文本的顏色link設(shè)置頁面中未訪問的超鏈接文字顏色vlink設(shè)置已訪問的超鏈接文字顏色alink設(shè)置正被單擊的超鏈接文字（即活動(dòng)超鏈接）的顏色3.5.2 超鏈接的運(yùn)用3.利用錨創(chuàng)建超鏈接在一個(gè)較大的頁面中，可以利用錨建立頁面內(nèi)鏈接，并可以根據(jù)需求在指定位置打開超鏈接。例3.19 在長文檔中運(yùn)用錨實(shí)現(xiàn)位置的快速跳轉(zhuǎn)。3.5.2 超鏈接的運(yùn)用4.創(chuàng)建電子郵

28、件鏈接 在瀏覽網(wǎng)頁時(shí)，當(dāng)用戶單擊某些文字時(shí)可能會啟動(dòng)本地機(jī)器上的郵件服務(wù)系統(tǒng)（如Outlook），可以使用該服務(wù)來發(fā)送電子郵件。其實(shí)現(xiàn)的基本格式如下：描述文字 如下面的代碼創(chuàng)建了電子郵件鏈接： 發(fā)送郵件！ 3.5.3 絕對路徑與相對路徑1.絕對路徑 絕對路徑是主頁上的文件或目錄在硬盤上的真正路徑。使用絕對路徑定位鏈接目標(biāo)文件比較清晰，但是有兩個(gè)缺點(diǎn)：一是需要輸入的路徑比較長；二是如果該文件被移動(dòng)了，就需要重新設(shè)置所有的相關(guān)鏈接，這樣不適合網(wǎng)站的移植。如果鏈接的目標(biāo)文件是在本網(wǎng)站內(nèi)，就不建議使用絕對路徑。 絕對路徑包含了標(biāo)識Internet上的文件所需的所有信息。文件的鏈接是相對原文檔而定的，包

29、括完整的協(xié)議名稱、主機(jī)名稱、文件夾名稱和文件名稱。其格式為： 通信協(xié)議：/服務(wù)器地址：通信端口/文件位置/文件名 例如：http:/ 表示采用http協(xié)議從名為的服務(wù)器上的目錄myweb中獲得index.html頁面。3.5.3 絕對路徑與相對路徑2.相對路徑 相對路徑是以當(dāng)前文件所在的路徑為起點(diǎn)，進(jìn)行相對文件的查找。一個(gè)相對的URL不包括協(xié)議和主機(jī)地址信息，表示它的路徑與當(dāng)前文檔的訪問協(xié)議和主機(jī)名相同，甚至有相同的目錄路徑。通常只包含文件夾名和文件名，甚至只有文件名。 如果當(dāng)前文件和鏈接目標(biāo)在同一個(gè)目錄下，則只需要輸入鏈接目標(biāo)的文件名稱；如果要鏈接到下級目錄中的文件，只需要先輸入目錄名，然后

30、加“/”，符號，再輸入鏈接的目標(biāo)文件名即可。如下級文件目錄為images/yt.jpg。 若要鏈接到上一級目錄中的文件，則先輸入“./”，再輸入文件名。 如果使用的資源或鏈接在網(wǎng)站內(nèi)，則推薦使用相對路徑。3.6 表格3.6.1 表格的結(jié)構(gòu) 在XHTML中通過表格標(biāo)記元素、，在網(wǎng)頁中繪制基本的表格。較為復(fù)雜的表格可能還包括、等標(biāo)記元素。u表格以標(biāo)記元素定義，一個(gè)表格中可以有一個(gè)或多個(gè)、等標(biāo)記元素。u標(biāo)記元素用于定義表格中的一行數(shù)據(jù)，如果要定義多行數(shù)據(jù)，就重復(fù)使用標(biāo)記元素。u標(biāo)記元素用于建立單元格，每一行中可以包括一個(gè)或多個(gè)單元格。u標(biāo)記元素用于定義表頭單元格信息，里面的內(nèi)容是粗體顯示的。一個(gè)表格

31、中也可以不使用表頭單元格。3.6.1 表格的結(jié)構(gòu)1.基本用法表格中各標(biāo)記元素的基本用法如下： 表頭單元格列標(biāo)題1 表頭單元格列標(biāo)題2 . 第1列第1行中單元格值 第2列第1行中單元格值 . .3.6.1 表格的結(jié)構(gòu)2.主要屬性（1）標(biāo)記元素相關(guān)說明如下：在XHTML 1.0的文檔類型定義中，如果將其設(shè)置為嚴(yán)格類型（Strict類型），則標(biāo)記元素的align和bgcolor屬性是不被支持的。border屬性為每個(gè)單元格設(shè)置邊框，當(dāng)border屬性的值發(fā)生改變時(shí)，表格周圍邊框的尺寸發(fā)生變化，而表格內(nèi)部的邊框則是1像素寬。設(shè)置border=0，可以顯示沒有邊框的表格。summary屬性不會對普通瀏覽

32、器中產(chǎn)生任何視覺變化。從實(shí)際應(yīng)用的角度出發(fā)，最好使用CSS來添加表格樣式、顏色、顯示效果。屬屬 性性取取 值值功能說明功能說明alignleft、center、right、center、right設(shè)置表格對齊方式bgcolorrgb、#xxxxxx、#xxxxxx設(shè)置表格的背景顏色borderpixels設(shè)置表格邊框的寬度cellpaddingpixels、%、%設(shè)置單元邊沿與內(nèi)容間的空白距離cellspacingpixels、%、%設(shè)置單元格之間的空白距離framevoid、above、below、hsides、lhs、rhs、vsides、box、border、above、below、hs

33、ides、lhs、rhs、vsides、box、border設(shè)置外側(cè)邊框可以顯示的部分rulesnone、groups、rows、cols、all、groups、rows、cols、all設(shè)置內(nèi)側(cè)邊框可以顯示的部分summarytext設(shè)置表格內(nèi)容的摘要widthpixels、%、%設(shè)置表格的寬度3.6.1 表格的結(jié)構(gòu)（2）標(biāo)記元素標(biāo)記元素的主要屬性及其取值和功能說明如表3.16所示。相關(guān)說明如下：在XHTML 1.0的文檔類型定義中，如果將其設(shè)置為嚴(yán)格類型（Strict類型），則標(biāo)記元素的bgcolor屬性是不被支持的。通常，在設(shè)置一行內(nèi)容居中時(shí)是指內(nèi)容的水平和垂直居中，要設(shè)置標(biāo)記元素的al

34、ign和valign屬性為center。屬屬 性性取取 值值功能說明功能說明alignleft、center、right、center、right設(shè)置表格中行內(nèi)容的水平對齊方式bgcolorrgb、#xxxxxx、#xxxxxx設(shè)置表格行的背景顏色valigntop、middle、bottom、baseline、middle、bottom、baseline設(shè)置表格中行內(nèi)容的垂直對齊方式3.6.1 表格的結(jié)構(gòu)（3）、標(biāo)記元素 在網(wǎng)頁的表格中單元格有表頭單元格和標(biāo)準(zhǔn)單元格兩種類型，其中標(biāo)記元素定義表頭單元格，標(biāo)記元素定義標(biāo)準(zhǔn)單元格。兩個(gè)標(biāo)記元素的主要屬性相同，如表3.17所示。相關(guān)說明如下：在XH

35、TML 1.0的文檔類型定義中，如果將其設(shè)置為嚴(yán)格類型（Strict類型），則標(biāo)記元素的bgcolor、height、width、nowrap屬性是不被支持的。設(shè)置單元格內(nèi)容占多行或多列時(shí)，要設(shè)置colspan或rowspan屬性。屬屬 性性取取 值值功能說明功能說明alignleft、center、right、center、right設(shè)置單元格內(nèi)容水平對齊方式bgcolorrgb、#xxxxxx、#xxxxxx設(shè)置單元格的背景顏色valigntop、middle、bottom、baseline、middle、bottom、baseline設(shè)置單元格內(nèi)容垂直對齊方式colspannumber設(shè)

36、置單元格所占的列數(shù)rowspannumber設(shè)置單元格所占的行數(shù)heightpixels、%、%設(shè)置單元格的高度widthpixels、%、%設(shè)置單元格的寬度nowrapnowrap設(shè)置單元格中內(nèi)容是否換行3.6.1 表格的結(jié)構(gòu)例3.20 使用表格制作課程表。3.6.2 表格的分組1.表格的行分組 在XHTML頁面的表格中可以將表格按行進(jìn)行分組，整個(gè)表格分為3組，它們分別是表頭、表格主體、表尾。表格的行分組通過、標(biāo)記元素來實(shí)現(xiàn)，必須使用每一個(gè)元素，缺一不可，它們的出現(xiàn)順序依次為、和，而且它們必須在標(biāo)記元素內(nèi)使用。u標(biāo)記元素用于定義表格中的表頭內(nèi)容。u標(biāo)記元素用于定義表格主體內(nèi)容。u元素用于定義表格的表尾內(nèi)容。1.表格的行分組（1）基本用法表格的行分組中各標(biāo)記元素的基本用法如下： 標(biāo)題1 標(biāo)題2 表尾單元格1 表尾單元格2 數(shù)據(jù)單元格1 數(shù)據(jù)單元格2 1.表格的行分組（2）主要屬性標(biāo)記元素的主要屬性及其取值和功能說明如表3