1.1 初識網(wǎng)頁

網(wǎng)頁（Web Page）是網(wǎng)站中的一個(gè)頁面，是構(gòu)成網(wǎng)站的基本元素，通常是HTML格式（文件擴(kuò)展名為.html、.htm、.asp、.aspx、.php或者.jsp等）。文字和圖片是構(gòu)成網(wǎng)頁的兩個(gè)最基本的元素，并通過網(wǎng)頁瀏覽器來閱讀。

1.1.1 網(wǎng)頁的構(gòu)成

Internet中的網(wǎng)頁內(nèi)容各異，然而多數(shù)網(wǎng)頁都是由一些基本的版塊組成的，包括Logo、導(dǎo)航條、Banner、內(nèi)容版塊、版尾和版權(quán)等。

1. Logo圖標(biāo)

Logo是企業(yè)或網(wǎng)站的標(biāo)志，是徽標(biāo)或者商標(biāo)的英文說法，起到對徽標(biāo)擁有公司的識別和推廣的作用。通過形象的Logo，可以讓瀏覽者記住公司主體和品牌文化。網(wǎng)絡(luò)中的Logo徽標(biāo)主要是各個(gè)網(wǎng)站用來與其他網(wǎng)站鏈接的圖形標(biāo)志，代表一個(gè)網(wǎng)站或網(wǎng)站的一個(gè)版塊。例如，微軟的Logo，如下圖所示。

2. 導(dǎo)航條

導(dǎo)航條是網(wǎng)站的重要組成標(biāo)簽。合理安排的導(dǎo)航條可以幫助瀏覽者迅速查找需要的信息。例如，新浪網(wǎng)的導(dǎo)航條，如下圖所示。

3. Banner

Banner的中文直譯為旗幟、網(wǎng)幅或橫幅，意譯則為網(wǎng)頁中的廣告。多數(shù)Banner都以JavaScript技術(shù)或Flash技術(shù)制作，通過一些動畫效果，展示更多的內(nèi)容，并吸引用戶觀看，如下圖所示。

4. 內(nèi)容版塊

網(wǎng)頁的內(nèi)容版塊通常是網(wǎng)頁的主體部分。這一版塊可以包含各種文本、圖像、動畫、超鏈接等。例如，蔡司光學(xué)網(wǎng)站的內(nèi)容版塊，如下圖所示。

5. 版尾版塊

版尾是網(wǎng)頁頁面的最底端版塊，通常放置網(wǎng)站的聯(lián)系方式、友情鏈接和版權(quán)信息等內(nèi)容，如下圖所示。

1.1.2 靜態(tài)網(wǎng)頁

網(wǎng)頁可以從技術(shù)上分為靜態(tài)網(wǎng)頁或者動態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是指網(wǎng)站的網(wǎng)頁內(nèi)容“固定不變”，當(dāng)用戶瀏覽器通過互聯(lián)網(wǎng)的HTTP（Hypertext Transport Protocol）協(xié)議向Web服務(wù)器請求提供網(wǎng)頁內(nèi)容時(shí)，服務(wù)器僅僅是將原已設(shè)計(jì)好的靜態(tài)HTML文檔傳送給用戶瀏覽器，如下圖所示。

隨著技術(shù)的發(fā)展，在HTML頁面中添加樣式表、客戶端腳本、Flash動畫、Java Applet小程序和ActiveX控件等，會使頁面的顯示效果更加美觀和生動。但是，這只不過是視覺動態(tài)效果而已，它仍然不具備與客戶端進(jìn)行交互的功能。常見的靜態(tài)頁面以.html或者.htm為擴(kuò)展名，如下圖所示。

1.1.3 動態(tài)網(wǎng)頁

這里說的動態(tài)網(wǎng)頁，與網(wǎng)頁上的各種動畫、滾動字幕等視覺上的“動態(tài)效果”沒有直接關(guān)系，動態(tài)網(wǎng)頁可以是純文字內(nèi)容，也可以是包含各種動畫的內(nèi)容，這些只是網(wǎng)頁具體內(nèi)容的表現(xiàn)形式，無論網(wǎng)頁是否具有動態(tài)效果，采用動態(tài)網(wǎng)站技術(shù)生成的網(wǎng)頁都稱為“動態(tài)網(wǎng)頁”。

動態(tài)網(wǎng)頁在于可以根據(jù)先前制定好的程序頁面，以及用戶的不同請求返回其相應(yīng)的數(shù)據(jù)。動態(tài)頁面常見的擴(kuò)展名有：.asp、.php、.jsp、.cgi等。

動態(tài)網(wǎng)頁的優(yōu)點(diǎn)是效率高、更新快、移植性強(qiáng)，從而快速地達(dá)到所見即所得的目的，但是它的優(yōu)點(diǎn)同樣也是它的缺點(diǎn)，其工作流程如下圖所示。

