第3章靜態(tài)網(wǎng)頁開發(fā)技術(shù)

1、 使用HTML標(biāo)簽語言完成基本的頁面顯示、實(shí)現(xiàn)表單的編寫。 編寫簡單的JavaScript腳本完成客戶端行為的控制。 通過CSS層疊樣式表實(shí)現(xiàn)對(duì)頁面的美化。 HTML（超文本標(biāo)記語言）HTML是Hypertext Marked Language(超文本標(biāo)記語言)的縮寫，是一種用來描述超文本文檔的標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如UNIX，Windows等）。所謂超文本文檔，是指在其中可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容，并且它可以利用超鏈接非常方便地從一個(gè)文件跳轉(zhuǎn)到網(wǎng)絡(luò)上其他主機(jī)的另一個(gè)文件。HTML文檔在普通文件中文本上加上標(biāo)簽，使其達(dá)到預(yù)期

2、的顯示效果。當(dāng)一個(gè)瀏覽器打開一個(gè)HTML文檔時(shí)，會(huì)根據(jù)標(biāo)簽的含義顯示HTML文檔中的文本。標(biāo)簽是由“”來表示。例如：This is my first html file. 元素 其中表示標(biāo)簽的結(jié)束，標(biāo)簽的作用范圍到為止。 元素 其中屬性往往表示標(biāo)簽的一些附加信息，一個(gè)標(biāo)簽可以包含多個(gè)屬性，各屬性之間無先后次序用空格分開。 指標(biāo)簽單獨(dú)出現(xiàn)，只有開始標(biāo)簽，沒有結(jié)束標(biāo)簽。也稱為空標(biāo)簽。超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。頭 部 信 息，如標(biāo)題正 文 部 分 其中在最外層， 表示這對(duì)標(biāo)記間的內(nèi)容是HTML文檔。一些HTML文檔

3、省略了標(biāo)記，因?yàn)?html 或.htm 文件被Web瀏覽器默認(rèn)為是HTML文檔。 之間包括文檔的頭部信息，如文檔的標(biāo)題等，若不需頭部信息則可省略此標(biāo)記。 標(biāo)記一般不省略， 表示正文內(nèi)容的開始。 【功能】 通知瀏覽器該文件是html文件 【說明】標(biāo)簽任意刪去一個(gè)或全部，不會(huì)影響顯示效果。和標(biāo)簽的前后任意加一些字符是錯(cuò)誤的。 【例3-1】 html.html （1）text屬性（設(shè)定文字顏色） 【例3-2】bodytext.html （2）bgcolor屬性（設(shè)定背景色） 【例3-3】bodybgcolor.htm 【說明】在HTML中顏色可以用“#RRGGBB”形式的16進(jìn)制數(shù)碼，或者是下列預(yù)定

4、義色彩：Black黑色，Olive橄欖色 ，Teal黑綠色 ，Red紅色，Blue藍(lán)色，Maroon絳紫色 ，Navy藏藍(lán)色 ，Gray灰色，Lime草綠色 ，F(xiàn)uchsia紫紅色 ，White白色，Green綠色，Purple紫色，Silver銀灰色，Yellow黃色，Aqua海藍(lán)色。 一般文章都有標(biāo)題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)簽,其中n為標(biāo)題的等HTML總共提供六個(gè)等級(jí)的標(biāo)題，n越小，標(biāo)題字號(hào)就越大，以下列出所有等級(jí)的標(biāo)題： 第一級(jí)標(biāo)題 第二級(jí)標(biāo)題 第三級(jí)標(biāo)題 第四級(jí)標(biāo)題 第五級(jí)標(biāo)題 第六級(jí)標(biāo)題 【例3-4】hn.html （1）標(biāo)簽 為了排列的整齊、清晰，文字

