沒(méi)有幻燈片標(biāo)題-西部故事_第1頁(yè)
已閱讀1頁(yè),還剩98頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、第9章 網(wǎng)頁(yè)制作,學(xué)習(xí)要點(diǎn): HTML語(yǔ)言基本知識(shí) JavaScript腳本語(yǔ)言,網(wǎng)頁(yè)建立與維護(hù),9.1 網(wǎng)頁(yè)的制作語(yǔ)言,9.2 網(wǎng)頁(yè)腳本語(yǔ)言——JavaScript,退出,9.1.1 HTML 語(yǔ)言的結(jié)構(gòu),9.1.3 超文本鏈接指針,9.1.2 構(gòu)成網(wǎng)頁(yè)的基本元素,9.1..4在HTML文件中使用圖像,9.1.6 表單的應(yīng)用,9.1.5 框架結(jié)構(gòu)的使用,9.1.7 HTML中的表格,9.1

2、網(wǎng)頁(yè)的制作語(yǔ)言,返 回,HTML(超文本標(biāo)記語(yǔ)言)是一種描述文檔結(jié)構(gòu)的標(biāo)注語(yǔ)言,它使用一些約定的標(biāo)記對(duì)WWW上的各種信息進(jìn)行標(biāo)注。當(dāng)用戶瀏覽WWW上的信息時(shí),瀏覽器會(huì)自動(dòng)解釋這些標(biāo)記的含義,并按照一定的格式在屏幕上顯示這些被標(biāo)記的文件。HTML的優(yōu)點(diǎn)是其跨平臺(tái)性。即任何可以運(yùn)行瀏覽器的計(jì)算機(jī)都能閱讀并顯示HTML文件,不管其操作系統(tǒng)是什么,并且顯示結(jié)果相同。 HTML文件是標(biāo)準(zhǔn)的ASCII文件,且其后

3、綴名為htm或html的文件。HTML文件看起來(lái)象是加入了許多被稱為鏈接簽(tag)的特殊字符串的普通文本文件。從結(jié)構(gòu)上講,HTML文件由元素(element)組成,組成HTML文件的元素有許多種,用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。絕大多數(shù)元素是“容器”, 即它有起始標(biāo)記和結(jié)尾標(biāo)記。元素的起始標(biāo)記叫做起始鏈接簽(start tag),元素結(jié)束標(biāo)記叫做結(jié)尾鏈接簽(end tag),在起始鏈接簽和結(jié)尾鏈接簽中間的部分是元素體。 每一個(gè)

4、元素都有名稱和可選擇的屬性,元素的名稱和屬性都在起始鏈接簽內(nèi)標(biāo)明。,9.1.1 HTML 語(yǔ)言的結(jié)構(gòu),下面來(lái)看一個(gè)HTML文件,它在瀏覽器中顯示的結(jié)果如圖8-15所示。, 廣東農(nóng)工商學(xué)院 這是一HTML的測(cè)試文件 ,標(biāo)記用來(lái)給網(wǎng)頁(yè)命名,網(wǎng)頁(yè)的名稱寫(xiě)在與標(biāo)記之間,顯示在瀏覽器的標(biāo)題欄中。例如,在圖8-15中所示的瀏覽器頁(yè)面中,其

5、標(biāo)題欄所顯示的“武漢工業(yè)學(xué)院”是在HTML文件中的由廣東農(nóng)工商學(xué)院所定義的。,9.1.2 構(gòu)成網(wǎng)頁(yè)的基本元素,1.標(biāo)記,…到…標(biāo)題元素有6種,用于表示文章中的各種題目。字體大小到順序減小。下面這個(gè)例子中分別使用了到的標(biāo)題。其HTML文件如下所示,在瀏覽器中的顯示效果如圖8-16所示。,2.標(biāo)記,源文件,3.預(yù)格式化文本標(biāo)記,源文件,HTML的輸出是基于窗口的,因而HTML文件在輸出時(shí)都是要重新排版的,即把文本上任何額外的的字符(如空格

6、、制表符和回車(chē)符)都忽略,若確實(shí)不需要重新排版的內(nèi)容,可以用…通知瀏覽器。在圖8-17和圖8-18中顯示了有無(wú)預(yù)格式化文本標(biāo)記的對(duì)比。,4.和標(biāo)記,源文件,用于強(qiáng)制換行。 表示一個(gè)段落的開(kāi)始。一般可不用。,5. 標(biāo)記,這幾個(gè)標(biāo)記都是用來(lái)修飾所包含文檔的。標(biāo)記使文本加粗;標(biāo)記使文本傾斜;標(biāo)記給文本加下劃線;標(biāo)記給文本加刪除線;標(biāo)記使文本字體加重。下面給出一個(gè)HTML源文件,其顯示結(jié)果如圖8-19所示。,6.標(biāo)記,…用來(lái)修改字體和

7、顏色。其中COLOR屬性指定文字顏色,顏色的表示可以用6位十六進(jìn)制代碼,如;SIZE屬性指定相對(duì)尺寸。另外, 如果用戶想要設(shè)置網(wǎng)頁(yè)的背景色和文字顏色,可以將標(biāo)記擴(kuò)充為:其中各個(gè)元素的說(shuō)明如表8-1所示,表8-2列出了一些常用顏色的RGB值。,超文本鏈接指針是HTML最吸引人的優(yōu)點(diǎn)之一,可以這樣說(shuō),如果沒(méi)有超文本鏈接指針,就沒(méi)有萬(wàn)維網(wǎng)。使用超文本鏈接指針可以使順序存放的文件具有一定程度上隨機(jī)訪問(wèn)的能力,這更加符合人類的踴躍思維方式。

