1.1 初識網頁

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

1.1.1 網頁的構成

Internet中的網頁內容各異，然而多數網頁都是由一些基本的版塊組成的，包括Logo、導航條、Banner、內容版塊、版尾和版權等。

1. Logo圖標

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

2. 導航條

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

3. Banner

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

4. 內容版塊

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

5. 版尾版塊

版尾是網頁頁面的最底端版塊，通常放置網站的聯系方式、友情鏈接和版權信息等內容，如下圖所示。

1.1.2 靜態網頁

網頁可以從技術上分為靜態網頁或者動態網頁。靜態網頁是指網站的網頁內容“固定不變”，當用戶瀏覽器通過互聯網的HTTP（Hypertext Transport Protocol）協議向Web服務器請求提供網頁內容時，服務器僅僅是將原已設計好的靜態HTML文檔傳送給用戶瀏覽器，如下圖所示。

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

1.1.3 動態網頁

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

動態網頁在于可以根據先前制定好的程序頁面，以及用戶的不同請求返回其相應的數據。動態頁面常見的擴展名有：.asp、.php、.jsp、.cgi等。

動態網頁的優點是效率高、更新快、移植性強，從而快速地達到所見即所得的目的，但是它的優點同樣也是它的缺點，其工作流程如下圖所示。

動態頁面通常可以通過網站后臺管理系統對網站的內容進行更新管理，而前端顯示的內容可以隨著后臺數據的更改而改變，如發布新聞、發布公司產品、交流互動、博客、學校網等，如下圖所示。

下面就常見的幾種動態網技術來做簡單的介紹。

1. ASP技術

ASP（Active Server Pages，動態服務網頁）是微軟公司開發的一種由VBScript腳本語言或JavaScript腳本語言調用FSO（File System Object，文件系統對象）組件實現的動態網頁技術。

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

2. ASP.NET技術

ASP.NET是由微軟公司開發的ASP后續技術，其可由C#、VB.net、Perl及Python等編程語言編寫，通過調用System.Web命名空間實現各種網頁信息處理工作。

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

3. JSP技術

JSP（JavaServer Pages，Java服務網頁）是由太陽計算機系統公司開發的，以Java編寫，動態生成HTML、XML或其他格式文檔的技術。

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

4. PHP技術

PHP（Personal Home Page，個人主頁）也是一種跨平臺的網頁后臺技術，最早由丹麥人Rasmus Lerdorf開發，并由PHP Group和開放源代碼社群維護，是一種免費的網頁腳本語言。

PHP是一種應用廣泛的語言，其多在服務器端執行，通過PHP代碼產生網頁，并提供對數據庫的讀取。

1.1.4 數據庫

數據庫是“按照數據結構來組織、存儲和管理數據的倉庫”。在日常工作中，常常需要把某些相關的數據放進“倉庫”，并根據管理的需要進行相應的處理。

大家知道數據庫是用于存儲數據內容的，而對生活中一個事件或者一類問題，如何將它們存儲到數據庫中呢？在學習數據庫之前，先來了解一下數據庫的概念。

1. 數據與信息

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

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

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

在這里的學生記錄就是信息。在數據庫中，記錄與事物的屬性是對應的關系，其表現如下圖所示。

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

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

2. 數據庫

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

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

3. 數據庫管理系統

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

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

□ 數據定義功能

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

□ 數據操縱功能

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

□ 數據庫的運行管理

數據庫在建立、運用和維護時，由數據庫管理系統統一管理、控制，以保證數據的安全性、完整性。

□ 數據庫的建立和維護功能

它包括數據庫初始數據的輸入、轉換功能；數據庫的轉儲、恢復功能；數據庫的管理重組功能和性能監視、分析功能等。這些功能通常是由一些實用程序完成的。

4. 數據庫的作用

在動態網站建設中，數據庫發揮著不可替代的作用。它用于存儲網站中的信息，可以包含靜止的和經常需要更換的內容。通過對數據庫中相應部分內容的調整，可以使網站的內容更加靈活，并且對這些信息進行更新和維護也更加方便、快捷。

□ 新聞系統

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

□ 產品管理

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

□ 收集信息

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

□ 搜索功能

如果站內提供大量的信息而沒有搜索功能，瀏覽者只能依靠清晰的導航系統，而對于一個新手往往要花些時間搜索網頁，有時候甚至無法達到目的。此時，提供方便的站內搜索不僅可以使網站結構清晰，而且有利于需求信息的查找，節省瀏覽者的時間，如下圖所示。

□ BBS論壇

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

1.2 W3C概述

網頁標準化體系簡稱W3C，它是由萬維網聯盟（World Wide Web Consortium）建立的一種規范網頁設計的標準集。

基于網頁標準化體系，網頁的設計者可以通過簡單的代碼，在多種不同的瀏覽器平臺中顯示一個統一的頁面。該體系的建立，大大提高了設計人員開發網頁的效率，減輕了網頁設計工作的復雜性，免去了人們編寫兼容性代碼的麻煩。

1.2.1 了解W3C

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

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

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

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

1995年，人們為避免因瀏覽器競爭而導致的開發困難，提出了建立一種統一的HTML標準，以適應所有瀏覽器平臺。這一標準最初被稱為HTML+計劃，后被命名為HTML 2.0。由于缺乏瀏覽器的支持，HTML 2.0并未成為實際的標準。

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

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

2000年1月，W3C發布了結合XML（eXtensible Markup Language，可擴展的標記語言）技術和HTML的新標記語言XHTML（eXtensible HyperText Markup Language，可擴展的超文本標記語言），并將其作為新的網頁標準化結構語言。