5、段落之間，我們常用來做標(biāo)記。文件段落的開始由來標(biāo)記，段落的結(jié)束由來標(biāo)記，是可以省略的，因?yàn)橄乱粋€(gè)的開始就意味著上一個(gè)的結(jié)束。 標(biāo)簽還有一個(gè)屬性align，它用來設(shè)置段落中的文本的對(duì)齊方式，一般對(duì)齊方式有center（居中）、left（居左）、right（居右）三種。 【例3-5】p.html （2）標(biāo)簽標(biāo)簽的作用 超文本中的鏈接是其最重要的特性之一，利用它使用者可以從一個(gè)頁面直接跳轉(zhuǎn)到其他的頁面、圖象或者服務(wù)器。一個(gè)鏈接的基本格式如下：【格式】文本 【說明】（1）標(biāo)簽表示一個(gè)鏈接的開始，表示鏈接的結(jié)束；（2）屬性“href”定義了這個(gè)鏈接所指的地方；（3）通過點(diǎn)擊“文本”可以到達(dá)指定的文件。【

6、示例】建議或意見瀏覽器讀到這個(gè)標(biāo)簽時(shí)，會(huì)用藍(lán)色顯示文本“建議或意見”,單擊這行文本，頁面會(huì)跳轉(zhuǎn)到URL為http:/ 表格是HTML中最重要的標(biāo)志之一。表格就是由行和列構(gòu)成的柵格，這些行和列構(gòu)成一個(gè)個(gè)單元格，每個(gè)單元格可以放文本或是圖形等。 表格最基本的作用就是讓復(fù)雜的數(shù)據(jù)變得更條理，讓人容易看懂。在網(wǎng)頁中，表格還可以用來進(jìn)行圖形的拼接和頁面元素的定位等巧妙的應(yīng)用。 一個(gè)表由開始，結(jié)束，表的內(nèi)容由,和定義。說明表的一個(gè)行，表有多少行就有多少個(gè)；說明表的列數(shù)和相應(yīng)欄目的名稱，有多少個(gè)欄就有多少個(gè)；意義和差不多，它主要起標(biāo)題的作用。. - 定義表格 - 定義表行 - 定義表頭 - 定義表元(表格的

7、具體數(shù)據(jù))【例3-8】simpletable.html 一般情況下，表格的總長度和總寬度是根據(jù)各行和各列的總和自動(dòng)調(diào)整的，如果我們要直接固定表格的大小，可以使用下列方式： width和height屬性分別指定表格一個(gè)固定的寬度和長度，w和h可以用像素來表示，也可以用百分比（與整個(gè)屏幕相比的大小比例）來表示。 這是一個(gè)長為300像素，高為100像素的表格。 這是一個(gè)長為屏幕的50%，寬為屏幕的10%的表格。 使用表單可以實(shí)現(xiàn)頁面的數(shù)據(jù)傳送，當(dāng)用戶在頁面內(nèi)填寫好了信息之后可以單擊【提交】按鈕來實(shí)現(xiàn)數(shù)據(jù)的發(fā)送，當(dāng)我們想和用戶交互時(shí)可以使用表單來實(shí)現(xiàn)。表單通常都和程序連接實(shí)現(xiàn)數(shù)據(jù)的處理，比如JSP程序

8、。 1、表單控件 單行文本編輯框 【功能】 內(nèi)容本身比較短只有一行，需要用戶的輸入。【示例】 密碼框 【功能】 輸入的內(nèi)容看不到，但是可以被發(fā)送到服務(wù)器?！臼纠?【功能】 系統(tǒng)給出幾種選擇，用戶從中選擇一項(xiàng)【示例】 工人 農(nóng)民 軍人 學(xué)生 【功能】 在給出的選項(xiàng)中可以選擇多個(gè)?！臼纠空?qǐng)選擇你的愛好：音樂   旅游   讀書 多行文本編輯框【功能】 能夠進(jìn)行多行的文本輸入?！臼纠空?qǐng)輸入你的留言： 下拉列表框select和option【功能】用戶在給出的較多選項(xiàng)中選擇一個(gè)?！臼纠?63 263 sina 【示例】【說明】（1）method = ”post