8、超文本鏈接指針是指把并不連續(xù)的兩段文字或兩個(gè)文件聯(lián)系起來(lái)。,9.2.3 超文本鏈接指針,1. 統(tǒng)一資源定位器URL,統(tǒng)一資源定位器(Uniform Resource Locator)是文件名的擴(kuò)展。在單機(jī)系統(tǒng)中,如果要找一個(gè)文件,需要知道該文件所在的路徑和文件名;在互連網(wǎng)上同樣找一個(gè)文件,除了要知道以上內(nèi)容之外,顯然還需要知道該文件存放在哪個(gè)網(wǎng)絡(luò)的哪臺(tái)主機(jī)中才行。與單機(jī)系統(tǒng)不一樣的是,在單機(jī)系統(tǒng)中所有的文件都由統(tǒng)一的操作系統(tǒng)來(lái)管理,因

9、而不必給出訪問(wèn)該文件的方法;而在互連網(wǎng)上,每個(gè)網(wǎng)絡(luò),每臺(tái)主機(jī)的操作系統(tǒng)都不一樣,因此必須指定訪問(wèn)該文件的方法。一個(gè)URL包括了以上所有的信息。它的構(gòu)成為: protocol:// machine.name[:port]/directory/filename,2. 建立一個(gè)鏈接,(1)鏈接到其它站點(diǎn) 在HTML文件中用鏈接指針指向一個(gè)目標(biāo)。其基本格式為: zzz 其中zzz可以是文字或圖片并

10、顯示在網(wǎng)頁(yè)中,當(dāng)用戶單擊它時(shí),瀏覽器就會(huì)顯示由href屬性中的統(tǒng)一資源定位器(URL)所指向的目標(biāo),實(shí)際上這個(gè)ZZZ在HTML文件中充當(dāng)指針的角色,它一般顯示為藍(lán)色。href中的h表示超文本,而ref表示“訪問(wèn)”或“引用”的意思。例如:廣東農(nóng)工商學(xué)院 用戶用鼠標(biāo)單擊“廣東農(nóng)工商學(xué)院”,即可看到廣東農(nóng)工商學(xué)院的主頁(yè)內(nèi)容。在這個(gè)例子中, 充當(dāng)指針的是“廣東農(nóng)工商學(xué)院”。,(2)同一個(gè)文件中的鏈接 超鏈可以指向自己

11、的計(jì)算機(jī)中的某一個(gè)文件這種鏈接方式叫做本地鏈接。前面曾提到過(guò)一個(gè)超文本鏈接指針包括兩個(gè)部分,一個(gè)指向目標(biāo)的鏈接指針,另一個(gè)是被指向的目標(biāo)。 標(biāo)識(shí)一個(gè)目標(biāo)的方法為:……. NAME屬性將放置該標(biāo)記的地方標(biāo)記為“KKK”,KKK是一個(gè)全文唯一的標(biāo)記串,和 之間的內(nèi)容可有可無(wú)。這樣,就把放置標(biāo)記的地方做了一個(gè)叫做“KKK”的標(biāo)記(如果對(duì)Microsoft Word很熟悉的話,這就相當(dāng)于在Wo

12、rd中的定義“書(shū)簽”)。做好標(biāo)記后,可以用下列方法來(lái)指向它。轉(zhuǎn)向下一處 這時(shí)就可以點(diǎn)擊“轉(zhuǎn)向下一處”這段文字,瀏覽器就從標(biāo)記名為KKK的部分開(kāi)始顯示此HTML文件的內(nèi)容了。,9.2.4 在HTML文件中使用圖像,1.在HTML文件中顯示圖像,在瀏覽器上顯示的圖像必須有特定的格式,目前使用的瀏覽器通常支持GIF和JPEG格式的圖像。在HTML網(wǎng)頁(yè)中加圖像是通過(guò)標(biāo)記實(shí)現(xiàn)的,它有幾個(gè)較為重要的屬性。其中:SRC屬性

13、:指明圖形的URL地址;HEIGHT屬性:決定圖形的高度;WIDTH屬性:決定圖形的寬度;BORDER屬性:決定邊框線的寬度,0-表示無(wú)邊框;ALT屬性:指明圖像顯示的備用文本;,源文件,2.在HTML文件中利用圖像建立鏈接,如果在鏈接標(biāo)記和的中間放置一個(gè)標(biāo)記,這個(gè)圖像將會(huì)成為一個(gè)可擊點(diǎn),產(chǎn)生一個(gè)鏈接。例如: 當(dāng)用戶單擊這個(gè)圖像后,瀏覽器就會(huì)顯示“default.asp”這個(gè)文件的內(nèi)容了

14、。,9.2.5 框架結(jié)構(gòu)的使用,框架能夠?qū)㈨?yè)面分成數(shù)個(gè)獨(dú)立變化的窗口,每個(gè)窗口可以顯示不同的Web頁(yè)面,并可以不斷更換顯示的對(duì)象。使用框架結(jié)構(gòu),可以使屏幕的信息量增大,使Web網(wǎng)頁(yè)更加吸引讀者。有關(guān)框架內(nèi)容的HTML語(yǔ)法為:…… 其中...中的內(nèi)容顯示在不支持分框的瀏覽器窗口中,因而這里指向一個(gè)普通版本的HTML文件,以便使用不支持分框?yàn)g覽器的用戶閱讀。 分框由指定,并且

15、可以嵌套,分區(qū)中各部分顯示的內(nèi)容用指定?! ⌒枰f(shuō)明的是,frame是一個(gè)新出現(xiàn)的元素,許多瀏覽器不支持它。分框可以將窗口橫向分成幾個(gè)部分,也可以縱向分成幾個(gè)部分,還可以混合分框。,框架結(jié)構(gòu)標(biāo)記可以嵌套,用以實(shí)現(xiàn)大框架中的小框架。它主要有兩個(gè)屬性:ROWS和COLS,它們可以將瀏覽器頁(yè)面分為N行M列,當(dāng)然也可以各自獨(dú)立使用。下面來(lái)看一個(gè)框架結(jié)構(gòu)的例子。如圖8-21,其HTML源文件如下所示。, 廣東農(nóng)工商學(xué)院

