02Web編程.ppt

1、第二章，網(wǎng)絡(luò)編程技術(shù)，概述。本章首先介紹了超文本標(biāo)記語言的發(fā)展歷史，然后介紹了超文本標(biāo)記語言的基本框架，并詳細(xì)介紹了超文本標(biāo)記語言的各種常用標(biāo)簽：文本標(biāo)簽、圖片標(biāo)簽、超鏈接標(biāo)簽等，并介紹了CSS的基本用法。如何讓CSS和HTML協(xié)同工作，在JavaScript中引入變量、數(shù)組、表達(dá)式、運算符、流控制語句，內(nèi)置對象和瀏覽器對象的層次結(jié)構(gòu)，以及DOM模型的建立和使用。理解超文本標(biāo)記語言、超文本標(biāo)記語言和超文本標(biāo)記語言之間的關(guān)系，以及網(wǎng)絡(luò)的產(chǎn)生和發(fā)展。作為互聯(lián)網(wǎng)上的一種應(yīng)用架構(gòu)，網(wǎng)絡(luò)結(jié)構(gòu)的首要任務(wù)是為人們提供信息服務(wù)。評價一種網(wǎng)絡(luò)開發(fā)技術(shù)的優(yōu)劣只有一個標(biāo)準(zhǔn)：這項技術(shù)能否在最合適的時間和地點，以最合適

2、的方式，為那些最需要信息的人提供最合適的信息服務(wù)。該標(biāo)準(zhǔn)促進(jìn)了網(wǎng)絡(luò)的持續(xù)發(fā)展。網(wǎng)絡(luò)是典型的分布式應(yīng)用架構(gòu)。網(wǎng)絡(luò)應(yīng)用中的每一次信息交換都涉及到兩個層次：客戶端和服務(wù)器端。因此，網(wǎng)絡(luò)開發(fā)技術(shù)可以大致分為兩類：客戶端技術(shù)和服務(wù)器技術(shù)。3、超文本傳輸協(xié)議是一種面向?qū)ο蟮膽?yīng)用層協(xié)議，由于其簡單快速的處理方法，適用于分布式超媒體信息系統(tǒng)。超文本傳輸協(xié)議是在1990年提出的。經(jīng)過幾年的使用和發(fā)展，它已經(jīng)逐步完善和擴大。目前，第六版的超文本傳輸協(xié)議/1.0已在萬維網(wǎng)上使用，超文本傳輸協(xié)議/1.1的標(biāo)準(zhǔn)化正在進(jìn)行中，并提出了下一代超文本傳輸協(xié)議的建議。4、超文本標(biāo)記語言編程技術(shù)，為了向全世界發(fā)布信息，有必要使用

3、一種能夠被公眾接受的語言，也就是一種大多數(shù)計算機能夠識別的語言。在互聯(lián)網(wǎng)上，常用的出版語言是超文本標(biāo)記語言，它是超文本標(biāo)記語言的概述。20世紀(jì)90年代，網(wǎng)絡(luò)的迅速崛起使得超文本標(biāo)記語言空前繁榮。那時，超文本標(biāo)記語言被發(fā)展成許多不同的版本。為了解決這種混亂的局面，迫切需要制定一個公認(rèn)的超文本標(biāo)記語言標(biāo)準(zhǔn)。1995年11月，互聯(lián)網(wǎng)工程任務(wù)組(IETF)整理了以前的版本，倡導(dǎo)并主持了HTML2.0規(guī)范的開發(fā)，同年推出了HTML3.0技術(shù)規(guī)范。1996年，萬維網(wǎng)聯(lián)盟(W3C)的超文本標(biāo)記語言工作組開始組織新規(guī)范的匯編，1997年1月，超文本標(biāo)記語言3.2發(fā)布。在HTML3.2中已經(jīng)做了許多重要的改變。

4、在1999年下半年，HTML4.0被引入，現(xiàn)在仍然在使用，并且最新的版本是HTML 5.0。HTML概述，案例名稱：HTML網(wǎng)頁框架程序名稱：2-01.htm，head元素，案例名稱：HTML網(wǎng)頁框架程序名稱：2-02.htm我的第一頁，HTML通用標(biāo)簽，HTML通用標(biāo)簽有一些共同的特征：它們都被放置在BODY標(biāo)簽中。常用標(biāo)記包括字體標(biāo)記、圖片標(biāo)記、超鏈接、列表、表格和表格等。字體標(biāo)記，案例名稱：使用字體標(biāo)記程序名稱：2-03.htm本書的特點是以案例為基礎(chǔ)，有30個完整的案例。圖片標(biāo)記，案例名稱：使用圖片標(biāo)記程序名稱：2-04.htm，超鏈接，案例名稱：使用超鏈接程序名稱：2-05.htm其