9、”說明我們使用的提交方式是post。Action屬性的值為”form.jsp”說明了處理我們的請(qǐng)求的文件是form.jsp。（2）提交的信息：是位于開始標(biāo)志和結(jié)束標(biāo)志之內(nèi)的表單元素的有用信息。所有的表單元素都應(yīng)該在和之內(nèi)。（3）一個(gè)頁面可以有多個(gè)表單Form；兩個(gè)表單不可以嵌套或者重疊。 【功能】 完成表單的提交【示例】其中：type=”submit”是提交按鈕的標(biāo)識(shí)Value是提交按鈕的值，同時(shí)也是按鈕上面顯示的內(nèi)容；Name是按鈕的名字，可以根據(jù)這個(gè)名字獲取按鈕的值?！菊f明】（1）每個(gè)表單中都應(yīng)該有至少一個(gè)提交按鈕submit用來完成提交動(dòng)作；一個(gè)表單中可以使用多個(gè)提交按鈕來完成不同的提交

10、工作。（2）多個(gè)按鈕可以使用相同的名字，多個(gè)按鈕使用同樣的名字，但是值不一樣，（3）根據(jù)值區(qū)分不同的按鈕；也可是使用不同的名字，根據(jù)按鈕的名字區(qū)分不同的按鈕。 提交按鈕submit 單元項(xiàng)目1-簡單html表單的開發(fā) P24 單元項(xiàng)目2-圖書管理系統(tǒng)的靜態(tài)頁面 p25 JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的腳本語言， JavaScript與HTML超文本標(biāo)識(shí)語言一起實(shí)現(xiàn)網(wǎng)頁與網(wǎng)絡(luò)客戶的交互，從而可以開發(fā)客戶端的應(yīng)用程序。它是通過嵌入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。JavaScript一個(gè)重要功能就是用來實(shí)現(xiàn)客戶端輸入的驗(yàn)證。 （1）簡單：JavaScript是一種腳本編寫語言，它的基本語

11、法與C、C+十分類似。（2）動(dòng)態(tài)：JavaScript是動(dòng)態(tài)的，它可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)器。（3）跨平臺(tái)性：JavaScript只依賴瀏覽器，與系統(tǒng)環(huán)境無關(guān)，只要能運(yùn)行支持JavaScript瀏覽器就可以正確執(zhí)行。（4）基于事件：JavaScript對(duì)用戶的反映響應(yīng)，是采用事件驅(qū)動(dòng)的方式進(jìn)行的。JavaScript與Java之間的主要區(qū)別：（1）基于對(duì)象和面向?qū)ο蟆avaScript語言是基于對(duì)象和事件驅(qū)動(dòng)的腳本語言；Java語言是面向?qū)ο蟮恼Z言，可以設(shè)計(jì)獨(dú)立的程序（2）解釋執(zhí)行和編譯執(zhí)行 JavaScript是一種解釋性的語言，是將文本格式的代碼發(fā)送到客戶端由

12、瀏覽器負(fù)責(zé)解釋執(zhí)行。Java代碼在執(zhí)行之前必須編譯成字節(jié)碼文件，由虛擬機(jī)負(fù)責(zé)執(zhí)行。（3）弱類型和強(qiáng)類型。JavaScript是弱類型變量，即變量在使用前不需要聲明，由解釋器負(fù)責(zé)確定變量的數(shù)據(jù)類型，而Java是一種強(qiáng)類型語言，所有的變量在使用之前必須聲明，并且只能存放聲明類型的數(shù)據(jù)。 Javascript是基于對(duì)象(object-based)的語言，而基于對(duì)象的基本特征，就是采用事件驅(qū)動(dòng)(event-driven)。事件是指某個(gè)對(duì)象發(fā)出事件是指某個(gè)對(duì)象發(fā)出的消息，標(biāo)志著某個(gè)特定行為的發(fā)生或某個(gè)特定的條件成立的消息，標(biāo)志著某個(gè)特定行為的發(fā)生或某個(gè)特定的條件成立。JavaScript事件驅(qū)動(dòng)中的事件