16、 , ,標(biāo)記有以下主要屬性:SRC屬性 指定框架單元的URL源,如第6行中指出的是當(dāng)前主機(jī)當(dāng)前目錄下的“a.htm”文件。即在此框中顯示“a.htm”的內(nèi)容。NAME屬性 為該框架單元起個(gè)標(biāo)識(shí)名,主要用來(lái)為將來(lái)改變框架內(nèi)容提供入口。SCROLLING屬性 設(shè)置

17、框架是否使用滾動(dòng)務(wù)。有YES、NO和AUTO三個(gè)值,分別表示強(qiáng)制使用滾動(dòng)條,禁止使用滾動(dòng)條和自動(dòng)判斷使用滾動(dòng)條。,9.2.6 表單的應(yīng)用,HTML提供的表單是用來(lái)將用戶數(shù)據(jù)從瀏覽器傳遞給Web服務(wù)器的。例如可以利用表單建立一個(gè)錄入界面,也可以利用表單對(duì)數(shù)據(jù)庫(kù)進(jìn)行查詢。在這里需要聲明的是,表單的操作是與服務(wù)器進(jìn)行交互的操作,而服務(wù)器端的操作是通過(guò)服務(wù)器端的程序來(lái)實(shí)現(xiàn)的。實(shí)現(xiàn)在服務(wù)器端的操作有許多種方式,其中ASP(動(dòng)態(tài)服務(wù)網(wǎng)頁(yè))的方式就

18、是一種,它可以通過(guò)ADO方式與多種數(shù)據(jù)庫(kù)相連。 ASP(Active Server Page)程序是在服務(wù)器端工作,并且通過(guò)服務(wù)器端的編譯動(dòng)態(tài)地送出HTML文件給客戶端,它負(fù)責(zé)處理HTML文件與運(yùn)行在服務(wù)器端的程序之間的數(shù)據(jù)交換。當(dāng)用戶輸入他們的信息(這個(gè)信息可以是查詢條件,也可以是傳送給服務(wù)器的某些內(nèi)容)并提交給服務(wù)器后,便激活了一個(gè)ASP程序。該ASP程序又可以調(diào)用操作系統(tǒng)下的其他程序(例如數(shù)據(jù)庫(kù)管理系統(tǒng))完成讀者的

19、查詢?nèi)蝿?wù),當(dāng)操作系統(tǒng)下的程序完成查詢之后,便把查詢結(jié)果傳給ASP,通過(guò)ASP傳給Web服務(wù)器。由此可以看出,ASP程序在用戶與服務(wù)器之間進(jìn)行交互查詢時(shí)所起的重要作用。,1. 什么是表單,HTML提供的表單是用來(lái)將用戶數(shù)據(jù)從瀏覽器傳遞給Web服務(wù)器的。例如可以利用表單建立一個(gè)錄入界面,也可以利用表單對(duì)數(shù)據(jù)庫(kù)進(jìn)行查詢。在這里需要聲明的是,表單的操作是與服務(wù)器進(jìn)行交互的操作,而服務(wù)器端的操作是通過(guò)服務(wù)器端的程序來(lái)實(shí)現(xiàn)的。實(shí)現(xiàn)在服務(wù)器端的操作有

20、許多種方式,其中ASP(動(dòng)態(tài)服務(wù)網(wǎng)頁(yè))的方式就是一種,它可以通過(guò)ADO方式與多種數(shù)據(jù)庫(kù)相連。 ASP(Active Server Page)程序是在服務(wù)器端工作,并且通過(guò)服務(wù)器端的編譯動(dòng)態(tài)地送出HTML文件給客戶端,它負(fù)責(zé)處理HTML文件與運(yùn)行在服務(wù)器端的程序之間的數(shù)據(jù)交換。當(dāng)用戶輸入他們的信息(這個(gè)信息可以是查詢條件,也可以是傳送給服務(wù)器的某些內(nèi)容)并提交給服務(wù)器后,便激活了一個(gè)ASP程序。該ASP程序又可以調(diào)用操作系

21、統(tǒng)下的其他程序(例如數(shù)據(jù)庫(kù)管理系統(tǒng))完成讀者的查詢?nèi)蝿?wù),當(dāng)操作系統(tǒng)下的程序完成查詢之后,便把查詢結(jié)果傳給ASP,通過(guò)ASP傳給Web服務(wù)器。由此可以看出,ASP程序在用戶與服務(wù)器之間進(jìn)行交互查詢時(shí)所起的重要作用。,1. 什么是表單,表單就是為Internet網(wǎng)絡(luò)用戶在瀏覽器上建立一個(gè)交互接口,使Internet網(wǎng)絡(luò)用戶可以在這個(gè)接口上輸入自己的信息,然后使用提交按鈕,將Internet網(wǎng)絡(luò)用戶的輸入信息傳送給Web服務(wù)器。

22、 在HTML中,有一個(gè)專門(mén)的標(biāo)記FORM提供表單的功能,由表單開(kāi)始標(biāo)記和表單結(jié)束標(biāo)記組成,表單中可以設(shè)置文本框、按鈕或下拉菜單,它們也是通過(guò)標(biāo)記完成。在表單的開(kāi)始標(biāo)記中帶有兩個(gè)屬性:ACTION和METHOD。書(shū)寫(xiě)表單的HTML格式如下…,2. 表單的標(biāo)記,FORM標(biāo)記有以下主要屬性:(1)ACTION屬性是用來(lái)指出,當(dāng)這個(gè)FORM提交后需要執(zhí)行的駐留在Web服務(wù)器上的程序名(包括路徑)是什么。一旦Internet網(wǎng)絡(luò)用戶提交