5、他文件上一頁位于北京清華大學(xué)，列表，案例名稱：使用有序列表程序名稱：2-06.htm有序列表愛祖國愛人民無序列表愛祖國愛黨，示例，1?；颈砀袷潜砀竦幕緲?biāo)志。表示表的行和列。案例名稱：基本表格程序名稱：2-07.htm，第一行，第一列，第二行，第二列，第三行，第三行，第二列，表格的靈活應(yīng)用，案例名稱：跨行和跨列程序名稱：2-08.htm跨越兩行和兩列1000 1000 3000 2000 4000，單元格填充和單元格間距屬性，單元格填充表示單元格邊距。單元格間距是指單元格間距，即單元格之間的距離。例2-09，例2-1:表單樣式，例名：表單樣式程序名：StyleTable.htm序號大學(xué)教師評

6、分學(xué)生評分設(shè)備評分1清華大學(xué)1001002北京大學(xué)10010097，表單，功能是收集用戶信息，實現(xiàn)系統(tǒng)與用戶的交互。例如，電子郵件郵箱的注冊頁面就是一個非常典型的表單頁面。表單信息的處理過程如下：當(dāng)您點擊表單中的提交按鈕時，表單中的信息將被上傳到服務(wù)器端，然后由服務(wù)器端應(yīng)用程序(如CGI、ASP、PHP、JSP等)進(jìn)行處理。)。處理后，用戶提交的信息將存儲在服務(wù)器端的數(shù)據(jù)庫中，或者將相關(guān)信息返回給客戶端瀏覽器。表單標(biāo)題及其屬性，案例名稱：表單的基本使用方法程序名稱：2-10.htm用戶名：密碼：表單中常用的控件，按鈕和輸入元素在常見的表單制作過程中經(jīng)常會遇到。常見的表單控件包括文本框、文本框、

7、密碼框、多選框、單選框和下拉列表框等。示例2-11，塊級元素，案例名：使用塊級元素的程序名：2-12.htm我是層！我是跨度！預(yù)排版標(biāo)記，預(yù)排版標(biāo)記中包含的字符將以超文本標(biāo)記語言源代碼的格式輸出到瀏覽器。超文本標(biāo)記語言文件中的英文空格通常不起作用，但是空格可以顯示在預(yù)布局標(biāo)記中。例2-13，例，設(shè)計網(wǎng)頁框架，例名：上下框架程序名：2-14.htm，使用框架，一般在工程應(yīng)用中，是由三個頁面組成的框架組合，分為上下框架、左右框架、CSS編程技術(shù)、CSS(層疊樣式表)翻譯成中文層疊樣式表，簡稱樣式表，是近年來發(fā)展起來的新技術(shù)。1998年5月12日，CSS級成為W3C的標(biāo)準(zhǔn)。它是一組樣式，樣式中的屬性

8、依次出現(xiàn)在HTML元素中，并在瀏覽器中顯示。樣式可以在超文本標(biāo)記語言文檔的標(biāo)志中定義，或者文檔可以作為附加文檔附加到外部。CSS非常強大，W3C正在盡最大努力向世界推廣這項先進(jìn)的技術(shù)。簡單地說，超文本標(biāo)記語言是一種標(biāo)記語言，而CSS是這種標(biāo)記語言的重要擴展，它可以進(jìn)一步美化頁面。換句話說，CSS是用來裝飾HTML的標(biāo)簽的集合。CSS樣式規(guī)則包括：選擇器屬性：值，單個選擇器的復(fù)合樣式聲明應(yīng)該用分號分隔，例如，選擇器屬性1:值1；屬性2:值2。使用CSS，大小寫名稱：使用CSS程序名稱：2-16.htm h1 font-size : x-大；顏色：紅色H2字體大小：大；藍(lán)色的中國，我的祖國！H1展

9、示了中國，我的祖國！H2展示了三種加載CSS樣式的方法。CSS用于格式化網(wǎng)頁。有三種方式：在HEAD中引用，在BODY中作為文件引用，以及在HEAD中引用。案例名稱：HED中的引用。節(jié)目名稱：2-17.htm H1color 3360綠色；FONT-SiZe :37 PX；背景：黃色；北京大學(xué)、南京大學(xué)、復(fù)旦大學(xué)、清華大學(xué)，BODY中引用，案例名稱：BODY中引用程序名稱：北京大學(xué)、2-18.htm大學(xué)、南京大學(xué)、清華大學(xué)、復(fù)旦大學(xué)，引用外部文檔，案例名稱：樣式表文件程序名稱：mystyle . CSS h1 color 3360 green；FONT-SiZe :37 PX；背景：黃色；案例

10、名稱：鏈接CSS文件程序名稱：北京大學(xué)、2-19.htm大學(xué)、南京大學(xué)、清華大學(xué)、復(fù)旦大學(xué)，文件外導(dǎo)入，案例名稱：導(dǎo)入CSS文件程序名稱：2-20.htm導(dǎo)入網(wǎng)址(mystyle . CSS)；北京大學(xué)、南京大學(xué)、清華大學(xué)、復(fù)旦大學(xué)，CSS以三種方式對應(yīng)于標(biāo)簽，并且任何HTML元素都可以是CSS選擇器。所有上述樣式表都是通過使用標(biāo)簽選擇器引入的。例如：背景：黃色；這里使用的標(biāo)記選擇器是p。，類選擇器，定義一個”。在STYLE標(biāo)簽中使用“類名”，然后在HTML標(biāo)簽中使用CLASS=“類名”來介紹這種樣式，案例名：類選擇器程序名：2-21.htm。little red color 3360 red

