怎樣從編程入門到軟件高級(jí)人才

第8章超媒體與Web系統(tǒng)8.1超媒體系統(tǒng)的組成8.2Web超媒體系統(tǒng)8.3智能超媒體系統(tǒng)58同城招聘

http://8.1超媒體系統(tǒng)的組成8.1.1超媒體的概念和發(fā)展歷史1.超文本和超媒體的概念在當(dāng)今的信息社會(huì)，信息以爆炸形式增長(zhǎng)，如何來有效的利用這些信息？1950年在計(jì)算機(jī)普及之前，世界范圍內(nèi)信息量的增長(zhǎng)速度是每150年翻一番；隨著計(jì)算機(jī)的廣泛應(yīng)用，1950-1960年間信息量的增長(zhǎng)達(dá)到每10年翻一番；1960-1992年間縮短為每5年翻一番。人們預(yù)計(jì)2020年以后信息量每73天就要翻一番。治療癌癥的方法信息的存儲(chǔ)與檢索機(jī)制文本文本是我們最熟悉的信息表示方式。通常以字、句子、段落、節(jié)、章作為文本內(nèi)容的邏輯單位，以字節(jié)、行、頁、冊(cè)、卷為物理單位。最顯著的特點(diǎn)是它在組織上是線性的和順序的人腦的記憶機(jī)制人類的記憶是聯(lián)想式的記憶。網(wǎng)狀結(jié)構(gòu)。和線性結(jié)構(gòu)單一路徑不同，可能有多條路徑。不同的聯(lián)想檢索必然導(dǎo)致不同的路徑。冬天-->結(jié)冰-->河-->魚-->宴會(huì)-->婚禮冬天-->冷-->太陽-->飛船-->宇航員-->吃飯-->多寶魚-->農(nóng)民-->…用文本無法管理這種互聯(lián)的網(wǎng)狀信息結(jié)構(gòu)。8.1.1超媒體的概念和發(fā)展歷史超文本（hypertext）超文本結(jié)構(gòu)類似于人類這種聯(lián)想記憶結(jié)構(gòu)，采用一種非線性的網(wǎng)狀結(jié)構(gòu)組織塊狀信息，沒有固定的順序，也不要求讀者按照某個(gè)順序來讀。超文本把文本按其內(nèi)部固有的獨(dú)立性和相關(guān)性劃分成不同的基本信息塊，稱為結(jié)點(diǎn)（node）；結(jié)點(diǎn)之間按它們的自然關(guān)聯(lián)，用鏈連接成網(wǎng)。超文本的簡(jiǎn)潔定義：超文本是由信息結(jié)點(diǎn)和表示信息結(jié)點(diǎn)間相關(guān)性的鏈構(gòu)成的一個(gè)具有一定邏輯結(jié)構(gòu)和語義的網(wǎng)絡(luò)。在超文本信息管理技術(shù)中，結(jié)點(diǎn)是基本單位。超媒體＝多媒體＋超文本8.1.1超媒體的概念和發(fā)展歷史圖超文本結(jié)構(gòu)A…..*

..*.B…*..

.*..C…...

*...D…...

E…...