23、輸入信息后服務(wù)器便激活這個(gè)程序,完成某種任務(wù)。例如: … 當(dāng)用戶點(diǎn)擊“提交”按鈕以后,Web服務(wù)器上的“l(fā)ogin.asp”將接收用戶輸入的信息,以登記用戶信息。(2)METHOD屬性是用來(lái)說(shuō)明從客戶端瀏覽器將Internet網(wǎng)絡(luò)用戶輸入的信息傳送給Web服務(wù)器時(shí)所使用的方式,它有兩種方式:POST和GET。默認(rèn)的方式是GET,這兩者的區(qū)別是在使用POST時(shí),表單中所有的變量及其值都按一定的規(guī)律放入報(bào)文中,而不是附加在ACTIO

24、N所設(shè)定的URL之后。在使用GET時(shí)將FORM的輸入信息作為字符串附加在ACTION所設(shè)定的URL的后面,中間用“?”隔開(kāi),即在客戶端瀏覽器的地址欄中可以直接看見(jiàn)這些內(nèi)容。,2. 表單的標(biāo)記,HTML中的INPUT標(biāo)記是表單中最常用的標(biāo)記。我們?cè)诰W(wǎng)頁(yè)上所見(jiàn)到的文本框、按鈕等等都由這個(gè)標(biāo)記引出的。下面是INPUT標(biāo)記的標(biāo)準(zhǔn)格式:其中TYPE屬性是用來(lái)說(shuō)明提供給用戶進(jìn)行信息輸入的類型是什么。例如是文本框、單選按鈕或多選按鈕。它的取值如

25、下:TYPE = “TEXT”表示在表單中使用單行文本框 = “PASSWORD” 表示在表單中為用戶提供密碼輸入框 = “RADIO” 表示在表單中使用單選按鈕 = “CHECKBOX” 表示在表單中使用多選按鈕 = “SUBMIT”表示在表單中使用提交按鈕 = “RESET”表示在表單中使用重置按鈕,3.HTML中的INPUT標(biāo)記,用一個(gè)例子說(shuō)明文

26、字輸入和密碼輸入的制作。,(1)文字輸入和密碼輸入, 這是個(gè)測(cè)試頁(yè) 請(qǐng)輸入您的真實(shí)姓名: 您的主頁(yè)的網(wǎng)址: 密碼: ,(2)復(fù)選框(Checkbox) 和 單選框

27、(Radio Button), 這是個(gè)測(cè)試頁(yè) 選擇一種你喜愛(ài)的水果: 香蕉 草莓 橘子 選擇你所喜愛(ài)的運(yùn)動(dòng):

28、 足球 籃球 排球 ,(3)按鈕的制作,在上面幾個(gè)例子中,都有兩個(gè)按扭,一個(gè)是“發(fā)送”按鈕,另一個(gè)“重置”按鈕。其實(shí)“發(fā)送”按鈕真正的含義叫“提交”即當(dāng)Internet網(wǎng)絡(luò)用戶用鼠標(biāo)單擊這個(gè)按鈕后,用戶輸入的信息便提交給一個(gè)駐留在Web服務(wù)器上的程序,

29、讓服務(wù)器進(jìn)行處理,其典型的格式:。提交按鈕在FORM中是必不可少的,前幾個(gè)例子只是說(shuō)明INPUT語(yǔ)句中類型的使用,作為FORM語(yǔ)句并不完整,每個(gè)FORM中有且僅有一個(gè)提交按鈕。當(dāng)設(shè)置“提交”按鈕標(biāo)記時(shí),如果缺省VALUE屬性,則瀏覽器窗口中的按鈕上出現(xiàn)“SUBMIT”的字樣,這個(gè)字樣也可以自己設(shè)定,改變按鈕上的提示。例如:VALUE=“提交”。 另一種在瀏覽器常用的按鈕叫“重置”按鈕,當(dāng)Internet網(wǎng)絡(luò)用戶用鼠標(biāo)單擊

30、這個(gè)按鈕后,網(wǎng)絡(luò)用戶輸入的信息被清除,讓網(wǎng)絡(luò)用戶重新輸入信息。其典型的格式:,而且在這個(gè)標(biāo)記設(shè)置中如果缺省VALUE屬性,則瀏覽器窗口中的按鈕上出現(xiàn)“RESET”的字樣,這個(gè)字樣也可以自己設(shè)定,來(lái)改變按鈕上的提示,例如:VALUE=“重新輸入”。,(4)HTML中的SELECT標(biāo)記,在制做HTML文件時(shí),使用…標(biāo)記可以在瀏覽器窗口中設(shè)置下拉式菜單或帶有滾動(dòng)條的菜單,Internet網(wǎng)絡(luò)用戶可以在菜單中選中一個(gè)或多個(gè)選項(xiàng)。,

31、 廣東農(nóng)工商學(xué)院 請(qǐng)從下面課程中選擇幾門(mén)選擇課: 網(wǎng)絡(luò)技術(shù) 書(shū)法 音樂(lè)欣賞 現(xiàn)代文學(xué) 多媒體技術(shù) ,9.2.7 HTML中的表格,下面看一個(gè)表

32、格的例子,從這個(gè)例子可以看出一個(gè)表格有一個(gè)標(biāo)題(Caption),它表明表格的主要內(nèi)容,并且一般位于表的上方;表格中由行和列分割成的單元叫做“表元”(Cell),它又分為表頭(用TH標(biāo)記來(lái)表示)和表數(shù)據(jù)(用TD標(biāo)記來(lái)表示);表格中分割表示的行列線稱為“框線”(B order)。,一個(gè)表格的基本框架如下所示:,1.表格的標(biāo)記,,,(1)TABLE標(biāo)記,一個(gè)表

33、格至少一個(gè)TABLE標(biāo)記,由它來(lái)決定一個(gè)表格的開(kāi)始和結(jié)束,而且TABLE標(biāo)記可以嵌套。TABLE標(biāo)記有以下五種屬性:BORDER屬性,指定圍繞表格的框的寬度(只能用像素)。CELLSPACING屬性,指定框線的寬度CELLPADDING屬性,用于設(shè)置表元內(nèi)容與邊框線之間的間距。ALIGN屬性用來(lái)控制表格本身在頁(yè)面上的對(duì)齊方式。其取值可是LEFT(左對(duì)齊)、CENTER(居中對(duì)齊)、RIGHT(右對(duì)齊)。WIDTH屬性,用來(lái)設(shè)置

