Web客戶端技術(shù),本章概述,HTML CSS javascript DOM,HTML概述,在20世紀(jì)90年代Web網(wǎng)絡(luò)的迅速興起，使得HTML空前繁榮。當(dāng)時(shí)，HTML被發(fā)展成了許多不同的版本。出于解決這種混亂局面的考慮，迫切需要制定一個(gè)公認(rèn)的HTML語(yǔ)言規(guī)范。 1995年11月，Internet Engineering Task Force（IETF）整理了以前的各種版本，倡導(dǎo)并主持開(kāi)發(fā)HTML2.0規(guī)范，同年推出HTML3.0技術(shù)規(guī)范。1996年，World Wide Web Consortium（W3C）的HTML Working Group開(kāi)始組織編寫(xiě)新的規(guī)范，于1997年1月推出了HTML3.2。在HTML3.2中做了許多重要改動(dòng)。到1999年下半年推出到現(xiàn)在依然使用的HTML4.0。,案例名稱：HTML網(wǎng)頁(yè)框架,案例名稱：HTML網(wǎng)頁(yè)框架 程序名稱：2-01.htm ,這是一段最基本的HTML標(biāo)識(shí)，任何HTML文檔都是由一個(gè)和標(biāo)記包含的，然后分為和兩大部分，頁(yè)面的標(biāo)識(shí)一般都是在標(biāo)識(shí)中定義的。HTML文件不區(qū)別大小寫(xiě)，瀏覽器認(rèn)為和是一樣的，在使用的時(shí)候需要保持風(fēng)格的完整性。 HTML文件的擴(kuò)展名可以是.htm或者.html都可以，現(xiàn)在已經(jīng)沒(méi)有區(qū)別了。原來(lái)在Linux操作系統(tǒng)上用html作為文件的擴(kuò)展名，而在Windows操作系統(tǒng)上用.htm，因?yàn)樵缙诘腤indows操作系統(tǒng)不支持三個(gè)以上字母的文件擴(kuò)展名。,HEAD頭元素,HEAD頭元素主要包括該頁(yè)面的一些基本描述語(yǔ)句。META的屬性包括： Description，網(wǎng)頁(yè)的描述信息； Keywords，關(guān)鍵字，當(dāng)搜索引擎查找時(shí)，按此關(guān)鍵字查找； Content-type，用來(lái)設(shè)置該網(wǎng)頁(yè)的編碼； Author，用來(lái)設(shè)置該網(wǎng)頁(yè)的作者姓名； Refresh，用來(lái)設(shè)置網(wǎng)頁(yè)的自動(dòng)更新。當(dāng)CONTENT =“3; URL=“時(shí)，該網(wǎng)頁(yè)打開(kāi)3秒鐘后，就自動(dòng)的轉(zhuǎn)到網(wǎng)站,HTML的常用標(biāo)記,HTML的常用標(biāo)記有一些共同特點(diǎn)：都放在BODY標(biāo)記里面。 常用的標(biāo)記有字體標(biāo)記、圖片標(biāo)記、超級(jí)鏈接、列表、表格和表單等。,字體標(biāo)記,處理文字時(shí)通常利用如“ xx”的標(biāo)記 定義字符xx的字體顯示為隸書(shū)，字號(hào)是40，顏色是紅色。程序2-03.htm說(shuō)明如何使用文字格式。,圖片標(biāo)記,利用“”格式可以插入一張圖片，myimage.jpg文件必須和該HTML文件放在同一個(gè)目錄下。 IMG是HTML的一個(gè)標(biāo)記，是IMAGE的縮寫(xiě)；SRC屬性給出要連接的圖片的路徑和文件名,超級(jí)鏈接,使用超級(jí)鏈接的基本的語(yǔ)法是：XX。XX是一個(gè)超級(jí)鏈接，連接到Address.htm文件； 是單詞Anchor的縮寫(xiě)，中文的意思是“錨”，功能是從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面；屬性HREF定義的是鏈接到哪一頁(yè)。,書(shū)簽鏈接,如果某個(gè)頁(yè)面很大，為了加強(qiáng)層次感，需要引入書(shū)簽鏈接。 使用的方法和超級(jí)鏈接類似。,電子郵件鏈接,電子郵件鏈接提供了當(dāng)點(diǎn)擊頁(yè)面上的鏈接時(shí)，將自動(dòng)打開(kāi)默認(rèn)的郵件發(fā)送程序發(fā)郵件。,列表,列表有兩種方式，一種是有序列表，另一種是無(wú)序列表。 無(wú)序列表是所有的行之前都有一個(gè)小圓圈，而有序列表是自動(dòng)排序的，前面有序號(hào)。,基本表格,是表格的基本標(biāo)記。代表表格的行，代表表格的列。 定義一個(gè)三行兩列的表格如程序2-09.htm所示。,表格的靈活應(yīng)用,（1）ROWSPAN和COLSPAN屬性的使用方法。 利用ROWSPAN屬性設(shè)置該單元格占用多行，利用COLSPAN屬性設(shè)置該單元格是占用多列。,Cellpadding和Cellspacing,（2）Cellpadding和Cellspacing屬性的使用方法。 Cellpading的意思是單元格的邊距，指的是字與單元格邊框的距離。Cellspacing的意思是單元格間距，指的是單元格之間的距離。,表格的樣式,BORDERCOLOR屬性設(shè)置表格邊框的顏色，BGCOLOR屬性設(shè)置背景顏色，ALIGN屬性設(shè)置表格的對(duì)齊方式，標(biāo)記是將內(nèi)部的文字加粗顯示。,表單,表單的功能是收集用戶信息實(shí)現(xiàn)系統(tǒng)與用戶交互。比如E-mail信箱的注冊(cè)頁(yè)面就是一個(gè)十分典型的表單頁(yè)面。 表單信息的處理過(guò)程為：當(dāng)單擊表單中的提交按鈕時(shí)，表單中的信息就會(huì)上傳到服務(wù)器中，然后由服務(wù)器端的應(yīng)用程序（例如CGI，ASP，PHP或JSP等）進(jìn)行處理，處理后將用戶提交的信息存儲(chǔ)在服務(wù)器端的數(shù)據(jù)庫(kù)中，或者將有關(guān)信息返回到客戶端瀏覽器上。,（1）表單頭及其屬性,表單的通用格式是：XX 。 表單元素包含在標(biāo)記中，有兩個(gè)重要的屬性：METHOD=“Post”或“Get”，Post和Get方式的區(qū)別在于Post是一種郵寄的方式，在瀏覽器的地址欄中不顯示提交的信息，這種方式傳送的數(shù)據(jù)量的大小沒(méi)有限制；Get方式將信息傳遞到瀏覽器的地址欄上，最大傳輸?shù)男畔⒘渴? KB。當(dāng)不指明是哪種方式時(shí)，默認(rèn)為Get方式。Action屬性是設(shè)置利用哪個(gè)文件來(lái)處理所提交的數(shù)據(jù)。,（2）表單中常用控件,在常用的表單制作過(guò)程中，經(jīng)常遇到的是按鈕制作、輸入元素的制作等。常見(jiàn)的表單控件包括文本框、文本域、密碼框、多選框、單選框和下拉列表框，等等。 除了文本域和下拉列表，其他只要修改TYPE屬性就可以了。,塊級(jí)元素,塊級(jí)元素包括DIV和SPAN兩種標(biāo)記。DIV稱為層標(biāo)記，有時(shí)也稱為塊標(biāo)記。利用DIV標(biāo)記和CSS的定位技術(shù)可以做出相當(dāng)出色的效果。 SPAN標(biāo)記和DIV標(biāo)記的基本語(yǔ)法是一樣的，但SPAN標(biāo)記和DIV標(biāo)記的區(qū)別還是很大的。,預(yù)排版標(biāo)記,包含在預(yù)排版標(biāo)記中的字符會(huì)按照HTML原碼的格式輸出到瀏覽器上。 HTML文件中的英文空格一般不起作用，但是在預(yù)排版標(biāo)記中空格可以顯示出來(lái)。,HTML 5展望,HTML 5草案的前身名為Web Applications 1.0，是在2004年由WHATWG提出，再于2007年獲W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。在2008年1月22日，第一份正式草案發(fā)布。 1WHATWG表示該規(guī)范是目前仍在進(jìn)行的工作，仍須多年的努力。 2目前Firefox、Google Chrome、Opera及Safari（版本 4 以上）已有支持HTML5技術(shù)。 HTML 5是近十年來(lái)Web開(kāi)發(fā)標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML 5并非僅僅用來(lái)表示W(wǎng)eb內(nèi)容，它的新使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在HTML 5平臺(tái)上，視頻，音頻，圖象，動(dòng)畫(huà)，以及同電腦的交互都被標(biāo)準(zhǔn)化。,CSS概述,1998年5月12日，CSS level 2才成為W3C 的標(biāo)準(zhǔn)，它是一組樣式，樣式中的屬性在HTML元素中依次出現(xiàn)，并顯示在瀏覽器中。樣式可以定義在HTML文檔的標(biāo)志里，也可以在外部附加文檔作為外加文檔。CSS的功能無(wú)比強(qiáng)大，W3C也極力向世界推廣這一先進(jìn)技術(shù)。HTML是一種標(biāo)記語(yǔ)言，而CSS是這種標(biāo)記的一種重要擴(kuò)展，可以進(jìn)一步美化頁(yè)面。換句話說(shuō)，CSS是一種用來(lái)裝飾HTML的標(biāo)記集合。 為什么要使用CSS呢？原因主要有如下四點(diǎn)：（1）彌補(bǔ)HTML對(duì)網(wǎng)頁(yè)格式化功能的不足，比如段落間距，行距等。（2）字體變化和大小。（3）頁(yè)面格式的動(dòng)態(tài)更新。（4）排版定位等。,加載CSS樣式的三種方式,使用CSS來(lái)格式化網(wǎng)頁(yè)，共有三種方式： 在HEAD中引用 在BODY中引用 作為文件來(lái)引用。,CSS與標(biāo)記對(duì)應(yīng)的三種方式,HTML標(biāo)記和CSS樣式表標(biāo)記有3種方式： 標(biāo)記選擇符 類選擇符 選擇符。,定義超級(jí)鏈接樣式,可以指定A標(biāo)記以不同的方式顯示。一個(gè)超級(jí)鏈接有幾種不同的狀態(tài)：未被訪問(wèn)鏈接（Link）、已訪問(wèn)鏈接（Visited）和鼠標(biāo)移動(dòng)過(guò)（Hover）。 可以定義超級(jí)鏈接文字的顏色，可以定義字體的大小，一般超級(jí)鏈接都有下劃線，可以利用“TEXT-DECORATION:NONE”將超級(jí)鏈接的下劃線去掉。,1.1 什么是Ajax,Ajax：是Asynchronous JavaScript and XML(異步JavaScript 和XML技術(shù))的簡(jiǎn)稱，是一套特殊的Web編程技術(shù)，通過(guò)這種技術(shù)，開(kāi)發(fā)人員可以使用來(lái)自服務(wù)器的輸入無(wú)縫地更新部分Web頁(yè)面或Web應(yīng)用程序。彌補(bǔ)用了B/S方式開(kāi)發(fā)交互式Web頁(yè)面的不足。 Ajax只是一套特殊的編程技術(shù)，一種編程思想，不是技術(shù)規(guī)定。 Ajax并不是必須要使用XML技術(shù)，也并不是必須要異步,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),Ajax技術(shù)所涉及的相關(guān)技術(shù) XHTML和CSS； 文檔對(duì)象模型(Document Object Model, DOM)； JavaScript； XML和XSLT； XMLHttpRequest對(duì)象。,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),XHTML XHTML可擴(kuò)展標(biāo)記語(yǔ)言是HTML語(yǔ)言的后續(xù)，主要區(qū)別是HTML語(yǔ)法不很嚴(yán)格，瀏覽器負(fù)責(zé)合理地解釋并顯示HTML標(biāo)記中的內(nèi)容；而XHTML現(xiàn)在遵循嚴(yán)格的XML規(guī)則。例如，XML必須是格式良好的，必須正確地打開(kāi)關(guān)閉，必須正確地嵌套：,正確的嵌套： This is a correct nested H1 tag ,不正確的嵌套： This is an incorrect nested H1 tag ,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),CSS CSS層疊式樣表，是HTML頁(yè)面的摸板，用來(lái)描述頁(yè)面中的數(shù)據(jù)的呈現(xiàn)方式和布局。,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),文檔對(duì)象模型DOM 簡(jiǎn)單地說(shuō)，DOM是一種Web頁(yè)面的層級(jí)或樹(shù)型結(jié)構(gòu)表示。其中頁(yè)面的每一部分，如圖形、文本框、按鈕等都通過(guò)瀏覽器模擬。 DOM是W3C()組織的標(biāo)準(zhǔn)，所有瀏覽器呈現(xiàn)的頁(yè)面都遵循這種標(biāo)準(zhǔn)。,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),JavaScript JavaScript是一種瀏覽器腳本語(yǔ)言。必須熟練掌握了這種語(yǔ)言，才能掌握Ajax編程技術(shù)。,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),XML、XSLT、XPath XML：一種用語(yǔ)描述和結(jié)構(gòu)化數(shù)據(jù)的語(yǔ)言； XSLT：一種將XML文檔轉(zhuǎn)換為XML其它XML文檔的語(yǔ)言，它也可以將HTML或純文本指定為其他輸出格式； XPath：XSLT在實(shí)施轉(zhuǎn)換時(shí)，使用XPath語(yǔ)言來(lái)查詢XML文檔。XPath查詢用來(lái)定位原始XML文檔的元素。,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),XMLHttprequest對(duì)象 這是微軟中引入的一個(gè)ActiveX控件，稱為XMLHttp對(duì)象，棒定在IE5中。 不久，Mozilla工程師也在Mozilla 1 和 Netscape7創(chuàng)建了相應(yīng)的東西，即XMLHttpRequest對(duì)象。 在IE7中，除了ActiveX控件外，還有一個(gè)原本的XMLHttpRequest對(duì)象。 在Safari1.2 和Opera中，也包含了此對(duì)象。,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),XMLHttprequest對(duì)象是干什么的？ XMLHttprequest對(duì)象用來(lái)使開(kāi)發(fā)人員在后臺(tái)提交和接收XML文檔。 以前可以用隱藏的框架 iframe 來(lái)執(zhí)行這種任務(wù)，但現(xiàn)在XMLHttprequest對(duì)象更精通與此道，它允許發(fā)送和接收數(shù)據(jù)。,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),XMLHttprequest對(duì)象缺點(diǎn) 它還不是標(biāo)準(zhǔn)，單獨(dú)的方法來(lái)創(chuàng)建他們 IE7以前的IE，的創(chuàng)建方法是： var xHRObject = new ActiveXObject(“microsoft.XMLHTTP”); IE7和其他瀏覽器的創(chuàng)建方法是： var xHRObject = new XMLHttpRequest(); 因此，創(chuàng)建XMLHttpRequest對(duì)象時(shí)，必須先檢測(cè)所使用的瀏覽器是哪種類型。,1.2 Ajax技術(shù)涉及的相關(guān)技術(shù),var xHRObject = false; if (window.XMLHttpRequest) / IE7和其它瀏覽器創(chuàng)建方法 xHRObject = new XMLHttpRequest(); else if (window.ActiveXObject) / IE4，IE5，IE6創(chuàng)建方法 xHRObject = new ActiveXObject(“Microsoft.XMLHTTP“); Else / Do something else; ,通常情況下，瀏覽器功能檢測(cè)和對(duì)象創(chuàng)建的代碼類似如下：,1.3 Ajax應(yīng)用程序模型,最初，Web只是用來(lái)顯示HTML文檔。當(dāng)時(shí)的應(yīng)用程序模型為：用戶在客戶端輸入數(shù)據(jù)，發(fā)送頁(yè)面到服務(wù)器，等待響應(yīng)。 這種模型只是用來(lái)處理Web頁(yè)面，后來(lái)出現(xiàn)了同步通訊問(wèn)題。,1.3 Ajax應(yīng)用程序模型,同步：Web上，同步意味著用戶請(qǐng)求一個(gè)HTML頁(yè)面，然后瀏覽器代表用戶發(fā)送一個(gè)HTTP請(qǐng)求給Web服務(wù)器。服務(wù)器收到請(qǐng)求后進(jìn)行一些處理，然后將結(jié)果以HTML頁(yè)面返回給發(fā)出請(qǐng)求的瀏覽器。瀏覽器收到頁(yè)面后顯示出這個(gè)頁(yè)面。,Web服務(wù)器,HTML 頁(yè)面,1.3 Ajax應(yīng)用程序模型,瀏覽器只發(fā)出請(qǐng)求，服務(wù)器只響應(yīng)請(qǐng)求。通訊始終是單向的?！罢?qǐng)求/響應(yīng)”周期是同步的，在此期間，用戶只能被動(dòng)等待。 同步存在的問(wèn)題 性能底下：輸入-響應(yīng)-等待的模式造成時(shí)間上的浪費(fèi)； 只要刷新頁(yè)面，就會(huì)發(fā)送一個(gè)新的請(qǐng)求給服務(wù)器，帶來(lái)額外的服務(wù)器響應(yīng)負(fù)擔(dān)、更高的帶寬消耗。 最根本的問(wèn)題是，沒(méi)有提供雙向、實(shí)時(shí)的通信。服務(wù)器沒(méi)有辦法發(fā)起更新,1.3 Ajax應(yīng)用程序模型,同步方案下的Web應(yīng)用程序的問(wèn)題 瀏覽器（用戶）必須等待服務(wù)器的響應(yīng)； 服務(wù)器不能發(fā)起更新。,1.3 Ajax應(yīng)用程序模型,Ajax技術(shù)：將“部分屏幕更新”技術(shù)引用到Web應(yīng)用程序模型中。在Ajax應(yīng)用程序中，只有包含新信息的用戶界面元素才會(huì)被更新，其余部分頁(yè)面不變。 這意味著不需要