第8章網(wǎng)站建設(shè)

1、整理ppt第第8章章 網(wǎng)站建設(shè)網(wǎng)站建設(shè) 本章學(xué)習(xí)目標(biāo)本章學(xué)習(xí)目標(biāo) 本章主要講解本章主要講解Internet常用軟件的使用方法。常用軟件的使用方法。通過(guò)本章的學(xué)習(xí)，讀者應(yīng)掌握以下內(nèi)容：通過(guò)本章的學(xué)習(xí)，讀者應(yīng)掌握以下內(nèi)容： 建立網(wǎng)站的具體步驟建立網(wǎng)站的具體步驟 HTML與與CSS的基本知識(shí)的基本知識(shí) 瀏覽器端編程方法瀏覽器端編程方法 整理ppt本章目錄本章目錄8.1 網(wǎng)站的建立網(wǎng)站的建立 8.2 網(wǎng)頁(yè)的制作語(yǔ)言網(wǎng)頁(yè)的制作語(yǔ)言 8.3 級(jí)聯(lián)樣式表級(jí)聯(lián)樣式表CSS 8.4 網(wǎng)頁(yè)腳本語(yǔ)言網(wǎng)頁(yè)腳本語(yǔ)言JavaScript 整理ppt8.1 網(wǎng)站的建立網(wǎng)站的建立 建立網(wǎng)站的主要步驟如下：建立網(wǎng)站的主要步驟如

2、下：（1 1）首先在）首先在InternetInternet網(wǎng)上申請(qǐng)一個(gè)免費(fèi)的主網(wǎng)上申請(qǐng)一個(gè)免費(fèi)的主頁(yè)空間和域名。頁(yè)空間和域名。（2 2）在自己的計(jì)算機(jī)上設(shè)計(jì)、制作網(wǎng)頁(yè)。）在自己的計(jì)算機(jī)上設(shè)計(jì)、制作網(wǎng)頁(yè)。（3 3）當(dāng)網(wǎng)頁(yè)制作完成后，即可通過(guò)）當(dāng)網(wǎng)頁(yè)制作完成后，即可通過(guò)FTPFTP客戶端客戶端軟件，將文件上傳到軟件，將文件上傳到InternetInternet上。上。（4 4）最后，將網(wǎng)站登記到搜索引擎上，為自）最后，將網(wǎng)站登記到搜索引擎上，為自己所做的網(wǎng)站進(jìn)行宣傳。己所做的網(wǎng)站進(jìn)行宣傳。返回本章目錄8.1.1 網(wǎng)頁(yè)及網(wǎng)站設(shè)計(jì)概述網(wǎng)頁(yè)及網(wǎng)站設(shè)計(jì)概述 1網(wǎng)頁(yè)網(wǎng)頁(yè) 從專(zhuān)業(yè)角度看，網(wǎng)頁(yè)是一種用從專(zhuān)業(yè)角

3、度看，網(wǎng)頁(yè)是一種用HTML撰寫(xiě)的文檔。撰寫(xiě)的文檔。HTML的全文是的全文是“HyperText Markup Language”，中文意思為，中文意思為“超超文本標(biāo)記語(yǔ)言文本標(biāo)記語(yǔ)言”?！俺谋境谋尽币庵疙?yè)面內(nèi)除文本外，還可包意指頁(yè)面內(nèi)除文本外，還可包含圖片、鏈接、甚至音頻、視頻等非文字元素。含圖片、鏈接、甚至音頻、視頻等非文字元素。 Internet用戶訪問(wèn)網(wǎng)站時(shí)所看到的第一個(gè)網(wǎng)頁(yè)，稱(chēng)作主頁(yè)用戶訪問(wèn)網(wǎng)站時(shí)所看到的第一個(gè)網(wǎng)頁(yè)，稱(chēng)作主頁(yè)（Homepage或或Home Page）。）。 龐大的龐大的WWW資源庫(kù)中的所有信息，都是通過(guò)這種簡(jiǎn)單的、資源庫(kù)中的所有信息，都是通過(guò)這種簡(jiǎn)單的、易于理解的超

4、鏈接方式組織起來(lái)的。易于理解的超鏈接方式組織起來(lái)的。 在在Internet上進(jìn)行網(wǎng)頁(yè)瀏覽的過(guò)程如圖上進(jìn)行網(wǎng)頁(yè)瀏覽的過(guò)程如圖8-1示意了瀏覽器與示意了瀏覽器與Web服務(wù)器之間的關(guān)系。服務(wù)器之間的關(guān)系。 返回本章目錄圖8-1 Web資源訪問(wèn)過(guò)程 Web 服務(wù)器瀏覽器請(qǐng)求響應(yīng)2網(wǎng)站規(guī)劃設(shè)計(jì)網(wǎng)站規(guī)劃設(shè)計(jì)規(guī)劃網(wǎng)站時(shí)，一般應(yīng)注意以下幾點(diǎn)：規(guī)劃網(wǎng)站時(shí)，一般應(yīng)注意以下幾點(diǎn)：（1）HTML文件的顯示效果與其自身版本、瀏覽器對(duì)文件的顯示效果與其自身版本、瀏覽器對(duì)HTML的的處理方法有關(guān)。處理方法有關(guān)。（2）在確定網(wǎng)站的總體結(jié)構(gòu)時(shí)，應(yīng)遵循）在確定網(wǎng)站的總體結(jié)構(gòu)時(shí)，應(yīng)遵循“層次分明層次分明”的基本的基本原則。原則。（

5、3）對(duì)一般網(wǎng)站而言，在選取材料時(shí)，應(yīng)以文本信息為主，）對(duì)一般網(wǎng)站而言，在選取材料時(shí)，應(yīng)以文本信息為主，以多媒體材料為輔。以多媒體材料為輔。返回本章目錄（4）對(duì)主頁(yè)要進(jìn)行精雕細(xì)刻。）對(duì)主頁(yè)要進(jìn)行精雕細(xì)刻。（5）網(wǎng)站的內(nèi)容要經(jīng)常更新。）網(wǎng)站的內(nèi)容要經(jīng)常更新。（6）網(wǎng)頁(yè)中的文本內(nèi)容應(yīng)簡(jiǎn)明扼要。）網(wǎng)頁(yè)中的文本內(nèi)容應(yīng)簡(jiǎn)明扼要。3網(wǎng)頁(yè)的主要內(nèi)容網(wǎng)頁(yè)的主要內(nèi)容網(wǎng)頁(yè)中的重要內(nèi)容有：網(wǎng)頁(yè)中的重要內(nèi)容有：（1）背景。）背景。（2）文本。文本是一般網(wǎng)頁(yè)中最主要的內(nèi)容。與一般字處理）文本。文本是一般網(wǎng)頁(yè)中最主要的內(nèi)容。與一般字處理軟件類(lèi)似，網(wǎng)頁(yè)編輯軟件也可以設(shè)置頁(yè)面中文本的各種屬性，軟件類(lèi)似，網(wǎng)頁(yè)編輯軟件也可以設(shè)置頁(yè)

6、面中文本的各種屬性，此外，還可以設(shè)置段落格式，如行距、縮進(jìn)、對(duì)齊方式等。當(dāng)此外，還可以設(shè)置段落格式，如行距、縮進(jìn)、對(duì)齊方式等。當(dāng)然，還可以將文本設(shè)置為超鏈接。然，還可以將文本設(shè)置為超鏈接。（3）表格。表格是將大量數(shù)據(jù)以簡(jiǎn)潔明快的方式展示給瀏覽）表格。表格是將大量數(shù)據(jù)以簡(jiǎn)潔明快的方式展示給瀏覽者的有效方式。表格還是進(jìn)行頁(yè)面布局的有力工具。者的有效方式。表格還是進(jìn)行頁(yè)面布局的有力工具。返回本章目錄 （4）框架?？蚣苁沁M(jìn)行頁(yè)面布局的另一工具。借助框架，）框架?？蚣苁沁M(jìn)行頁(yè)面布局的另一工具。借助框架，可將頁(yè)面劃分為若干區(qū)域，其中每個(gè)區(qū)域都對(duì)應(yīng)一個(gè)獨(dú)立的可將頁(yè)面劃分為若干區(qū)域，其中每個(gè)區(qū)域都對(duì)應(yīng)一個(gè)獨(dú)立

7、的HTML文件。但框架是在文件。但框架是在HTML3.2及以上版本中的功能，需要及以上版本中的功能，需要IE4.0或或NC4.0，才能正確顯示。，才能正確顯示。 （5）圖像。圖像是網(wǎng)頁(yè)吸引訪問(wèn)者的重要手段。大小適中、）圖像。圖像是網(wǎng)頁(yè)吸引訪問(wèn)者的重要手段。大小適中、制作精美的圖像能夠在很大程度上增加訪問(wèn)者的訪問(wèn)興趣。最制作精美的圖像能夠在很大程度上增加訪問(wèn)者的訪問(wèn)興趣。最好用表格對(duì)圖像位置進(jìn)行精確定位。好用表格對(duì)圖像位置進(jìn)行精確定位。 （6）表單。表單用于從訪問(wèn)者處獲取信息。表單中可包含）表單。表單用于從訪問(wèn)者處獲取信息。表單中可包含按鈕、文本框等。按鈕、文本框等。4 4網(wǎng)頁(yè)的優(yōu)化網(wǎng)頁(yè)的優(yōu)化