*..ABCDE8.1.1超媒體的概念和發(fā)展歷史2.超媒體的發(fā)展簡(jiǎn)史概念產(chǎn)生時(shí)期（1945-1965）標(biāo)志性的事件Bush提出Memex（memoryextender），Engelbart的NLS系統(tǒng)Nelson創(chuàng)造Hypertext8.1.1超媒體的概念和發(fā)展歷史鼻祖:美國(guó)著名科學(xué)家V.Bush(1890-1974)1945，“AsWeMayThink”，《大西洋月刊》Memex(Memoryextender的縮寫,即存儲(chǔ)擴(kuò)充器)設(shè)想（1932年和1933提出）；8.1.1超媒體的概念和發(fā)展歷史提出設(shè)想的原因科學(xué)信息量迅速增長(zhǎng)：他擔(dān)心即使是某一門學(xué)科的專家也不可能跟蹤該學(xué)科的發(fā)展情況。200多年來印刷技術(shù)沒有什么突破性的進(jìn)展，有關(guān)共享與表現(xiàn)信息的方法也很少,不敷應(yīng)用。檢索困難：當(dāng)要查找某一信息時(shí),要遍歷所有對(duì)象逐一查找，信息的定位繁瑣；Memex是什么？一種專門存儲(chǔ)書籍、檔案和信件的設(shè)備；是機(jī)械的。8.1.1超媒體的概念和發(fā)展歷史組成與結(jié)構(gòu)信息存在縮微膠片中；有一個(gè)掃描器輸入新的資料；可以在頁邊用手加注釋和說明。元素之間鏈連成對(duì),任意元素都可以隨意、迅速而且自動(dòng)地選擇另一元素《時(shí)代》和《生活》刊登了Memex模型8.1.1超媒體的概念和發(fā)展歷史先驅(qū)者DouglasEngelbart受Bush的影響斯坦福研究所開展Augment課題AugmentHumanIntellect擴(kuò)展人類智力開發(fā)一個(gè)計(jì)算機(jī)系統(tǒng)幫助人類思維實(shí)驗(yàn)工具NLS(oN-LineSystem,聯(lián)機(jī)系統(tǒng))1968年,在美國(guó)秋季聯(lián)合計(jì)算機(jī)會(huì)議上作了精彩的表演；他利用NLS與500英里外的同事一起建立一超文本文獻(xiàn)。有些人認(rèn)是Engelbart發(fā)明了超文本8.1.1超媒體的概念和發(fā)展歷史TedNelson杜撰了“超文本”1960年，畢業(yè)后又回到哈佛大學(xué)進(jìn)修“計(jì)算機(jī)程序設(shè)計(jì)”；他提出了一“文本處理”系統(tǒng)作為課程設(shè)計(jì)題目；60年代末應(yīng)布朗大學(xué)邀請(qǐng)共同研究超文本問題；提出了Xanadu系統(tǒng)的設(shè)想，撰寫超文本研究專著“Xanadu”8.1.1超媒體的概念和發(fā)展歷史概念系統(tǒng)的研究時(shí)期（1967-1985）1967年,布朗大學(xué)AndyvanDam等研制第一個(gè)可運(yùn)行超文本系統(tǒng)TheHypertextEditingSystem;1968年,DouglasEngelbart在FJCC上演示NLS系統(tǒng);1968年,布朗大學(xué)推出FRESS;1975年,CMU推出ZOG(現(xiàn)為KMS);1978年,MIT建筑機(jī)械組推出第一個(gè)超媒體視頻盤片系統(tǒng)AspenMovieMap8.1.1超媒體的概念和發(fā)展歷史成熟與發(fā)展時(shí)期（1985－）1985年,JanetWalker研制的SymbolicsDocumentExaminer；1985年,布朗大學(xué)推出Intermedia系統(tǒng),在Macintosh上運(yùn)行;1986年,OWL引入Guide,這是第一個(gè)廣泛應(yīng)用的超文本;1987年,Xerox公司推出Notecards,蘋果公司BillAtkinson研制Hypercard；1991年,美國(guó)Asymetrix公司推出ToolBook系統(tǒng);1990年,位于日內(nèi)瓦的歐洲量子物理實(shí)驗(yàn)室CERN開發(fā)的運(yùn)行于Internet的WWW系統(tǒng),對(duì)人類社會(huì)產(chǎn)生深遠(yuǎn)影響.8.1.2超媒體的組成要素1.結(jié)點(diǎn)結(jié)點(diǎn)是超文本表達(dá)信息的一個(gè)基本單位，其大小可變，結(jié)點(diǎn)的內(nèi)容可以是文本、圖形、圖像、音頻、視頻等，也可以是一段程序。結(jié)點(diǎn)的表示方法在不同的系統(tǒng)中是不同的。常見的基本類型有：媒體類結(jié)點(diǎn)動(dòng)作與操作結(jié)點(diǎn)組織結(jié)點(diǎn)推理結(jié)點(diǎn)8.1.2超媒體的組成要素2.鏈組成超文本的基本單位，形式上是從一個(gè)結(jié)點(diǎn)指向另一個(gè)結(jié)點(diǎn)的指針，本質(zhì)上表示不同結(jié)點(diǎn)上存在著的信息的聯(lián)系。鏈定義了超文本的結(jié)構(gòu)并提供瀏覽和探索結(jié)點(diǎn)的能力。比較典型的鏈型基本結(jié)構(gòu)鏈基本鏈，交叉索引鏈，節(jié)點(diǎn)內(nèi)注釋鏈組織鏈和推理鏈索引鏈，執(zhí)行鏈其他鏈型自動(dòng)鏈接，類型鏈8.1.2超媒體的組成要素3.熱標(biāo)熱標(biāo)是確定信息關(guān)聯(lián)的鏈源，由它將引起向相關(guān)內(nèi)容的轉(zhuǎn)移。熱標(biāo)的形式一般有：熱字－－……@圖8-1所示|Example.jpg@……熱區(qū)－－在圖像中直接指明。矩形，多邊形熱元－－圖元熱點(diǎn)－－時(shí)基類媒體，[b，a，c]熱屬性－－數(shù)據(jù)庫中的屬性作為熱源8.1.2超媒體的組成要素4.宏節(jié)點(diǎn)鏈接在一起的結(jié)點(diǎn)群，更確切的說，一個(gè)宏結(jié)點(diǎn)就是超文本網(wǎng)絡(luò)的一部分（有某種共同特征的子集）分層是簡(jiǎn)化網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)最有效的方法宏文本和微文本:表示不同層次的超文本。微文本又稱小型超文本,它支持對(duì)結(jié)點(diǎn)信息的瀏覽;宏文本又稱大型超文本,支持對(duì)宏結(jié)點(diǎn)的查找與索引。宏結(jié)點(diǎn)的引入雖然簡(jiǎn)化了網(wǎng)絡(luò)結(jié)構(gòu),卻增加了管理與檢索的層次。8.1.2超媒體的組成要素圖宏結(jié)點(diǎn)8.1.3超媒體系統(tǒng)的Dexter模型目標(biāo)為開發(fā)分布信息之間的交互操作和信息共享提供一種標(biāo)準(zhǔn)或者參考規(guī)范。Dexter模型分為三層：存儲(chǔ)層運(yùn)行層元素內(nèi)部層各層之間通過兩個(gè)接口：錨定接口表現(xiàn)規(guī)范運(yùn)行層表現(xiàn)規(guī)范存儲(chǔ)層錨定接口元素內(nèi)部層8.1.3超媒體系統(tǒng)的Dexter模型存儲(chǔ)層描述成員之間的網(wǎng)狀關(guān)系。成員描述系統(tǒng)的基本對(duì)象,包括結(jié)點(diǎn)和鏈等。原子成員是最小成員單位,也即超文本中的結(jié)點(diǎn),其內(nèi)容可為不同媒體的信息。復(fù)合成員是具有嵌套層次的成員,由原子成員和鏈復(fù)合而成。鏈?zhǔn)潜硎驹嘏c元素之間關(guān)系的一種實(shí)體。一般由兩個(gè)或多個(gè)成員“結(jié)點(diǎn)”構(gòu)成。8.1.3超媒體系統(tǒng)的Dexter模型存儲(chǔ)層（續(xù)）每個(gè)成員都有一個(gè)唯一的標(biāo)識(shí)符，稱為UID。超文本由一個(gè)有限個(gè)成員組成的集合和2個(gè)函數(shù)構(gòu)成。Hypertext=(E1,E2,…,En,F1,F2)F1,F2是用于檢索定位的函數(shù)，分別稱為訪問函數(shù)和分解函數(shù)。定義了由多個(gè)函數(shù)組成的操作集合，用于實(shí)時(shí)地對(duì)超文本系統(tǒng)進(jìn)行訪問和修改。8.1.3超媒體系統(tǒng)的Dexter模型元素內(nèi)部層描述超文本中各個(gè)成員的內(nèi)容和結(jié)構(gòu)，對(duì)應(yīng)于各個(gè)媒體單個(gè)應(yīng)用成員。從結(jié)構(gòu)上分為簡(jiǎn)單結(jié)構(gòu)復(fù)雜結(jié)構(gòu)簡(jiǎn)單結(jié)構(gòu)就是每個(gè)成員內(nèi)部?jī)H由同一種數(shù)據(jù)媒體構(gòu)成復(fù)雜結(jié)構(gòu)的成員內(nèi)部又由各個(gè)子成員構(gòu)成。這種嵌套結(jié)構(gòu)的成員定義為描述復(fù)雜的混和類型成員提供了靈活性。8.1.3超媒體系統(tǒng)的Dexter模型運(yùn)行層支持用戶和超文本交互作用的機(jī)制，可直接訪問和操作在存儲(chǔ)層和成員內(nèi)部層定義的網(wǎng)狀數(shù)據(jù)模型。定位機(jī)制通過錨定接口完成其基本成分是錨（anchor），錨由兩部分組成：錨號(hào)和錨值。錨和鏈的差別在于鏈僅指向元素，而錨可指向成員內(nèi)的具體內(nèi)容。表現(xiàn)規(guī)范規(guī)定了同一數(shù)據(jù)呈現(xiàn)給用戶的不同表現(xiàn)性質(zhì)8.2Web超媒體系統(tǒng)8.2.1分布式超媒體系統(tǒng)wwwWWW采用客戶/服務(wù)期體系結(jié)構(gòu)Web超文本系統(tǒng)可以分為三層結(jié)構(gòu)表現(xiàn)層，即用戶接口層由運(yùn)行在用戶計(jì)算機(jī)上的客戶瀏覽器管理超文本抽象機(jī)層：存儲(chǔ)節(jié)點(diǎn)和鏈由HTML和HTTP組成超文本信息庫層：存儲(chǔ)數(shù)據(jù)，共享數(shù)據(jù)和網(wǎng)絡(luò)訪問由Internet上遍及全球的稱為“服務(wù)器”的計(jì)算機(jī)組成8.2.2www中的超媒體協(xié)議與標(biāo)記語言1.HTTP：超文本傳輸協(xié)議HTTP的運(yùn)作方式8.2.2www中的超媒體協(xié)議與標(biāo)記語言HTTP的消息結(jié)構(gòu)客戶發(fā)出的請(qǐng)求消息請(qǐng)求消息＝請(qǐng)求行*（通用消息頭|請(qǐng)求頭|實(shí)體頭）CRLF[實(shí)體內(nèi)容]請(qǐng)求行＝方法請(qǐng)求URLHTTP版本號(hào)CRLF方法＝“GET”|“HEAD”|“POST”|擴(kuò)展方法URL＝協(xié)議名稱＋宿主名＋目錄與文件名8.2.2www中的超媒體協(xié)議與標(biāo)記語言HTTP的消息結(jié)構(gòu)（續(xù)）服務(wù)器發(fā)出的響應(yīng)消息響應(yīng)消息＝狀態(tài)行*（通用消息頭|響應(yīng)頭|實(shí)體頭）CRLF[實(shí)體內(nèi)容]狀態(tài)行＝HTTP版本號(hào)狀態(tài)碼原因敘述1××：表示保留，HTTP未用2××：表示請(qǐng)求成功地接收3××：表示為了完成請(qǐng)求，客戶必須進(jìn)一步細(xì)化請(qǐng)求4××：表示客戶錯(cuò)誤5××：表示服務(wù)器錯(cuò)誤8.2.2www中的超媒體協(xié)議與標(biāo)記語言2.HTML：超文本標(biāo)記語言WWW基本概念HTML基本概念HTML文字排版格式HTML標(biāo)題格式HTML字體HTML表格8.2.2www中的超媒體協(xié)議與標(biāo)記語言WWW的基本概念WWW也就是WorldWideWeb，俗稱萬維網(wǎng)，或環(huán)球信息網(wǎng)，也有簡(jiǎn)稱為3w，Web等。WWW是一個(gè)基于超文本方式的信息查詢工具。它利用鏈接從一個(gè)站點(diǎn)到達(dá)另一個(gè)站點(diǎn)，并提供一種友好的信息查詢接口，即用戶僅需提出查詢要求，而到什么地方查詢及如何查詢則由WWW自動(dòng)完成。WWW的信息查詢主要靠網(wǎng)頁來完成，網(wǎng)頁采用超文本標(biāo)記語言（HTML）格式寫成，可為WWW瀏覽器識(shí)別顯示。8.2.2www中的超媒體協(xié)議與標(biāo)記語言網(wǎng)頁制作的目標(biāo)內(nèi)容豐富，速度快，頁面漂亮，經(jīng)常維護(hù)更新。信息的組織主要是根據(jù)信息的特點(diǎn)來確定其組織的形式，現(xiàn)在網(wǎng)頁的制作中主要流行幀結(jié)構(gòu)(Frame)。網(wǎng)頁制作語言網(wǎng)頁開發(fā)都用HTML語言，必要時(shí)可嵌入一些腳本語言來增強(qiáng)功能，如JavaScript，VBScript等。網(wǎng)頁制作工具理論上，只要一個(gè)記事本即可，現(xiàn)在出現(xiàn)了很多集成化工具，如Frontpage，DreamWeaver,Netscape編輯器等8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言什么是HTMLHTML即超文本標(biāo)記語言（HypertextMakeupLanguage）一種利用專用符號(hào)以顯示某些特征或功能的超文字的語言。HTML被廣泛用于創(chuàng)建存儲(chǔ)在WWW服務(wù)器和客戶端的多媒體文檔，并能被瀏覽器解釋瀏覽。HTML不需要專門的編輯器。HTML所生成的文檔是解釋執(zhí)行的，可以用任何文本編輯器來完成超文本文檔的制作。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言HTML的模板文件形式如下：<HTML>HTML文件起始標(biāo)志，表示以下為HTML文件<HEAD>HTML文件頭開始標(biāo)志<TITLE>…</TITLE>之間是文件標(biāo)題…</HEAD>HTML文件頭結(jié)束標(biāo)志

