1、第2章 HTML/XHTML/XML主講教師:趙丹丹主要內(nèi)容 2.1 HTML2.2 XHTML2.3 XML上述是排版語言，不是編程語言。為什么要學(xué)HTML？1.HTML是所有網(wǎng)頁的基礎(chǔ)，對(duì)于一個(gè)想成為Web高手的人來說，學(xué)習(xí)HTML是必不可少的。就像有了計(jì)算器，學(xué)數(shù)學(xué)時(shí)還要從學(xué)1+1開始一樣。網(wǎng)頁里那些精確控制頁面排版的功能必須靠HTML源代碼2.網(wǎng)頁要瘦身:網(wǎng)頁制作工具生成的網(wǎng)頁都含有大量的冗余代碼，如FrontPage生成的冗余代碼在文件中占20%50%， Dreamweaver生成的占5%-10%。冗余代碼降低訪問速度、浪費(fèi)存儲(chǔ)空間。3.學(xué)會(huì)HTML可以讀懂優(yōu)秀網(wǎng)頁的HTML源代碼，

2、學(xué)習(xí)別人設(shè)計(jì)網(wǎng)頁的方法和技巧。2.1 HTML1990年，HTML語言和WWW（萬維網(wǎng)）一起誕生，它是眾多標(biāo)記語言的一種。 1993年，IETF（因特網(wǎng)工程部）起草了HTML的第1個(gè)版本，采用SGML。1995年，IETF推出了和瀏覽器相適應(yīng)的HTML2.0作為正式的Internet標(biāo)準(zhǔn)。 1996年由W3C聯(lián)合幾大公司共同開發(fā)的HTML3.2建議標(biāo)準(zhǔn) 。1997年1月被發(fā)布為正式標(biāo)準(zhǔn)。 1999年12月，W3C又推出HTML4.01。2.1.1 HTML簡單例子 我的主頁標(biāo)題 歡迎訪問我的個(gè)人主頁 2.1.1 HTML簡單例子HTML文件基本結(jié)構(gòu) 文件開始 標(biāo)頭區(qū)開始 標(biāo)題區(qū)內(nèi)容標(biāo)題區(qū)結(jié)束

3、標(biāo)頭區(qū)結(jié)束 主體區(qū)開始主體區(qū)內(nèi)容 主體區(qū)結(jié)束 文件結(jié)束命令一般采用“”和“”的形式配對(duì)出現(xiàn) 有些標(biāo)記也可以單個(gè)出現(xiàn) 標(biāo)記符不區(qū)分大小寫 2.1.2 HTML常用標(biāo)記標(biāo) 記 格 式功 能標(biāo) 記 格 式功 能首部標(biāo)記符，不包含網(wǎng)頁的內(nèi)容，僅提供一些與網(wǎng)頁相關(guān)的信息設(shè)置網(wǎng)頁的標(biāo)題，一般在瀏覽器的頂部標(biāo)題欄中顯示主體標(biāo)記符，包含網(wǎng)頁內(nèi)的所有內(nèi)容：文字、圖片及超鏈接等標(biāo)題標(biāo)記符，x=16，定義了從1級(jí)到6級(jí)標(biāo)題換行并繪制一條水平直線，直線的上下兩端都會(huì)留出一定的空白定義一個(gè)塊，塊內(nèi)可以有文本、圖像等，目的是為了控制該塊的樣式控制字符的樣式，size是它的一個(gè)常用屬性，用來控制字符大小強(qiáng)行中斷當(dāng)前行，多個(gè)