13、是通過鼠標(biāo)或熱鍵的動(dòng)作引發(fā)的。它主要有以下幾個(gè)事件：（1）單擊事件onClick當(dāng)用戶單擊鼠標(biāo)按鈕時(shí)當(dāng)用戶單擊鼠標(biāo)按鈕時(shí)，產(chǎn)生onClick事件。同時(shí)onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。（2）onChange改變事件當(dāng)利用當(dāng)利用text或或textarea元素輸入字符值改變時(shí)元素輸入字符值改變時(shí)發(fā)該事件，同時(shí)當(dāng)在select表格項(xiàng)中一個(gè)選項(xiàng)狀態(tài)改變后也會(huì)引發(fā)該事件。（3）選中事件onSelect當(dāng)當(dāng)Text或或Textarea對(duì)象中的文字被加亮后對(duì)象中的文字被加亮后，引發(fā)該事件。（4）獲得焦點(diǎn)事件onFocus當(dāng)用戶單擊當(dāng)用戶單擊text或或textarea以及以及select

14、對(duì)象時(shí)對(duì)象時(shí)，產(chǎn)生該事件。此時(shí)該對(duì)象成為前臺(tái)對(duì)象。 JavaScript中對(duì)象事件的處理通常由函數(shù)實(shí)現(xiàn)，其基本格式如下：Function 函數(shù)名(參數(shù)1，參數(shù)2)函數(shù)執(zhí)行部分；函數(shù)返回部分 JavaScript語言是基于對(duì)象的（Object-Based），而不是面向?qū)ο蟮?Objected-oriented)。JavaScript沒有提供抽象、繼承、重載等有關(guān)面向?qū)ο蟮脑S多功能，而是把其他語句所創(chuàng)建的復(fù)雜對(duì)象統(tǒng)一起來，形成一個(gè)強(qiáng)大的對(duì)象系統(tǒng)。但是，JavaScript語言還是具有面向?qū)ο蟮幕咎卣鳎梢愿鶕?jù)需要?jiǎng)?chuàng)建自己的對(duì)象，擴(kuò)大JavaScript的應(yīng)用范圍。 JavaScript支持的對(duì)象

15、（1）瀏覽器環(huán)境中提供的對(duì)象，提供反映當(dāng)前加載的Web頁面及其內(nèi)容以及瀏覽器當(dāng)前會(huì)話信息，如常用的window、document、history、location等等。（2）JavaScript的內(nèi)置對(duì)象，是若干與當(dāng)前窗口或加載的文件無關(guān)的對(duì)象，如String、Date、Math等；（3）用戶自己定義的對(duì)象。 在JavaScript中，一個(gè)字符串是一個(gè)對(duì)象。String對(duì)象，為 特定的字符串提供完成各種處理的屬性和方法，如搜索字符串、提取字符串等。 String對(duì)象的創(chuàng)建 創(chuàng)建一個(gè)字符串對(duì)象可以有兩種方式： Str1=“hello”;Str2=new string(“hello”); Stri