<BODY>…</BODY>文件主體結(jié)束標(biāo)志，表示文件主體到此結(jié)束</HTML>HTML文件結(jié)尾標(biāo)志8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言就上面所講的模板舉一個(gè)簡(jiǎn)單的例子：<HTML><HEAD><TITLE>HelloWorldPage</TITLE></HEAD><BODY>HelloWorld!</BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖一個(gè)簡(jiǎn)單的HTML實(shí)例8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言排版標(biāo)簽<BR>文字轉(zhuǎn)行

………….….<BR><P>段落

……………..…..<P><PRE>原始文字樣式

<PRE>…….</PRE><CENTER>居中對(duì)齊

<CENTER>…</CENTER>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言文字換行標(biāo)簽格式…...<BR>一個(gè)無<BR>標(biāo)簽的例子<HTML><HEAD><TITLE>普通格式的文件</TITLE></HEAD><BODY>

空山不見人但聞人語聲反景赴山林復(fù)照青苔上

</BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖無<BR>標(biāo)簽實(shí)例圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言帶<BR>標(biāo)簽實(shí)例<HTML><HEAD><TITLE>文字轉(zhuǎn)行標(biāo)簽的應(yīng)用</TITLE></HEAD><BODY>

空山不見人<BR>

但聞人語聲<BR>

反景赴山林<BR>

復(fù)照青苔上<BR></BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖有<BR>標(biāo)簽實(shí)例圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<BR>標(biāo)簽作用由瀏覽器看到的文字轉(zhuǎn)行方式跟編輯的HTML文件不同，當(dāng)瀏覽器讀入HTML文件時(shí)，只會(huì)判別標(biāo)簽及其文字，并不會(huì)判別Enter鍵，所以文字會(huì)同一行輸出。文字轉(zhuǎn)行標(biāo)簽的作用在于強(qiáng)迫文字轉(zhuǎn)行，使文字按用戶的意思轉(zhuǎn)行，而不會(huì)因?yàn)g覽器窗口的大小而打亂順序。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言段落格式………<P>作用：段落標(biāo)簽<P>出現(xiàn)的位置會(huì)有一個(gè)空白行出現(xiàn)。文件實(shí)例：8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<HTML> <HEAD> <TITLE>段落標(biāo)簽</TITLE> </HEAD> <BODY>

空山不見人<BR>

但聞人語聲<BR>

反景赴山林<BR>

復(fù)照青苔上<P>

朝辭白帝彩云間<BR>

千里江陵一日還<BR>

兩岸猿聲啼不住<BR>

輕舟已過萬重山<P> </BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖帶<P>標(biāo)簽文件實(shí)例8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言原始文字樣式格式<PRE>…….</PRE>下面我們先看一個(gè)無<PRE>標(biāo)簽的例子<HTML> <HEAD> <TITLE>文字轉(zhuǎn)行</TITLE> </HEAD> <BODY>

李白<BR>

朝辭白帝彩云間<BR>

千里江陵一日還<BR>

兩岸猿聲啼不住<BR>

輕舟已過萬重山<BR> </BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖不帶<PRE>標(biāo)簽文件實(shí)例圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言一個(gè)帶<PRE>標(biāo)簽的例子<HTML><HEAD><TITLE>帶有PRE標(biāo)簽的例子</TITLE></HEAD><BODY><PRE>

李白朝辭白帝彩云間千里江陵一日還兩岸猿聲啼不住輕舟已過萬重山