8、優(yōu)化的內(nèi)容大致包括：減少數(shù)據(jù)量、改善視覺(jué)效果、提高優(yōu)化的內(nèi)容大致包括：減少數(shù)據(jù)量、改善視覺(jué)效果、提高網(wǎng)站對(duì)瀏覽器的兼容性等。網(wǎng)站對(duì)瀏覽器的兼容性等。返回本章目錄 下面是幾個(gè)常用的優(yōu)化原則。下面是幾個(gè)常用的優(yōu)化原則。 （1 1）正確選擇圖像格式。）正確選擇圖像格式。 （2 2）提供多個(gè)版本。）提供多個(gè)版本。 （3 3）優(yōu)化配色方案。）優(yōu)化配色方案。 （4 4）突出網(wǎng)站特點(diǎn)。）突出網(wǎng)站特點(diǎn)。 一般情況下，對(duì)于提供專(zhuān)門(mén)資源的網(wǎng)站而言，進(jìn)行內(nèi)容取一般情況下，對(duì)于提供專(zhuān)門(mén)資源的網(wǎng)站而言，進(jìn)行內(nèi)容取舍時(shí)應(yīng)遵循舍時(shí)應(yīng)遵循“精精”的原則，以求突出重點(diǎn)和特色。的原則，以求突出重點(diǎn)和特色。此外，在優(yōu)化網(wǎng)站時(shí)，還應(yīng)

9、考慮如何為讀者提供增值服務(wù)。此外，在優(yōu)化網(wǎng)站時(shí)，還應(yīng)考慮如何為讀者提供增值服務(wù)。 返回本章目錄8.1.2 免費(fèi)網(wǎng)頁(yè)空間的申請(qǐng)免費(fèi)網(wǎng)頁(yè)空間的申請(qǐng) 要建立網(wǎng)站首先必須在要建立網(wǎng)站首先必須在InternetInternet上獲得一塊存儲(chǔ)網(wǎng)站的空間，上獲得一塊存儲(chǔ)網(wǎng)站的空間，根據(jù)所制作網(wǎng)站用途的不同，目前有兩種方式可獲得存儲(chǔ)空間：根據(jù)所制作網(wǎng)站用途的不同，目前有兩種方式可獲得存儲(chǔ)空間：一種是租用虛擬主機(jī)，另一種是申請(qǐng)免費(fèi)空間。一種是租用虛擬主機(jī)，另一種是申請(qǐng)免費(fèi)空間。1 1選擇免費(fèi)網(wǎng)頁(yè)空間的原則選擇免費(fèi)網(wǎng)頁(yè)空間的原則 （1 1）測(cè)算自己的網(wǎng)站大致要多少存儲(chǔ)空間，然后到相應(yīng)的站）測(cè)算自己的網(wǎng)站大致要多少

10、存儲(chǔ)空間，然后到相應(yīng)的站點(diǎn)去申請(qǐng)。點(diǎn)去申請(qǐng)。 （2 2）所選擇的網(wǎng)站附帶的免費(fèi)服務(wù)越多越好。）所選擇的網(wǎng)站附帶的免費(fèi)服務(wù)越多越好。 （3 3）所申請(qǐng)的網(wǎng)站最好支持）所申請(qǐng)的網(wǎng)站最好支持ASPASP（動(dòng)態(tài)服務(wù)端網(wǎng)頁(yè)）或（動(dòng)態(tài)服務(wù)端網(wǎng)頁(yè)）或PHPPHP，并且還可以掛接數(shù)據(jù)庫(kù)。并且還可以掛接數(shù)據(jù)庫(kù)。 （4 4）訪問(wèn)速度越快越好。）訪問(wèn)速度越快越好。 （5 5）一定要選擇能用）一定要選擇能用FTPFTP方式上傳網(wǎng)頁(yè)文件的站點(diǎn)，以便對(duì)網(wǎng)方式上傳網(wǎng)頁(yè)文件的站點(diǎn)，以便對(duì)網(wǎng)站進(jìn)行維護(hù)。站進(jìn)行維護(hù)。返回本章目錄 （6）應(yīng)選擇信譽(yù)度高的免費(fèi)服務(wù)站點(diǎn)。）應(yīng)選擇信譽(yù)度高的免費(fèi)服務(wù)站點(diǎn)。2如何查找提供免費(fèi)個(gè)人網(wǎng)頁(yè)的站點(diǎn)

11、如何查找提供免費(fèi)個(gè)人網(wǎng)頁(yè)的站點(diǎn) 可以利用搜索引擎來(lái)查找提供免費(fèi)個(gè)人網(wǎng)頁(yè)的站點(diǎn)。例如，可以利用搜索引擎來(lái)查找提供免費(fèi)個(gè)人網(wǎng)頁(yè)的站點(diǎn)。例如，在瀏覽器的地址欄中輸入，啟動(dòng)網(wǎng)易搜索引擎，然后依次選擇在瀏覽器的地址欄中輸入，啟動(dòng)網(wǎng)易搜索引擎，然后依次選擇“電腦網(wǎng)絡(luò)電腦網(wǎng)絡(luò)”“免費(fèi)資源免費(fèi)資源”“免費(fèi)建站資源免費(fèi)建站資源”。3申請(qǐng)免費(fèi)網(wǎng)頁(yè)空間申請(qǐng)免費(fèi)網(wǎng)頁(yè)空間 應(yīng)盡可能在國(guó)內(nèi)站點(diǎn)申請(qǐng)。應(yīng)盡可能在國(guó)內(nèi)站點(diǎn)申請(qǐng)。 按要求填寫(xiě)一些必要的資料，即可完成申請(qǐng)。按要求填寫(xiě)一些必要的資料，即可完成申請(qǐng)。順便指出，目前有些空間提供商收取的費(fèi)用十分低廉（如順便指出，目前有些空間提供商收取的費(fèi)用十分低廉（如10元元/月），應(yīng)盡

12、量為網(wǎng)站申請(qǐng)付費(fèi)空間，以享受更為全面的服務(wù)。月），應(yīng)盡量為網(wǎng)站申請(qǐng)付費(fèi)空間，以享受更為全面的服務(wù)。 返回本章目錄8.1.3 上傳個(gè)人網(wǎng)頁(yè) LeapFTP是一個(gè)功能豐富、性能穩(wěn)定、操作簡(jiǎn)單的是一個(gè)功能豐富、性能穩(wěn)定、操作簡(jiǎn)單的FTP客客戶端軟件，十分適合一般用戶使用。戶端軟件，十分適合一般用戶使用。利用利用LeapFTP上傳網(wǎng)頁(yè)的一般步驟如下：上傳網(wǎng)頁(yè)的一般步驟如下： （1）下載）下載LeapFTP安裝程序，將其安裝在本地計(jì)算機(jī)上。安裝程序，將其安裝在本地計(jì)算機(jī)上。 （2）啟動(dòng)）啟動(dòng)LeapFTP。 （3）在服務(wù)器網(wǎng)址欄輸入空間提供商提供的）在服務(wù)器網(wǎng)址欄輸入空間提供商提供的FTP地址、用戶地址

13、、用戶名（名（User）、口令（）、口令（Pass）和端口號(hào)（）和端口號(hào)（Port），然后單擊），然后單擊“連連接到服務(wù)器（接到服務(wù)器（Connect to server）”按鈕，建立連接。按鈕，建立連接。 （4）傳送文件）傳送文件 連接成功后，連接成功后，LeaoFTP窗口與圖窗口與圖8-4類(lèi)似。完成對(duì)源文件類(lèi)似。完成對(duì)源文件（或目錄）及目的位置的選擇后，將所選源文件（或目錄）直（或目錄）及目的位置的選擇后，將所選源文件（或目錄）直接拖動(dòng)到目的位置釋放即可完成上傳任務(wù)。接拖動(dòng)到目的位置釋放即可完成上傳任務(wù)。 返回本章目錄圖8-4 利用LeapFTP訪問(wèn)遠(yuǎn)程目錄 返回本章目錄 （5）完成上傳后

14、，單擊）完成上傳后，單擊“斷開(kāi)連接（斷開(kāi)連接（Disconnect from Server）”按鈕。斷開(kāi)與服務(wù)器的連接，然后退出按鈕。斷開(kāi)與服務(wù)器的連接，然后退出LeapFTP。在上傳網(wǎng)頁(yè)文件時(shí)應(yīng)注意以下幾個(gè)方面的問(wèn)題：在上傳網(wǎng)頁(yè)文件時(shí)應(yīng)注意以下幾個(gè)方面的問(wèn)題： l l 設(shè)計(jì)的網(wǎng)站中包含的所有文件都要全部上傳（包括圖片文設(shè)計(jì)的網(wǎng)站中包含的所有文件都要全部上傳（包括圖片文件等）。件等）。 l l 網(wǎng)頁(yè)文件在進(jìn)行超級(jí)鏈接時(shí)一定要使用相對(duì)路徑。網(wǎng)頁(yè)文件在進(jìn)行超級(jí)鏈接時(shí)一定要使用相對(duì)路徑。 l l 務(wù)必將個(gè)人網(wǎng)頁(yè)的主頁(yè)文件名設(shè)為空間提供商所指定的文務(wù)必將個(gè)人網(wǎng)頁(yè)的主頁(yè)文件名設(shè)為空間提供商所指定的文件名