16、ng對(duì)象的屬性 該對(duì)象只有一個(gè)屬性length，表示字符串的長度。 MyStr=“hello JavaScript World”; length=MyStr.length; String對(duì)象的常用方法 charAt()：返回指定位置上的字符（長度為1的字符串）。 indexOf()：返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。 document對(duì)象反映JavaScript中HTML文檔的特性。 常用屬性： forms: form對(duì)象數(shù)組，每一個(gè)元素對(duì)應(yīng)于文檔中的一個(gè)HTML標(biāo)記。 links:link對(duì)象數(shù)組，每一個(gè)元素對(duì)應(yīng)于文檔中的一個(gè)HTML標(biāo)記。 常用方法： 該對(duì)象包含了與文檔元素(

17、elements)一起工作的對(duì)象，它將這些元素封裝起來供編程人員使用。 alert()方法能創(chuàng)建一個(gè)具有OK按鈕的對(duì)話框。 confirm()方法提供給一個(gè)具有兩個(gè)按鈕的對(duì)話框。 prompt()方法運(yùn)行用戶在對(duì)話框中輸入信息，并可使用默認(rèn)值，基本格式： prompt(“提示信息”,默認(rèn)值) document.write()方法和document.writeln()方法用于將文本信息直接輸出到瀏覽器窗口中。 window對(duì)象是每個(gè)窗口或者對(duì)話框的頂層對(duì)象，是document、location及history對(duì)象的父對(duì)象。 常用屬性： closed：窗口是否關(guān)閉。 document：docume

18、nt對(duì)象。 history：history對(duì)象。 location：location對(duì)象。 常用方法: Alert(message):顯示帶有警告信息的窗口，并有“確定”按鈕。 confirm(Message):顯示帶有確認(rèn)信息的窗口，并有“確定”和“取消”按鈕。 focus()：使本窗口獲得焦點(diǎn)。 open()：打開新窗口，顯示指定的頁面。 prompt(message,defaultValue):顯示提示對(duì)話框，帶有提示信息和默認(rèn)值。 close():關(guān)閉當(dāng)前窗口。 使用標(biāo)簽將JavaScript代碼加入HTML文件中。格式如下： JavaScript代碼； language屬性：腳本語言

19、的類型。 src屬性：包含JavaScript源代碼的文件，以“.js”為擴(kuò)展名，可以是JavaScript代碼以文件的形式加載到HTML文件中。 P29 項(xiàng)目構(gòu)思 驗(yàn)證名字是否為空，郵箱是否為空及郵箱地址是否格式正確，確認(rèn)密碼與密碼是否一致。 項(xiàng)目設(shè)計(jì)（1）在“提交按鈕”標(biāo)簽加入onclick=check()”，當(dāng)單擊提交按鈕調(diào)用Javascript的check()方法。（2）check()方法檢查表單各元素。（3）如果沒有錯(cuò)誤，調(diào)用方法submit()提交表單。 CSS（Cascading Style Sheets）中文翻譯為層疊樣式表單。為網(wǎng)站添加布局效果，進(jìn)一步美化頁面。 CSS是一組

20、樣式，樣式中的屬性在HTML元素中依次出現(xiàn)，并顯示在瀏覽器中。 樣式可以定義在樣式可以定義在HTML文檔的標(biāo)志里，也可以在文檔的標(biāo)志里，也可以在外部附加文檔作為外加文檔外部附加文檔作為外加文檔。 CSS可以用來精確的控制頁面里每一個(gè)元素的字體樣式、背景、排列方式、區(qū)域尺寸、邊框等。 使用CSS能夠簡化網(wǎng)頁的格式代碼，加快下載顯示的速度，外部鏈接樣式可以同時(shí)定義多個(gè)頁面，大大減少了重復(fù)勞動(dòng)的工作量。 CSS的主要優(yōu)點(diǎn)包括： （1）通過單個(gè)樣式表控制多個(gè)文檔的布局； （2）更精確的布局控制； （3）為不同的媒體類型（屏幕、打印等）采取不同的布局。 P31 例3-13 html1.html一個(gè)完全使

21、用HTML書寫的頁面。 例3-14 css.html一個(gè)使用HTML+CSS書寫的頁面。 CSS 語法由三部分構(gòu)成：選擇符、屬性和值，格式如下： 選擇符屬性:值 選擇符通常是用戶希望定義的選擇符通常是用戶希望定義的 HTML 元素元素或標(biāo)簽，屬性是用戶希望改變的屬性，并或標(biāo)簽，屬性是用戶希望改變的屬性，并且每個(gè)屬性都有一個(gè)值。且每個(gè)屬性都有一個(gè)值。屬性和值被冒號(hào)分開，并由花括號(hào)包圍，這樣就組成了一個(gè)完整的樣式聲明，例如： a color:green （1）當(dāng)屬性的值是多個(gè)單詞組成時(shí)，必須在值上加引號(hào)，例如： h1 font-family: Courier New （2）如果需要對(duì)一個(gè)選擇符指定