動態(tài)頁面通常可以通過網(wǎng)站后臺管理系統(tǒng)對網(wǎng)站的內(nèi)容進(jìn)行更新管理，而前端顯示的內(nèi)容可以隨著后臺數(shù)據(jù)的更改而改變，如發(fā)布新聞、發(fā)布公司產(chǎn)品、交流互動、博客、學(xué)校網(wǎng)等，如下圖所示。

下面就常見的幾種動態(tài)網(wǎng)技術(shù)來做簡單的介紹。

1. ASP技術(shù)

ASP（Active Server Pages，動態(tài)服務(wù)網(wǎng)頁）是微軟公司開發(fā)的一種由VBScript腳本語言或JavaScript腳本語言調(diào)用FSO（File System Object，文件系統(tǒng)對象）組件實(shí)現(xiàn)的動態(tài)網(wǎng)頁技術(shù)。

ASP技術(shù)必須通過Windows的ODBC與后臺數(shù)據(jù)庫通信，因此只能應(yīng)用于Windows服務(wù)器中。ASP技術(shù)的解釋器包括兩種，即Windows 9X系統(tǒng)的PWS和Windows NT系統(tǒng)的IIS，如下圖所示。

2. ASP.NET技術(shù)

ASP.NET是由微軟公司開發(fā)的ASP后續(xù)技術(shù)，其可由C#、VB.net、Perl及Python等編程語言編寫，通過調(diào)用System.Web命名空間實(shí)現(xiàn)各種網(wǎng)頁信息處理工作。

ASP.NET技術(shù)主要應(yīng)用于Windows NT系統(tǒng)中，需要IIS及.NET Framework的支持。通過Mono平臺，ASP.NET也可以運(yùn)行于其他非Windows系統(tǒng)中，如下圖所示。

3. JSP技術(shù)

JSP（JavaServer Pages，Java服務(wù)網(wǎng)頁）是由太陽計(jì)算機(jī)系統(tǒng)公司開發(fā)的，以Java編寫，動態(tài)生成HTML、XML或其他格式文檔的技術(shù)。

JSP技術(shù)可應(yīng)用于多種平臺，包括Windows、Linux、UNIX及Solaris。JSP技術(shù)的特點(diǎn)在于，如果客戶端第一次訪問JSP頁面，服務(wù)器將先解釋源程序的Java代碼，然后執(zhí)行頁面的內(nèi)容，因此速度較慢。而如果客戶端是第二次訪問，則服務(wù)器將直接調(diào)用Servlet，無需再對代碼進(jìn)行解析，因此速度較快，如下圖所示。

4. PHP技術(shù)

PHP（Personal Home Page，個(gè)人主頁）也是一種跨平臺的網(wǎng)頁后臺技術(shù)，最早由丹麥人Rasmus Lerdorf開發(fā)，并由PHP Group和開放源代碼社群維護(hù)，是一種免費(fèi)的網(wǎng)頁腳本語言。

PHP是一種應(yīng)用廣泛的語言，其多在服務(wù)器端執(zhí)行，通過PHP代碼產(chǎn)生網(wǎng)頁，并提供對數(shù)據(jù)庫的讀取。

1.1.4 數(shù)據(jù)庫

數(shù)據(jù)庫是“按照數(shù)據(jù)結(jié)構(gòu)來組織、存儲和管理數(shù)據(jù)的倉庫”。在日常工作中，常常需要把某些相關(guān)的數(shù)據(jù)放進(jìn)“倉庫”，并根據(jù)管理的需要進(jìn)行相應(yīng)的處理。

大家知道數(shù)據(jù)庫是用于存儲數(shù)據(jù)內(nèi)容的，而對生活中一個(gè)事件或者一類問題，如何將它們存儲到數(shù)據(jù)庫中呢？在學(xué)習(xí)數(shù)據(jù)庫之前，先來了解一下數(shù)據(jù)庫的概念。

1. 數(shù)據(jù)與信息

為了了解世界、交流信息，人們需要描述事物。在日常生活中，可以直接用自然語言（如漢語）來描述。如果需要將這些事物記錄下來，也可以將事物變成信息進(jìn)行存儲。而信息是對客觀事物屬性的反映，也是經(jīng)過加工處理，并對人類客觀行為產(chǎn)生影響的數(shù)據(jù)表現(xiàn)形式。

例如，在計(jì)算機(jī)中，為了存儲和處理這些事物，需要抽象地描述這些事物的特征，而這些特征，正是在數(shù)據(jù)庫中所存儲的數(shù)據(jù)。數(shù)據(jù)是描述事物的符號記錄，描述事物的符號可以是數(shù)字，也可以是文字、圖形、圖像、聲音、語言等多種表現(xiàn)形式。