15、，通常為件名，通常為index.htm或或default.htm。需要特別強(qiáng)調(diào)的是最。需要特別強(qiáng)調(diào)的是最好全部用英文名字。好全部用英文名字。 l l應(yīng)保證網(wǎng)站各處的文件名（包括應(yīng)保證網(wǎng)站各處的文件名（包括HTML文件中作為鏈接目標(biāo)文件中作為鏈接目標(biāo)的文件名）是嚴(yán)格一致的。的文件名）是嚴(yán)格一致的。 返回本章目錄8.1.4 網(wǎng)站的宣傳網(wǎng)站的宣傳 將網(wǎng)站登記到著名的搜索引擎上，是宣傳網(wǎng)站的常用方法。將網(wǎng)站登記到著名的搜索引擎上，是宣傳網(wǎng)站的常用方法。 下面以搜狐為例介紹如何將一個(gè)網(wǎng)站加入到搜索引擎上。下面以搜狐為例介紹如何將一個(gè)網(wǎng)站加入到搜索引擎上。 （1）在搜狐主頁(yè)的右上角單擊）在搜狐主頁(yè)的右上角

16、單擊“網(wǎng)站登陸網(wǎng)站登陸”鏈接，進(jìn)入網(wǎng)頁(yè)鏈接，進(jìn)入網(wǎng)頁(yè)登記頁(yè)面。登記頁(yè)面。 （2）在出現(xiàn)的頁(yè)面中根據(jù)具體情況進(jìn)行選擇，逐級(jí)深入，最）在出現(xiàn)的頁(yè)面中根據(jù)具體情況進(jìn)行選擇，逐級(jí)深入，最終進(jìn)入資料填寫(xiě)頁(yè)面。終進(jìn)入資料填寫(xiě)頁(yè)面。 （3）填寫(xiě)網(wǎng)站名稱(chēng)、網(wǎng)站地址，完成后單擊）填寫(xiě)網(wǎng)站名稱(chēng)、網(wǎng)站地址，完成后單擊“進(jìn)行下一步進(jìn)行下一步”按鈕。按鈕。 （4）按要求填寫(xiě)其他信息。完成后單擊）按要求填寫(xiě)其他信息。完成后單擊“進(jìn)行下一步進(jìn)行下一步”按鈕。按鈕。 （5）如果信息符合要求，則出現(xiàn)）如果信息符合要求，則出現(xiàn) “提交成功提交成功”頁(yè)面。頁(yè)面。 （6）如果信息被正確收入，可得到一封）如果信息被正確收入，可得到一封

17、E-mail。 返回本章目錄8.2 網(wǎng)頁(yè)的制作語(yǔ)言網(wǎng)頁(yè)的制作語(yǔ)言8.2.1 HTML語(yǔ)言的結(jié)構(gòu)及語(yǔ)法規(guī)范語(yǔ)言的結(jié)構(gòu)及語(yǔ)法規(guī)范 HTML語(yǔ)言的結(jié)構(gòu)語(yǔ)言的結(jié)構(gòu) HTML（超文本標(biāo)記語(yǔ)言）是一種描述文檔結(jié)構(gòu)的語(yǔ)言，（超文本標(biāo)記語(yǔ)言）是一種描述文檔結(jié)構(gòu)的語(yǔ)言，它利用標(biāo)簽來(lái)描述文檔結(jié)構(gòu)、指定文檔內(nèi)容在瀏覽器中的顯示它利用標(biāo)簽來(lái)描述文檔結(jié)構(gòu)、指定文檔內(nèi)容在瀏覽器中的顯示格式、位置等。格式、位置等。 一個(gè)一個(gè)HTML文件包含兩部分信息，其一是文本內(nèi)容，其二即文件包含兩部分信息，其一是文本內(nèi)容，其二即為標(biāo)簽。標(biāo)簽有分單獨(dú)出現(xiàn)的標(biāo)簽和成對(duì)出現(xiàn)的標(biāo)簽兩種。為標(biāo)簽。標(biāo)簽有分單獨(dú)出現(xiàn)的標(biāo)簽和成對(duì)出現(xiàn)的標(biāo)

18、簽兩種。整個(gè)整個(gè)HTML文檔由文檔頭和文檔主體兩部分構(gòu)成，這兩部分文檔由文檔頭和文檔主體兩部分構(gòu)成，這兩部分內(nèi)容分別用內(nèi)容分別用標(biāo)簽和標(biāo)簽和標(biāo)簽界定。文檔頭中包含標(biāo)簽界定。文檔頭中包含文檔標(biāo)題等屬性；文檔主體則規(guī)定了將在瀏覽器窗口中顯示的文檔標(biāo)題等屬性；文檔主體則規(guī)定了將在瀏覽器窗口中顯示的內(nèi)容及其顯示格式。內(nèi)容及其顯示格式。 返回本章目錄華北航天工業(yè)學(xué)院華北航天工業(yè)學(xué)院這是一個(gè)這是一個(gè)HTML的測(cè)試文件的測(cè)試文件 返回本章目錄 HTML HTML語(yǔ)言的語(yǔ)法規(guī)范語(yǔ)言的語(yǔ)法規(guī)范在使用在使用HTML時(shí)，應(yīng)注意以下幾點(diǎn)：時(shí)，應(yīng)注意以下幾點(diǎn)：l l HTML文檔的標(biāo)簽是可以嵌套的。文檔的

19、標(biāo)簽是可以嵌套的。l l 有些標(biāo)簽（例如有些標(biāo)簽（例如）沒(méi)有任何屬性，而有些標(biāo)簽（例）沒(méi)有任何屬性，而有些標(biāo)簽（例如如）則可包含一個(gè)或多個(gè)屬性。）則可包含一個(gè)或多個(gè)屬性。l l 在在HTML中有三個(gè)字符具有特殊的意義，即中有三個(gè)字符具有特殊的意義，即“”和和“&”。l l 元素名稱(chēng)對(duì)大小寫(xiě)不敏感。元素名稱(chēng)對(duì)大小寫(xiě)不敏感。l l 一個(gè)標(biāo)簽可以有多個(gè)屬性，屬性及其屬性值對(duì)大小寫(xiě)不敏一個(gè)標(biāo)簽可以有多個(gè)屬性，屬性及其屬性值對(duì)大小寫(xiě)不敏感，不同屬性間用空格分隔。感，不同屬性間用空格分隔。l l HTML文件中，有些標(biāo)簽只能出現(xiàn)在文檔頭部中，而絕大多文件中，有些標(biāo)簽只能出現(xiàn)在文檔頭部中，而絕大多數(shù)標(biāo)簽只能

20、出現(xiàn)在文檔主體中。數(shù)標(biāo)簽只能出現(xiàn)在文檔主體中。返回本章目錄8.2.2 網(wǎng)頁(yè)中文本的基本格式網(wǎng)頁(yè)中文本的基本格式 下面介紹一些常用的有關(guān)下面介紹一些常用的有關(guān)WebWeb頁(yè)文本格式的標(biāo)簽。頁(yè)文本格式的標(biāo)簽。1 1標(biāo)簽標(biāo)簽 標(biāo)簽用來(lái)給網(wǎng)頁(yè)命名，網(wǎng)頁(yè)的名稱(chēng)將被顯標(biāo)簽用來(lái)給網(wǎng)頁(yè)命名，網(wǎng)頁(yè)的名稱(chēng)將被顯示在瀏覽器的標(biāo)題欄中。示在瀏覽器的標(biāo)題欄中。2標(biāo)簽標(biāo)簽 標(biāo)簽是成對(duì)出現(xiàn)的。位于標(biāo)簽是成對(duì)出現(xiàn)的。位于和和之間之間的內(nèi)容是的內(nèi)容是HTML文檔中的標(biāo)題。標(biāo)題文字都以粗體顯文檔中的標(biāo)題。標(biāo)題文字都以粗體顯示，上級(jí)標(biāo)題總比下級(jí)標(biāo)題更大些，具體大小與瀏覽示，上級(jí)標(biāo)題總比下級(jí)標(biāo)題更大些，具體大小與瀏覽器有關(guān)。器有關(guān)。