34、表格的寬度,可以以像素為單位,也可用占瀏覽器窗口的百分比來(lái)定義。,(2)CATION標(biāo)記,CATION標(biāo)記用來(lái)標(biāo)注表格標(biāo)題的。CATION標(biāo)記必須緊接在TABLE開(kāi)始標(biāo)記之后放在第一個(gè)TR標(biāo)記之前。通過(guò)該標(biāo)記所定義的表格標(biāo)題一般顯示在表格的上方,而且其水平方向是居中對(duì)齊。另外,如需要對(duì)表格的標(biāo)題突出顯示,可以在CATION標(biāo)記之間加入其它對(duì)字體進(jìn)行加重顯示的標(biāo)記。如: 表格標(biāo)題強(qiáng)調(diào)……….,(3)

35、TR標(biāo)記,定義表格的一行。TR標(biāo)記中有兩個(gè)屬性,一個(gè)是ALIGN屬性,用來(lái)設(shè)置表行中的每個(gè)表元在水平方向的對(duì)齊方式,其取值可以是LEFT(左對(duì)齊)、CENTER(居中對(duì)齊)、RIGHT(右對(duì)齊);另一個(gè)是VLIGN屬性,用來(lái)設(shè)置表行中的每個(gè)表元在垂直方向的對(duì)齊方式,其取值可以是TOP(向上對(duì)齊)、CENTER(居中對(duì)齊)、BOTTOM(向下對(duì)齊)。例如,要使表行中各單元的內(nèi)容水平方向右對(duì)齊、垂直方向居中對(duì)齊,可使用如下源代碼:,(4

36、)TH標(biāo)記,TH標(biāo)記用來(lái)表示一個(gè)表行中的各個(gè)單元。TH標(biāo)記內(nèi)幾乎可以包含所有的HTML標(biāo)記,甚至還可以嵌套表格。該標(biāo)記與TR標(biāo)記同樣具有ALIGN和VALIGN屬性,如果在TH標(biāo)記和TR 標(biāo)記中都設(shè)置了ALIGN和VALIGN屬性,而且它們所設(shè)置的屬性值不相同,這時(shí)以TH標(biāo)記所設(shè)置的屬性值為準(zhǔn)。另外,TH標(biāo)記還有兩個(gè)屬性,一個(gè)是WIDTH屬性,用來(lái)設(shè)置表元的寬度,另一個(gè)HEIGHT屬性,用來(lái)設(shè)置表元的高度。這兩個(gè)屬性的取值單位都是像素。

37、在同一行中將多個(gè)表元設(shè)置為不同高度,或者在同一列中將多個(gè)表元設(shè)置為不同寬度,都有可能導(dǎo)致不可預(yù)料的結(jié)果。,在這個(gè)實(shí)例中,通過(guò)制作一個(gè)登記表格來(lái)給大家來(lái)說(shuō)明如何制作一個(gè)比較復(fù)雜的表格。在表格中經(jīng)常會(huì)出現(xiàn)跨多行、多列的表元,這就要利用TD標(biāo)記另外兩個(gè)屬性,即COLSPAN和ROWSPAN屬性。例如 登記照 表示這個(gè)表項(xiàng)標(biāo)題將橫跨三個(gè)表項(xiàng)的位置; 登記照 表示這個(gè)表項(xiàng)標(biāo)題將縱跨三個(gè)表項(xiàng)的位置;另外每個(gè)表元還可以設(shè)置其

38、背景顏色。例如 登記照 還可以在表格中插入超級(jí)鏈接或在表格中插入圖片,如果能對(duì)這個(gè)例子舉一反三的話,那么僅需制作一個(gè)無(wú)框線的表格,就可以把各種數(shù)據(jù)按照自己所希望的形式在頁(yè)面進(jìn)行布置。,2.表格使用實(shí)例,下面就給出一個(gè)具體的實(shí)例, 表格綜合實(shí)例 大獎(jiǎng)賽登記表 報(bào)名號(hào)757性別女

39、姓名江小麗 ,推薦單位宇宙公司,下面就給出一個(gè)具體的實(shí)例, 推薦單位 宇宙公司 ,9.2.1 JavaScript的基礎(chǔ)知識(shí),9.2.2 JavaScript語(yǔ)言,9.2.3 JavaScript中的函數(shù),9.2.4 JavaScript的事件,9.2 網(wǎng)頁(yè)腳本語(yǔ)言——JavaScript,9.2.5

40、 JavaScript中的對(duì)象,返 回,9.2.1 JavaScript的基礎(chǔ)知識(shí),腳本語(yǔ)言是一種簡(jiǎn)單的描術(shù)性語(yǔ)言,它是針對(duì)HTML語(yǔ)言不能很好地解決動(dòng)態(tài)交互這個(gè)缺點(diǎn)而引入的,它能對(duì)Web頁(yè)面中的元素進(jìn)行控制。一般來(lái)說(shuō),腳本語(yǔ)言是通過(guò)一個(gè)的標(biāo)記嵌入到HTML文檔中,并可以被瀏覽器解釋執(zhí)行,插入的腳本語(yǔ)言就如同子程序一樣被HTML元素所調(diào)用,成為HTML的一部分。目前比較流行的腳本語(yǔ)言有網(wǎng)景公司(Netscope)的

41、JavaScript和微軟公司(Microsoft)的VBScript。 JavaScript是基于Netscape瀏覽器的,類似于Java編程語(yǔ)言的腳本語(yǔ)言,并且是一種基于對(duì)象的、面向Internet或Intranet的編程語(yǔ)言,使用它可以開(kāi)發(fā)關(guān)于Internet或Intranet客戶端和服務(wù)器的應(yīng)用程序,也可以方便地嵌入到計(jì)算機(jī)文件中。由于JavaScript是第一個(gè)在WWW上使用的腳本語(yǔ)言,因而它一度是最流行的W