下面以“學(xué)生信息表”為例，通過學(xué)號、姓名、性別、年齡、系別、專業(yè)和年級等內(nèi)容，來描述學(xué)生在校的特征。

在這里的學(xué)生記錄就是信息。在數(shù)據(jù)庫中，記錄與事物的屬性是對應(yīng)的關(guān)系，其表現(xiàn)如下圖所示。

可以把數(shù)據(jù)庫理解為存儲在一起的相互有聯(lián)系的數(shù)據(jù)集合，數(shù)據(jù)被分門別類、有條不紊地保存。而應(yīng)用于網(wǎng)站時(shí)，則需要注意一些細(xì)節(jié)問題，即這些特征需要用字母（英文或者拼音）來表示，避免不兼容性問題的發(fā)生。例如，對于描述用戶注冊信息，如下圖所示。

其中，每個(gè)特征中字母所代表的含義見下表。

2. 數(shù)據(jù)庫

綜上所述，數(shù)據(jù)庫（Database，DB）是存儲在一起的相關(guān)數(shù)據(jù)的集合，這些數(shù)據(jù)是結(jié)構(gòu)化的，無有害的或不必要的冗余，并為多種應(yīng)用服務(wù)；數(shù)據(jù)的存儲獨(dú)立于使用它的程序；對數(shù)據(jù)庫插入新數(shù)據(jù)，修改和檢索原有數(shù)據(jù)均能按一種公用的和可控制的方式進(jìn)行。當(dāng)某個(gè)系統(tǒng)中存在結(jié)構(gòu)上完全分開的若干個(gè)數(shù)據(jù)庫時(shí)，則該系統(tǒng)包含一個(gè)“數(shù)據(jù)庫集合”。這是J.Martin給數(shù)據(jù)庫下的一個(gè)比較完整的定義。

因此，以Access數(shù)據(jù)庫為例，可以將這個(gè)“數(shù)據(jù)倉庫”以表的形式表現(xiàn)出來。其中，每條記錄中存儲的內(nèi)容即所指的信息。例如，在“學(xué)生信息表”中，顯示了每位學(xué)生的數(shù)據(jù)存儲情況，如下圖所示。

3. 數(shù)據(jù)庫管理系統(tǒng)

數(shù)據(jù)庫管理系統(tǒng)（Database Management System，DBMS）是一種操縱和管理數(shù)據(jù)庫的大型軟件，是用于建立、使用和維護(hù)數(shù)據(jù)庫的。它對數(shù)據(jù)庫進(jìn)行統(tǒng)一的管理和控制，以保證數(shù)據(jù)庫的安全性和完整性。

用戶通過DBMS訪問數(shù)據(jù)庫中的數(shù)據(jù)，數(shù)據(jù)庫管理員也通過DBMS進(jìn)行數(shù)據(jù)庫的維護(hù)工作。DBMS提供多種功能，可使多個(gè)應(yīng)用程序和用戶用不同的方法在同時(shí)或不同時(shí)刻去建立、修改和詢問數(shù)據(jù)庫。主要包括以下幾方面的功能。

□ 數(shù)據(jù)定義功能

DBMS提供數(shù)據(jù)定義語言（Data Definition Language，簡稱DDL），用戶通過它可以方便地對數(shù)據(jù)庫中的數(shù)據(jù)對象進(jìn)行定義。例如，在Access數(shù)據(jù)表中，可以定義數(shù)據(jù)的類型、數(shù)據(jù)的屬性（如字段大小、格式）等，如下圖所示。

□ 數(shù)據(jù)操縱功能

DBMS還提供數(shù)據(jù)操縱語言（Data Manipulation Language，簡稱DML），用戶可以使用DML操縱數(shù)據(jù)，實(shí)現(xiàn)對數(shù)據(jù)庫的基本操作，如查詢、插入、刪除和修改等。例如，在“學(xué)生信息表”中，用鼠標(biāo)右擊任意記錄，執(zhí)行【刪除記錄】命令，即可刪除數(shù)據(jù)內(nèi)容，如下圖所示。

□ 數(shù)據(jù)庫的運(yùn)行管理

數(shù)據(jù)庫在建立、運(yùn)用和維護(hù)時(shí)，由數(shù)據(jù)庫管理系統(tǒng)統(tǒng)一管理、控制，以保證數(shù)據(jù)的安全性、完整性。

□ 數(shù)據(jù)庫的建立和維護(hù)功能

它包括數(shù)據(jù)庫初始數(shù)據(jù)的輸入、轉(zhuǎn)換功能；數(shù)據(jù)庫的轉(zhuǎn)儲、恢復(fù)功能；數(shù)據(jù)庫的管理重組功能和性能監(jiān)視、分析功能等。這些功能通常是由一些實(shí)用程序完成的。