21、返回本章目錄3預(yù)格式化文本標(biāo)簽預(yù)格式化文本標(biāo)簽 為預(yù)格式化標(biāo)簽。它是成對(duì)出現(xiàn)的。對(duì)位為預(yù)格式化標(biāo)簽。它是成對(duì)出現(xiàn)的。對(duì)位于于和和之間的內(nèi)容，瀏覽器將嚴(yán)格按照之間的內(nèi)容，瀏覽器將嚴(yán)格按照編輯編輯HTML文檔時(shí)的字符及位置進(jìn)行顯示。文檔時(shí)的字符及位置進(jìn)行顯示。 圖8-11 有標(biāo)簽 圖8-12 無(wú)標(biāo)簽 返回本章目錄4和和標(biāo)簽標(biāo)簽 “BR”即即Break，是換行標(biāo)簽，它是單獨(dú)出現(xiàn)的。，是換行標(biāo)簽，它是單獨(dú)出現(xiàn)的。的作用相當(dāng)于回車(chē)符。的作用相當(dāng)于回車(chē)符。 “P”即即Paragraph（段落）。（段落）。標(biāo)簽用于劃分段標(biāo)簽用于劃分段落，作用是插入一個(gè)空行。它可以單獨(dú)使用，也可以落，作用是插入一個(gè)空行。它可

22、以單獨(dú)使用，也可以成對(duì)使用。成對(duì)使用。5標(biāo)簽標(biāo)簽 標(biāo)簽是單獨(dú)出現(xiàn)的標(biāo)簽。其作用是換行并標(biāo)簽是單獨(dú)出現(xiàn)的標(biāo)簽。其作用是換行并畫(huà)出一條水平線。該標(biāo)簽的屬性有：畫(huà)出一條水平線。該標(biāo)簽的屬性有：size屬性、屬性、width屬性、屬性、align屬性、屬性、color屬性屬性 返回本章目錄6字符格式標(biāo)簽字符格式標(biāo)簽 HTML文檔的字符格式標(biāo)簽主要有文檔的字符格式標(biāo)簽主要有、和、和四種。它們都是成對(duì)出現(xiàn)的。四種。它們都是成對(duì)出現(xiàn)的。7標(biāo)簽標(biāo)簽 是字體標(biāo)簽，它是成對(duì)出現(xiàn)的，用于指是字體標(biāo)簽，它是成對(duì)出現(xiàn)的，用于指定文本的字體大小、顏色等。該標(biāo)簽可包含若干屬性，定文本的字體大小、顏色等。該標(biāo)簽可包含若干屬性

23、，其中其中COLOR屬性指定文字顏色，顏色可以用屬性指定文字顏色，顏色可以用6位十六位十六進(jìn)制數(shù)表示，如進(jìn)制數(shù)表示，如；SIZE屬性指定相對(duì)尺寸。屬性指定相對(duì)尺寸。 返回本章目錄 另外，如果用戶想要設(shè)置網(wǎng)頁(yè)的背景色和文字顏另外，如果用戶想要設(shè)置網(wǎng)頁(yè)的背景色和文字顏色，可以將色，可以將標(biāo)簽擴(kuò)充為標(biāo)簽擴(kuò)充為 其中其中“x”為為6位十六進(jìn)制數(shù)，代表顏色位十六進(jìn)制數(shù)，代表顏色RGB（red-green-blue，紅，紅-綠綠-藍(lán)）值，其格式為藍(lán)）值，其格式為rrggbb。 8.2.3 文檔的超鏈接 使用超鏈接技術(shù)可以使順序存放的文件在一定程使用超鏈接技術(shù)可以使順序存放的文件在一定程度上可被隨機(jī)訪問(wèn)。度

24、上可被隨機(jī)訪問(wèn)。 就本質(zhì)而言，超鏈接是在并無(wú)物理聯(lián)系的兩段文就本質(zhì)而言，超鏈接是在并無(wú)物理聯(lián)系的兩段文字或兩個(gè)文件建立的邏輯聯(lián)系。字或兩個(gè)文件建立的邏輯聯(lián)系。 返回本章目錄8.2.3 文檔的超鏈接 使用超鏈接技術(shù)可以使順序存放的文件在一定程使用超鏈接技術(shù)可以使順序存放的文件在一定程度上可被隨機(jī)訪問(wèn)。度上可被隨機(jī)訪問(wèn)。 就本質(zhì)而言，超鏈接是在并無(wú)物理聯(lián)系的兩段文就本質(zhì)而言，超鏈接是在并無(wú)物理聯(lián)系的兩段文字或兩個(gè)文件建立的邏輯聯(lián)系。字或兩個(gè)文件建立的邏輯聯(lián)系。 統(tǒng)一資源定位器統(tǒng)一資源定位器URL URL（Uniform Resource Locator）即統(tǒng)一資）即統(tǒng)一資源定位器，它

25、是文件名的擴(kuò)展，指出了文件在源定位器，它是文件名的擴(kuò)展，指出了文件在Internet中的位置。中的位置。 URL由協(xié)議名、服務(wù)器地址、文件在服務(wù)器中的由協(xié)議名、服務(wù)器地址、文件在服務(wù)器中的路徑（即目錄）和文件名四部分構(gòu)成。路徑（即目錄）和文件名四部分構(gòu)成。URL的格式為的格式為 返回本章目錄protocol:/machinename:port/directory/其中其中 l l protocol是訪問(wèn)資源所采用的協(xié)議，即訪問(wèn)該資是訪問(wèn)資源所采用的協(xié)議，即訪問(wèn)該資源的方法，它可以是：源的方法，它可以是：HTTP、FTP等。等。 l l 是存放資源主機(jī)的是存放資源主機(jī)的I

26、P地址，通常地址，通常以字符形式出現(xiàn)，如以字符形式出現(xiàn)，如。 l l port是訪問(wèn)資源所使用的端口號(hào)。是訪問(wèn)資源所使用的端口號(hào)。 l l directory和是資源的路徑和文件名。和是資源的路徑和文件名。 與單機(jī)系統(tǒng)絕對(duì)路徑、相對(duì)路徑的概念類(lèi)似，與單機(jī)系統(tǒng)絕對(duì)路徑、相對(duì)路徑的概念類(lèi)似，URL也有絕對(duì)與相對(duì)之分。絕對(duì)也有絕對(duì)與相對(duì)之分。絕對(duì)URL、相對(duì)、相對(duì)URL是相是相對(duì)于當(dāng)前訪問(wèn)的對(duì)于當(dāng)前訪問(wèn)的URL而言的。而言的。 返回本章目錄 瀏覽器在識(shí)別瀏覽器在識(shí)別URL時(shí)，遵循下列規(guī)則：時(shí)，遵循下列規(guī)則： l l 當(dāng)協(xié)議（當(dāng)協(xié)議（http:/）被省略時(shí)，則認(rèn)為與當(dāng)前頁(yè)面）被省略時(shí)，則認(rèn)為與當(dāng)前頁(yè)面

27、的協(xié)議相同。的協(xié)議相同。 l l 當(dāng)服務(wù)器名稱(chēng)被省略時(shí)，則認(rèn)為是當(dāng)前服務(wù)器。當(dāng)服務(wù)器名稱(chēng)被省略時(shí)，則認(rèn)為是當(dāng)前服務(wù)器。 l l 當(dāng)文件路徑被省略時(shí)，則認(rèn)為是當(dāng)前目錄。當(dāng)文件路徑被省略時(shí)，則認(rèn)為是當(dāng)前目錄。 l l 當(dāng)文件名被省略時(shí)，則認(rèn)為是目錄中的默認(rèn)文件。當(dāng)文件名被省略時(shí)，則認(rèn)為是目錄中的默認(rèn)文件。 超鏈接超鏈接1鏈接到其他站點(diǎn)（文檔）鏈接到其他站點(diǎn)（文檔） 在在HTML文檔中，當(dāng)需要鏈接其他文檔時(shí)，應(yīng)使用文檔中，當(dāng)需要鏈接其他文檔時(shí)，應(yīng)使用標(biāo)簽。其基本格式為標(biāo)簽。其基本格式為 返回本章目錄zzz 實(shí)際上這個(gè)實(shí)際上這個(gè)“zzz”在在HTML文件中充當(dāng)?shù)氖侵羔樀奈募谐洚?dāng)?shù)氖侵羔?/p>

28、的角色，通常被稱(chēng)為錨標(biāo)，是鏈接的源點(diǎn)。角色，通常被稱(chēng)為錨標(biāo)，是鏈接的源點(diǎn)。 在制作在制作HTML文檔時(shí)，需要知道目標(biāo)的文檔時(shí)，需要知道目標(biāo)的URL。對(duì)。對(duì)于于Internet上的資源而言，在用瀏覽器查看時(shí)，將鼠上的資源而言，在用瀏覽器查看時(shí)，將鼠標(biāo)移至資源錨標(biāo)處，其標(biāo)移至資源錨標(biāo)處，其URL一般會(huì)在瀏覽器的狀態(tài)欄一般會(huì)在瀏覽器的狀態(tài)欄中顯示出來(lái)。中顯示出來(lái)。 此外，制作此外，制作HTML文檔時(shí)，對(duì)能夠確定關(guān)系的一文檔時(shí)，對(duì)能夠確定關(guān)系的一組資源（比如在同一個(gè)目錄中）應(yīng)采用相對(duì)組資源（比如在同一個(gè)目錄中）應(yīng)采用相對(duì)URL，這，這不僅簡(jiǎn)單，而且便于維護(hù)。但是，引用外部資源時(shí)，不僅簡(jiǎn)單，而且便于維護(hù)