4、標(biāo)記可以創(chuàng)建多個(gè)空行，新行與原行屬性相同插入圖片，常用alt屬性設(shè)置圖片簡單文字說明，用src屬性指明圖片所在位置在網(wǎng)頁中分段，遇到另起一個(gè)新的段落，兩個(gè)段落的性質(zhì)可相同也可不同定義一個(gè)超鏈接，用href屬性可創(chuàng)建多種形式的超鏈接注釋標(biāo)記，注釋之間的內(nèi)容不在瀏覽器中顯示包含預(yù)先格式化的文本，即包含在和之間的內(nèi)容完全按照所設(shè)置的格式顯示提供聯(lián)系信息（聯(lián)系電話、電子郵箱等），一般用斜體顯示其中的內(nèi)容定義一個(gè)無序列表，列表項(xiàng)的條目用標(biāo)記符li創(chuàng)建，ul中可包含一個(gè)或多個(gè)li標(biāo)記定義一個(gè)有序列表，列表項(xiàng)的條目用標(biāo)記符li創(chuàng)建，ol中可包含一個(gè)或多個(gè)li標(biāo)記2.2 XHTML2.2.1 XHTML的基本

5、格式2.2.2 XHTML與HTML的區(qū)別2.2.3 XHTML標(biāo)記2.2 XHTMLHTML從出現(xiàn)到現(xiàn)在，標(biāo)準(zhǔn)在不斷完善、功能也越來越強(qiáng)大，但是它的規(guī)范化要求依然不是很嚴(yán)格，仍有很多缺陷和不足。為此，W3C開發(fā)了XML標(biāo)準(zhǔn)。XML是用來對(duì)信息進(jìn)行自我描述而設(shè)計(jì)的一種新語言XML也是一種基于文本的標(biāo)記語言，但是XML可以讓用戶根據(jù)要表現(xiàn)的文檔，自由地定義標(biāo)記來表現(xiàn)具有實(shí)際意義的內(nèi)容。XML不像HTML那樣具有固定的標(biāo)記集合，它實(shí)際上是一種定義語言的語言，也就是說使用XML的用戶可以自己定義各種標(biāo)記來描述文檔中的任何數(shù)據(jù)元素，將文檔的內(nèi)容組織成豐富的、完整的信息體系。 2.2 XHTMLXML具

6、有便于存儲(chǔ)的數(shù)據(jù)格式、可擴(kuò)展、高度結(jié)構(gòu)化以及方便的網(wǎng)絡(luò)傳輸?shù)忍攸c(diǎn)。XML是Web設(shè)計(jì)的發(fā)展趨勢(shì)。在XML 1.0標(biāo)準(zhǔn)推出時(shí)，仍然有大量的人員采用HTML，而且在萬維網(wǎng)中已存在數(shù)以百萬計(jì)的頁面是采用HTML編寫的，所以不能直接拋棄HTML，因此，HTML的后繼者XHTML就出現(xiàn)了。 2.2 XHTMLXHTML是為了適應(yīng)XML而重新改造的HTML。它是一種獨(dú)立的語言，以HTML 4.01作為基礎(chǔ)，又以XML的應(yīng)用為目的，是從HTML到XML的過渡。2000年1月，W3C推出XHTML 1.0標(biāo)準(zhǔn)。該標(biāo)準(zhǔn)與HTML 4.01具有相同的特性，也是一種標(biāo)記語言，但是做了一些限制，要求在網(wǎng)頁中出現(xiàn)的任何

7、元素都要被標(biāo)記出來。2001年5月，W3C又推出XHTML 1.1標(biāo)準(zhǔn)，它以XHTML 1.0的嚴(yán)謹(jǐn)為基礎(chǔ)，并做了一些改進(jìn)，同時(shí)對(duì)XHTML的模塊化重新定義。XHTML非常嚴(yán)密，兼容性強(qiáng)，交互性好，能夠解決制約HTML發(fā)展的問題，比如多種顯示設(shè)備的支持，多樣的數(shù)據(jù)表示等。 2.2 XHTMLW3C已經(jīng)確定了4個(gè)XHTML標(biāo)準(zhǔn)： XHTML1.0 Transitional XHTML1.0 Frameset XHTML1.0 Strict XHTML1.1 XHTML1.1規(guī)范是這些級(jí)別中最嚴(yán)格的 XHTML1.0 Frameset和Transitional規(guī)范定義了基于XML的HTML標(biāo)記，允