4. 數(shù)據(jù)庫的作用

在動態(tài)網(wǎng)站建設(shè)中，數(shù)據(jù)庫發(fā)揮著不可替代的作用。它用于存儲網(wǎng)站中的信息，可以包含靜止的和經(jīng)常需要更換的內(nèi)容。通過對數(shù)據(jù)庫中相應(yīng)部分內(nèi)容的調(diào)整，可以使網(wǎng)站的內(nèi)容更加靈活，并且對這些信息進(jìn)行更新和維護(hù)也更加方便、快捷。

□ 新聞系統(tǒng)

如果要在網(wǎng)站中放置新聞，其更新的頻率往往比較大，而通過數(shù)據(jù)庫功能可以快速地發(fā)布信息，且很容易存儲以前的新聞，便于網(wǎng)站瀏覽者和管理者查閱，同時(shí)也避免了直接修改主要頁面，以保持網(wǎng)站的穩(wěn)定性，如下圖所示。

□ 產(chǎn)品管理

產(chǎn)品管理是網(wǎng)站數(shù)據(jù)庫的重要應(yīng)用，如果網(wǎng)站中有大量的產(chǎn)品需要展示和銷售，那么使用數(shù)據(jù)庫可以方便地進(jìn)行分類，把產(chǎn)品更有條理、更清晰地展示給客戶。并且方便日后的維護(hù)、檢索與儲存，如下圖所示。

□ 收集信息

普通的靜態(tài)頁面是無法收集瀏覽者的信息的，而管理者為了加強(qiáng)網(wǎng)站的營銷效果，往往需要搜集大量潛在客戶的信息，或者要求來訪者成為會員，從而提供更多的服務(wù)，如下圖所示。

□ 搜索功能

如果站內(nèi)提供大量的信息而沒有搜索功能，瀏覽者只能依靠清晰的導(dǎo)航系統(tǒng)，而對于一個(gè)新手往往要花些時(shí)間搜索網(wǎng)頁，有時(shí)候甚至無法達(dá)到目的。此時(shí)，提供方便的站內(nèi)搜索不僅可以使網(wǎng)站結(jié)構(gòu)清晰，而且有利于需求信息的查找，節(jié)省瀏覽者的時(shí)間，如下圖所示。

□ BBS論壇

BBS對于企業(yè)而言，不僅可以增加與訪問者的互動，更重要的是可以加強(qiáng)售前、售后服務(wù)和增加新產(chǎn)品開發(fā)的途徑。利用BBS可以收集客戶反饋信息，對新產(chǎn)品以及企業(yè)發(fā)展的看法、投訴等，增強(qiáng)企業(yè)與消費(fèi)者的互動，提高客戶服務(wù)質(zhì)量和效率，如下圖所示。

1.2 W3C概述

網(wǎng)頁標(biāo)準(zhǔn)化體系簡稱W3C，它是由萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）建立的一種規(guī)范網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)集。

基于網(wǎng)頁標(biāo)準(zhǔn)化體系，網(wǎng)頁的設(shè)計(jì)者可以通過簡單的代碼，在多種不同的瀏覽器平臺中顯示一個(gè)統(tǒng)一的頁面。該體系的建立，大大提高了設(shè)計(jì)人員開發(fā)網(wǎng)頁的效率，減輕了網(wǎng)頁設(shè)計(jì)工作的復(fù)雜性，免去了人們編寫兼容性代碼的麻煩。

1.2.1 了解W3C

網(wǎng)頁標(biāo)準(zhǔn)化（W3C）是針對網(wǎng)頁代碼開發(fā)提出的一種具體的標(biāo)準(zhǔn)規(guī)范。自從世界上第一個(gè)網(wǎng)頁瀏覽器WorldWideWeb在1990年誕生以來，網(wǎng)頁代碼的編寫長期沒有一個(gè)統(tǒng)一的規(guī)范，而是依靠一種只包含少量標(biāo)簽的HTML（HyperText Markup Language，超文本標(biāo)記語言）作為基本的編寫語言。

1993年，第一款針對個(gè)人用戶的網(wǎng)頁瀏覽器Mosaic出現(xiàn)，極大地引發(fā)了互聯(lián)網(wǎng)的熱潮，受到了很多用戶的歡迎。Mosaic也是第一種支持網(wǎng)頁圖像的瀏覽器，在Mosaic瀏覽器中，開發(fā)者為HTML定義了<img>標(biāo)簽，以方便地顯示圖像，如下圖所示。