29、。但是，引用外部資源時(shí)，只能使用絕對(duì)只能使用絕對(duì)URL。 返回本章目錄2鏈接到本頁(yè)的另一位置或其他頁(yè)面中的特定位置。鏈接到本頁(yè)的另一位置或其他頁(yè)面中的特定位置。 上面提到的超鏈接用于鏈接其他頁(yè)面，這種鏈接方上面提到的超鏈接用于鏈接其他頁(yè)面，這種鏈接方式稱(chēng)做遠(yuǎn)程鏈接。式稱(chēng)做遠(yuǎn)程鏈接。 事實(shí)上，超鏈接可以指向本頁(yè)面中的任何位置，這事實(shí)上，超鏈接可以指向本頁(yè)面中的任何位置，這種鏈接方式叫做本地鏈接。種鏈接方式叫做本地鏈接。 在某一位置做在某一位置做“記號(hào)記號(hào)”需要使用下列格式的需要使用下列格式的標(biāo)簽：標(biāo)簽： name屬性將放置該標(biāo)記的地方標(biāo)記為屬性將放置該標(biāo)記的地方標(biāo)記為“KKK”，KKK是一個(gè)全文

30、唯一的標(biāo)記串。這樣，就在放置標(biāo)記是一個(gè)全文唯一的標(biāo)記串。這樣，就在放置標(biāo)記的地方做了一個(gè)叫做的地方做了一個(gè)叫做“KKK”的的“記號(hào)記號(hào)”。做好。做好“記記號(hào)號(hào)”后，可以用下列方法來(lái)建立指向它的超鏈接：后，可以用下列方法來(lái)建立指向它的超鏈接：轉(zhuǎn)向下一處轉(zhuǎn)向下一處 返回本章目錄 源文檔在源文檔在IE5中的顯示效果如圖中的顯示效果如圖8-14所示。當(dāng)用戶所示。當(dāng)用戶單擊錨標(biāo)單擊錨標(biāo)“電子郵件電子郵件”后，瀏覽器將載入目標(biāo)文件并后，瀏覽器將載入目標(biāo)文件并自標(biāo)記位置開(kāi)始顯示，如圖自標(biāo)記位置開(kāi)始顯示，如圖8-15所示。所示。 返回本章目錄 圖8-14 源文檔的顯示效果 圖8-15 目標(biāo)文檔的顯示效果 8.

31、2.4 在網(wǎng)頁(yè)中使用圖像在網(wǎng)頁(yè)中使用圖像1在網(wǎng)頁(yè)中顯示圖像在網(wǎng)頁(yè)中顯示圖像 在瀏覽器上顯示的圖像必須滿足特定的格式，目前在瀏覽器上顯示的圖像必須滿足特定的格式，目前使用的瀏覽器通常支持使用的瀏覽器通常支持GIF和和JPEG格式的圖像。格式的圖像。 在網(wǎng)頁(yè)中加入圖像所用的標(biāo)簽是在網(wǎng)頁(yè)中加入圖像所用的標(biāo)簽是，該標(biāo)簽的，該標(biāo)簽的主要屬性有：主要屬性有：src屬性、屬性、height屬性、屬性、width屬性、屬性、border屬性、屬性、alt屬性屬性 下面通過(guò)一個(gè)示例來(lái)說(shuō)明下面通過(guò)一個(gè)示例來(lái)說(shuō)明標(biāo)記的使用方法。標(biāo)記的使用方法。圖像的文件名為圖像的文件名為“cake.jpg”，它是當(dāng)前目錄下的子，它

32、是當(dāng)前目錄下的子目錄中的文件。其目錄中的文件。其HTML源文件如下：源文件如下： 返回本章目錄 測(cè)試網(wǎng)頁(yè)測(cè)試網(wǎng)頁(yè)生日快樂(lè)生日快樂(lè) 返回本章目錄 順便指出，如果在同一文件中需要反復(fù)使用一個(gè)相順便指出，如果在同一文件中需要反復(fù)使用一個(gè)相同的圖像文件時(shí)，最好在同的圖像文件時(shí)，最好在標(biāo)記中使用相對(duì)標(biāo)記中使用相對(duì)URL，而不使用絕對(duì)而不使用絕對(duì)URL。 圖8-16 標(biāo)簽功能示意圖 返回本章目錄 2將圖像設(shè)置為錨標(biāo)將圖像設(shè)置為錨標(biāo) 如果在超鏈接標(biāo)簽如果在超鏈接標(biāo)簽和和的中間放置一個(gè)的中間放置一個(gè)標(biāo)簽，則可生成一個(gè)圖像錨標(biāo)。例如：標(biāo)簽，則可生成一個(gè)圖像錨標(biāo)。例如： 8.2.5 框架頁(yè)面框架頁(yè)面 框架能夠?qū)g

33、覽器窗口劃分成數(shù)個(gè)相對(duì)獨(dú)立的子窗框架能夠?qū)g覽器窗口劃分成數(shù)個(gè)相對(duì)獨(dú)立的子窗口，每個(gè)子窗口可以顯示不同的頁(yè)面。用框架劃分屏口，每個(gè)子窗口可以顯示不同的頁(yè)面。用框架劃分屏幕空間可以?xún)?yōu)化頁(yè)面的視覺(jué)效果，并可有效地提高屏幕空間可以?xún)?yōu)化頁(yè)面的視覺(jué)效果，并可有效地提高屏幕利用率。幕利用率。 返回本章目錄 與框架有關(guān)的與框架有關(guān)的HTML語(yǔ)法為語(yǔ)法為 其中其中可以在用可以在用戶瀏覽器不支持框架結(jié)構(gòu)時(shí)顯示一些信息，以免用戶戶瀏覽器不支持框架結(jié)構(gòu)時(shí)顯示一些信息，以免用戶對(duì)空白窗口不知所措。該標(biāo)簽是成對(duì)出現(xiàn)的，位于對(duì)空白窗口不知所措。該標(biāo)簽是成對(duì)出現(xiàn)的，位于和和之間的內(nèi)容就是網(wǎng)之間的內(nèi)容就是網(wǎng)頁(yè)編輯者希望告訴用

34、戶的信息，例如頁(yè)編輯者希望告訴用戶的信息，例如“您的瀏覽器不您的瀏覽器不支持框架顯示支持框架顯示”等。等。 返回本章目錄 子窗口由子窗口由指定，并且可以嵌套。將在指定，并且可以嵌套。將在子窗口中顯示子窗口中顯示HTML文檔的文檔的URL由由標(biāo)簽的標(biāo)簽的src屬性決定。屬性決定。8.2.6 表單表單 標(biāo)簽標(biāo)簽 表單標(biāo)簽表單標(biāo)簽是成對(duì)出現(xiàn)的，位于是成對(duì)出現(xiàn)的，位于和和之間的內(nèi)容就是一個(gè)表單。之間的內(nèi)容就是一個(gè)表單。標(biāo)簽標(biāo)簽有有action和和method兩個(gè)屬性。兩個(gè)屬性。1action屬性屬性 該屬性用于規(guī)定服務(wù)器方用于接收表單信息的程序該屬性用于規(guī)定服務(wù)器方用于接收表單信息的程序

35、文件名（包括路徑）。文件名（包括路徑）。返回本章目錄 例如：表單例如：表單 被提交后，被提交后，Web服務(wù)器上的服務(wù)器上的“l(fā)ogin.asp”就將開(kāi)始就將開(kāi)始運(yùn)行，以接收用戶輸入的信息。運(yùn)行，以接收用戶輸入的信息。2method屬性屬性 該屬性用于規(guī)定表單信息的傳送方式，屬性值可為該屬性用于規(guī)定表單信息的傳送方式，屬性值可為post或或get，默認(rèn)值為，默認(rèn)值為get。 在在與與之間，可以使用除之間，可以使用除以外的任何以外的任何HTML標(biāo)簽，這一特點(diǎn)使得表單可以具有標(biāo)簽，這一特點(diǎn)使得表單可以具有非常豐富的格式。非常豐富的格式。 返回本章目錄 在在FORM的開(kāi)始與結(jié)束標(biāo)記之間，除了可以使用以

36、的開(kāi)始與結(jié)束標(biāo)記之間，除了可以使用以前介紹的那些標(biāo)簽外，還有三個(gè)特殊標(biāo)簽，即前介紹的那些標(biāo)簽外，還有三個(gè)特殊標(biāo)簽，即INPUT（用于在瀏覽器窗口中定義一個(gè)可以供用戶輸入的單（用于在瀏覽器窗口中定義一個(gè)可以供用戶輸入的單行文本框、單選鈕或復(fù)選框等等）、行文本框、單選鈕或復(fù)選框等等）、SELECT（用于（用于在瀏覽器窗口中定義一個(gè)列表框）和在瀏覽器窗口中定義一個(gè)列表框）和TEXTAREA（用（用于在瀏覽器窗口中定義多行文本框）。于在瀏覽器窗口中定義多行文本框）。 標(biāo)簽標(biāo)簽 是表單中最常用的標(biāo)簽。它是一個(gè)單獨(dú)使是表單中最常用的標(biāo)簽。它是一個(gè)單獨(dú)使用的標(biāo)簽，必須嵌套于表單