8、許某些常用的構(gòu)造。 2.2.1 XHTML的基本格式一個(gè)符合標(biāo)準(zhǔn)的XHTML網(wǎng)頁，必須包含一個(gè)DOCTYPE聲明 該聲明用來將網(wǎng)頁標(biāo)識(shí)為XHTML頁，并說明網(wǎng)頁所遵循的XHTML規(guī)范。 這個(gè)網(wǎng)頁還必須聲明XHTML命名空間xmlns ，網(wǎng)頁內(nèi)的所有標(biāo)記都是屬于這個(gè)命名空間的。例如： 2.2.1 XHTML的基本格式XHTML中的標(biāo)記符區(qū)分大小寫，它的基本格式為： 文檔標(biāo)題 XHTML文檔的主體部分 2.2.2 XHTML與HTML的區(qū)別XHTML與HTML的區(qū)別標(biāo)記的嵌套使用(嚴(yán)格/不嚴(yán)格）大小寫的使用（區(qū)分/不區(qū)分）引號(hào)的使用 （屬性必須加引號(hào)/隨意）結(jié)束標(biāo)記（不許省略/可以省略） 樣式的使

9、用 （type/ style)id和name 具體方法參看課本例2-2 。2.2.3 XHTML標(biāo)記為網(wǎng)頁加入標(biāo)題 網(wǎng)頁標(biāo)題總是加在部分，瀏覽該網(wǎng)頁時(shí)它會(huì)出現(xiàn)在瀏覽器窗口的標(biāo)題欄中。 表示標(biāo)題的語法是： 標(biāo)題字符串主體標(biāo)記符body與樣式style屬性 XHTML的主體標(biāo)記和HTML是一樣的，在兩標(biāo)記之間定義了網(wǎng)頁的所有顯示內(nèi)容。默認(rèn)背景色為白色，字體是12像素黑色Times New Roman。 在XHTML中，對(duì)樣式的所有設(shè)置都必須放在【style】屬性中來完成。 使用【style】屬性中的樣式，可以對(duì)該標(biāo)記所作用的區(qū)域進(jìn)行一種或多種設(shè)置，例如，字體的大小、顏色，頁面的背景色和背景圖等。2

10、.2.3 XHTML標(biāo)記style屬性一般格式為： style中常用的樣式有：background-color：設(shè)置網(wǎng)頁的背景顏色；color：設(shè)置網(wǎng)頁中字體的顏色；顏色值: blue/red/green/black/white等 或#FFFFFF/#00FF00格式font-family：設(shè)置網(wǎng)頁中字體的名稱，例如宋體、黑體等；font-size：設(shè)置網(wǎng)頁中字體的大?。ㄩL度|百分比|標(biāo)準(zhǔn)字號(hào)）text-align：設(shè)置文本的對(duì)齊方式，常有3種不同的取值，分別為“l(fā)eft（左對(duì)齊）”、“right（右對(duì)齊）”和“center（居中對(duì)齊）”，在默認(rèn)情況下使用左對(duì)齊方式。例如：2.2.3 XHTM

11、L標(biāo)記注釋標(biāo)記 在XHTML中以標(biāo)記為結(jié)束，其間就是被注釋的內(nèi)容。 瀏覽器在解讀XHTML文檔時(shí)不會(huì)顯示注釋的內(nèi)容。 在設(shè)計(jì)頁面時(shí)，適當(dāng)?shù)慕o出注釋，可以增強(qiáng)文檔的可讀性和可維護(hù)性。2.2.3 XHTML標(biāo)記標(biāo)題標(biāo)記符hx 標(biāo)記符hx（其中x=16）用于設(shè)置文件中的標(biāo)題，在瀏覽器中顯示的是黑體 標(biāo)記表示最大標(biāo)題，標(biāo)記表示最小標(biāo)題 與必須配對(duì)使用，且在后文字自動(dòng)換行。 標(biāo)題的樣式不能像HTML中通過align屬性進(jìn)行設(shè)置，在XHTML中需要使用【style】屬性中的【text-align】樣式進(jìn)行設(shè)置。例如：這是1號(hào)標(biāo)題這是2號(hào)標(biāo)題這是6號(hào)標(biāo)題2.2.3 XHTML標(biāo)記文字樣式標(biāo)記符 XHTML使

