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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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