42、eb站點(diǎn)腳本語(yǔ)言,用它可以方便地編排HTML網(wǎng)頁(yè),同時(shí)還可以控制動(dòng)態(tài)HTML。 VBScript是Microsoft公司在Visual Basic編程語(yǔ)言的基礎(chǔ)上設(shè)計(jì)的,由于其在企業(yè)界廣為流行,且與Microsoft公司的其它產(chǎn)品有著密切的聯(lián)系,VBScript的使用范圍越來(lái)越大,逐漸會(huì)成為一種主要的腳本語(yǔ)言。,1. 什么是腳本語(yǔ)言,JavaScript語(yǔ)言起初并不叫此名稱,它的早期是Netscape的開(kāi)發(fā)者們稱之為“M

43、ocha”的語(yǔ)言,開(kāi)始在網(wǎng)上進(jìn)行β測(cè)試(由軟件的多個(gè)用戶在其實(shí)際的使用環(huán)境下進(jìn)行的測(cè)試叫β測(cè)試)時(shí),名字改為“LiveScript”, Sun公司推出Java之后,Netscape引進(jìn)了Sun的有關(guān)概念,在其發(fā)行Netscape 2.0β測(cè)試版時(shí)才稱其為 “JavaScript”。它不僅支持Java的 Applet小程序,同時(shí)向Web頁(yè)的制作者提供一種嵌入 HTML文檔進(jìn)行編程的、基于對(duì)象的Script(腳本)程序設(shè)計(jì)語(yǔ)言,采用的許多結(jié)

44、構(gòu)與Java相 似 。 支持JavaScript的Navigator 2.0的網(wǎng)絡(luò)瀏覽器能夠解釋并執(zhí)行嵌在HTML中的用JavaScript語(yǔ)言書(shū)寫(xiě)的“程序”。JavaScript具有很多采用CGI/PERL編寫(xiě)的Script(腳本)的能力,其優(yōu)點(diǎn)是可以引用主機(jī)資源,響應(yīng)位于服務(wù)器Web頁(yè)中相應(yīng)語(yǔ)法元素要完成的功能,而又不與主機(jī)服務(wù)器進(jìn)行交互會(huì)話 。,2.JavaScript 的產(chǎn)生與發(fā)展,JavaScript語(yǔ)言起初并

45、不叫此名稱,它的早期是Netscape的開(kāi)發(fā)者們稱之為“Mocha”的語(yǔ)言,開(kāi)始在網(wǎng)上進(jìn)行β測(cè)試(由軟件的多個(gè)用戶在其實(shí)際的使用環(huán)境下進(jìn)行的測(cè)試叫β測(cè)試)時(shí),名字改為“LiveScript”, Sun公司推出Java之后,Netscape引進(jìn)了Sun的有關(guān)概念,在其發(fā)行Netscape 2.0β測(cè)試版時(shí)才稱其為 “JavaScript”。它不僅支持Java的 Applet小程序,同時(shí)向Web頁(yè)的制作者提供一種嵌入 HTML文檔進(jìn)行編程的

46、、基于對(duì)象的Script(腳本)程序設(shè)計(jì)語(yǔ)言,采用的許多結(jié)構(gòu)與Java相 似 。 支持JavaScript的Navigator 2.0的網(wǎng)絡(luò)瀏覽器能夠解釋并執(zhí)行嵌在HTML中的用JavaScript語(yǔ)言書(shū)寫(xiě)的“程序”。JavaScript具有很多采用CGI/PERL編寫(xiě)的Script(腳本)的能力,其優(yōu)點(diǎn)是可以引用主機(jī)資源,響應(yīng)位于服務(wù)器Web頁(yè)中相應(yīng)語(yǔ)法元素要完成的功能,而又不與主機(jī)服務(wù)器進(jìn)行交互會(huì)話 。,2.Java

47、Script 的產(chǎn)生與發(fā)展,JavaScript的編程工作復(fù)雜與否和HTML文檔所提供的功能大小密切相關(guān),下面用一個(gè)簡(jiǎn)單的例子來(lái)介紹它的編程特點(diǎn) 。,3.一 個(gè) 簡(jiǎn) 單 的 例 子,<HTML> <HEAD><TITLE>This is a test</TITLE> </HEAD> <BODY> 你好 <SCRIPT LANGUAGE="JavaScrip

48、t"> document.write "Hello,JavaScript! " </SCRIPT> </BODY> </HTML>,JavaScript源代碼被嵌在一個(gè)HTML文檔中,而且它可以出現(xiàn)在文檔頭部(HEAD節(jié))和文檔體部 (BODY節(jié) )。SCRIPT標(biāo)記的一般格式為: <SCRIPT LANGUAGE="

49、;JavaScript"> <!--JavaScript語(yǔ) 句 串 · · · --></SCRIPT> 為了使老版本的瀏覽器(即Navigator2.0版以前的瀏覽器)避開(kāi)不識(shí)別的“JavaScript語(yǔ)句串”,用JavaScript編寫(xiě)的源代碼可以用注解括起來(lái),即使用HTML的注解標(biāo)記<!--…-->,而Navigator2.x可以識(shí)別放在注解行中的Java

50、Script源代碼。 說(shuō)明:<SCRIPT>標(biāo)記可聲明一個(gè)腳本程序,LANGUAGE屬性聲明該腳本是一個(gè)用JavaScript語(yǔ)言編寫(xiě)的腳本。在和之間的任何內(nèi)容都視為腳本語(yǔ)句,會(huì)被瀏覽器解釋執(zhí)行。在JavaScript腳本中,用“//”作為行的注釋標(biāo)注。,9.2.2 JavaScript語(yǔ)言,在JavaScript中,數(shù)據(jù)類型是十分寬松的,程序員在聲明變量時(shí)可以不指定該變量的數(shù)據(jù)類型,JavaScript會(huì)自動(dòng)地按照