早期的HTML語法被定義為松散的規(guī)則，因此誕生了眾多的版本，既包括1982年開發(fā)的原始版本，又包括大量增強(qiáng)的版本。版本的混亂使得很多網(wǎng)頁只能在某一種特定的瀏覽器下被正常瀏覽。為了保證網(wǎng)頁在盡可能多的用戶瀏覽器中正常顯示，網(wǎng)頁設(shè)計(jì)者必須耗費(fèi)更多的精力。

1994年網(wǎng)景公司的NetScape Navigator瀏覽器誕生。幾乎與此同時(shí)，微軟公司通過收購的方式發(fā)行了Internet Explorer瀏覽器。自此，網(wǎng)景公司和微軟公司在爭奪網(wǎng)頁瀏覽器市場時(shí)進(jìn)行了一場為時(shí)3年的“瀏覽器大戰(zhàn)”。在這場競爭中，雙方都為瀏覽器添加了一些獨(dú)有的標(biāo)簽。這一舉動又造成了大量互不兼容的網(wǎng)頁產(chǎn)生，使設(shè)計(jì)兼容多種瀏覽器的網(wǎng)頁變得非常困難。

1995年，人們?yōu)楸苊庖驗(yàn)g覽器競爭而導(dǎo)致的開發(fā)困難，提出了建立一種統(tǒng)一的HTML標(biāo)準(zhǔn)，以適應(yīng)所有瀏覽器平臺。這一標(biāo)準(zhǔn)最初被稱為HTML+計(jì)劃，后被命名為HTML 2.0。由于缺乏瀏覽器的支持，HTML 2.0并未成為實(shí)際的標(biāo)準(zhǔn)。

1996年，剛成立的W3C繼承了HTML 2.0的思路，提出了HTML 3.0標(biāo)準(zhǔn)，并根據(jù)該標(biāo)準(zhǔn)提供了更多新的特性與功能，加入了很多特定瀏覽器的元素與屬性。1996年1月，W3C公布了HTML 3.2標(biāo)準(zhǔn)，并正式成為大多數(shù)網(wǎng)頁瀏覽器支持的標(biāo)準(zhǔn)。自此，網(wǎng)頁標(biāo)準(zhǔn)化開始為絕大多數(shù)網(wǎng)頁設(shè)計(jì)者所重視。

隨著多媒體技術(shù)的發(fā)展與個(gè)人計(jì)算機(jī)性能的快速提高，簡單的文字與圖像已經(jīng)不能滿足用戶的需求，因此，W3C逐漸為網(wǎng)頁標(biāo)準(zhǔn)化添加了更多元素。其將HTML標(biāo)準(zhǔn)定義為網(wǎng)頁標(biāo)準(zhǔn)化結(jié)構(gòu)語言，并增加了網(wǎng)頁標(biāo)準(zhǔn)化表現(xiàn)語言——CSS技術(shù)（Cascading Style Sheets，層疊樣式表）以及符合ECMA（ECMA國際，一個(gè)國際信息與電信標(biāo)準(zhǔn)化組織，前身為歐洲電氣工業(yè)協(xié)會）標(biāo)準(zhǔn)的網(wǎng)頁標(biāo)準(zhǔn)化行為語言——ECMAScript腳本語言。

2000年1月，W3C發(fā)布了結(jié)合XML（eXtensible Markup Language，可擴(kuò)展的標(biāo)記語言）技術(shù)和HTML的新標(biāo)記語言XHTML（eXtensible HyperText Markup Language，可擴(kuò)展的超文本標(biāo)記語言），并將其作為新的網(wǎng)頁標(biāo)準(zhǔn)化結(jié)構(gòu)語言。

目前，XHTML語言已經(jīng)成為網(wǎng)頁編寫的首選結(jié)構(gòu)語言，其不僅被應(yīng)用在普通的計(jì)算機(jī)中，還被廣泛應(yīng)用于智能手機(jī)、PDA、機(jī)頂盒，以及各種數(shù)字家電等。由XHTML延伸出的多種標(biāo)準(zhǔn)，為各種數(shù)字設(shè)備所支持。

1.2.2 W3C的結(jié)構(gòu)

作為整個(gè)網(wǎng)頁標(biāo)準(zhǔn)化體系的支撐，網(wǎng)頁結(jié)構(gòu)語言經(jīng)歷了從傳統(tǒng)混合了描述與結(jié)構(gòu)的HTML語言到如今結(jié)構(gòu)化的XHTML語言，其間發(fā)生了巨大的變化。

1. 傳統(tǒng)HTML語言

傳統(tǒng)HTML結(jié)構(gòu)語言是指基于HTML 3.2及之前版本的HTML語言。早期的HTML語言只能夠描述簡單的網(wǎng)頁結(jié)構(gòu)，包括網(wǎng)頁的頭部、主體以及段落、列表等。隨著人們對網(wǎng)頁美觀化的要求越來越高，HTML被人們添加了很多擴(kuò)展功能。例如，可表示文本的顏色、字體的樣式等。