</PRE></BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖帶<PRE>標(biāo)簽文件實(shí)例圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<PRE>標(biāo)簽作用瀏覽器無法判別超過一個(gè)以上的半角空白字符，因而“李白”文字前的空格不被識(shí)別。<PRE>的作用是使得文件在瀏覽器中所呈現(xiàn)的效果與在編輯器中看到的一樣，即“所見即所得”，并省略了每一行輸入<BR>的麻煩。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言居中對(duì)齊格式<CENTER>……</CENTER>作用：將標(biāo)簽之間的文字居中對(duì)齊8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<HTML><HEAD><TITLE>居中對(duì)齊</TITLE></HEAD><BODY><CENTER>

李白<BR>

朝辭白帝彩云間<BR>

千里江陵一日還<BR>

兩岸猿聲啼不住<BR>

輕舟已過萬重山<BR> </CENTER> </BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖居中對(duì)齊實(shí)例圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言HTML標(biāo)題格式<H>標(biāo)題格式<HX>……….</HX>X=1,2,3,4,5,6標(biāo)題對(duì)齊格式缺省情況下向左對(duì)齊，通過<HX>標(biāo)簽的ALIGN屬性可以控制標(biāo)題的輸出位置。ALIGN=“LEFT”靠左輸出ALIGN=“RIGHT”靠右輸出ALIGN=“MIDDLE”居中輸出8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言標(biāo)題格式舉例說明<HTML> <HEAD> <TITLE>標(biāo)題格式</TITLE> </HEAD> <BODY> <H1ALIGN="LEFT">標(biāo)題一靠左對(duì)齊</H1> <H2ALIGN="CENTER">標(biāo)題二居中對(duì)齊</H2> <H3ALIGN="RIGHT">標(biāo)題三靠右對(duì)齊</H3> </BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖標(biāo)題格式實(shí)例8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言HTML字體格式

<FONT>……</FONT>屬性SIZE，COLOR用法<FONTSIZE=N,COLOR=#VALUE>其中N在1到7之間，也可用(+)(-)來表示相對(duì)大小VALUE值在0000到FFFF（16進(jìn)制）之間SIZE，COLOR兩者可單獨(dú)出現(xiàn)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<HTML><HEAD><TITLE>字型測(cè)試</TITLE></HEAD><BODY><FONTSIZE=+2>空山不見人</FONT><FONTCOLOR=#0000FF>但聞人語聲</FONT><FONTSIZE=-1COLOR=#FF0000>反景赴山林</FONT>

復(fù)照青苔上

</BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖HTML字體應(yīng)用實(shí)例8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<BODY>標(biāo)簽屬性BGCOLOR背景顏色

<BODYBGCOLOR=#VALUE>BACKGROUND背景圖形<BODYBACKGROUND=“圖片文件”>TEXT文字顏色<BODYTEXT=#VALUE>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<HTML><HEAD><TITLE>BODY屬性</TITLE></HEAD><BODYbackground="bg.gif"TEXT=#0000FF>

空山不見人<BR>

但聞人語聲<BR>

反景赴山林<BR>

復(fù)照青苔上<BR></BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖背景文字屬性實(shí)例8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言HTML表格表格定義<TABLE>……</TABLE>行定義<TR>…….</TR>列定義<TD>……</TD><TR><TD>…</TD>…<TD>…</TD></TR>

表格標(biāo)題

<CAPTIONALIGN=TOP/BOTTOM>…...</CAPTION>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言表格屬性BORDER表格邊線厚度屬性<TABLEBORDER=n〉WIDTH表格寬度屬性<TABLEWIDTH=X〉X單位為pixel或%CELLSPACING框線厚度屬性CELLPADDING數(shù)據(jù)與邊框距離屬性BGCOLOR背景顏色屬性8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言表格制作例子<HTML><HEAD><TITLE>表格定義及其屬性</TITLE></HEAD><BODY><TABLEBORDER=6WIDTH=80%CELLSPACING=2><CAPTIONALIGN=TOP><B><BIG>詩人愛好</BIG></B></CAPTION><TR><TD>明月</TD><TD>清風(fēng)</TD><TD>醇酒</TD></TR><TR><TD>李白</TD><TD>東坡</TD><TD>最愛</TD></TR></TABLE></BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖表格屬性實(shí)例8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言單元格屬性單元格定義<TH>……</TH><TD>……</TD>

單元格屬性WIDTH寬度屬性HEIGHT高度屬性ALIGN對(duì)齊方式BGCOLOR背景顏色屬性表格合并屬性ROWSPAN<TDROWSPAN=N>合并N個(gè)垂直單元格COLSPAN<TDCOLSPAN=N>合并N個(gè)水平單元格注：這些屬性可在<TH>,<TD>標(biāo)簽中通用8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言單元格屬性舉例<HTML><HEAD> <TITLE>合并單元格</TITLE></HEAD><BODY><TABLEBORDER=1WIDTH=600><TR><TH>Header1</TH><TH>Header2</TH><TH>Header3</TH></TR><TR><TDCOLSPAN=3>第一格</TD></TR><TR><TDROWSPAN=2>第二格</TD><TD>第三格</TD><TD>第四格</TD></TR><TR><TD>第五格</TD><TD>第六格</TD></TR></TABLE></BODY></HTML>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖單元格屬性實(shí)例8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言HTML的重大意義HTML對(duì)整個(gè)WWW這幾年的蓬勃發(fā)展、知識(shí)和信息的流通，可以說是第一功臣，更直接帶動(dòng)了一波前所未有的信息革命，不管是在網(wǎng)絡(luò)上做生意，或者是和世界上的其他網(wǎng)友作文件交流，人人都得學(xué)著用HTML寫網(wǎng)頁，HTML在短短數(shù)年內(nèi)，儼然已成為信息交流下，通行最廣的標(biāo)準(zhǔn)格式。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言HTML的內(nèi)在缺陷在Web發(fā)展的早期它很完美--用到的文檔都基于文本，只有標(biāo)題、項(xiàng)目列表和指向其它文檔的超鏈接等。而隨著應(yīng)用和發(fā)展，人們需要有關(guān)于多媒體和頁面設(shè)計(jì)方面的更多性能。HTML就開始經(jīng)歷著痛苦的成長(zhǎng)。直接的內(nèi)聯(lián)圖形是不錯(cuò)的，可是你無法很好地放置圖形，因此頁面的設(shè)計(jì)就遇到的問題。而且圖形的映射(其中有超鏈接的圖形)也產(chǎn)生了新的問題有待解決。后來出現(xiàn)了閃爍的文本、表格、幀和DHTML。每次我們扭轉(zhuǎn)方向時(shí)都有人力圖給HTML增加新的東西，而每次結(jié)束時(shí)都給我們帶來了新的不兼容性和對(duì)新標(biāo)準(zhǔn)的需求。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言HTML的內(nèi)在缺陷（續(xù)）HTML不具有可擴(kuò)展性。多年來，微軟添加了許多只有適用于IE的標(biāo)記而網(wǎng)景添加了只用于Navigator的標(biāo)記，可是作為網(wǎng)頁創(chuàng)作者卻無法添加自己的標(biāo)記。HTML作為頁面布局體系帶來的限制常常使人們經(jīng)受挫折。開發(fā)人員呼喚接受和運(yùn)用已經(jīng)引入的新標(biāo)記和元素，但是要真正用來設(shè)計(jì)網(wǎng)站，還需要更多的東西。因而出現(xiàn)了CGI、JavaScript、ASP、PHP以及Java等持續(xù)的發(fā)展，它們使得HTML更加強(qiáng)大。層疊樣式表(CSS)和DHTML等技術(shù)的發(fā)展為更完備地定制Web設(shè)計(jì)提供了必要的能力，可是這些新增的簡(jiǎn)單技術(shù)反而使正在嚴(yán)重的問題更為突出。要實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)的完全定制化和自動(dòng)化還只是網(wǎng)站開發(fā)者們腦海中的美妙幻想。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言3XML：可延伸或擴(kuò)展的標(biāo)記語言XML簡(jiǎn)介XML聲明XML元素和屬性DTD關(guān)聯(lián)XML文件和DTDXSLT8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言為什么使用XML?HTML本身存在很多的缺點(diǎn)，例如，內(nèi)容和頁面的排版、表現(xiàn)形式混在一起，過度的膨脹。數(shù)據(jù)庫存儲(chǔ)的信息，經(jīng)過CGI,ASP,JSP,PHP等的解釋和轉(zhuǎn)換為HTML格式后，信息原有的格式已變得面目全非。電子商務(wù)的逐漸流行，HTML本身的種種缺點(diǎn)卻阻礙了他的發(fā)展。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言XML簡(jiǎn)介XML是可擴(kuò)展標(biāo)記語言(ExtensibleMarkupLanguage)的簡(jiǎn)稱，它定義了結(jié)構(gòu)化表達(dá)數(shù)據(jù)的標(biāo)準(zhǔn)格式。XML的產(chǎn)生來源于最直接而且是最有效的思想：把強(qiáng)大的SGML運(yùn)用于具有活力和應(yīng)用前景的Web；同時(shí)把HTML加以規(guī)范，把數(shù)據(jù)內(nèi)容從表現(xiàn)中分離出來XML保留了SGML80%的功能，而其復(fù)雜程度則降低到原來的20%8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言關(guān)于XML和HTML幾個(gè)容易混淆的問題XML并不是標(biāo)記語言。它只是用來創(chuàng)造標(biāo)記語言(比如HTML)的元語言。XML和HTML是不一樣的，它的用途比HTML廣泛得多。XML并不是HTML的替代產(chǎn)品。XML不是HTML的升級(jí)，它只是HTML的補(bǔ)充，為HTML擴(kuò)展更多功能。我們?nèi)詫⒃谳^長(zhǎng)的一段時(shí)間里繼續(xù)使用HTML。(但值得注意的是HTML的升級(jí)版本XHTML的確正在向適應(yīng)XML靠攏。)不能用XML來直接寫網(wǎng)頁。即便是包含了XML數(shù)據(jù)，依然要轉(zhuǎn)換成HTML格式才能在瀏覽器上顯示。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言XML的優(yōu)勢(shì)方便不同系統(tǒng)之間的信息交流XML本身具有的特性，使得他成為B2B公司對(duì)公司的商務(wù)帶來前所未有的方便。更方便的信息搜索文件的內(nèi)容和外觀設(shè)計(jì)是完全分開的，外觀變動(dòng)時(shí)，XML文件本身不受影響。對(duì)信息進(jìn)行搜索時(shí)，只要對(duì)XML文件進(jìn)行搜索，就可以得到自己想要的有用信息。使用XML將使編程更加簡(jiǎn)單；XML便于學(xué)習(xí)和創(chuàng)建；XML代碼將清晰和便于閱讀理解；8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<?xmlversion="1.0"encoding="GB2312"?><?xml-stylesheet