51、需要來(lái)分配適當(dāng)?shù)臄?shù)據(jù)類型。這一點(diǎn)和JAVA或C++是截然不同的。JavaScript有以下幾種基本的數(shù)據(jù)類型:,1.JavaScript數(shù)據(jù)類型,(1)數(shù)字類型如: 34,3.14表示為十進(jìn)制數(shù);034表示為八進(jìn)制數(shù),用十進(jìn)行表示其值為28;0x34表示為十六進(jìn)制數(shù),用十進(jìn)行表示其值為52。(2)字符串類型如:"Hello!";,(3)邏輯值類型其取值僅可能是“真”或“假”,用 True或False來(lái)表示

52、。 (4)空值當(dāng)你定義一個(gè)變量后未賦初值時(shí),則該變量為空值。例如: var ch1; //此時(shí)ch1就為空值,它不屬于任何一種數(shù)據(jù)類型。,它的定義要求與C語(yǔ)言相仿,例如以字母或下劃線開(kāi)始 ,變量不能是保留字(如int,var等),不能使用數(shù)字作為變量名的第一個(gè)字母等等。但它的定義方法與C語(yǔ)言有很大的差別。 C語(yǔ)言的變量定義格式為: int a=1; float f1=3.14 而JavaSc

53、ript的變量定義格式:Var 變量名; 或者 Var 變量名=初始值; JavaScript 并不是在定義變量時(shí)來(lái)說(shuō)明變量的數(shù)據(jù)類型,而是在給變量賦初始值時(shí)來(lái)確定該變量的數(shù)據(jù)類型;JavaScript對(duì)字母的大小寫(xiě)是敏感的。如Var my; Var My,JavaScript認(rèn)為這是兩個(gè)不同的變量。 說(shuō)明:在使用變量之前,最好對(duì)每個(gè)變量使用關(guān)鍵字VAR進(jìn)行變量聲明,防止發(fā)生變量的有效區(qū)域沖突的

54、問(wèn)題。,2.JavaScript 變量,JavaScript常量分為4類:整數(shù)、浮點(diǎn)數(shù)、布爾值和字符串。下面分別加以說(shuō)明。,3.JavaScript常量,(1)整數(shù)常量在JavaScript中,整數(shù)可以表示為:十進(jìn)制數(shù):即一般的十進(jìn)制整數(shù),它前面不可有前導(dǎo)0。例:75。八進(jìn)制數(shù):以0為前導(dǎo),表示八進(jìn)制數(shù)。例:075。16進(jìn)制數(shù):以0x為前導(dǎo),表示16進(jìn)制數(shù)。例:0x0F。(2)浮點(diǎn)數(shù)常量浮點(diǎn)數(shù)可以用一般的小數(shù)格式來(lái)表示,也可

55、以使用科學(xué)計(jì)數(shù)法來(lái)表示。例如:7.54343,3.0e9,(3)布爾型常量布爾型常量只有兩個(gè)值:True 和 False。(4)字符串常量字符串常量是用單引號(hào)或雙引號(hào)括起來(lái)的0個(gè)或多個(gè)字符組成。例如:“ Test String”,”12345”,在JavaScript的語(yǔ)法規(guī)則中,每一條語(yǔ)句的最后必須使用一個(gè)分號(hào),例如:document.write(“kkk”); //此語(yǔ)句的功能在瀏覽器中輸出“kkk”字符串

56、 在編寫(xiě)JavaScript程序時(shí),一定要有一個(gè)良好的習(xí)慣,最好是一行寫(xiě)一條語(yǔ)句,如果使用復(fù)合語(yǔ)句塊時(shí),注意把復(fù)合語(yǔ)句塊用大括號(hào)括起來(lái),并且根據(jù)每一句作用范圍的不同,應(yīng)有一定的縮進(jìn)。另外一個(gè)好的編程風(fēng)格是要適當(dāng)加一些注釋。例如:,4.JavaScript語(yǔ)句的結(jié)構(gòu),<SCRIPT LANGUAGE="JavaScript"> var SUM , P , i;SUM=0;//初始化累加和