22、多個(gè)屬性時(shí)，使用分號(hào)隔開。 p font-size:15;color:red （3）樣式中的注釋：/* 注釋內(nèi)容*/ 注意：不能嵌套。 （4）樣式的繼承：所有嵌套在某個(gè)html標(biāo)簽中的html標(biāo)簽都會(huì)自動(dòng)繼承外層標(biāo)簽設(shè)置的樣式規(guī)則。 P32例3-15 extend.html繼承了外層標(biāo)簽的樣式 CSS選擇符主要包括以下三種：html選擇符、選擇符、class選擇符、選擇符、ID選擇符選擇符。他們的優(yōu)先級(jí)是ID選擇符CLASS選擇符HTML標(biāo)簽選擇符。 html選擇符選擇符 html選擇符就是以就是以html標(biāo)簽作為選擇符的情況標(biāo)簽作為選擇符的情況。例如：p font-size:15;color

23、:redh1 text-align: center; color: red其作用域?yàn)閔tml頁面中所有符合條件的html標(biāo)簽。 包含選擇符是指用空格隔開的兩個(gè)或多個(gè)單一選擇符組成的字符串。例如： div pcolor:red;font-size:12; /*為div標(biāo)簽中的p標(biāo)簽規(guī)定樣式*/ 包含選擇符主要用來對(duì)某些具有包含關(guān)系的元素來單獨(dú)定義樣式，比如元素1里包含元素2，使用包含選擇符定義的樣式就只能對(duì)在元素1里的元素2起作用，而對(duì)單獨(dú)的元素和元素不起作用。這種方式允許用戶根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。通過合理地使用派生選擇符，我們可以使 HTML 代碼變得更加整潔?！纠?-16

24、】 contain.htm （CSS中的包含選擇符） 使用html標(biāo)簽的class屬性設(shè)置值的選擇符就是class選擇符，class選擇符以一個(gè)點(diǎn)號(hào)定義。class選擇符包含兩種：關(guān)聯(lián)class選擇符和獨(dú)立class選擇符。（1）關(guān)聯(lián)class 選擇符 關(guān)聯(lián)class 選擇符可以為同一個(gè)元素（html標(biāo)簽）定義不同的樣式，例如下面例子中就通過關(guān)聯(lián)class 選擇符為p元素定義了不同的樣式。 這是stop的樣式 這是warning的樣式 這是normal的樣式 p.stopcolor:red p.warningcolor:yellow p.normalcolor:green （2）獨(dú)立class

25、 選擇符 獨(dú)立class選擇符可以為多個(gè)不同的元素（html標(biāo)簽）定義相同的樣式，例如：藍(lán)色的段落藍(lán)色的標(biāo)題 .titletext-align:center;color:blue 上面例子中p元素和h1元素都使用了樣式.title。 ID屬性用來定義某一特定html標(biāo)簽，一個(gè)網(wǎng)頁文件只能有一個(gè)標(biāo)簽使用某一ID屬性值，ID 選擇符就是用來設(shè)置這樣具有ID屬性html標(biāo)簽的樣式。 ID選擇符可以為標(biāo)有特定 id屬性 的 HTML 元素指定特定的樣式。id 選擇符以 “#” 來定義。 例如： welcome to neusoft #titletext-align:center;color:blue 樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的樣式可以規(guī)定在單個(gè)的 HTML 元素中，也可以定義在元素中，也可以定義在 HTML 頁的頭元素中，或在一個(gè)外頁的頭元素中，或在一個(gè)外部的部的 CSS 文件中。