功能的逐漸增多，使得HTML成為了一種混合結(jié)構(gòu)性語句與描述性語句的復(fù)雜語言。例如，在HTML 3.2中，既包含了表示結(jié)構(gòu)的<head>、<title>和<body>等標(biāo)簽，也包含了描述性的<b>、<font>等標(biāo)簽。

大量復(fù)雜的描述性標(biāo)簽使得網(wǎng)頁更加美觀，但同時(shí)也導(dǎo)致了網(wǎng)頁設(shè)計(jì)的困難。例如，在進(jìn)行一個(gè)簡單的、內(nèi)容非常少的網(wǎng)頁設(shè)計(jì)時(shí)，可以通過HTML 3.2中的<font>標(biāo)簽對網(wǎng)頁中的文本進(jìn)行描述，如下所示。

然而，在對大量不同樣式的文本進(jìn)行描述時(shí)，HTML 3.2版本就顯得力不從心了。網(wǎng)頁的設(shè)計(jì)者不得不在每一句文字上添加<font>標(biāo)簽，并書寫大量的代碼。這些相同的標(biāo)簽除了給書寫造成麻煩以外，還容易發(fā)生嵌套錯誤，給瀏覽器的解析帶來困難，造成網(wǎng)頁文檔的臃腫。

因此，隨著網(wǎng)頁信息內(nèi)容的不斷豐富以及互聯(lián)網(wǎng)的不斷發(fā)展，傳統(tǒng)的HTML結(jié)構(gòu)語言已不堪重負(fù)，人們迫切需要一種新的、簡便的方式來實(shí)現(xiàn)網(wǎng)頁的模塊化，降低網(wǎng)頁開發(fā)的難度和成本。

2. XHTML結(jié)構(gòu)語言

XHTML結(jié)構(gòu)語言是一種基于HTML 4.01與XML的新結(jié)構(gòu)化語言。其既可以看作HTML 4.01的發(fā)展和延伸，又可以看作XML語言的一個(gè)子集。

在XHTML語言中，摒棄了所有描述性的HTML標(biāo)簽，僅保留了結(jié)構(gòu)化的標(biāo)簽，以減小文件內(nèi)容對結(jié)構(gòu)的影響，同時(shí)減少網(wǎng)頁設(shè)計(jì)人員輸入代碼的工作量。

W3C對XHTML標(biāo)簽、屬性、屬性值等內(nèi)容的書寫格式做了嚴(yán)格規(guī)范，以提高代碼在各種平臺下的解析效率。無論是在計(jì)算機(jī)中，還是在智能手機(jī)、PDA手持計(jì)算機(jī)、機(jī)頂盒數(shù)字設(shè)備中，XHTML文檔都可以被方便地瀏覽和解析。

1.2.3 W3C的表現(xiàn)

網(wǎng)頁的標(biāo)準(zhǔn)化不僅需要結(jié)構(gòu)的標(biāo)準(zhǔn)化，還需要表現(xiàn)的標(biāo)準(zhǔn)化。早期的網(wǎng)頁完全依靠HTML中的描述性標(biāo)簽來實(shí)現(xiàn)網(wǎng)頁的表現(xiàn)化，設(shè)置網(wǎng)頁中各種元素的樣式。隨著HTML 3.2被大多數(shù)網(wǎng)站停止使用，以及HTML 4.01和XHTML的不斷普及，人們迫切地需要一種新的方式來定義網(wǎng)頁中各種元素的樣式。

HTML 3.2在描述大量文本的樣式時(shí)暴露了一些問題，為了解決這些問題，可以從面向?qū)ο蟮木幊陶Z言中引入類庫的概念，通過在網(wǎng)頁標(biāo)簽中添加對類庫樣式的引用，實(shí)現(xiàn)樣式描述的可重用性，提高代碼的效率。這些類庫的集合，就被稱作CSS層疊樣式表（簡稱CSS樣式表或CSS）。

1. CSS樣式表

CSS樣式表是一種列表，其中可以包含多種定義網(wǎng)頁標(biāo)簽的樣式。每一條CSS的樣式都包含3個(gè)部分，其規(guī)范寫法如下所示。

在上面的偽代碼中，各關(guān)鍵詞的含義如下。

□ Selector 選擇器，相當(dāng)于表格表頭的名稱。選擇器提供了一個(gè)對網(wǎng)頁標(biāo)簽的接口，供網(wǎng)頁標(biāo)簽調(diào)用。

□ Property 屬性，是描述網(wǎng)頁標(biāo)簽的關(guān)鍵詞。根據(jù)屬性的類型，可對網(wǎng)頁標(biāo)簽的多種不同屬性進(jìn)行定義。