href="style.css"type="text/css"?><推薦叢書> <書籍> <名稱>C++Primer</名稱> <作者>Stanley</作者> <售價(jià)貨幣單位="人民幣">128</售價(jià)> </書籍> <書籍> <名稱>ComputerNetworks</名稱> <作者>Andrew</作者> <售價(jià)貨幣單位="人民幣">48</售價(jià)> </書籍></推薦叢書>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言XML聲明（Declaration）<?xmlversion="1.0"encoding="GB2312"?>Version指明了XML的版本號(hào)，這個(gè)字段是必需的Encoding指明了文字符號(hào)的編碼方式，這個(gè)字段是可選的。如果省略的化，則文字符號(hào)必須是Unicode。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言XML中的PI和樣規(guī)鏈接在XML中有一種標(biāo)注，PI（ProcessingInstruction）格式，<?…?>XML聲明常被人看作是PI的一個(gè)特例，但嚴(yán)格講來不是PI通常是給解析器的下游程序提供信息的，例如我們想要使用樣規(guī)（stylesheet）來美化前面的xml代碼，不管是采用CSS，還是XSL，都必須有個(gè)機(jī)制讓瀏覽器知道從那里去找到樣規(guī)。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言樣規(guī)的格式：<?xml-stylesheet

href="style.css"type="text/css"?>Xml-stylesheet稱作是PI的目標(biāo)（target），以上的PI是告訴瀏覽器去取一個(gè)style.css的文檔<?xml-stylesheet

href="style.xsl"type="text/xsl"?>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言XML元素和屬性通常所說的標(biāo)簽（tags）包括2部分元素（elements）屬性（attributes）例如：作者屬于推薦叢書父元素下面的子元素貨幣單位則屬于售價(jià)元素的一個(gè)屬性貨幣單位是屬性名人民幣是屬性值8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言XML文件注意事項(xiàng)必須格式正確（well-formed）格式不正確的XML文件，會(huì)使XML解析器在解析該文件時(shí)解析失敗，什么事情都作不成所有的元素都要正確的關(guān)閉標(biāo)簽之間不能交叉所有屬性都得加上引號(hào)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言所有的元素都要正確的關(guān)閉所有的元素，不管其中包括了多少數(shù)據(jù)，包含了多少子元素，到最后都必須由一個(gè)像HTML中的結(jié)束標(biāo)簽一樣把這個(gè)元素“包起來”。<author>chen</author>根據(jù)HTML的規(guī)定，很多標(biāo)簽，如<p>,<tr>,<td>的結(jié)束標(biāo)簽</p>,</tr>,</td>都可以省略掉，但是，在XML中，絕對(duì)不可以省略。對(duì)于單元素的標(biāo)簽，如<br>,<img