37、中，用于定義一個(gè)輸入域。用的標(biāo)簽，必須嵌套于表單中，用于定義一個(gè)輸入域。通常在網(wǎng)頁(yè)上所見(jiàn)到的文本框、按鈕等都是由這個(gè)標(biāo)通常在網(wǎng)頁(yè)上所見(jiàn)到的文本框、按鈕等都是由這個(gè)標(biāo)記定義的。記定義的。 返回本章目錄 下面是下面是INPUTINPUT標(biāo)簽的標(biāo)準(zhǔn)格式：標(biāo)簽的標(biāo)準(zhǔn)格式：INPUT type= 其中其中typetype屬性用于指定該輸入域的輸入方式（如文本屬性用于指定該輸入域的輸入方式（如文本框、單選鈕或復(fù)選框等）?？颉芜x鈕或復(fù)選框等）。1 1文字和密碼輸入文字和密碼輸入 返回本章目錄 圖8-18 文字和密碼示例 屬性屬性name=name=“姓名姓名”，定義了文本框在這個(gè)表單中的名，定義了文本框在

38、這個(gè)表單中的名字叫字叫“姓名姓名”。當(dāng)用戶在這個(gè)文本框中輸入信息并送。當(dāng)用戶在這個(gè)文本框中輸入信息并送到到WebWeb服務(wù)器后就激活了相應(yīng)的程序。服務(wù)器后就激活了相應(yīng)的程序。屬性屬性value=value=“HTTP:/HTTP:/”，表示該文本框的默認(rèn)值為，表示該文本框的默認(rèn)值為“HTTPHTTP：/”。對(duì)密碼輸入框而言，用戶輸入的任何字符，都將被顯對(duì)密碼輸入框而言，用戶輸入的任何字符，都將被顯示為示為“* *”。此外，有時(shí)還需要限制用戶輸入字符串的長(zhǎng)度，此時(shí)此外，有時(shí)還需要限制用戶輸入字符串的長(zhǎng)度，此時(shí)應(yīng)設(shè)定應(yīng)設(shè)定maxlengthmaxlength（最大長(zhǎng)度）屬性。例如，一般漢（最大長(zhǎng)度

39、）屬性。例如，一般漢族人的姓名至多為四個(gè)漢字即族人的姓名至多為四個(gè)漢字即8 8個(gè)半角字符，如個(gè)半角字符，如姓名：姓名：input type=text name= maxlength=8 返回本章目錄 圖8-19 單選鈕和復(fù)選框用法示例“重選重選”按鈕可執(zhí)行按鈕可執(zhí)行“重置重置”操作，即當(dāng)用戶單擊此按鈕后，操作，即當(dāng)用戶單擊此按鈕后，表單中所有輸入域中的信息將被重新設(shè)置為默認(rèn)值，以便用戶表單中所有輸入域中的信息將被重新設(shè)置為默認(rèn)值，以便用戶重新輸入信息。重新輸入信息。重置按鈕的格式為重置按鈕的格式為 返回本章目錄 標(biāo)簽和標(biāo)簽和標(biāo)簽標(biāo)簽 標(biāo)簽必須嵌套于標(biāo)簽必須嵌套于標(biāo)簽中使用，用于定

40、義列表標(biāo)簽中使用，用于定義列表框?？颉?biāo)簽必須成對(duì)使用。而標(biāo)簽必須成對(duì)使用。而標(biāo)簽必須嵌套標(biāo)簽必須嵌套標(biāo)簽中使用，用于定義將出現(xiàn)在列表框中的內(nèi)容。標(biāo)簽中使用，用于定義將出現(xiàn)在列表框中的內(nèi)容。 在在標(biāo)簽中，如果包含標(biāo)簽中，如果包含multiplemultiple，則意味著列表框支，則意味著列表框支持同時(shí)選擇多項(xiàng)的操作。而在默認(rèn)情況下，只允許選擇單項(xiàng)持同時(shí)選擇多項(xiàng)的操作。而在默認(rèn)情況下，只允許選擇單項(xiàng) 在在標(biāo)簽中，如果包含標(biāo)簽中，如果包含selectedselected，則意味著該選項(xiàng)在，則意味著該選項(xiàng)在初始狀態(tài)下是被選擇的。初始狀態(tài)下是被選擇的。 返回本章目錄圖8-20 列表框用法示例 8.2.

41、7 表格表格 表格是表格是HTMLHTML文檔中的重要元素，它除具有一般表格的功能外，文檔中的重要元素，它除具有一般表格的功能外，還經(jīng)常被用于編排版面。還經(jīng)常被用于編排版面。 圖圖8-218-21示意了一個(gè)簡(jiǎn)單的表格。該表格由三部分組成：標(biāo)題示意了一個(gè)簡(jiǎn)單的表格。該表格由三部分組成：標(biāo)題（CaptionCaption）、表頭和表數(shù)據(jù)。其中，標(biāo)題用于概述表格內(nèi)容、）、表頭和表數(shù)據(jù)。其中，標(biāo)題用于概述表格內(nèi)容、功能等，可視需要取舍；表頭用于定義列標(biāo)題，也可視需要取功能等，可視需要取舍；表頭用于定義列標(biāo)題，也可視需要取舍；表數(shù)據(jù)是表格的主要內(nèi)容，一般是必須的。舍；表數(shù)據(jù)是表格的主要內(nèi)容，一般是必須的

42、。 在在HTMLHTML中，組成表格的小方格稱(chēng)為單元格（中，組成表格的小方格稱(chēng)為單元格（CellCell）；用于分）；用于分割空間以構(gòu)成表格的直線稱(chēng)為框線（割空間以構(gòu)成表格的直線稱(chēng)為框線（BorderBorder）。）。 返回本章目錄返回本章目錄圖8-21 表格示例 HTML表格的語(yǔ)法結(jié)構(gòu)表格的語(yǔ)法結(jié)構(gòu)與表格有關(guān)的許多標(biāo)簽都需要嵌套使用。一個(gè)單元格是通過(guò)與表格有關(guān)的許多標(biāo)簽都需要嵌套使用。一個(gè)單元格是通過(guò)標(biāo)簽、標(biāo)簽、標(biāo)簽和標(biāo)簽和（或（或）標(biāo)簽嵌套定義）標(biāo)簽嵌套定義的，其描述定位順序是表、行和列。的，其描述定位順序是表、行和列。學(xué)生基本情況表學(xué)生基本情況表姓名姓名性別性別出生日期出

43、生日期 返回本章目錄返回本章目錄 與表格有關(guān)的標(biāo)簽與表格有關(guān)的標(biāo)簽1標(biāo)簽標(biāo)簽 標(biāo)簽是表格的標(biāo)識(shí)符，用于界定表格的范圍。標(biāo)簽是表格的標(biāo)識(shí)符，用于界定表格的范圍。標(biāo)簽可以嵌套在標(biāo)簽可以嵌套在標(biāo)簽中，以構(gòu)造表中表。標(biāo)簽中，以構(gòu)造表中表。標(biāo)簽的主要屬性有：標(biāo)簽的主要屬性有：border屬性、屬性、cellspacing屬性、屬性、cellpadding屬性和屬性和width屬性。屬性。2標(biāo)簽標(biāo)簽 標(biāo)簽應(yīng)成對(duì)出現(xiàn)。位于標(biāo)簽應(yīng)成對(duì)出現(xiàn)。位于和和標(biāo)簽之間的內(nèi)容為表格標(biāo)題。標(biāo)簽之間的內(nèi)容為表格標(biāo)題。標(biāo)簽有兩個(gè)可選屬性：標(biāo)簽有兩個(gè)可選屬性：align和和valign。其中，。其中，align的值可

44、為的值可為left、right或或center，；，；valign的值可為的值可為top或或bottom。3標(biāo)簽標(biāo)簽標(biāo)簽是成對(duì)出現(xiàn)的標(biāo)簽，用于界定表格中的行。標(biāo)簽是成對(duì)出現(xiàn)的標(biāo)簽，用于界定表格中的行。標(biāo)簽有兩個(gè)可選的屬性：標(biāo)簽有兩個(gè)可選的屬性：align和和valign。 返回本章目錄4標(biāo)簽和標(biāo)簽和標(biāo)簽標(biāo)簽 標(biāo)簽和標(biāo)簽和標(biāo)簽都是用來(lái)定義單元格的，都是成對(duì)標(biāo)簽都是用來(lái)定義單元格的，都是成對(duì)出現(xiàn)的標(biāo)簽且應(yīng)嵌套在出現(xiàn)的標(biāo)簽且應(yīng)嵌套在標(biāo)簽內(nèi)使用。這兩個(gè)標(biāo)簽內(nèi)幾乎標(biāo)簽內(nèi)使用。這兩個(gè)標(biāo)簽內(nèi)幾乎可以包含所有的可以包含所有的HTML標(biāo)簽（包括標(biāo)簽（包括標(biāo)簽）。標(biāo)簽）。在默認(rèn)情況下，在默認(rèn)情況下，所界定的單元格

