【正文】 為 tag，就是在文檔需要的地方，插入特定的記號(hào)，來控制文檔內(nèi)容的顯示，這就是文檔格式定義。 HTML 采用 SGML 的“文檔格式定義”概念，通過標(biāo)記與屬性對(duì)一段文本的語義進(jìn)行描述，并提供由一個(gè)文件到另一個(gè)文件、或在一個(gè)文件內(nèi)部不同部分之間的鏈接。 HTML 標(biāo)記是區(qū)分文本各個(gè)部分的分界符 ,用于將 HTML 文檔劃分為不同的邏輯部分（如段落、標(biāo)題等），它描述文檔的結(jié)構(gòu)，與屬性一起向?yàn)g覽器提供該文檔的格式化信息以傳遞文檔的外觀特征。 HTML 是一種文本標(biāo)記語言，而非編程語言。 HTML 文件是普通文本文件，與平臺(tái)無關(guān)，可用任何文本編輯器進(jìn)行編輯，文件擴(kuò)展名為 .htm或 .html。 HTML文檔使用一系列標(biāo)簽將文本組織成特定的結(jié) 構(gòu)，并且可以通過特定的標(biāo)簽使得文檔在瀏覽器中展示時(shí)可以引入豐富的顏色、圖片、文字等信息。 HTML 文檔的結(jié)構(gòu)是由標(biāo)簽包含關(guān)系標(biāo)示的一種層次結(jié)構(gòu)，廳層標(biāo)簽是 html。 標(biāo)簽和屬性 HTML 文 檔 的 內(nèi) 容 通 過 一 系 列 標(biāo) 簽 進(jìn) 行 格 式 化 ， 例 如html,head,/head,/body等都是 HTML 標(biāo)簽。 HTML 標(biāo)簽分為開始標(biāo)簽和結(jié)束標(biāo)簽，開始標(biāo)簽由一對(duì)尖括號(hào)括起來，尖括號(hào)中的文字是標(biāo)簽的名稱，結(jié)束標(biāo)簽與開始標(biāo)簽有相同的名稱，并且在左尖括號(hào)和標(biāo)簽名稱之間加了一個(gè) /； 9 HTML 中的大部分標(biāo)簽都是成對(duì)的， 例如 html和 /html、 head和 /head；一對(duì)標(biāo)簽之間可以包含文字也可以包含其他標(biāo)簽。另外，有一種特殊的寫法tag/，就是將 /寫在尖括號(hào)的前面，這是 tag/tag的簡(jiǎn)寫形式，它表示 tag標(biāo)簽中不包含任何內(nèi)容。 HTML 標(biāo)簽除了可以組織內(nèi)容之外，大多數(shù)的 HTML標(biāo)簽還可以定義一系列的屬性用于補(bǔ)充說明標(biāo)簽的一些附加信息，屬性都寫在開始標(biāo)簽中，例如： body bgcolor=red … /body 表示將該 HTML 頁面的背景色設(shè)置為紅色。 HTML 的常用標(biāo)簽可以分為頁 面標(biāo)簽，格式標(biāo)簽，表格，表單等。 (a)格式標(biāo)簽：一個(gè) HTML 文檔的基本結(jié)構(gòu)，其中用 html、 head、 title和 body規(guī)定了文檔的整體結(jié)構(gòu)， head標(biāo)簽中是頭部信息，其中可以定義一些輔助信息，這些信息不會(huì)顯示在瀏覽器頁面的正文中。 head中除了可以包含title外，還可以包含其他的標(biāo)簽 (link：可以用于鏈接一些其它文檔，最常見的是使用該標(biāo)簽鏈接樣式表，例如 link rel=”stylesheet”type=”text/css”href=””/ 表示 鏈接 ，用它定義的樣式作為本頁的格式。 Meta：用于定義頁面的一些元數(shù)據(jù)信息，最常見的是使用該標(biāo)簽定義頁面的媒體格式和字符編碼方式，例如 meta equiv=”Contenttype”content=”text/html。charset=iso88591” 表示該頁面的類型是 text/html，字符編碼格式是 ISO88591) title定義了頁面的標(biāo)題，它顯示在瀏覽器的標(biāo)題欄中； body標(biāo)簽中的內(nèi)容是 HTML 文檔的主體，需要顯示在瀏覽器頁面正文中的內(nèi)容全 部寫在該標(biāo)簽中。 (b)格式標(biāo)簽：在 HTML 文件中文字的位置、文字之間的回車換行和空格等都不會(huì)被最終顯示到瀏覽器上，要控制 HTML 文檔中的文字最終如何在瀏覽器中布局，需要使用 HTML 的格式標(biāo)簽。 文字控制： HTML 中提供了一個(gè)通用的標(biāo)簽用于設(shè)置文字的屬性，即 font，它是一個(gè)用于設(shè)置文字字體的通用方法，它通過不同屬性來設(shè)置文字的不同方面： size 屬性用于設(shè)置文字的大小、 face 屬性用于設(shè)置字體、 color 屬性用于設(shè)置文字的顏色； hx標(biāo)簽是一組標(biāo)簽的總稱， x可以是 … 它們都表示頁 10 面的標(biāo)題，不 同的 x表示的標(biāo)題級(jí)別不一樣， x越大級(jí)別越低，所包含文字的字體也會(huì)越??；每個(gè)標(biāo)題占一行； b和 strong標(biāo)簽表示將文字加粗； i和 em標(biāo)簽表示將文字變成斜體； u標(biāo)簽表示給文字加下劃線。 布局控制：即對(duì)頁面的布局格式進(jìn)行控制的標(biāo)簽。 Align 屬性通常用于規(guī)定標(biāo)簽內(nèi)容的對(duì)齊方式， hx、 p、 div標(biāo)簽都有該屬性，可以通過將該屬性的值指定為 center、 left 或 right 以用于將內(nèi)容居中、居左或居右對(duì)齊。 (c)表格：表格是 HTML 中使用最多也是最重要的一種技巧，通常大部分網(wǎng)頁設(shè)計(jì)師用 表格控制頁面內(nèi)容在整個(gè)頁面中的分布，并且可以通過使用嵌套的表格將頁面進(jìn)行任意的劃分。表格都用頂層標(biāo)簽 table進(jìn)行定義， th標(biāo)簽用于定義表頭， tr標(biāo)簽用于定義一行， td標(biāo)簽用于定義一行中的一列。 (d)表單：表單在 HTML 中是非常重要的，它提供了一系列可以展現(xiàn)在瀏覽器中并且能夠提供交互的功能組件，例如文本框、密碼框、文本域。按鈕等?？梢允褂帽砀駚斫M織表單中的組件。 (f)其他： a標(biāo)簽主要用于定義一個(gè)超鏈接，其 href屬性用于指定超鏈接的地址； img標(biāo)簽用于在網(wǎng)頁中以鏈接的方式加入 一個(gè)圖片，其 src 屬性用于指定待鏈接圖片的位置； hr標(biāo)簽可以在頁面上加一個(gè)水平的分隔線。 HTML 有很多標(biāo)簽，大部分標(biāo)簽也都定義了很多屬性，熟悉掌握它們對(duì)于Web 應(yīng)用開發(fā)是非常重要的。 11 3 腳本語言 什么是腳本語言 腳本語言（ Script）語言的概念源于 UNIX 操作系統(tǒng)，在 UNIX 操作系統(tǒng)中，將主要以行命令組成的命令集稱為 Shell 腳本程序。 Shell 腳本程序具有一定的控制結(jié)構(gòu)，可以帶參數(shù)，由系統(tǒng)解釋執(zhí)行。除了 UNIX Shell Script 外，在 UNIX 環(huán)境下， 具有強(qiáng)大的字符串處理能力的 Perl語言也是腳本語言的典型代表。 HTML 語言提供較完善的設(shè)計(jì)頁面的功能，但它提供的信息大多是靜態(tài)的。這些信息被下載到客戶計(jì)算機(jī)后，是固定不變的。無法利用客戶計(jì)算機(jī)的計(jì)算能力，也就無法在客戶端處理與用戶的交互，從而無法構(gòu)造出客戶端的交互式動(dòng)態(tài)頁面。一些原本可以在客戶端完成的任務(wù)（如數(shù)據(jù)合法性檢查等）也不得不依靠CGI 規(guī)范提交給服務(wù)器去完成，這一方面加重了服務(wù)器的負(fù)擔(dān)，另一方面也增加了網(wǎng)絡(luò)傳輸量，同時(shí)還加長(zhǎng)了響應(yīng)時(shí)間，降低了實(shí)時(shí)性。另外，對(duì)于用戶來說，設(shè)計(jì) CGI 程序也有相當(dāng)?shù)碾y度 。 JavaScript 和 VBScript 的出現(xiàn)恰好彌補(bǔ)了這一缺憾，它大大提高了客戶端的交互性，使用非常簡(jiǎn)答、靈活，利用它可以設(shè)計(jì)客戶端動(dòng)態(tài)網(wǎng)頁。 本文所介紹的腳本語言是指用于 Web 頁面及程序設(shè)計(jì)的腳本語言，它們通常是嵌入式（嵌入到 HTML 文件中）的、具有解釋執(zhí)行的特征。根據(jù)腳本程序被執(zhí)行的地點(diǎn)不同，可將它們分為客戶端腳本和服務(wù)器端腳本，前者由瀏覽器負(fù)責(zé)解釋執(zhí)行，后者由 Web 服務(wù)器負(fù)責(zé)解釋執(zhí)行。 既可以作為客戶端腳本語言，又可以作為服務(wù)器端腳本語言，而 Perl、 Shell、 Script 以及 PHP 12 等則通常是服務(wù)器端腳本語言。本文主要討論用于客戶端的 JavaScript 語言。 JavaScript 語言 JavaScript 是一種嵌入在 HTML 文件中的腳本語言，它是基于對(duì)象和事件驅(qū)動(dòng)的，能對(duì)諸如鼠標(biāo)單擊、表單輸入、頁面瀏覽等用戶事件做出反應(yīng)并進(jìn)行處理。JavaScript 具有如下特點(diǎn)： (1)簡(jiǎn)單性。 JavaScript 是一種被大幅度簡(jiǎn)化了的編程語言，即使用戶沒有編程經(jīng)驗(yàn)也可較快的掌握它。它不像高級(jí)語言的使用有很嚴(yán)格的限制，而是非常簡(jiǎn)介靈活，例如在 JavaScript 中變 量可以直接使用，不必事先聲明，對(duì)變量的類型規(guī)定也不是十分嚴(yán)格等。 (2)基于對(duì)象。 JavaScript 是基于對(duì)象的，它允許用戶自定義對(duì)象，同時(shí)瀏覽器還提供了大量?jī)?nèi)建對(duì)象，使編程者可以將瀏覽器中不同的元素作為對(duì)象來處理，體現(xiàn)了現(xiàn)代面向?qū)ο蟪绦蛟O(shè)計(jì)的基本思想。但 JavaScript 不是完全面向?qū)ο蟮?，它不支持類和繼承。 (3)可移植性。在大多數(shù)瀏覽器上， JavaScript 腳本程序可以不經(jīng)過修改而直接運(yùn)行。 (4)動(dòng)態(tài)性。 JavaScript 是 DHTML（動(dòng)態(tài) HTML）的一個(gè)十分重要的部分，是設(shè)計(jì)交互式動(dòng)態(tài)網(wǎng)頁 ，特別是“客戶端動(dòng)態(tài)”頁面的重要工具。 這里需要特別強(qiáng)調(diào)一下， JavaScript 語言和 Java 語言的不同。雖然它們?cè)诿?。結(jié)構(gòu)和語言上都很相似，但不能把它們混淆，兩者存在如下重要的差別： (1)Java 是有 Sun 公司推出的新一代的完全面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，它支持類和繼承，主要應(yīng)用與網(wǎng)絡(luò)程序設(shè)計(jì)，對(duì)于非程序設(shè)計(jì)人員來說不易掌握；而JavaScript 只是基于對(duì)象的，主要用于編寫網(wǎng)頁中的腳本，易于學(xué)習(xí)和掌握。 (2)Java 程序是編譯后以類的形式存放在服務(wù)器上，瀏覽器下載到這樣的類，用 Java 虛擬機(jī)去執(zhí)行它 。而 JavaScript 的源代碼不需要編譯，它是嵌入在 HTML文件中的，作為網(wǎng)頁的一部分；當(dāng)使用能處理 JavaScript 語言的瀏覽器瀏覽該網(wǎng)頁時(shí)，瀏覽器將對(duì)該網(wǎng)頁中的 JavaScript 源代碼進(jìn)行識(shí)別、解釋并執(zhí)行。 (3)Java 程序可以單獨(dú)執(zhí)行，但是 JavaScript 程序只能嵌入 HTML 文件中，不能單獨(dú)運(yùn)行。 (4)Java 具有嚴(yán)格的類型限制，但 JavaScript 則比較寬松。 (5)Java 程序的編輯、編譯需要使用專門的開發(fā)工具，如 JDK、 Visual J++等； 13 而 JavaScript 程序則不需要特 殊的開發(fā)環(huán)境，由于它只是作為網(wǎng)頁的一部分嵌入到 HTML文件中，所以編輯 JavaScript程序只要用一般的文本編輯器就可以完成。 4 頁面設(shè)計(jì) 頁面設(shè)計(jì)概述 一般來說， Web 網(wǎng)站開發(fā)的全過程大致分為 5 個(gè)階段：策劃與定義、設(shè)計(jì)、開發(fā)、測(cè)試和發(fā)布。首先要根據(jù)建站的目的和定位進(jìn)行策劃與定義，確定網(wǎng)站風(fēng)格、欄目、布局方式等；接下來要進(jìn)行頁面設(shè)計(jì)和后臺(tái)程序開發(fā)。頁面設(shè)計(jì)包括靜態(tài)頁面設(shè)計(jì)和動(dòng)態(tài)頁面設(shè)計(jì)。靜態(tài)頁面設(shè)計(jì)技術(shù)主要采用的是 HTML。對(duì)于靜態(tài)頁面，用戶只能瀏覽 Web 服務(wù)器上預(yù)先安排好的 信息。但是現(xiàn)在，人們不僅需要瀏覽 Web 提供的信息，而且還需要進(jìn)行信息搜索，開展電子商務(wù)等，這些目標(biāo)是靜態(tài)網(wǎng)頁技術(shù)不能達(dá)到的，而動(dòng)態(tài)網(wǎng)頁卻可以按照訪問者的需要，對(duì)訪問者輸入的信息做出不同的響應(yīng)，提供響應(yīng)信息。所以，動(dòng)態(tài)網(wǎng)頁是發(fā)展的必然趨勢(shì)。 動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)又可分為客戶端和服務(wù)端，客戶端動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)主要使用動(dòng)態(tài)樣式表（ CSS）和在瀏覽器中執(zhí)行的腳本程序，而服務(wù)器端動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)主要使用 CGI、 ASP、 JSP、 PHP 等腳本程序。 動(dòng)態(tài)網(wǎng)頁是由 Web 服務(wù)器動(dòng)態(tài)生成的文件。之所以稱其為“動(dòng)態(tài)”，是因?yàn)榇朔N網(wǎng)頁 的部分甚至全部?jī)?nèi)容都是未確定的。當(dāng)用戶訪問該頁， Web 服務(wù)器按照用戶的請(qǐng)求，通過應(yīng)用程序服務(wù)器對(duì)相關(guān)的服務(wù)器端的數(shù)據(jù)進(jìn)行處理，根據(jù)計(jì)算結(jié)果生成標(biāo)準(zhǔn)的 HTML 文件下傳給用戶瀏覽器。不同的用戶請(qǐng)求以及訪問數(shù)據(jù)的變化都會(huì)隨之生成不同的 HTML 文件下載給用戶。流程如下： 14 圖 41 動(dòng)態(tài)網(wǎng)頁的處理流程 層疊樣式表 CSS 層疊樣式表的概述 HTML 中的顯示特性是通過標(biāo)記的屬性來進(jìn)行設(shè)置的，一旦設(shè)置就難以變化，且不能由程序控制，具有很 大的局限性。 CSS（ Cascading Style Sheets）是W3C 協(xié)會(huì)為彌補(bǔ) HTML 在顯示屬性設(shè)定上的不足而制定的一套擴(kuò)展樣式標(biāo)準(zhǔn)。它擴(kuò)展了 HTML 標(biāo)記的屬性設(shè)定，稱為 CSS 樣式，通過腳本程序控制，可以使頁面的變現(xiàn)方式更加靈活，更具動(dòng)態(tài)性。 CSS 可提供多種樣式，以減少 GIF 動(dòng)畫的使用，從而能設(shè)計(jì)出規(guī)模更小、下載更快的網(wǎng)頁。 CSS 標(biāo)準(zhǔn)中重新定義了 HTML 語言原來的文字樣式，并且增加了一些新概念，如類、層等，可以對(duì)文字重疊、定位等提供更加豐富的樣式；同時(shí) CSS 可進(jìn)行集中樣式管理。 CSS 還允許將樣式定義 單獨(dú)存儲(chǔ)在樣式文件中，這樣把要顯示的內(nèi)容和顯示樣式的定義分離開，便于多個(gè) HTML 文件共享樣式定義。另外一個(gè) HTML 文件也可以引用多個(gè) CSS 樣式文件中的樣式定義。 所謂“層疊”，實(shí)際就是將顯示樣式獨(dú)立于顯示的內(nèi)容，進(jìn)行分類管理，如分為字體樣式、顏色樣式等，需要使用樣式的 HTML 文件進(jìn)行套用即可。 CSS 樣式表定義的基本語法為： 選擇符（ selector） {規(guī)則（ rule）表 } Web 瀏覽器 Web 服務(wù)器 請(qǐng)求 響應(yīng) 動(dòng)態(tài)頁面 HTML 應(yīng)用程序服務(wù)器 步驟一： Web 瀏覽器請(qǐng)求動(dòng)態(tài)頁 步驟二： Web服務(wù)器查找該頁并將其傳遞給應(yīng)用程序服務(wù)器 步驟三：應(yīng)用程序服務(wù)器查找并執(zhí)行該頁中的動(dòng)態(tài)指令 步驟五： Web 服務(wù)器將完成的頁發(fā)送回請(qǐng)求瀏覽器 步驟四：應(yīng)用程序服務(wù)器將完成的頁傳遞回 Web 服務(wù)器 15 其中： (1)選擇符是指要引用的樣式的對(duì)象