12、用【style】屬性中的樣式【color】、【font-family】和【font-size】 XHTML也保留了HTML所提供的一些字體樣式標(biāo)記符： b標(biāo)記設(shè)置文字為粗體bold i標(biāo)記為斜體italic big標(biāo)記和small標(biāo)記分別表示大字體和小字體 sub標(biāo)記和sup標(biāo)記使文字成為下標(biāo)或上標(biāo)例如：加粗 斜體 大字號(hào) 公式:x=a2+b1 2.2.3 XHTML標(biāo)記空格標(biāo)記 在XHTML語言中，顯示多個(gè)空格，XHTML保留了HTML提供的空格標(biāo)記“ ”。 一個(gè)“”表示一個(gè)空格，多個(gè)“”表示多個(gè)空格。 “ ”表示5個(gè)空格。 將空格和空格標(biāo)記“”聯(lián)合使用。 “ ”表示5個(gè)空格。 2.2.3

13、XHTML標(biāo)記段落標(biāo)記符p、br、pre和hr 和是配對(duì)使用的，用來劃分段落。在換行的時(shí)候另起了一個(gè)新的段落。 單獨(dú)使用，表示強(qiáng)制換行。中斷當(dāng)前行而另起一行，但是新行與上一行是屬于同一段落的，與上一行保持了相同的屬性。 預(yù)格式化標(biāo)記和之間輸入的內(nèi)容將在瀏覽器中按照原格式毫無變化的顯示出來 單獨(dú)使用可以實(shí)現(xiàn)段落的換行，并繪制一條水平直線，在直線的上下兩段留出一定的空白 2.2.3 XHTML標(biāo)記有序列表標(biāo)記符ol和列表項(xiàng)標(biāo)記符li 使用標(biāo)記和在XHTML中定義了一個(gè)有序列表。 兩個(gè)標(biāo)記之間不允許有文本信息。列表中的每一項(xiàng)都必須使用列表項(xiàng)標(biāo)記開始，標(biāo)記作為結(jié)尾表示一個(gè)條目的結(jié)束。 有序列表項(xiàng)1 有

14、序列表項(xiàng)2 有序列表項(xiàng)3 li是list的縮寫。ol是order list的縮寫。 li有自動(dòng)換行的作用，每個(gè)條目自動(dòng)為一行。 有序列表在顯示時(shí)，會(huì)在每個(gè)條目前面加上一定形式的有規(guī)律的項(xiàng)目序號(hào)。例如，1、2、3、a、b、c等之類。2.2.3 XHTML標(biāo)記在XHTML中，標(biāo)記符ol建立的有序列表默認(rèn)的項(xiàng)目序號(hào)是十進(jìn)制數(shù)字 通過【style】屬性的【list-style-type】樣式設(shè)置整個(gè)列表的項(xiàng)目序號(hào) 【list-style-type】樣式的取值： decimal（十進(jìn)制） lower-alpha（小寫英文字母） upper-alpha（大寫英文字母） lower-roman（小寫羅馬數(shù)字