11、；FONT-size :18 Px . little green color : green；這是紅色的，相對較??！它是綠色的，而且更??！標(biāo)識選擇器，定義標(biāo)識選擇器時，在樣式名稱前增加“#”名稱，引用時使用“標(biāo)識=名稱”。案例名：身份證選擇器程序名：2-22.htm # szcolor :紅色這是身份證選擇器符號！定義超鏈接樣式，并可以指定a標(biāo)記以不同方式顯示。超鏈接有幾種不同的狀態(tài)：未訪問鏈接、訪問鏈接、鼠標(biāo)懸停，它們可以定義超鏈接文本的顏色和字體大小。通常，超鏈接帶有下劃線，超鏈接的下劃線可以通過使用“文本-裝飾”來移除。定義超鏈接樣式，案例名稱：定義超鏈接樣式程序名稱：2-23.htm

12、a : link color 3360 red；FONT-size :9 pt；文本-裝飾：藍(lán)色；FONT-size :9 pt；文本-裝飾：綠色；FONT-SiZe :15 pt；這是超鏈接http:/本地主機：8080/02/2-23.htm，JavaScript編程技術(shù)，JavaScript是一種腳本語言，所謂的腳本語言是一種可以與超文本標(biāo)記語言混合的語言。VBScript也是一種腳本語言，但是VBScript只能由微軟的瀏覽器互聯(lián)網(wǎng)瀏覽器(IE)完全支持。JavaScript可以在任何瀏覽器上運行，這也是JavaScript的一個優(yōu)點。JavaScript是一種高級腳本描述語言，它不依

13、賴于特定的機器或操作系統(tǒng)，因此它獨立于操作平臺。JavaScript 1.0最初是在網(wǎng)景導(dǎo)航器2.0和網(wǎng)景LiveWire 1.0上實現(xiàn)的，當(dāng)前版本的JavaScript是JavaScript 1.2。從本質(zhì)上講，JavaScript與Java無關(guān)，但同時，作為一種語言，它可以從三個角度來區(qū)分。(1)JavaScript是一種解釋性語言。當(dāng)一個程序被執(zhí)行時，瀏覽器解釋并執(zhí)行它。Java是一種編譯語言，在執(zhí)行之前必須先編譯。(2)代碼格式不同。Java代碼被編譯成二進(jìn)制文件，而JavaScript是純文本文件。(3)超文本標(biāo)記語言的嵌入方法不同。Java可以通過小型應(yīng)用程序嵌入超文本標(biāo)記語言文件

14、，而JavaScript可以直接寫入文本文件或超文本標(biāo)記語言文件。JavaScript被引入網(wǎng)頁，案例名：第一個JavaScript程序的程序名：2-24.htm文檔。)，變量和數(shù)組，它們是JavaScript的基礎(chǔ)。JavaScript和C語言屬于同一個語言家族，許多基本語法是相同的。無論是在JavaScript還是其他編程語言中，最基本的概念是變量。在JavaScript定義變量中只有一個關(guān)鍵字“var”，在JavaScript中定義用戶名變量的語法是：“var strUserName”。變量，案例名：使用變量程序名：2-25.htm歡迎=歡迎！var iCounter=10iCounte

15、r=iCounter 1；document . write(StrwelComE)；document . write(iCounter)；變量命名應(yīng)遵循以下六條規(guī)則：(1)變量命名必須以英文字母或下劃線開頭，即變量名的第一個字符必須是a到z或a到z之間的字母或“_”。(2)變量名的長度在0255個字符之間。(3)除第一個字符外，任何字符、數(shù)字和下劃線都可以用于其他字符，但不能使用空格。(4)不要使用JavaScript符號，如：等。(5)您不能使用JavaScript中使用的保留字，如sqrt(處方)、parseInt(轉(zhuǎn)換為整數(shù))等。(6)在JavaScript中，變量名的情況是不同的。例如

16、，變量s12和S12是兩個不同的變量。，聲明一個數(shù)組，使用關(guān)鍵字new和Array，new代表創(chuàng)建一個新對象，Array是一個用JavaScript構(gòu)建的對象，因為JavaScript是區(qū)分大小寫的，所以Array的第一個字母必須大寫。use array，case name: use array程序名：2-26.htm vararrusername=new array(2)；arrUserName0=賬單；1=鮑勃；document . write(arrusername 0)；document . write()；document . write(arrusername 1)；document . write()；表達(dá)式和運算符，程序的主要功能是運算，如加法、減法、乘法、除法等基本運算。算術(shù)運算符主要提供加法、減法、乘法、除法等運算。計算機中沒有常用的乘法符號，而是用“*”來代替。余數(shù)運算使用“%”，例名：算術(shù)運算符程序名：2-27.htm文檔.寫(3 * 2)；document . write()；文檔. writ