web程序設(shè)計(jì)大作業(yè)

web程序設(shè)計(jì)課程考試大作業(yè)姓名：李德坤 學(xué)號：24 專業(yè)：計(jì)算機(jī)1301班題目3：結(jié)合所學(xué)的課程內(nèi)容，論述web程序設(shè)計(jì)的相關(guān)技術(shù)、應(yīng)用及學(xué)習(xí)體會1.HTML的主要知識點(diǎn)框架是一種在一個瀏覽器窗口中顯示多個HTML文件的網(wǎng)頁制作技術(shù)?？蚣芑窘Y(jié)構(gòu)框架分為框架集和框架兩部分。定義框架的語法格式如下。.標(biāo)記HTML中用于描述功能的符號稱為“標(biāo)記”。標(biāo)記在使用時必須用尖括號“”括起來，比如、等，都是標(biāo)記。多數(shù)標(biāo)記必須成對出現(xiàn)，以開頭無斜杠的標(biāo)記開始，以有斜杠的標(biāo)記結(jié)束。標(biāo)記還可以嵌套使用。屬性與標(biāo)記相關(guān)的特性稱為屬性，每個屬性總是對應(yīng)一個屬性值，將其稱為“屬性/值”對?！皩傩?值”對出現(xiàn)在開始標(biāo)記的“”之前。在HTML文檔中，標(biāo)題（Heading）很重要。標(biāo)題是通過-等6對標(biāo)記進(jìn)行定義的。定義最大的標(biāo)題， 定義最小的標(biāo)題。font標(biāo)記用于編輯網(wǎng)頁文字的樣式，主要是設(shè)置文字的字體、字號、顏色等屬性。font標(biāo)記語法格式如下：HTML的一些元素可以定義字體信息，如粗體、斜體等。不論是在普通文檔，還是在網(wǎng)頁文字中，合理的使用段落會使文字的顯示更加美觀，要表達(dá)的內(nèi)容也更加清晰。在HTML文件中，有專門的段落標(biāo)記。粗體標(biāo)記，被標(biāo)記對括起的字詞或句子在網(wǎng)頁中表現(xiàn)為粗體。斜體標(biāo)記，被標(biāo)記對括起的字詞或句子在網(wǎng)頁中表現(xiàn)為斜體。下劃線標(biāo)記，被標(biāo)記對括起的字詞或句子在網(wǎng)頁中表現(xiàn)為添加下劃線效果。刪除線標(biāo)記，被標(biāo)記對括起的字詞或句子在網(wǎng)頁中表現(xiàn)為添加刪除線效果，用于呈現(xiàn)那些不再準(zhǔn)確或不再相關(guān)的內(nèi)容。在HTML5中，更加提倡使用CSS樣式表控制網(wǎng)頁的格式。使用CSS樣式表可以實(shí)現(xiàn)更加豐富的網(wǎng)頁效果，更加精確的控制網(wǎng)頁格式，定義和使用CSS也有很多種方法。HTML還提供了列表，可以對網(wǎng)頁文字進(jìn)行更好的布局和定義。所謂列表，就是在網(wǎng)頁中將項(xiàng)目有序或無序的羅列顯示。HTML中有3種列表形式：有序列表、無序列表和自定義列表。有序列表有序列表是一個項(xiàng)目的序列，各項(xiàng)目前標(biāo)有數(shù)字表示順序。有序列表的語法格式如下。 列表信息列表信息列表信息無序列表無序列表也是一個項(xiàng)目的序列，不用數(shù)字而采用一個符號標(biāo)志每個項(xiàng)目。無序列表的語法格式如下。列表信息列表信息列表信息自定義列表的語法格式如下。名稱說明名稱說明名稱說明圖像標(biāo)記在制作網(wǎng)頁過程中，可以使用HTML代碼中的標(biāo)記向網(wǎng)頁中嵌入一幅圖像，也可以使用CSS設(shè)置成某元素的背景圖像。利用標(biāo)記插入圖像是網(wǎng)頁中最常用的圖像插入方式。背景音樂標(biāo)記和滾動字幕標(biāo)記* 標(biāo)記若打開瀏覽器的同時，希望伴隨播放背景音樂，而不顯示音樂播放器，可以在HTML文件中使用標(biāo)記實(shí)現(xiàn)，其語法格式如下。src屬性用于指定背景音樂文件的地址或音樂文件名，音樂文件必須加上后綴名。loop屬性用于定義音樂播放的次數(shù)，可設(shè)置為任意正整數(shù)，若設(shè)為“-1”，音樂將永遠(yuǎn)循環(huán)。標(biāo)記通過標(biāo)記可以設(shè)置滾動文字，增加網(wǎng)頁文字的動態(tài)效果，豐富網(wǎng)頁的內(nèi)容。語法格式如下。 滾動文字behavior用來設(shè)置滾動方式scrollamount用來設(shè)置滾動速度scrolldelay屬性來設(shè)置滾動文字的延遲時間direction用來設(shè)置滾動方向多媒體文件標(biāo)記要在網(wǎng)頁中插入音頻和視頻文件以及Flash文件就要使用標(biāo)記，其語法格式如下：HTML5中新增的視頻標(biāo)記語法格式如下。替代文字HTML5中新增音頻標(biāo)記其語法格式如下。替代內(nèi)容超級鏈接標(biāo)記定義超鏈接語法格式如下。鏈接標(biāo)題href屬性定義了鏈接標(biāo)題所指向的目標(biāo)文件的URL地址。target屬性指定用于打開鏈接的目標(biāo)窗口，默認(rèn)方式是原窗口。表單定義標(biāo)記定義表單的基本語法格式如下。輸入標(biāo)記標(biāo)記是表單中輸入信息常用的標(biāo)記，其語法格式如下。數(shù)值輸入域number語法格式如下。列表框標(biāo)記在HTML文件中，使用列表框標(biāo)記，同時嵌套列表項(xiàng)標(biāo)記，可以實(shí)現(xiàn)列表框的效果，其語法格式如下。 實(shí)例文本域輸入標(biāo)記有時網(wǎng)頁中需要一個多行的文本域，用來輸入更多的文字信息，行間可以換行，并將這些信息作為表單元素的值提交到服務(wù)器。定義文本域的語法格式如下。框架是一種在一個瀏覽器窗口中顯示多個HTML文件的網(wǎng)頁制作技術(shù)?？蚣芑窘Y(jié)構(gòu)框架分為框架集和框架兩部分。定義框架的語法格式如下。.2.CSS的主要知識點(diǎn)CSS(Cascading Style Sheet)稱為層疊樣式表，也可以稱為CSS樣式表或樣式表，其文件擴(kuò)展名為.CSS。CSS是用于控制網(wǎng)頁樣式，并允許將網(wǎng)頁內(nèi)容與樣式信息分離的一種標(biāo)記語言。CSS的引入就是為了使HTML語言更好地適應(yīng)頁面的美工設(shè)計(jì)。它以HTML語言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設(shè)計(jì)者可以針對各種可視化瀏覽器來設(shè)置不同的樣式風(fēng)格。選擇器英文寫作selector，在CSS中，根據(jù)選擇器的功能或作用范圍，將選擇器主要分為標(biāo)記選擇器、類別選擇器和ID選擇器3種。CSS可以認(rèn)為是由多個選擇器組成的集合，每個選擇器由3個基本部分組成的“選擇器名稱”、“屬性”和“值”，格式如下。selector property:value;一個HTML頁面由很多不同的標(biāo)記組成，例如、等。標(biāo)記選擇器的格式定義如下。tagName property:value;類選擇器用來為一系列標(biāo)記定義相同的呈現(xiàn)方式，語法格式如下。.classValue property:value classValue是選擇器的名稱，具體名稱由CSS制定者命名。ID選擇器和類選擇器類似，都是對特定屬性的屬性值進(jìn)行設(shè)置。ID選擇器和類選擇器的區(qū)別是，一個HTML文件中只能使用一次某一ID的屬性值。定義ID選擇器的基本語法格式如下。#idValue property:value ;在上面的語法格式中，idValue是選擇器名稱，可以由CSS定義者自己命名。為了設(shè)置的CSS樣式能夠在網(wǎng)頁中產(chǎn)生作用，必須將CSS和HTML文件聯(lián)接在一起，才可以正常工作。在HTML文件中使用CSS的方式有4種：行內(nèi)樣式、嵌入式、鏈接式和導(dǎo)入式。所謂并集選擇器就是對多個選擇器進(jìn)行集體聲明，多個選擇器之間用“，”隔開，其中每個選擇器可以是任何類型的選擇器。并集選擇器的語法格式。selector1,selector2, property:value;在CSS選擇器中，還可以通過嵌套的方式，對特殊位置的HTML標(biāo)記進(jìn)行控制。后代選擇器的寫法是把外層的標(biāo)記寫在前面，內(nèi)層的標(biāo)記寫在后面，之間用空格隔開，語法格式如下。selector1 selector2 property:value;子選擇器用于選中標(biāo)記的直接后代（即兒子），它的定義符號是大于號（），語法格式如下。selector1selector2相鄰（adjacent-sibling）選擇器是另一個有趣的選擇器，它的定義符號是加號（+），相鄰選擇器將選中緊跟在它后面的一個兄弟元素（這兩個元素具有共同的父元素）。在CSS中偽對象選擇器主要有:first-letter、:first-line、:before和:after。之所以稱這些選擇器是偽對象，是因?yàn)樗鼈冊谛Ч鲜刮臋n增加了一個臨時的元素，這是應(yīng)用“虛構(gòu)標(biāo)記”的一個典型實(shí)例。字體屬性用于控制網(wǎng)頁中文本字符的顯示方式。包括font，font-family，font-size，font-style，font-variant和font-weight等。font-family屬性確定要使用的字體列表。font-size屬性font-size屬性用于控制文字的大小，它的取值分為4種類型：絕對大小、相對大小、長度值以及百分?jǐn)?shù)。該屬性的默認(rèn)值是medium。font-style屬性font-style屬性確定指定元素顯示的字形。值包括normal、italic和oblique三種。默認(rèn)值為normal，表示普通字形；italic和oblique表示斜體字形。font-variant屬性font-variant屬性決定了瀏覽器顯示指定元素的字體變體。有三個值：normal、small-caps和inherit。font-weight屬性font-weight屬性定義了字體的粗細(xì)值，它的取值可以是以下值中的一個：normal、 bold、bolder和lighter。font復(fù)合屬性使用font屬性可一次性設(shè)置前面介紹的各種字體屬性（屬性之間以空格分隔）。在使用font屬性設(shè)置字體格式時，字體屬性名可以省略。font屬性的排列順序是：font-size倒手第二和font-family在最后，兩者是必須出現(xiàn)的，而font-weight、font-variant、font-style三者在前面，循序無要求。文本屬性用于控制段落格式和文本的修飾方式，例如設(shè)置單詞間距、字符間距、首行縮進(jìn)、段落對齊方式等。CSS中的常用文本屬性包括word-spacing、letter-spacing、text-align、text-indent、line-height、text-decoration和text-transform等。在CSS中，顏色屬性可以用設(shè)來置元素內(nèi)文本的顏色，而各種背景屬性則可以控制元素的背景顏色以或背景圖像。color屬性用來描述元素的前景顏色，CSS背景屬性包括background、background-attachment、background-color、background-image、background-position和background-repeat等。在HTML文檔中可以直接通過標(biāo)記來添加圖片。使用border、width、height等屬性可以在HTML中調(diào)整圖片。使用CSS，可以為圖片設(shè)置更加豐富的風(fēng)格和樣式，包括添加邊框、縮放圖片、實(shí)現(xiàn)圖文混排和設(shè)置對齊方式等。如果需要單獨(dú)地定義邊框一邊的樣式，可以使用border-top-style設(shè)定上邊框樣式、border-bottom-style設(shè)定下邊框樣式、border-right-style設(shè)定右邊框樣式和border-left-style設(shè)定左邊框樣式。默認(rèn)情況，網(wǎng)頁上的圖片按原始大小顯示。頁面排版時，通常情況下還需要對圖片的大小進(jìn)行重新設(shè)定。如果對圖片設(shè)置不恰當(dāng)，會造成圖片的變形和失真。設(shè)定圖片大小，可以采用以下三種方式。使用img的標(biāo)記屬性width和height使用CSS3中max-width屬性和max-height屬性使用CSS中width和height屬性網(wǎng)頁效果的展示很多情況下都是通過圖文混排來實(shí)現(xiàn)的。使用CSS，可以設(shè)置多種不同的圖文混排方式。文字環(huán)繞CSS使用float屬性來實(shí)現(xiàn)該效果。float語法格式如下。float:none/left/right;其中none表示默認(rèn)值對象不浮動，left表示文本流向?qū)ο蟮挠疫叄瑀ight表示文本流向?qū)ο蟮淖筮叀?.JavaScript的主要知識點(diǎn)JavaScript是一種腳本語言，是一種介于HTML與高級編程語言(Java、VB和C+等)之間的特殊語言。腳本是一種能完成某些功能的小程序段，該程序段由一組可以在Web服務(wù)器或客戶端瀏覽器運(yùn)行的命令組成。腳本語言可以嵌入HTML頁面，并被瀏覽器解釋執(zhí)行。使用腳本可以把網(wǎng)頁對象和瀏覽器對象集成并組裝起來，使網(wǎng)頁具有動態(tài)效果和交互功能。JavaScript 是一種腳本語言，是一種基于對象的編程語言，JavaScript本身提供了非常豐富的內(nèi)部對象供設(shè)計(jì)人員使用。 JavaScript 是一種解釋性編程語言，其程序由瀏覽器解釋執(zhí)行。JavaScript 的代碼是一種文本字符格式，可以直接嵌入HTML 文檔中，并且可動態(tài)裝載。JavaScript程序的編寫和運(yùn)行（1）啟動Dreamweaver CS5新建HTML文件。（2）在與標(biāo)記中輸入代碼。（3）將文件保存為.html或.htm格式文件即可。程序錯誤分為語法錯誤和邏輯錯誤兩種。語法錯誤是指在程序編寫過程中使用不符合語言規(guī)則的語句，從而產(chǎn)生的錯誤。例如，錯誤地使用了JavaScript的關(guān)鍵字，錯誤地定義了變量名稱等，這時瀏覽器運(yùn)行JavaScript程序就會報(bào)錯。很多包含JavaScript的網(wǎng)頁都將JavaScript程序代碼直接嵌入到HTML文件中，這是最常見的使用JavaScript方法。在HTML中書寫JavaScript時，需要使用一對標(biāo)記來告訴瀏覽器這是腳本程序。在HTML中書寫JavaScript的語法格式如下。屬性language是script標(biāo)記的基本屬性。一般被指定為JavaScript或VBScript。runat=server表示該段腳本在服務(wù)器端執(zhí)行，如果省略，則表示該段腳本將發(fā)送到客戶端運(yùn)行。本書主要講授JavaScript在客戶端的執(zhí)行過程，因此該屬性設(shè)置省略。是HTML注釋語句。可以保證不識別標(biāo)記的瀏覽器忽略 JavaScript 代碼。雖然大多數(shù)瀏覽器都支持JavaScript，但還有少數(shù)瀏覽器不支持JavaScript，也有一些瀏覽器由于安全問題關(guān)閉了對JavaScript的支持。JavaScript語言區(qū)分字符大小寫。在和 標(biāo)記之間嵌入JavaScript。在和標(biāo)記之間嵌入JavaScript。引用外部的JavaScript文件。1語句結(jié)束標(biāo)志和Java、C語言類似，JavaScript使用分號;表示一條語句的結(jié)束；而與Java、C語言不同的是，用分號結(jié)束一條語句并不是強(qiáng)制性的要求。2語句塊一組大括號內(nèi)的JavaScript語句稱為語句塊，一個語句塊內(nèi)的語句可以被當(dāng)作一條語句處理。為了增加程序的可讀性，以便于日后修改和維護(hù)代碼，可以在 JavaScript 程序中為代碼添加注釋。JavaScript 中注釋可分為單行注釋和多行注釋。單行注釋用兩個斜杠 / 來表示多行注釋則用“/”開始，以“/ ”結(jié)束。JavaScript 中的數(shù)據(jù)類型可以分類3類，分別是3種基本數(shù)據(jù)類型、2種復(fù)合數(shù)據(jù)類型和兩種特殊數(shù)據(jù)類型。變量是在程序運(yùn)行過程中可以改變的量，是程序中被命名的存儲單元，它的主要作用是為數(shù)據(jù)操作提供存放信息的容器。它的定義包括變量名、變量數(shù)據(jù)類型和作用域幾個部分。變量可以不聲明直接賦值，也可以使用var關(guān)鍵字多次聲明同一個變量。1順序結(jié)構(gòu) 一個JavaScript程序段可以有多條語句，通常，這些語句按照它們的書寫順序從頭到尾依次執(zhí)行。這就是程序執(zhí)行的最簡單流程，即順序結(jié)構(gòu)。2分支結(jié)構(gòu)分支結(jié)構(gòu)主要包括兩類語句:一類是條件分支if語句，另一類是多重分支switch語句。下面對這兩種類型的條件控制語句進(jìn)行詳細(xì)的講解。3循環(huán)結(jié)構(gòu)循環(huán)結(jié)構(gòu)是在一定條件下，反復(fù)執(zhí)行某段程序的流程結(jié)構(gòu)，反復(fù)執(zhí)行的程序塊被稱為循環(huán)體。循環(huán)結(jié)構(gòu)是程序中非常重要的和基本的一種結(jié)構(gòu)，它是由循環(huán)語句來實(shí)現(xiàn)的。Java的循環(huán)語句共有3種：while語句、do-while語句和for語句。函數(shù)是一段能夠?qū)崿F(xiàn)特定運(yùn)算的代碼塊，它可以被事件處理或其他語句調(diào)用。JavaScript中的函數(shù)包括內(nèi)部函數(shù)（內(nèi)置函數(shù)）和外部函數(shù)（自定義函數(shù)）。1.函數(shù)的引入在設(shè)計(jì)一個復(fù)雜的程序時，通常根據(jù)所要完成的功能，將程序中相對獨(dú)立的部分，每部分編寫一個函數(shù)。另外，JavaScript函數(shù)還主要用來封裝那些在程序中可能要多次用到的模塊，以提高程序的可重用性。在事件處理中，可將函數(shù)作為事件驅(qū)動的結(jié)果而調(diào)用的程序。從而實(shí)現(xiàn)將函數(shù)與事件驅(qū)動相關(guān)聯(lián)。2.函數(shù)的語法格式函數(shù)是由關(guān)鍵字function、函數(shù)名、參數(shù)及置于大括號中需要執(zhí)行的一個語句塊組成。函數(shù)定義的基本語法格式如下：function functionName(parameters) some statements;函數(shù)由關(guān)鍵字function定義，functionName是函數(shù)名。 parameters是參數(shù)表，可以是一個或多個參數(shù)，是傳遞給函數(shù)使用或操作的值，其值可以是常量 ，變量或其它表達(dá)式。函數(shù)通過函數(shù)名（實(shí)參）來調(diào)用，當(dāng)函數(shù)有返回值時則必須使用return語句將值返回。函數(shù)名對大小寫是敏感的。3.函數(shù)的調(diào)用直接調(diào)用函數(shù)函數(shù)的定義通常放在HTML文件的標(biāo)記中，而函數(shù)的調(diào)用語句通常被放在標(biāo)記中，如果在函數(shù)定義之前調(diào)用函數(shù)，將會報(bào)錯。函數(shù)的調(diào)用格式為如下。functionName(parameters);事件響應(yīng)中調(diào)用函數(shù)JavaScript是基于對象的語言，而基于對象的基本特征，就是采用事件驅(qū)動。在JavaScript中常用的事件如下。單擊事件onclick改變事件 onchange選中事件onselect 獲得焦點(diǎn)事件onfocus失去焦點(diǎn)事件onblur載入文件事件onload 卸載文件事件onunload1.對象的概念對象用于描述客觀世界存在的特定實(shí)體。在計(jì)算機(jī)世界中，不僅存在來自于客觀世界的對象，也包含為解決問題而引入的抽象對象。 2.對象的屬性和方法屬性是用來描述對象靜態(tài)特性的一組數(shù)據(jù)，用變量表示。方法是用來描述對象的動態(tài)特征或操作對象的若干動作，用函數(shù)描述。1對象屬性的引用使用點(diǎn)（.）運(yùn)算符objectNperties = value;通過對象的下標(biāo)實(shí)現(xiàn)引用objectNameindex = value；通過字符串的形式引用objectNameproperties = value;對象方法的引用與對象屬性的引用方法相同，使用點(diǎn)運(yùn)算符。objectName.methodName()；例：student.hello();對象的操作1for in語句for（propretiesName in objectName）statements;示例 demo0701.html2. with語句with（objectName） statements;3. this關(guān)鍵詞this是指對當(dāng)前對象的引用。4. new運(yùn)算符objectName = new Object (parameter1，parameter 2，) 例：today=new Date() ;stu=new student(“”,”王剛”,21);JavaScript的對象類型內(nèi)置對象是指JavaScript語言提供的對象，包括字符串對象（String）、數(shù)組對象(Array)，數(shù)學(xué)對象(Math)、日期對象（Date）等，提供對象編程基本功能。瀏覽器對象是瀏覽器根據(jù)系統(tǒng)配置和所裝載的頁面，為JavaScript程序提供的對象，提供了訪問、控制、修改客戶端(瀏覽器)的方法。主要包括Window對象、Navigator對象、Screen對象、Location對象等。Math對象在JavaScript程序中，關(guān)鍵字Math是對一個已創(chuàng)建好的Math對象的引用，因此使用Math 對象時不必先使用new 運(yùn)算符創(chuàng)建實(shí)例。也就是說在調(diào)用Math對象的屬性和方法時，直接寫成“Mperty”和“Math.method()”即可。1.Math對象的屬性Math對象的屬性是數(shù)學(xué)運(yùn)算中常用的常量JavaScript內(nèi)置對象為程序設(shè)計(jì)提供了常用功能，瀏覽器對象則提供了訪問、控制、修改客戶端瀏覽器的方法。瀏覽器對象模型（Browser Object Model，BOM）是JavaScript可以操作瀏覽器的各個功能部件的接口，它提供訪問各個功能部件（如窗口本身、屏幕功能部件、歷史記錄等）的途徑以及操作方法。BOM由一系列對象構(gòu)成，主要包括Window、Navigator、Screen、Location、History和Document等對象。JavaScript通過訪問BOM（Browser Object Model）對象來完成訪問、控制、修改客戶端瀏覽器的操作，如果要進(jìn)一步處理瀏覽器窗口顯示的頁面文檔，則必須使用HTML DOM技術(shù)。DOM有如下特點(diǎn)： DOM是跨平臺與跨語言的。 DOM是用于XHTML、XML文檔的應(yīng)用程序接口(API)。 DOM提供一種結(jié)構(gòu)化的文檔描述方式，從而使HTML內(nèi)容以結(jié)構(gòu)化的方式顯示。 DOM標(biāo)準(zhǔn)是由W3C制定與維護(hù)的 。 DOM的頂層是document對象。4.當(dāng)前web技術(shù)的發(fā)展應(yīng)用及學(xué)習(xí)體會（1）當(dāng)前web技術(shù)的發(fā)展應(yīng)用 當(dāng)前web技術(shù)正在逐漸以萬維網(wǎng)（World Wide Web）通用描述語言的第五代版本html5及其周邊各種應(yīng)用開發(fā)技術(shù)為主。相比傳統(tǒng)We