15、） upper-roman（大寫羅馬數(shù)字） 每一個(gè)li創(chuàng)建的項(xiàng)目也可以用【list-style-type】單獨(dú)指定項(xiàng)目序號(hào)2.2.3 XHTML標(biāo)記無序列表標(biāo)記符ul 標(biāo)記和設(shè)置了一個(gè)無序列表。列表項(xiàng)中間同樣不允許有文本出現(xiàn)。每一個(gè)條目也必須用標(biāo)記創(chuàng)建，結(jié)尾。 一個(gè)ul標(biāo)記的無序列表中可包含一個(gè)或多個(gè)li標(biāo)記，用于創(chuàng)建一項(xiàng)或多項(xiàng)條目。 ul同樣可以使用【style】屬性的【list-style-type】樣式設(shè)置整個(gè)無序列表的項(xiàng)目符號(hào)。 三種取值：“disc”，“circle”和“square”，分別表示實(shí)心圓，空心圓，小方塊。 每一個(gè)li創(chuàng)建的項(xiàng)目同樣可以用【list-style-type】

16、單獨(dú)指定項(xiàng)目符號(hào)。 無序列表項(xiàng)1 無序列表項(xiàng)2 無序列表項(xiàng)3 2.2.3 XHTML標(biāo)記圖像標(biāo)記符img img src=圖形文件URL alt=說明 / src屬性：指明網(wǎng)頁中所引用圖像的位置； alt屬性：用簡單的文字說明所引用的圖像。當(dāng)圖像不能顯示或鼠標(biāo)停在圖片上時(shí)，可以通過它來描述圖片。 可以利用style屬性的width和height兩個(gè)樣式分別設(shè)置圖片的寬度和高度，單位可以是像素，也可以是相對(duì)于父標(biāo)記大小的百分比。例如： 2.2.3 XHTML標(biāo)記超鏈接標(biāo)記符a 標(biāo)記包含了【href】、【id】和【target】等常用屬性。 （1）id屬性：用來定義文檔內(nèi)創(chuàng)建的錨點(diǎn)，在實(shí)現(xiàn)頁面內(nèi)鏈

17、接的時(shí)候使用。 （2）href屬性：用來指定超鏈所連接的目標(biāo)文檔的URL。它提供了多種鏈接方式，可以在頁面內(nèi)創(chuàng)建超鏈接，也可以在頁面間創(chuàng)建超鏈接。 （3）target屬性：目標(biāo)窗口，指定如何顯示鏈接的文件。默認(rèn)設(shè)置為“_blank”，表示在新的瀏覽器窗口中顯示相應(yīng)的文件內(nèi)容；也可以設(shè)置為“_self”，表示在本窗口內(nèi)顯示相應(yīng)內(nèi)容。 2.2.3 XHTML標(biāo)記提供了多種鏈接方式，可以在頁面內(nèi)創(chuàng)建超鏈接，也可以在頁面間創(chuàng)建超鏈接。 鏈接到本頁面內(nèi)的某個(gè)錨點(diǎn)（有的叫書簽）實(shí)現(xiàn)一個(gè)頁面內(nèi)的鏈接時(shí)，需要先使用id屬性定義一個(gè)錨點(diǎn)，再使用a標(biāo)記的href屬性指向該錨點(diǎn) 在網(wǎng)頁中這兩部分沒有先后之分 一般形

18、式為： “#”號(hào)表示鏈接目標(biāo)與a標(biāo)記屬于同一個(gè)文檔，被鏈接的目標(biāo)則用id標(biāo)示。2.2.3 XHTML標(biāo)記鏈接到另一個(gè)頁面可以使用相對(duì)或絕對(duì)URL（一般都使用相對(duì)URL）指向某一個(gè)特定的頁面 一般形式：信息描述鏈接到另一個(gè)頁面內(nèi)的某個(gè)錨點(diǎn) 將前兩種鏈接方式結(jié)合即可實(shí)現(xiàn)從一個(gè)頁面轉(zhuǎn)向另一個(gè)頁面內(nèi)的某一處 首先要在目標(biāo)頁面內(nèi)定義一個(gè)錨點(diǎn)，然后在源頁面內(nèi)建立超鏈接指向該錨點(diǎn) 一般形式為： 描述信息文件名后加#號(hào)表示鏈接到目標(biāo)文件中所定義的錨點(diǎn)處 2.2.3 XHTML標(biāo)記鏈接到另一個(gè)網(wǎng)站 在頁面內(nèi)創(chuàng)建超鏈接，直接指向另一個(gè)網(wǎng)站在此只要給目標(biāo)網(wǎng)站的網(wǎng)址即可 網(wǎng)易163鏈接到電子信箱 【href】屬性中需