45、中內(nèi)容將被加粗顯示。所界定的單元格中內(nèi)容將被加粗顯示。除此之外，除此之外，標(biāo)簽與標(biāo)簽與標(biāo)簽的的屬性、功能是完全相標(biāo)簽的的屬性、功能是完全相同的。同的。 （或（或）標(biāo)簽還有兩個(gè)屬性，一個(gè)是）標(biāo)簽還有兩個(gè)屬性，一個(gè)是width屬性；屬性；另一個(gè)是另一個(gè)是height屬性。屬性。 此外，還可以用此外，還可以用（或（或）的）的rowspan屬性、屬性、colspan屬性來(lái)定義復(fù)雜表格。屬性來(lái)定義復(fù)雜表格。 返回本章目錄4標(biāo)簽和標(biāo)簽和標(biāo)簽標(biāo)簽 標(biāo)簽和標(biāo)簽和標(biāo)簽都是用來(lái)定義單元格的，都是成對(duì)標(biāo)簽都是用來(lái)定義單元格的，都是成對(duì)出現(xiàn)的標(biāo)簽且應(yīng)嵌套在出現(xiàn)的標(biāo)簽且應(yīng)嵌套在標(biāo)簽內(nèi)使用。這兩個(gè)標(biāo)簽內(nèi)幾乎標(biāo)簽內(nèi)使用。這

46、兩個(gè)標(biāo)簽內(nèi)幾乎可以包含所有的可以包含所有的HTML標(biāo)簽（包括標(biāo)簽（包括標(biāo)簽）。標(biāo)簽）。在默認(rèn)情況下，在默認(rèn)情況下，所界定的單元格中內(nèi)容將被加粗顯示。所界定的單元格中內(nèi)容將被加粗顯示。除此之外，除此之外，標(biāo)簽與標(biāo)簽與標(biāo)簽的的屬性、功能是完全相標(biāo)簽的的屬性、功能是完全相同的。同的。 （或（或）標(biāo)簽還有兩個(gè)屬性，一個(gè)是）標(biāo)簽還有兩個(gè)屬性，一個(gè)是width屬性；屬性；另一個(gè)是另一個(gè)是height屬性。屬性。 此外，還可以用此外，還可以用（或（或）的）的rowspan屬性、屬性、colspan屬性來(lái)定義復(fù)雜表格。屬性來(lái)定義復(fù)雜表格。 返回本章目錄 8.3 級(jí)聯(lián)樣式表級(jí)聯(lián)樣式表CSS 級(jí)聯(lián)樣式表（級(jí)聯(lián)樣式

47、表（Casding Style Sheet）簡(jiǎn)稱(chēng)）簡(jiǎn)稱(chēng)CSS，是以，是以HTML為基礎(chǔ)的語(yǔ)言，用于定義網(wǎng)頁(yè)中內(nèi)容的格式。其主要特點(diǎn)是，為基礎(chǔ)的語(yǔ)言，用于定義網(wǎng)頁(yè)中內(nèi)容的格式。其主要特點(diǎn)是，可以獨(dú)立地為網(wǎng)頁(yè)中的各種對(duì)象定義格式，并可將一種格式可以獨(dú)立地為網(wǎng)頁(yè)中的各種對(duì)象定義格式，并可將一種格式用于多個(gè)網(wǎng)頁(yè)。用于多個(gè)網(wǎng)頁(yè)。 IE3.0和和NC4.0及以后的版本都支持及以后的版本都支持CSS。 CSS克服了克服了HTML文檔內(nèi)容與格式說(shuō)明相混合的缺陷，且提文檔內(nèi)容與格式說(shuō)明相混合的缺陷，且提供了遠(yuǎn)比供了遠(yuǎn)比HTML豐富的格式。此外在使用方法上，也比豐富的格式。此外在使用方法上，也比HTML靈活了許多

48、。靈活了許多。 定義定義CSS樣式時(shí)，不必考慮瀏覽器的兼容性。不支持樣式時(shí)，不必考慮瀏覽器的兼容性。不支持CSS的的瀏覽器能夠自動(dòng)忽略瀏覽器能夠自動(dòng)忽略CSS樣式。樣式。 返回本章目錄8.3.1 樣式定義的語(yǔ)法規(guī)則樣式定義的語(yǔ)法規(guī)則1選擇符的定義方法選擇符的定義方法 下面是一個(gè)下面是一個(gè)HTML文檔的頭部，其中通過(guò)文檔的頭部，其中通過(guò)CSS，對(duì)，對(duì)HTML標(biāo)標(biāo)簽簽和和的格式進(jìn)行了修改。的格式進(jìn)行了修改。CSS示例示例H1color:redH2color:green 位于位于和和之間的部分就是樣式定義。其中：之間的部分就是樣式定義。其中：H1和和H2稱(chēng)為選擇符，稱(chēng)為選擇符，color稱(chēng)為屬性，稱(chēng)

49、為屬性，red、green則稱(chēng)為屬性則稱(chēng)為屬性值。值。 樣式定義的一般格式如下：樣式定義的一般格式如下： 選擇符選擇符 屬性：值；屬性：值；屬性：值；屬性：值； 返回本章目錄2選擇符的分類(lèi)選擇符的分類(lèi)第一類(lèi)選擇符為第一類(lèi)選擇符為HTML標(biāo)簽名，如標(biāo)簽名，如P、BODY、A等。等。第二類(lèi)選擇符為類(lèi)?？梢允雇辉鼐哂胁煌母袷?。第二類(lèi)選擇符為類(lèi)。可以使同一元素具有不同的格式。與元素相關(guān)聯(lián)的，稱(chēng)為相關(guān)類(lèi)選擇符，反之稱(chēng)為獨(dú)立類(lèi)選擇與元素相關(guān)聯(lián)的，稱(chēng)為相關(guān)類(lèi)選擇符，反之稱(chēng)為獨(dú)立類(lèi)選擇符。符。第三類(lèi)選擇符為第三類(lèi)選擇符為ID。其功能與獨(dú)立類(lèi)選擇符相同，定義方法。其功能與獨(dú)立類(lèi)選擇符相同，定義方法也類(lèi)似。

50、只是定義時(shí)，以也類(lèi)似。只是定義時(shí)，以“#”而不是以而不是以“.”開(kāi)始。開(kāi)始。ID選擇符對(duì)選擇符對(duì)JavaScript提供了較強(qiáng)的支持，如果不需編寫(xiě)瀏提供了較強(qiáng)的支持，如果不需編寫(xiě)瀏覽器端腳本而只是用覽器端腳本而只是用CSS指定格式，則應(yīng)選擇類(lèi)選擇符。指定格式，則應(yīng)選擇類(lèi)選擇符。3選擇符的組合、繼承和關(guān)聯(lián)選擇符的組合、繼承和關(guān)聯(lián)在定義選擇符時(shí)，如果需要賦予某些操作符一些相同的屬性在定義選擇符時(shí)，如果需要賦予某些操作符一些相同的屬性值，則可以進(jìn)行組合聲明。值，則可以進(jìn)行組合聲明。在文檔中，選擇符是可以嵌套的。在嵌套結(jié)構(gòu)中，除另有定在文檔中，選擇符是可以嵌套的。在嵌套結(jié)構(gòu)中，除另有定義的情況外，位于

51、內(nèi)層的選擇符將自動(dòng)繼承外層選擇符的格義的情況外，位于內(nèi)層的選擇符將自動(dòng)繼承外層選擇符的格式。式。 返回本章目錄當(dāng)兩個(gè)或多個(gè)選擇符嵌套使用時(shí)，可能需要使嵌套結(jié)構(gòu)中位當(dāng)兩個(gè)或多個(gè)選擇符嵌套使用時(shí)，可能需要使嵌套結(jié)構(gòu)中位于內(nèi)層選擇符中的內(nèi)容具有某種特定的格式，這時(shí)可以對(duì)選于內(nèi)層選擇符中的內(nèi)容具有某種特定的格式，這時(shí)可以對(duì)選擇符進(jìn)行關(guān)聯(lián)定義。擇符進(jìn)行關(guān)聯(lián)定義。增加關(guān)聯(lián)格式說(shuō)明前后的源文檔在瀏覽器中的顯示效果如圖增加關(guān)聯(lián)格式說(shuō)明前后的源文檔在瀏覽器中的顯示效果如圖8-22及及8-23所示。所示。 圖8-22 未關(guān)聯(lián)選擇符的嵌套效果 圖8-23 關(guān)聯(lián)后選擇符的嵌套效果 返回本章目錄8.3.2 樣式表的定義

52、模式樣式表的定義模式在上面的舉例中，樣式定義是在在上面的舉例中，樣式定義是在標(biāo)簽中進(jìn)行的。事標(biāo)簽中進(jìn)行的。事實(shí)上，可以采用若干種模式進(jìn)行樣式定義。實(shí)上，可以采用若干種模式進(jìn)行樣式定義。1在在HTML文檔的頭部定義樣式文檔的頭部定義樣式這就是前面舉例中采用的模式，在此不贅述。這就是前面舉例中采用的模式，在此不贅述。2在在HTML標(biāo)簽內(nèi)定義樣式標(biāo)簽內(nèi)定義樣式可以在可以在HTML標(biāo)簽內(nèi)加入臨時(shí)有效的樣式，采用這種方式所定標(biāo)簽內(nèi)加入臨時(shí)有效的樣式，采用這種方式所定義的樣式不是永久有效的。義的樣式不是永久有效的。3 3在獨(dú)立的樣式表文件中定義樣式在獨(dú)立的樣式表文件中定義樣式可以將樣式定義存儲(chǔ)在獨(dú)立文件中