目前，XHTML語言已經成為網頁編寫的首選結構語言，其不僅被應用在普通的計算機中，還被廣泛應用于智能手機、PDA、機頂盒，以及各種數字家電等。由XHTML延伸出的多種標準，為各種數字設備所支持。

1.2.2 W3C的結構

作為整個網頁標準化體系的支撐，網頁結構語言經歷了從傳統混合了描述與結構的HTML語言到如今結構化的XHTML語言，其間發生了巨大的變化。

1. 傳統HTML語言

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

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

大量復雜的描述性標簽使得網頁更加美觀，但同時也導致了網頁設計的困難。例如，在進行一個簡單的、內容非常少的網頁設計時，可以通過HTML 3.2中的<font>標簽對網頁中的文本進行描述，如下所示。

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

因此，隨著網頁信息內容的不斷豐富以及互聯網的不斷發展，傳統的HTML結構語言已不堪重負，人們迫切需要一種新的、簡便的方式來實現網頁的模塊化，降低網頁開發的難度和成本。

2. XHTML結構語言

XHTML結構語言是一種基于HTML 4.01與XML的新結構化語言。其既可以看作HTML 4.01的發展和延伸，又可以看作XML語言的一個子集。

在XHTML語言中，摒棄了所有描述性的HTML標簽，僅保留了結構化的標簽，以減小文件內容對結構的影響，同時減少網頁設計人員輸入代碼的工作量。

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

1.2.3 W3C的表現

網頁的標準化不僅需要結構的標準化，還需要表現的標準化。早期的網頁完全依靠HTML中的描述性標簽來實現網頁的表現化，設置網頁中各種元素的樣式。隨著HTML 3.2被大多數網站停止使用，以及HTML 4.01和XHTML的不斷普及，人們迫切地需要一種新的方式來定義網頁中各種元素的樣式。

HTML 3.2在描述大量文本的樣式時暴露了一些問題，為了解決這些問題，可以從面向對象的編程語言中引入類庫的概念，通過在網頁標簽中添加對類庫樣式的引用，實現樣式描述的可重用性，提高代碼的效率。這些類庫的集合，就被稱作CSS層疊樣式表（簡稱CSS樣式表或CSS）。

1. CSS樣式表

CSS樣式表是一種列表，其中可以包含多種定義網頁標簽的樣式。每一條CSS的樣式都包含3個部分，其規范寫法如下所示。

在上面的偽代碼中，各關鍵詞的含義如下。

□ Selector 選擇器，相當于表格表頭的名稱。選擇器提供了一個對網頁標簽的接口，供網頁標簽調用。

□ Property 屬性，是描述網頁標簽的關鍵詞。根據屬性的類型，可對網頁標簽的多種不同屬性進行定義。

□ value 屬性值，是描述網頁標簽不同屬性的具體值。

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

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

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

2. CSS的顏色規范

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

□ 十六進制數值

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

例如，以十六進制數值分別表示紅色、綠色、藍色、黑色和白色等顏色，見下表。

□ 三原色百分比

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

其中，第一個百分比值表示紅色，第二個百分比值表示綠色，第三個百分比值表示藍色。

□ 三原色比例值

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

□ 顏色的英文名稱

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

3. CSS長度單位

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

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

□ cm 厘米，國際標準單位制中的基本絕對長度單位。

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

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

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

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

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

□ px 計算機通用的相對單位，根據屏幕的px點大小而定義的字體單位。通常在Windows操作系統下，1px等于1/96英寸。而在MAC操作系統下，1px等于1/72英寸。

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

1.2.4 W3C的行為

XHTML僅僅是一種結構化的語言，即使將其與CSS技術結合，也只能制作出靜態的、無法進行改變的網頁頁面。如果需要網頁具備交互的行為，還需要為網頁引入一種新的概念，即瀏覽器腳本語言。在W3C的網頁標準化體系中，網頁標準化行為的語言為ECMAScript腳本語言，以及為ECMAScript提供支持的DOM模型等。

1. 腳本語言

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

腳本語言被應用于多個領域，包括各種工業控制、計算機任務批處理、簡單應用程序編寫等，也被廣泛應用于互聯網中。根據應用于互聯網的腳本語言解釋器位置，可以將其分為服務器端腳本語言和瀏覽器腳本語言兩種。

□ 服務器端腳本語言

服務器端腳本語言主要應用于各種動態網頁技術，用于編寫實現動態網頁的網絡應用程序。對于網頁的瀏覽者而言，大多數服務器端腳本語言是不可見的，用戶只能看到服務器端腳本語言生成的HTML/XHTML代碼。

服務器端腳本語言必須依賴服務器端的軟件執行。常見的服務器端腳本語言包括應用于ASP技術的VBScript、JScript、PHP、JSP、Perl、CFML等。

□ 瀏覽器腳本語言

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

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

2. 標準化的ECMAScript

ECMAScript是W3C根據Netscape公司的JavaScript腳本語言制定的、關于網頁行為的腳本語言標準。根據該標準制訂出了多種腳本語言，包括應用于微軟Internet Explorer瀏覽器的Jscript和用Flash腳本編寫的ActionScript等。

ECMAScript具有基于面向對象的方式開發、語句簡單、快速響應交互、安全性好和跨平臺等優點。目前絕大多數的網站都應用了ECMAScript技術。

3. 標準化的文檔對象模型

文檔對象模型（Document Object Model，DOM）是根據W3C DOM規范而定義的一系列文檔對象接口。文檔對象模型將整個網頁文檔視為一個主體，文檔中包含的每一個標簽或內容都被其視為對象，并提供了一系列調用這些對象的方法。

通過文檔對象模型，各種瀏覽器腳本語言可以方便地調用網頁中的標簽，并實現網頁的快速交互。