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