□ value 屬性值，是描述網(wǎng)頁標(biāo)簽不同屬性的具體值。

在CSS中，允許為某一個(gè)選擇器設(shè)置多個(gè)屬性值，但需要將這些屬性以半角分號“;”隔開，如下所示。

同時(shí)，CSS還允許對同一個(gè)選擇器的相同屬性進(jìn)行重復(fù)描述。由于各種瀏覽器在解析CSS代碼時(shí)使用逐行解析的方式，因此這種重復(fù)描述將以最后一次進(jìn)行的描述內(nèi)容為準(zhǔn)。例如，一個(gè)名為simpleClass的類中先描述所有文本的顏色為紅色（#FF0000），然后再描述該類中所有文本的顏色為綠色（#00FF00），如下所示。

在上面的代碼中，對simpleClass中的內(nèi)容進(jìn)行了重復(fù)描述，根據(jù)逐行解析的規(guī)則，最終顯示的這些文本顏色將為綠色。用戶也可將這兩個(gè)重復(fù)的樣式寫在同一個(gè)選擇器中，代碼如下所示。

2. CSS的顏色規(guī)范

網(wǎng)頁標(biāo)簽的樣式包含多種類型，其中，最常見的就是顏色。CSS允許用戶使用多種方式描述網(wǎng)頁標(biāo)簽的樣式，包括十六進(jìn)制數(shù)值、三原色百分比、三原色比例值和顏色的名稱等4種方法。

□ 十六進(jìn)制數(shù)值

十六進(jìn)制數(shù)值是最常用的顏色表示方法，其將顏色拆分為紅、綠、藍(lán)三原色的色度，然后通過6位十六進(jìn)制數(shù)字表示。其中，前兩位表示紅色的色度，中間兩位表示綠色的色度，后兩位表示藍(lán)色的色度，并在十六進(jìn)制數(shù)字前加“#”號以方便識別。

例如，以十六進(jìn)制數(shù)值分別表示紅色、綠色、藍(lán)色、黑色和白色等顏色，見下表。

□ 三原色百分比

三原色百分比也是一種CSS色彩表示方法。在三原色百分比的表示方法中，將三原色的色度轉(zhuǎn)換為百分比值，其中，最大值為100%，最小值為0%。例如，表示白色的方法如下。

其中，第一個(gè)百分比值表示紅色，第二個(gè)百分比值表示綠色，第三個(gè)百分比值表示藍(lán)色。

□ 三原色比例值

三原色比例值是將16進(jìn)制的三原色色度轉(zhuǎn)換為3個(gè)10進(jìn)制數(shù)字，然后再進(jìn)行表示的方法。其中，第一個(gè)數(shù)字表示紅色，第二個(gè)數(shù)字表示綠色，第三個(gè)數(shù)字表示藍(lán)色。每一個(gè)比例數(shù)值最大值為255，最小值為0。例如，表示黃色（#FFFF00），如下所示。

□ 顏色的英文名稱

除了以上幾種根據(jù)顏色的色度表示色彩的方式以外，CSS還支持XHTML允許使用的16種顏色英文名稱來表示顏色。這16種顏色英文名稱見下表。

3. CSS長度單位

在量度網(wǎng)頁中的各種對象時(shí)，需要使用多種單位，包括絕對單位和相對單位。絕對單位是指網(wǎng)頁對象的物理長度單位，而相對單位則是根據(jù)顯示器分辨率大小、可視區(qū)域、對象的父容器大小而定義的單位。CSS的可用長度單位主要包括以下幾種。

□ in 英寸，是在歐美國家使用最廣泛的英制絕對長度單位。

□ cm 厘米，國際標(biāo)準(zhǔn)單位制中的基本絕對長度單位。

□ mm 毫米，在科技領(lǐng)域最常用的絕對長度單位。

□ pt 磅，在印刷領(lǐng)域廣泛使用的絕對長度單位，也稱點(diǎn)，約等于1/72英寸。

□ pica 派卡，在印刷領(lǐng)域廣泛使用的絕對長度單位，又被縮寫為pc，約等于1/6英寸。

□ em CSS相對單位，相當(dāng)于在當(dāng)前字體大小下大寫字母M的高度，約等于當(dāng)前字體大小。

□ ex CSS相對單位，相當(dāng)于在當(dāng)前字體大小下小寫字母X的高度，約等于當(dāng)前字體大小的1/2。在實(shí)際瀏覽器解析中，1ex等于1/2em。

□ px 計(jì)算機(jī)通用的相對單位，根據(jù)屏幕的px點(diǎn)大小而定義的字體單位。通常在Windows操作系統(tǒng)下，1px等于1/96英寸。而在MAC操作系統(tǒng)下，1px等于1/72英寸。