src=“a.html”>如何處理？<元素/><元素屬性1=“foo”屬性2=“bar”/>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言標(biāo)簽之間不能交叉一個(gè)標(biāo)簽交叉的例子<書籍><名稱>C++Primer<作者></名稱>Stanley</作者>在XML中規(guī)定，所有的元素排列必須時(shí)嚴(yán)謹(jǐn)?shù)臉錉罱Y(jié)構(gòu)。否則，就犯了標(biāo)簽之間不能交叉的大忌。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言所有屬性都得加上引號(hào)在HTML中，我么已經(jīng)被寵壞，常常忘了或懶的用引號(hào)把各標(biāo)簽的屬性值引起來，網(wǎng)頁瀏覽器對(duì)這樣的寫法通常都能夠處理，照單全收，讓這個(gè)漏加引號(hào)的現(xiàn)象更加普及。甚至連一些網(wǎng)頁開發(fā)、轉(zhuǎn)換工具都這么作（Office2000所存成的HTML代碼）。這對(duì)HTML不是什么問題，但拿到XML中，卻會(huì)慘遭被XML解析器判出局的命運(yùn)。因此，加引號(hào)的習(xí)慣，越早養(yǎng)成越好。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言合法的XML文件是否滿足前面的3個(gè)注意事項(xiàng)的XML文件就是正確的，合法的呢？舉例：把前面提到的第二筆的書籍資料改為：<書籍><名稱>ComputerNetworks</名稱><作者>Andrew</作者><售價(jià)貨幣單位="人民幣">48</售價(jià)><售價(jià)貨幣單位="人民幣">28</售價(jià)></書籍>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言DTD的引入很明顯，我們需要定義一套法則來規(guī)范它，我們管這套法規(guī)叫DTD(Documenttypedefinition)，也就是對(duì)某種XML文件在格式上的定義可以用DTD來確認(rèn)其正確性的XML文件成為合法的（valid）XML文件。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言<?xmlversion="1.0"encoding="GB2312"?><!ELEMENT推薦叢書(書籍*)><!ELEMENT書籍(名稱,作者+,售價(jià)*)><!ELEMENT名稱(#PCDATA)><!ELEMENT作者(#PCDATA)><!ELEMENT售價(jià)(#PCDATA)><!ATTLIST售價(jià)貨幣單位(人民幣|港幣|美元)"人民幣">8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言元素類別聲明在上面的例子中，一共有<書名>,<作者>,<售價(jià)>三個(gè)不含更小元素的元素。很明顯，Element后面是元素名，接著是它的內(nèi)容模型，通俗的說，就是用抽象的表示法，定義<元素>***</元素>之間的***區(qū)域可以出現(xiàn)什么樣的內(nèi)容。按規(guī)定，這個(gè)模型需要用()引起來8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言DTD中的量詞量詞是用來修飾它前面的單元的。黃金萬兩，其中的萬兩就是作為量詞來修飾黃金的在DTD中，常用的量詞有3中? 0個(gè)或1個(gè)*任意個(gè)數(shù)，從0個(gè)到無限多個(gè)+至少有1個(gè)，從1個(gè)到無限多個(gè)DTD中元素的出現(xiàn)次序<!ELEMENT書籍(名稱,作者+,售價(jià)*)>用逗號(hào)和量詞定義了書籍元素下的各個(gè)子元素的出現(xiàn)的先后次序和各個(gè)子元素的數(shù)量。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言DTD中的屬性類別聲明<!ATTLIST售價(jià)貨幣單位(人民幣|港幣|美元)"人民幣">屬性定義的3個(gè)要件屬性名屬性類別缺省值如果有缺省值的化，在XML文件中的<售價(jià)>48</售價(jià)>會(huì)被處理XML文件的程序自動(dòng)轉(zhuǎn)換為<售價(jià)貨幣單位=“人民幣”>48</售價(jià)>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言關(guān)聯(lián)XML文件和DTD兩種方法：外聯(lián)，內(nèi)聯(lián)外聯(lián)在XML文件的<?xmlversion="1.0"encoding="GB2312"?>后面添加<!DOCTYPE推薦叢書SYSTEM"book.dtd">內(nèi)聯(lián)<!DOCTYPE推薦叢書[<!ELEMENT推薦叢書(書籍*)>

]>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言XSLT目前的瀏覽器只能解釋HTML文件，所以XML在被瀏覽器解釋前，必須先轉(zhuǎn)換為HTML文件格式有兩種轉(zhuǎn)換方式Server動(dòng)態(tài)即時(shí)轉(zhuǎn)換批量轉(zhuǎn)換client8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖使用IE的缺省樣規(guī)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖使用自定義的樣規(guī)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavascriptJavaScript簡(jiǎn)介JavaScript函數(shù)JavaScript事件JavaScript和HTML的連接方式8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavaScript簡(jiǎn)介JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語言。使用它的目的是與HTML（超文本標(biāo)記語言）、Applet（Java小應(yīng)用程序）一起實(shí)現(xiàn)在一個(gè)Web頁面種鏈接多個(gè)對(duì)象，與Web客戶交互作用。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavaScript的特點(diǎn)是一種腳本編寫語言基本結(jié)構(gòu)形式與C，C++，VB等十分類似，但它不需要預(yù)先編譯，而是在程序運(yùn)行過程種被逐行的解釋執(zhí)行基于對(duì)象的語言可以運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象，許多功能來自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用簡(jiǎn)單性基于Java基本語句，數(shù)據(jù)類型采用弱類型8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavaScript的特點(diǎn)安全性不允許訪問本地硬盤，不能將數(shù)據(jù)存到服務(wù)器上，不允許隊(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效的防止數(shù)據(jù)的丟失動(dòng)態(tài)性可以直接對(duì)用戶的輸入作出反應(yīng)，無須經(jīng)過Web服務(wù)器程序。它對(duì)用戶的反應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。如鼠標(biāo)事件等跨平臺(tái)性依賴于瀏覽器本身，與操作系統(tǒng)環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可以正確執(zhí)行8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言腳本的格式<scriptlanguage=“JavaScript”>functionmyFunc(){//函數(shù)體}</script>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言第一個(gè)JavaScript例子使用alert函數(shù)彈出一個(gè)提示信息對(duì)話框<html> <head> <title>我的第一個(gè)JavaScript</title> <scriptlanguage="JavaScript">

alert("Hello,World!"); </script> </head></html>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖第一個(gè)JavaScript實(shí)例效果圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavaScript函數(shù)的定義格式Function函數(shù)名（參數(shù)表）{

函數(shù)體；

return返回值；}函數(shù)名：調(diào)用函數(shù)時(shí)需要通過函數(shù)名進(jìn)行調(diào)用。函數(shù)的命名一般要用能夠描述函數(shù)功能的詞語，有利于提高腳本的可讀性。參數(shù)表：用于向函數(shù)傳遞數(shù)據(jù)，可以根據(jù)需要決定要不要設(shè)立參數(shù)函數(shù)體：用于完成函數(shù)的功能。用一對(duì)花括號(hào){}括起來返回值：使用return語句完成8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言一個(gè)JavaScript函數(shù)的例子functionMyAdd(oper1,oper2){ result=oper1+oper2; msg=oper1+"+"+oper2+"="+result; alert(msg);}函數(shù)的執(zhí)行<bodyonload="MyAdd(1,3)">即在頁面加載完成之后調(diào)用MyAdd函數(shù)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖JavaScript函數(shù)執(zhí)行效果圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavaScript事件什么是事件？在瀏覽網(wǎng)頁的過程中常伴隨著一些事件的發(fā)生。例如用鼠標(biāo)指向或者點(diǎn)擊網(wǎng)頁上的按鈕或者超鏈接，或者移動(dòng)鼠標(biāo)都會(huì)產(chǎn)生事件。JavaScript是靠事件來激活函數(shù)，所以可以這樣說，設(shè)計(jì)JavaScript腳本的過程就是以事件驅(qū)動(dòng)為核心，將處理函數(shù)同事件對(duì)應(yīng)起來的過程。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavaScript事件處理一種捕捉事件的方法是定義一個(gè)事件句柄，這是針對(duì)HTML標(biāo)記對(duì)象而言的，不同的HTML標(biāo)記對(duì)應(yīng)不同的對(duì)象，不同的對(duì)象又對(duì)應(yīng)不同的事件句柄。主要的事件<A>onClick

用戶點(diǎn)擊超鏈接onMouseOver

鼠標(biāo)移動(dòng)到超鏈接上邊onMouseOut

鼠標(biāo)離開超鏈接8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavaScript的常見事件<body>onLoad

頁面下載完成的時(shí)候onUnload

退出這個(gè)頁面的時(shí)候<form>onReset

按下Reset按鈕的時(shí)候onSubmit

按下Submit按鈕的時(shí)候<inputtype=“button|checkbox|radio”onClick

鼠標(biāo)點(diǎn)擊的時(shí)候<inputtype=“select”onClick

鼠標(biāo)點(diǎn)擊的時(shí)候onChange

用戶改變了下拉列表中的選項(xiàng)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言一個(gè)多事件的演示請(qǐng)看MultiEvent.html8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言JavaScript和HTML的連接方式內(nèi)聯(lián)直接在響應(yīng)的HTML文件中，把JavaScript函數(shù)定義在<script>標(biāo)簽對(duì)中。外聯(lián)把相關(guān)的JavaScript函數(shù)定義到一個(gè)文件中，如MyTest.js，并使用下面的語句進(jìn)行關(guān)聯(lián)：<scriptlanguage=“JavaScript”src=“MyTest.js”></script>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSSCSS簡(jiǎn)介定義CSS樣式運(yùn)用CSS的方式8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSS全稱是CascadingStyleSheet。為什么要推出CSS在以前的HTML版本中，各種功能的實(shí)現(xiàn)是通過標(biāo)記元素實(shí)現(xiàn)的，這也造成了各個(gè)瀏覽器廠商標(biāo)新立異創(chuàng)建各種標(biāo)記，而且互不支持。例如微軟的走馬燈效果（MARQUEE）和網(wǎng)景的閃爍效果（BLINK），這兩種效果無法在對(duì)方的瀏覽器上正常顯示。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSS簡(jiǎn)介作為動(dòng)態(tài)HTML（DHTML）的基礎(chǔ)之一，CSS功能強(qiáng)大。它的優(yōu)點(diǎn)在于可以將一類相似的特征用同一樣式類表示，可以同時(shí)被多個(gè)標(biāo)記元素所繼承。這樣就可以很好的把握網(wǎng)站的整體風(fēng)格，隨心所欲的對(duì)自己的網(wǎng)頁進(jìn)行外觀和動(dòng)態(tài)的設(shè)計(jì)，并且使網(wǎng)頁具有交互性。同樣的，對(duì)于一個(gè)具有復(fù)雜屬性的對(duì)象，也可以用多個(gè)樣式類對(duì)它進(jìn)行定義，這樣可以使代碼條理清晰。CSS最大的優(yōu)點(diǎn)在于把對(duì)象真正引入到了HTML中，使得可以使用腳本程序（JavaScript，VBScript）調(diào)用對(duì)象屬性，并且可以改變對(duì)象屬性，實(shí)現(xiàn)動(dòng)態(tài)效果。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSS簡(jiǎn)介由于CSS所具有的特性，如果需要改變一個(gè)大網(wǎng)站中的樣式，則只需要改變相應(yīng)的那一個(gè)樣式即可。例如：在一個(gè)網(wǎng)站中，需要用到很多水平線，如果一個(gè)個(gè)的定義<hrwidth=“70%”height=“2”color=“black”align=“center”>，那工作量將是巨大的。但如果使用樣式表，則只需要指定一個(gè)參數(shù)便可以被整個(gè)網(wǎng)狀使用。這樣，網(wǎng)站變的易于管理了。CSS的另一個(gè)貢獻(xiàn)就是簡(jiǎn)化了HTML中各種繁瑣的標(biāo)記，使得各個(gè)標(biāo)記的屬性更具有一般性和通用性，并且擴(kuò)展了原先的標(biāo)記功能，能夠?qū)崿F(xiàn)更多大的效果。樣式單甚至超越了Web頁面的本身顯示功能，擴(kuò)展到多種媒體上，顯示了難以抗拒的魅力！8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言定義CSS樣式選擇器DIV和SPAN偽類和偽元素8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言定義CSS樣式－－選擇器格式：Selector{property:value;property:value}類別HTML標(biāo)記類（Class）ID兩個(gè)特性繼承性優(yōu)先級(jí)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSS－－HTML樣式舉例p{color:green;font-weight:bold}h1{color:red}body{color:blue}實(shí)例代碼<h1>我是<I>紅色的</I>標(biāo)題1</h1>我是藍(lán)色的文字。<br>我是藍(lán)色的文字。<br><p>

我是綠色的段落。<br>

我是綠色的段落。<br></p>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖CSS－－HTML樣式舉例效果圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSS－－類和ID舉例p.one{color:green;font-weight:bold}.niceFont{color:red;font-size:18pt}#blackwhite{background-color:black;color:white}實(shí)例代碼<pclass=one>我是綠色的段落。<br>我是綠色的段落。<br></p><pclass=niceFont>

我是紅色的段落。<br>

我是紅色的段落。<br></p><spanclass=niceFont>紅色的SPAN</span>和

<spanid=blackwhite>黑底白字的ID</span>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖CSS－－類和ID舉例效果圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSS－－DIV和SPANCLASS和ID只能用來定義樣式表，而<DIV>和<SPAN>則可以用來調(diào)用所有的樣式表屬性。<DIV>定義的是包含文本和HTML標(biāo)簽的一個(gè)塊，塊之間用換行標(biāo)簽間隔，它對(duì)顯示文字的整個(gè)一行都會(huì)起作用，只有通過換行才能改變屬性。<SPAN>是一個(gè)內(nèi)聯(lián)標(biāo)簽，可以存在于內(nèi)容的任何地方，它的作用范圍只是<SPAN>內(nèi)的文字，而不是整個(gè)一行。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSS－－DIV和SPAN舉例DIV{background-color:black;color:green}SPAN{background-color:black;color:white}實(shí)例代碼<p>下面的內(nèi)容將使用DIV標(biāo)簽</p><DIV>這里使用了DIV標(biāo)簽</DIV><P>下面的標(biāo)簽將使用SPAN標(biāo)簽，<span>這里使用了SPAN標(biāo)簽</span>，并且不對(duì)后面的空白位置產(chǎn)生作用。</P>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖CSS－－DIV和SPAN實(shí)例效果8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CSS－－偽類和偽元素偽類和偽元素是特殊的類和元素，能自動(dòng)地被支持CSS的瀏覽器所識(shí)別。偽類區(qū)別開不同種類的元素，偽元素指元素的一部分。格式選擇符:偽類{屬性：值}選擇符:偽元素{屬性：值}8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言偽類的使用舉例A:link{color:red}A:active{color:blue;font-size:125%}A:visited{color:green;font-size:85%}A:hover{color:purple;font-size:200%}偽元素的使用舉例P:first-letter{font-size:300%}8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖CSS－－偽類和偽元素實(shí)例效果8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言運(yùn)用CSS的方式內(nèi)聯(lián)式<pstyle=“color:green”>welcome</p>嵌入式

<styletype=“text/css”>p{color:green}</style>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言運(yùn)用CSS的方式鏈接式<linkrel=stylesheet

href=“mystyle.css”type=“text/css”>Import導(dǎo)入

<styletype=“text/css”>@importURL(mystle.css)</style>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言HTML表單Form的概念Form的組成元素Form的標(biāo)記Form的提交過程8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言為什么需要表單（Form）可以通過表單（Form）建立交互性的網(wǎng)頁喜歡在網(wǎng)絡(luò)上四處為家的人，不難發(fā)現(xiàn)表單的存在。諸如“會(huì)員登錄”，“文卷調(diào)查”等的一個(gè)個(gè)的欄位填寫，其實(shí)都是一個(gè)個(gè)的表單。這些引起網(wǎng)絡(luò)客戶端用戶和服務(wù)器端進(jìn)行交互的網(wǎng)頁就稱作表單。需要由網(wǎng)頁設(shè)計(jì)師和程序設(shè)計(jì)師共同完成。建立一份新的表單，其實(shí)就是跟用戶之間建立一個(gè)新的交互渠道，表單的制作可以說是交互網(wǎng)頁最基礎(chǔ)的一環(huán)。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言表單的組成要件提供用戶輸入資料的“表單欄位”單行文字<inputtype=“text”…>多行文字<textarea…>密碼文字<inputtype=“password”…>復(fù)選框<inputtype=“checkbox”…>單選框<inputtype=“radio”…>下拉列表<select><option>..</option>…隱藏文字<inputtype=“hidden”…>文件傳送<inputtype=“file”…>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言表單的組成要件向服務(wù)器端傳送資料的“提交按鈕”提交按鈕<inputtype=“submit”…>大小適中、清晰明了的“表單界面設(shè)計(jì)”8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言表單標(biāo)記格式<form…>…</form>常用屬性表單名字name=“MyForm1”表單提交方式method=“Get|Post”處理表單的URLaction=“/cgi-bin/myform.cgi”8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言一個(gè)表單的實(shí)例表單格式定義：<formname="UserInfoForm"method="Get"action="/cgi-bin/userinfo.cgi"><inputtype="text"name="name"value=""size="20"maxlength="16"><selectname="age"> <optionvalue="20"selected>20</option> <optionvalue="21">21</option> <optionvalue="22">22</option> <optionvalue="23">23</option> <optionvalue="24">24</option> </select>8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言一個(gè)表單的實(shí)例（續(xù)）<inputtype=“radio”name=“sex”checkedvalue=“male”>男

<inputtype="radio"name="sex"value=“female”>女<inputtype="submit"name="submit"value="Login"><inputtype="reset"name="reset"value="Reset">8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言圖表單的實(shí)例效果圖8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言表單的信息提交過程用戶輸入表單所規(guī)定的基本信息姓名年齡性別用戶按下提交信息按鈕Login按鈕客戶端腳本程序檢查用戶輸入的信息是否合法如果用戶輸入的信息合法，則把數(shù)據(jù)提交到服務(wù)器端；否則給出錯(cuò)誤提示信息，再給用戶一次修改的機(jī)會(huì)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言通用網(wǎng)關(guān)接口（CGI）CGI概念CGI工作原理標(biāo)準(zhǔn)輸入與標(biāo)準(zhǔn)輸出服務(wù)器端嵌入（SSI）編寫外部程序（CGI）8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言通用網(wǎng)關(guān)接口CGICGI是Web服務(wù)器和您編寫的外部程序之間的一個(gè)接口。CGI可以使您編寫的程序處理WWW上客戶端送來的表單和數(shù)據(jù)，并對(duì)此作出某種反應(yīng)。這種反應(yīng)可以是HTML文件、圖片、聲音、視頻等可以在瀏覽器窗口上出現(xiàn)的任何數(shù)據(jù)。兩個(gè)含義為客戶端用戶通過WWW獲取Internet上的其它服務(wù)，如Archie，WAIS等提供了一個(gè)接口是您編寫的外部程序和Web服務(wù)器間的接口標(biāo)準(zhǔn)8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CGI是如何工作的當(dāng)客戶端的瀏覽器向Web服務(wù)器請(qǐng)求一個(gè)HTML文件時(shí)，服務(wù)器在收到請(qǐng)求后就去尋找并將找到的文件傳送給客戶端。當(dāng)客戶端的請(qǐng)求時(shí)一個(gè)CGI程序時(shí)，Web服務(wù)器將激活客戶端所請(qǐng)求的CGI程序，此時(shí)Web服務(wù)器所起的作用就好像時(shí)客戶端和CGI程序間的中間人。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CGI工作的步驟客戶端發(fā)出請(qǐng)求Web服務(wù)器激活CGI程序CGI程序?qū)蛻舳说恼?qǐng)求作出反應(yīng)Web服務(wù)器將CGI程序的處理結(jié)果傳送給客戶端Web服務(wù)器中斷和客戶端的連接Web瀏覽器將CGI的輸出顯示在瀏覽器的窗口8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言CGI的標(biāo)準(zhǔn)輸入和標(biāo)準(zhǔn)輸出Web服務(wù)器和CGI交換數(shù)據(jù)的方式環(huán)境變量標(biāo)準(zhǔn)輸入和標(biāo)準(zhǔn)輸出對(duì)于一個(gè)CGI程序來說，當(dāng)CGI程序被服務(wù)器激活后，它的標(biāo)準(zhǔn)輸入（stdin）被連接到Web服務(wù)器的標(biāo)準(zhǔn)輸出（stdout）上，而CGI程序的標(biāo)準(zhǔn)輸出（stdout）被連到Web服務(wù)器的標(biāo)準(zhǔn)輸入（stdin）上，這就形成了一個(gè)標(biāo)準(zhǔn)的管道循環(huán)。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言從CGI程序這一方來看，它從標(biāo)準(zhǔn)輸入讀信息就是從Web服務(wù)器的標(biāo)準(zhǔn)輸出讀信息，而它向標(biāo)準(zhǔn)輸出寫信息就是向Web服務(wù)器的標(biāo)準(zhǔn)輸入寫信息。8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言SSI簡(jiǎn)介SSI的全稱是ServerSideInclude事實(shí)上，不用進(jìn)行任何編程工作就可以制作出一些簡(jiǎn)單的動(dòng)態(tài)Web網(wǎng)頁。例如可以在網(wǎng)頁上自動(dòng)顯示HTML文件的最后修改日期而不用每次都去手工修改。通過使用SSI8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言SSI簡(jiǎn)介（續(xù)）SSI的命令標(biāo)識(shí)符和HTML的命令標(biāo)識(shí)符相類似。這些SSI命令標(biāo)識(shí)符被包含在普通的HTML文件中，當(dāng)這類HTML文件被WWW上的客戶端用戶調(diào)用時(shí)，SSI命令就會(huì)被Web服務(wù)器執(zhí)行，而它們的輸出結(jié)果則被Web服務(wù)器放在原來HTML文件中SSI命令標(biāo)識(shí)符所在的地方。一般來說，Web服務(wù)器是通過文件的后綴名來了解文件中是否包含SSI命令的。包含SSI命令的HTML文件通常具有特殊的后綴名，缺省情況下是.shtml,.shtm或者.sht8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言常用的SSI命令SSI命令格式<!--#命令符命令變量=“命令變量值”-->常用的SSI命令Echo在Web頁中顯示一些SSI命令的值Fsize

在Web頁中顯示某一文件的大小值Flastmod

在Web頁中顯示某一個(gè)文件的最后修改時(shí)間8.2.2WWW中的超媒體協(xié)議與標(biāo)記語言常用的SSI命令Exec執(zhí)行系統(tǒng)命令或者CGI程序，并將輸出結(jié)果插入到Web頁中Config