53、。建立樣式表文件后，就可以將樣式定義存儲(chǔ)在獨(dú)立文件中。建立樣式表文件后，就可以在多個(gè)可以在多個(gè)HTMLHTML文檔中進(jìn)行調(diào)用。文檔中進(jìn)行調(diào)用。這種方法的最大優(yōu)點(diǎn)是，可以十分便捷地對(duì)大量網(wǎng)頁(yè)的格式這種方法的最大優(yōu)點(diǎn)是，可以十分便捷地對(duì)大量網(wǎng)頁(yè)的格式進(jìn)行修改，只要這些網(wǎng)頁(yè)調(diào)用了相同的樣式表文件。進(jìn)行修改，只要這些網(wǎng)頁(yè)調(diào)用了相同的樣式表文件。 返回本章目錄一個(gè)簡(jiǎn)單的樣式表文件內(nèi)容如下所示。一個(gè)簡(jiǎn)單的樣式表文件內(nèi)容如下所示。Pfont-family:華文隸書(shū)華文隸書(shū).d-centertext-align:center如果上面樣式表文件的文件名為如果上面樣式表文件的文件名為sample.css，且與下列

54、源文，且與下列源文檔共處同一目錄，則可以用鏈接方式或?qū)敕绞揭谩n共處同一目錄，則可以用鏈接方式或?qū)敕绞揭谩?鏈接方式：鏈接方式： 導(dǎo)入方式：導(dǎo)入方式： 返回本章目錄8.4 網(wǎng)頁(yè)腳本語(yǔ)言網(wǎng)頁(yè)腳本語(yǔ)言JavaScript8.4.1 JavaScript的基礎(chǔ)知識(shí)的基礎(chǔ)知識(shí)1腳本語(yǔ)言概述腳本語(yǔ)言概述腳本是一種可以完成某些處理和計(jì)算功能的小程序段。與一腳本是一種可以完成某些處理和計(jì)算功能的小程序段。與一般的編程語(yǔ)言不同，這些程序在運(yùn)行前不需要一次性編譯，般的編程語(yǔ)言不同，這些程序在運(yùn)行前不需要一次性編譯，而是在運(yùn)行過(guò)程中被逐行解釋、執(zhí)行。在腳本中所使用的命而是在運(yùn)行過(guò)程中被逐行解釋、執(zhí)行。在腳

55、本中所使用的命令和語(yǔ)句稱(chēng)為腳本語(yǔ)言。令和語(yǔ)句稱(chēng)為腳本語(yǔ)言。腳本語(yǔ)言是對(duì)腳本語(yǔ)言是對(duì)HTML的一個(gè)重要補(bǔ)充。的一個(gè)重要補(bǔ)充。就語(yǔ)法規(guī)范和語(yǔ)句格式而言，腳本語(yǔ)言的語(yǔ)法與一般的編程就語(yǔ)法規(guī)范和語(yǔ)句格式而言，腳本語(yǔ)言的語(yǔ)法與一般的編程語(yǔ)言并沒(méi)有什么區(qū)別，只是為了保證安全，腳本語(yǔ)言不提供語(yǔ)言并沒(méi)有什么區(qū)別，只是為了保證安全，腳本語(yǔ)言不提供可能給瀏覽器方帶來(lái)重大損失的編程資源?？赡芙o瀏覽器方帶來(lái)重大損失的編程資源。目前比較流行的腳本語(yǔ)言有網(wǎng)景公司（目前比較流行的腳本語(yǔ)言有網(wǎng)景公司（Netscape）的）的JavaScript和微軟公司（和微軟公司（Microsoft）的）的VBScript。 返回本章目錄

56、 JavaScript是基于瀏覽器、基于對(duì)象的編程語(yǔ)言，可用于開(kāi)是基于瀏覽器、基于對(duì)象的編程語(yǔ)言，可用于開(kāi)發(fā)瀏覽器端應(yīng)用程序發(fā)瀏覽器端應(yīng)用程序 VBScript是是Microsoft公司在公司在Visual Basic編程語(yǔ)言的基礎(chǔ)編程語(yǔ)言的基礎(chǔ)上設(shè)計(jì)的。上設(shè)計(jì)的。 NC僅支持僅支持JavaScript，而，而IE同時(shí)支持同時(shí)支持JavaScript和和VBScript。此外，在處理自定義對(duì)象時(shí)，。此外，在處理自定義對(duì)象時(shí)，JavaScript比比VBScript能提供更多的屬性和方法。能提供更多的屬性和方法。 2JavaScript的特點(diǎn)的特點(diǎn)JavaScript的主要特點(diǎn)如下：的主要特點(diǎn)如

57、下：JavaScript采用事件驅(qū)動(dòng)機(jī)制。事件驅(qū)動(dòng)的意思是，當(dāng)事件采用事件驅(qū)動(dòng)機(jī)制。事件驅(qū)動(dòng)的意思是，當(dāng)事件發(fā)生時(shí)，發(fā)生時(shí)，JavaScript將作出響應(yīng)。將作出響應(yīng)。JavaScript是安全的語(yǔ)言。它不能對(duì)用戶文件進(jìn)行修改、刪是安全的語(yǔ)言。它不能對(duì)用戶文件進(jìn)行修改、刪除等操作。除等操作。JavaScript是與平臺(tái)無(wú)關(guān)的語(yǔ)言。是與平臺(tái)無(wú)關(guān)的語(yǔ)言。JavaScript不依賴(lài)于具體不依賴(lài)于具體的平臺(tái)，它只依賴(lài)瀏覽器。的平臺(tái)，它只依賴(lài)瀏覽器。 返回本章目錄 3初識(shí)初識(shí)JavaScript 嵌入嵌入HTML文檔的文檔的JavaScript代碼實(shí)際上是作為代碼實(shí)際上是作為HTML文檔文檔的一部分存在

58、的。在用戶使用瀏覽器瀏覽包含的一部分存在的。在用戶使用瀏覽器瀏覽包含JavaScript代代碼的碼的Web頁(yè)面時(shí)，瀏覽器自動(dòng)對(duì)該頁(yè)面時(shí)，瀏覽器自動(dòng)對(duì)該HTML文檔進(jìn)行解析，并執(zhí)文檔進(jìn)行解析，并執(zhí)行其中的行其中的JavaScript代碼。代碼。返回本章目錄JavaScript測(cè)試測(cè)試JavaScript!-d o c u m e n t . w r i t e ( Hello,WebWorld!);-返回本章目錄上面源文檔在瀏覽器中的輸出結(jié)果如圖上面源文檔在瀏覽器中的輸出結(jié)果如圖8-27所示。所示。圖8-27 一個(gè)JavaScript的例子返回本章目錄 8.4.2 JavaScript語(yǔ)言語(yǔ)言8

59、.4.2.1 JavaScript的的數(shù)據(jù)類(lèi)型數(shù)據(jù)類(lèi)型JavaScript是一種弱類(lèi)型的語(yǔ)言，不必事先聲明常量或變量是一種弱類(lèi)型的語(yǔ)言，不必事先聲明常量或變量的數(shù)據(jù)類(lèi)型。在使用或賦值時(shí)，的數(shù)據(jù)類(lèi)型。在使用或賦值時(shí)， JavaScript會(huì)自動(dòng)為常量或會(huì)自動(dòng)為常量或變量選擇最適合的類(lèi)型。變量選擇最適合的類(lèi)型。JavaScript有有以下幾種基本數(shù)據(jù)類(lèi)型：以下幾種基本數(shù)據(jù)類(lèi)型：1數(shù)值數(shù)值型型包括整型數(shù)值和實(shí)型數(shù)值。包括整型數(shù)值和實(shí)型數(shù)值。2字符串型字符串型指用單引號(hào)或雙引號(hào)擴(kuò)起來(lái)的零個(gè)或多個(gè)字符。指用單引號(hào)或雙引號(hào)擴(kuò)起來(lái)的零個(gè)或多個(gè)字符。3 3布爾型布爾型其值僅可為其值僅可為“真真”或或“假假”，

60、分別用，分別用truetrue或或falsefalse表示。表示。4 4空值空值代表什么也沒(méi)有。空值用代表什么也沒(méi)有?？罩涤胣ullnull表示。表示。 返回本章目錄 JavaScript的的變量變量1命名規(guī)則命名規(guī)則JavaScript規(guī)定，變量名可由字母、數(shù)字和下劃線組成，但規(guī)定，變量名可由字母、數(shù)字和下劃線組成，但首字符必須是字母或下劃線。變量名不能與首字符必須是字母或下劃線。變量名不能與JavaScript中的中的關(guān)鍵字發(fā)生沖突。關(guān)鍵字發(fā)生沖突。為增強(qiáng)程序的可讀性，變量名盡量使用能代表變量意義的字為增強(qiáng)程序的可讀性，變量名盡量使用能代表變量意義的字符。符。在多數(shù)情況下，