19、要使用“mailto”協(xié)議 在該協(xié)議的后面給出一個(gè)具體的電子郵箱地址 一般形式為： 聯(lián)系人鏈接到FTP站點(diǎn)FTP演示2.2.3 XHTML標(biāo)記鏈接到某一個(gè)圖像文件 使用href還可以指向圖像文件，瀏覽器將在窗口中顯示相應(yīng)的圖片 感恩的心鏈接到瀏覽器不支持的文件 瀏覽器自動(dòng)彈出提示下載文件的對(duì)話框，由用戶選擇是否下載 文件下載如何實(shí)現(xiàn)創(chuàng)建頁面內(nèi)的超鏈接請(qǐng)參見例2-3 。2.2.3 XHTML標(biāo)記圖像地圖 2.2.3 XHTML標(biāo)記圖像地圖【1】定義形狀 - shaperect：矩形 circle：圓形 poly：多邊形 【2】定義區(qū)域 - coordsa.矩形：必須使用四個(gè)數(shù)字，前兩個(gè)數(shù)字為左上

20、角座標(biāo)，后兩個(gè)數(shù)字為右下角座標(biāo)例： b.圓形：必須使用三個(gè)數(shù)字，前兩個(gè)數(shù)字為圓心的座標(biāo)，最后一個(gè)數(shù)字為半徑長度例：c.任意圖形（多邊形）：將圖形之每一轉(zhuǎn)折點(diǎn)座標(biāo)依序填入例：2.2.3 XHTML標(biāo)記meta標(biāo)記meta不成對(duì)標(biāo)記，只在head區(qū) 10秒后自動(dòng)更新一次頁面 歡迎進(jìn)入聊天室2.2.3 XHTML標(biāo)記:表格table標(biāo)記 定義表頭 定義表的行 定義單元格border: 表格邊框的粗細(xì)，單位是像素width: 表格的寬度，單位像素或百分比2.2.3 XHTML標(biāo)記:跨多行、多列的單元格 跨x行的單元格 跨y列的單元格 跨x行y列2.2.3 XHTML標(biāo)記:基本語法*: get 傳送數(shù)據(jù)

21、速度快 但能傳輸?shù)淖止?jié)少 post傳送數(shù)據(jù)速度慢 但能傳輸?shù)淖止?jié)不限2.2.3 XHTML標(biāo)記:標(biāo)記#:text 單行文本框 password 密碼框checkbox 復(fù)選框 radio單選按鈕image 圖像按鈕 hidden 隱藏字段submit 提交按鈕 reset 復(fù)位按鈕 2.2.3 XHTML標(biāo)記:單行文本框2.2.3 XHTML標(biāo)記:復(fù)選框和單選按鈕Checked : 設(shè)置默認(rèn)選項(xiàng)2.2.3 XHTML標(biāo)記:文本區(qū)域2.2.3 XHTML標(biāo)記:列表框菜單項(xiàng)1菜單項(xiàng)2n=1 下拉菜單（下拉列表）n1 列表框Multiple 允許選擇多行 2.2.3 XHTML標(biāo)記:列表框菜單項(xiàng)1菜單項(xiàng)2n=1 下拉菜單（下拉列表）n1 列表框Multiple 允許選擇多行 2.3 XML 可擴(kuò)展標(biāo)記語言XML（eXtensible Markup Language）是為了克服HTML缺乏靈活性和伸縮性的缺點(diǎn)以及SGML( Sta