□ 百分比 百分比也是CSS允許使用的相對單位值。其往往根據(jù)父容器的相同屬性來進(jìn)行計(jì)算。例如，在一個(gè)表格中，表格的寬度為100px，而其單元格寬度為50px，則可將該單元格的寬度設(shè)置為50%。

1.2.4 W3C的行為

XHTML僅僅是一種結(jié)構(gòu)化的語言，即使將其與CSS技術(shù)結(jié)合，也只能制作出靜態(tài)的、無法進(jìn)行改變的網(wǎng)頁頁面。如果需要網(wǎng)頁具備交互的行為，還需要為網(wǎng)頁引入一種新的概念，即瀏覽器腳本語言。在W3C的網(wǎng)頁標(biāo)準(zhǔn)化體系中，網(wǎng)頁標(biāo)準(zhǔn)化行為的語言為ECMAScript腳本語言，以及為ECMAScript提供支持的DOM模型等。

1. 腳本語言

腳本語言是有別于高級編程語言的一種編程語言，其通常為縮短傳統(tǒng)的程序開發(fā)過程而創(chuàng)建，具有短小精悍、簡單易學(xué)等特性，可幫助程序員快速完成程序的編寫工作。

腳本語言被應(yīng)用于多個(gè)領(lǐng)域，包括各種工業(yè)控制、計(jì)算機(jī)任務(wù)批處理、簡單應(yīng)用程序編寫等，也被廣泛應(yīng)用于互聯(lián)網(wǎng)中。根據(jù)應(yīng)用于互聯(lián)網(wǎng)的腳本語言解釋器位置，可以將其分為服務(wù)器端腳本語言和瀏覽器腳本語言兩種。

□ 服務(wù)器端腳本語言

服務(wù)器端腳本語言主要應(yīng)用于各種動態(tài)網(wǎng)頁技術(shù)，用于編寫實(shí)現(xiàn)動態(tài)網(wǎng)頁的網(wǎng)絡(luò)應(yīng)用程序。對于網(wǎng)頁的瀏覽者而言，大多數(shù)服務(wù)器端腳本語言是不可見的，用戶只能看到服務(wù)器端腳本語言生成的HTML/XHTML代碼。

服務(wù)器端腳本語言必須依賴服務(wù)器端的軟件執(zhí)行。常見的服務(wù)器端腳本語言包括應(yīng)用于ASP技術(shù)的VBScript、JScript、PHP、JSP、Perl、CFML等。

□ 瀏覽器腳本語言

瀏覽器腳本語言區(qū)別于服務(wù)器端腳本語言，是直接插入到網(wǎng)頁中執(zhí)行的腳本語言。網(wǎng)頁的瀏覽者可以通過瀏覽器的查看源代碼功能，查看所有瀏覽器腳本語言的代碼。

瀏覽器腳本語言不需要任何服務(wù)器端軟件支持，任何一種當(dāng)前流行的瀏覽器都可以直接解析瀏覽器腳本語言。目前應(yīng)用最廣泛的瀏覽器腳本語言包括JavaScript、JScript以及VBScript等。其中，JavaScript和JScript分別為NetScape公司和微軟公司開發(fā)的ECMAScript標(biāo)準(zhǔn)的實(shí)例化子集，語法和用法非常類似，因此往往統(tǒng)一被稱為JavaScript腳本。

2. 標(biāo)準(zhǔn)化的ECMAScript

ECMAScript是W3C根據(jù)Netscape公司的JavaScript腳本語言制定的、關(guān)于網(wǎng)頁行為的腳本語言標(biāo)準(zhǔn)。根據(jù)該標(biāo)準(zhǔn)制訂出了多種腳本語言，包括應(yīng)用于微軟Internet Explorer瀏覽器的Jscript和用Flash腳本編寫的ActionScript等。

ECMAScript具有基于面向?qū)ο蟮姆绞介_發(fā)、語句簡單、快速響應(yīng)交互、安全性好和跨平臺等優(yōu)點(diǎn)。目前絕大多數(shù)的網(wǎng)站都應(yīng)用了ECMAScript技術(shù)。

3. 標(biāo)準(zhǔn)化的文檔對象模型

文檔對象模型（Document Object Model，DOM）是根據(jù)W3C DOM規(guī)范而定義的一系列文檔對象接口。文檔對象模型將整個(gè)網(wǎng)頁文檔視為一個(gè)主體，文檔中包含的每一個(gè)標(biāo)簽或內(nèi)容都被其視為對象，并提供了一系列調(diào)用這些對象的方法。

通過文檔對象模型，各種瀏覽器腳本語言可以方便地調(diào)用網(wǎng)頁中的標(biāo)簽，并實(shí)現(xiàn)網(wǎng)頁的快速交互。