57、P=1;,FOR (i=1; i<100; i++) { SUM+=i;//求累加和 P*=i; }</SCRIPT>,,JavaScript常量分為4類:整數(shù)、浮點(diǎn)數(shù)、布爾值和字符串。下面分別加以說(shuō)明。,3.JavaScript常量,(1)整數(shù)常量在JavaScript中,整數(shù)可以表示為:十進(jìn)制數(shù):即一般的十進(jìn)制整數(shù),它前面不可有前導(dǎo)0。例:75。八進(jìn)制數(shù):以0為前導(dǎo),表示八進(jìn)制數(shù)。例

58、:075。16進(jìn)制數(shù):以0x為前導(dǎo),表示16進(jìn)制數(shù)。例:0x0F。(2)浮點(diǎn)數(shù)常量浮點(diǎn)數(shù)可以用一般的小數(shù)格式來(lái)表示,也可以使用科學(xué)計(jì)數(shù)法來(lái)表示。例如:7.54343,3.0e9,(3)布爾型常量布爾型常量只有兩個(gè)值:True 和 False。(4)字符串常量字符串常量是用單引號(hào)或雙引號(hào)括起來(lái)的0個(gè)或多個(gè)字符組成。例如:“ Test String”,”12345”,JavaScript擁有一般編程語(yǔ)言(如C語(yǔ)言)的運(yùn)算符,

59、包括算術(shù)運(yùn)算符、比較運(yùn)算符、連接運(yùn)算符,5. JavaScript運(yùn)算符和表達(dá)式,(1)算術(shù)運(yùn)算符用于連接運(yùn)算表達(dá)式的各種算術(shù)運(yùn)算符如表8-1所示。,(2)位運(yùn)算符位操作運(yùn)算符對(duì)兩個(gè)表達(dá)式相同位置上的位進(jìn)行位對(duì)位運(yùn)算。JavaScript支持的位操作運(yùn)算符如表8-2所示。,(3)復(fù)合賦值運(yùn)算符復(fù)合賦值運(yùn)算符執(zhí)行的是一個(gè)表達(dá)式的運(yùn)算。在JavaScript中,合法的復(fù)合賦值運(yùn)算符如表8-3所示。,(4)比較運(yùn)算符比較運(yùn)算符用于比較

60、兩個(gè)對(duì)象之間的相互關(guān)系,返回值為T(mén)rue和False。各種比較運(yùn)算符如表8-4所示。,(5)邏輯運(yùn)算符邏輯運(yùn)算符返回True和False,其主要作用是連接條件表達(dá)式,表示各條件間的邏輯關(guān)系。各種邏輯運(yùn)算符如表8-5所示。,(6)運(yùn)算符的優(yōu)先級(jí),(7)表達(dá)式,JavaScript表達(dá)式可以用來(lái)計(jì)算數(shù)值,也可以用來(lái)連接字符串和進(jìn)行邏輯比較。JavaScript表達(dá)式可以分為三類: 算術(shù)表達(dá)式算術(shù)表達(dá)式用來(lái)計(jì)算一個(gè)數(shù)值,例:2*4

61、.5/3 字符串表達(dá)式字符串表達(dá)式可以連接兩個(gè)字符串,例如:”hello”+”world!”,該表達(dá)式的計(jì)算結(jié)果“helloworld!” 邏輯表達(dá)式 邏輯表達(dá)式 計(jì)算結(jié)果為一個(gè)布爾型常量(True或False)。 例如:12>24 其返回值為:False,JavaScript允許加一些注釋。并且有兩種注釋方法:?jiǎn)涡凶⑨尯投嘈凶⑨尅涡凶⑨專阂浴?/”開(kāi)始,以同一行的最后一個(gè)字符作為結(jié)束。

62、多行注釋:以“/*”開(kāi)始,以“*/”結(jié)束,符號(hào)“*/”可放在同一個(gè)行或一個(gè)不同的行中。下面舉例說(shuō)明怎樣使用這兩種注釋方法:/*這是多行注釋的第一行 這是多行注釋的第二行*/k=24*7;//這是一個(gè)單行注釋的例子,6.腳本語(yǔ)言的注釋,JavaScript的腳本語(yǔ)言同C++語(yǔ)言類似的,提供了相同的程序流程控制語(yǔ)句。這些語(yǔ)句分別是if、switch、for、do和while語(yǔ)句。(1)條件語(yǔ)句 If

63、語(yǔ)句 If語(yǔ)句是一個(gè)條件判斷語(yǔ)句,它根據(jù)一定的條件執(zhí)行相應(yīng)的語(yǔ)句塊,其定義格式如下所示:If (expr){ code_block1 }else{code_block2} 這里,expr是一個(gè)布爾型的值或表達(dá)式(特別強(qiáng)調(diào):expr一定要用小括號(hào)將其括起來(lái)),code_block1和code_block2是由多個(gè)語(yǔ)句組成的語(yǔ)句塊。當(dāng)expr值為“真”時(shí),執(zhí)行code_block1,當(dāng)expr

64、值為“假”時(shí),執(zhí)行code_block2。,7.JavaScript程序流程控制,另外有一點(diǎn)要說(shuō)明的是,if語(yǔ)句是可以嵌套的,即在if語(yǔ)句的模塊中,還可以包含其它的if語(yǔ)句。例如:If (expr){ code_block1if (expr1) { code_block3 }}else{code_block2},② switch語(yǔ)句switch語(yǔ)句測(cè)試一個(gè)表達(dá)式并有條件的執(zhí)行一段語(yǔ)句,其語(yǔ)法格

65、式如下:switch (表達(dá)式) {case 值1:code_block1 break; case 值2:code_block2 break; case 值3:code_block3 break;…default: code_blockn }switch語(yǔ)句首先計(jì)算表達(dá)式的值,然后根據(jù)表達(dá)式所計(jì)算出的值來(lái)選擇與之匹配的CASE后面

66、的值,并執(zhí)行該CASE后面的語(yǔ)句,直到遇到了一個(gè)break語(yǔ)句為止,如果所計(jì)算出的值與任何一個(gè)CASE后面的值都不相符的話,則執(zhí)行default后的語(yǔ)句。,下面舉例說(shuō)明switch語(yǔ)句的用法:, 例9-3顯示<!--document.write("switch語(yǔ)名測(cè)試------");switch (14%3) {case 0: sth="您好";

67、 break;case 1: sth="大家好";break;default: sth="世界好";break;}document.write(sth);,//--> ,(2)循環(huán)語(yǔ)句 有許多時(shí)候,需要把一個(gè)語(yǔ)句塊重復(fù)執(zhí)行多次,每次執(zhí)行僅改變部分參數(shù)的值,這時(shí)可以使用循環(huán)語(yǔ)句,直到某一個(gè)條件不成立為止。 f

68、or語(yǔ)句 for語(yǔ)句用來(lái)產(chǎn)生一段程序循環(huán),其語(yǔ)法格式如下:for ( init; test; incre){code_block} 這里init和incre是兩個(gè)語(yǔ)句,test是一個(gè)表達(dá)式。init語(yǔ)句只執(zhí)行一次,用來(lái)初始化循環(huán)變量。test表達(dá)式在每次循環(huán)后都要被計(jì)算一次,如果其運(yùn)算值為“假”,則循環(huán)中止并立即繼續(xù)執(zhí)行for語(yǔ)句之后的語(yǔ)句,否則執(zhí)行code_block

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 眾賞文庫(kù)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論